{"_id":"@material/fab","_rev":"1829-505db26510632bfda38222c016693b88","name":"@material/fab","description":"The Material Components for the web floating action button component","dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"0.1.0":{"name":"@material/fab","version":"0.1.0","license":"Apache-2.0","_id":"@material/fab@0.1.0","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c605788ea8b7330cc5b3ccc24e84f3ef5a097e3c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.1.0.tgz","integrity":"sha512-tI5J5hmkTXcrJ6OrNZ5cN1/maiR+jgNcut0GtjMAzw6U7zUfKKhhoxVHQayr2Nc9/Pyr+SUzRdyzvgmYasqMxg==","signatures":[{"sig":"MEUCIH0tq42samh7eJBXu9Vm+1mWCbWFCowaUDkXn5PxcylUAiEAkWxxAotArDouaa+v5lzK3mOejPkGB4QQA9CtXUFcMnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"c605788ea8b7330cc5b3ccc24e84f3ef5a097e3c","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.1.0","dependencies":{"@material/theme":"^0.1.0","@material/animation":"^0.1.0","@material/elevation":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.1.0.tgz_1481824337402_0.21463569719344378","host":"packages-18-east.internal.npmjs.com"}},"0.2.0":{"name":"@material/fab","version":"0.2.0","license":"Apache-2.0","_id":"@material/fab@0.2.0","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bbbb6d486eab6ecb0fad165dc8a0733c12e72d3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.2.0.tgz","integrity":"sha512-kEKniwDBhNToFjNefIgfismxlmehqyADOzVnrgAJwF8SoLkjqSCRNMxRLP7q+DDMtMg73fCQ9ovqm3LZriFE9g==","signatures":[{"sig":"MEYCIQC9PzAbwejc6F+F3MeJD3FVujyg4xFbYiBz4YBDkqO9IgIhAO7pwAlZbGsm9pMwsEWcmc4M9q6BTdLskD+rmvuvWDNI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"6bbbb6d486eab6ecb0fad165dc8a0733c12e72d3","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/theme":"^0.1.0","@material/animation":"^0.1.1","@material/elevation":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.2.0.tgz_1483977435865_0.27338704746216536","host":"packages-12-west.internal.npmjs.com"}},"0.3.0":{"name":"@material/fab","version":"0.3.0","license":"Apache-2.0","_id":"@material/fab@0.3.0","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc7dc6117e1d62cc88ed57b9d8e323b5c46a69ee","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.0.tgz","integrity":"sha512-tUXR9hPGDr8JZYlKAbcn9v7paIw1YM6tYGF2Od1qEm56Yl5wBq3xYvPbNCG56EkOGip8qxfFc5rTacVSPSHSew==","signatures":[{"sig":"MEQCICGmU+V7hZP9p9mbf7XfQga1OnlKBceLFui1l6Wc7C8FAiBmva7qBZpCv1lhuzvQhwhLnsR4MRPNQ3YaQseUPow6gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"bc7dc6117e1d62cc88ed57b9d8e323b5c46a69ee","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.1","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/theme":"^0.1.1","@material/ripple":"^0.1.2","@material/animation":"^0.1.3","@material/elevation":"^0.1.2"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.0.tgz_1485190176589_0.899797772988677","host":"packages-12-west.internal.npmjs.com"}},"0.3.1":{"name":"@material/fab","version":"0.3.1","license":"Apache-2.0","_id":"@material/fab@0.3.1","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"680e091e4a3e6064d0166cef8b4c33f78a3dc6b8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.1.tgz","integrity":"sha512-KVFzfWi/bBP5Ch/tLEOtYi21J7s3kXkzxCsmxD/5i8/K5hIOR1ywAITE3C5jxRMeVBVwR69TLxl5SvYkbwrpwQ==","signatures":[{"sig":"MEYCIQC2F1h1OWWCNUeFIAM54Ssz4ZOeKyqv8LFBtGSTp7QiaQIhAMhNM3qVEjXpqTTZMzFm8quZtRmpGF8n95OAOcC6XC6s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"680e091e4a3e6064d0166cef8b4c33f78a3dc6b8","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.1.1","@material/ripple":"^0.2.0","@material/animation":"^0.1.3","@material/elevation":"^0.1.2"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.1.tgz_1486407882247_0.7741889224853367","host":"packages-12-west.internal.npmjs.com"}},"0.3.2":{"name":"@material/fab","version":"0.3.2","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.2","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0559d0a4139612d99c66bbb9936cc5b27e1d4b4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.2.tgz","integrity":"sha512-Hil5j+lpVxL1Hmxuoa3bxbG3fWClWieyCNaZ+AHcm2TmZujUf8cHWzX/QPJVkwuXnLiY3P+2zuDXyl2ijge3kQ==","signatures":[{"sig":"MEQCIFo4b7UfiCKMKp7tdyTppHGn+rafDIG1pKN2vz9erlmNAiA/Xqfw4xu5FP3YZSFK4FQ9Pwh/ZCOfh/rDD64rqkyoNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"d0559d0a4139612d99c66bbb9936cc5b27e1d4b4","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/theme":"^0.1.2","@material/ripple":"^0.3.0","@material/animation":"^0.1.4","@material/elevation":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.2.tgz_1487698054955_0.3763254436198622","host":"packages-18-east.internal.npmjs.com"}},"0.3.3":{"name":"@material/fab","version":"0.3.3","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.3","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5553e9cc802009b57c7308b2248002d30078d6e5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.3.tgz","integrity":"sha512-wQnNz2WLJW2LAxSFlZC5YcQd9eS3hOTIa+sudM2r7QnliY3uoGc60Hi4jy52ym7TG/SWA6fhnur48z11ySYC/A==","signatures":[{"sig":"MEUCIFEu9+ABY0dIZC6Kh/xyimZasyiY/rFdRXn8k6VjGa4aAiEA9un3oYBfwyfeTf9D8606UbrjJ1sV0njs4s1HbZQwufE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"5553e9cc802009b57c7308b2248002d30078d6e5","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/theme":"^0.1.2","@material/ripple":"^0.4.0","@material/animation":"^0.1.4","@material/elevation":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.3.tgz_1488819729821_0.43643848854117095","host":"packages-12-west.internal.npmjs.com"}},"0.3.4":{"name":"@material/fab","version":"0.3.4","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.4","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1555618edc89d10457ab7ad94afacc20706f3c9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.4.tgz","integrity":"sha512-cxMkRO0T53HYqD11vDsvjs/N6KIFxIYnd5rJ6OSlbPi1BW3Yh8Ky4GUMECk1GbZnC8uApkvw6eKrxaBlMY/n4Q==","signatures":[{"sig":"MEUCIQCzS3OXgY/BDzmHnc7Os08OeRhcMZaZ0dJEXEWLBtEsKwIgRBujMg1aus5p+asg5UIoO6xPxaKvBh8vIbuefxL3unk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"f1555618edc89d10457ab7ad94afacc20706f3c9","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/theme":"^0.1.3","@material/ripple":"^0.5.0","@material/animation":"^0.1.4","@material/elevation":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.4.tgz_1491233282029_0.0497044837102294","host":"packages-18-east.internal.npmjs.com"}},"0.3.5":{"name":"@material/fab","version":"0.3.5","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.5","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62ca12a67cb7f22af815365c4e9c3913660a2d85","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.5.tgz","integrity":"sha512-BL7+TlgfbseBqxzxW/XUZN51R+tz1rY4fcM9KsCZrs2YsWGSV3xlnsbMv3jElyK0YB2YqzkIx3dGaolQ9hcUTQ==","signatures":[{"sig":"MEUCIQCca79JcjIXrYVAeiF6Mn4Xvcn+o8aAj2/DA2ooMFd/SgIgaR96+YwQ5+jCN/HR8gnAPCEl70K/vKnCNcxknSxO4nY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"62ca12a67cb7f22af815365c4e9c3913660a2d85","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/theme":"^0.1.4","@material/ripple":"^0.5.1","@material/animation":"^0.1.5","@material/elevation":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.5.tgz_1492527078653_0.45529291476123035","host":"packages-12-west.internal.npmjs.com"}},"0.3.6":{"name":"@material/fab","version":"0.3.6","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.6","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fe58c0ccbb84f12f28423eeca79dc3358cdfe52","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.6.tgz","integrity":"sha512-IqgoWf5tSquQ6kQWtMdPxAwT1xsj4160669MgvBuincntlYGuyodx4MpnPU94r/1GKZglGRuYb8wW/b0IH2I7g==","signatures":[{"sig":"MEUCIQCYjGvFqQKkN41WmdXRL8waKNXgM5B7FYcj7de+18+CDgIgZRmwk1cD9dZqta7YscSqhR5gUcy62IacqquVV7LTyrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"1fe58c0ccbb84f12f28423eeca79dc3358cdfe52","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.1.4","@material/ripple":"^0.6.0","@material/animation":"^0.2.0","@material/elevation":"^0.1.5"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.6.tgz_1493653387297_0.18471156037412584","host":"packages-18-east.internal.npmjs.com"}},"0.3.7":{"name":"@material/fab","version":"0.3.7","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.7","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07c033405a9aad7b5fe04da8dca5b75be0d979c0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.7.tgz","integrity":"sha512-THPjt3N+paD+4G5mIaLY+w/ifNwes4ee8Tp7DdEILUY764/hsbvBWdnZKOWj7lDJDd6pwvr1gN7umq+Yfa/ObQ==","signatures":[{"sig":"MEYCIQCo4d60HwL86XAP84UMUMyZvrPLMioQQfeAjuO7b2LWwAIhAOxLrvodLFe3BGNFjmnR2CBASSNPb6CZT/qjgOhqFC8F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"07c033405a9aad7b5fe04da8dca5b75be0d979c0","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/theme":"^0.1.5","@material/ripple":"^0.6.1","@material/animation":"^0.2.1","@material/elevation":"^0.1.6"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.7.tgz_1494865562427_0.15709731681272388","host":"packages-12-west.internal.npmjs.com"}},"0.3.8":{"name":"@material/fab","version":"0.3.8","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.8","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92fa54a7101ea291b615e7c0cf2c98e148820432","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.8.tgz","integrity":"sha512-PXRgvh8gVUPFOT8353parLgt703+ptd9p5Q/f8uU0qY+QVwdFoQeyTvrP/wknwA0cWcOtsLgMsBYBEiG4PAcpQ==","signatures":[{"sig":"MEQCIFnGqh+z7ZIpd3rIQIUBSoj034lp9cvS4D4SgK2IUv0dAiBXYfW8MWIir41tGtblyKMzw7q4hs/hucy4tYPfVHuiqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"92fa54a7101ea291b615e7c0cf2c98e148820432","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/theme":"^0.1.5","@material/ripple":"^0.6.1","@material/animation":"^0.2.2","@material/elevation":"^0.1.7"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.8.tgz_1495031300419_0.9470829297788441","host":"packages-18-east.internal.npmjs.com"}},"0.3.9":{"name":"@material/fab","version":"0.3.9","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.9","maintainers":[{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4817c768ed55654f5fcedc477b2b285ce8facd02","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.9.tgz","integrity":"sha512-KjjuKaCdgfvEWD5lHaoP8KhhGNyAPZmjnz+tLtBxcQHk49BrxXA0nCm4Ly5NzbeXFZ+aRw3D4kMU81aPXSa55A==","signatures":[{"sig":"MEYCIQCIqNuKegJuW3NfZF1c8A7LmzRfLVF3gxoc/vYL/aNLswIhAMPQaGCC0skPu4+46WtlT0ZsoVQ6WUghhD8q2OZFUfiq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"4817c768ed55654f5fcedc477b2b285ce8facd02","scripts":{},"_npmUser":{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.8.0","dependencies":{"@material/theme":"^0.1.5","@material/ripple":"^0.6.2","@material/animation":"^0.2.3","@material/elevation":"^0.1.8"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.9.tgz_1496171077872_0.5952591353561729","host":"s3://npm-registry-packages"}},"0.3.10":{"name":"@material/fab","version":"0.3.10","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.10","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73ccdfaedf00d6502f46a2711fcd7e64f0b30eef","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.10.tgz","integrity":"sha512-FKn3Qepv5LJtPF1FQo2rlK5KZ0Zst5sGhq14Yk+RJhFLxMziukPKujsy2N24BgzTrEeR/wp5qIoeC//QUewzAQ==","signatures":[{"sig":"MEUCIQCEAbnNyFDqX9E9bXQIdvZ4hGMPmKeC/m2pFbEjR3o3sgIgGFGuBz0CIpQQWc07UMSy+ZxoZyyfMfg/JAk7/gEOVVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"73ccdfaedf00d6502f46a2711fcd7e64f0b30eef","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.1.5","@material/ripple":"^0.7.0","@material/animation":"^0.2.3","@material/elevation":"^0.1.9"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.10.tgz_1498493453320_0.37848738906905055","host":"s3://npm-registry-packages"}},"0.3.11":{"name":"@material/fab","version":"0.3.11","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.11","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21ecb44d5fb27e40ec10018fdde98c81432b19ea","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.11.tgz","integrity":"sha512-a2tauS0YRlusTpFKZWq4M0XmJBwlhbYa9nXRdPnZok4wOH1Uapyon5yW4lAiwhdYYdJ2cI8sDHiQJ1N8TUufeg==","signatures":[{"sig":"MEUCIQCDwa/9NcImxqFnrtIsK+btlFTf01Yq/eV94C1ulnb03wIgRJR+0N9C4r5uVZIqZ4B8lbX7KPhfLxi7N5e7wW9hdk0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"21ecb44d5fb27e40ec10018fdde98c81432b19ea","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/theme":"^0.1.5","@material/ripple":"^0.8.0","@material/animation":"^0.2.3","@material/elevation":"^0.1.9"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.11.tgz_1499702330666_0.9077183131594211","host":"s3://npm-registry-packages"}},"0.3.12":{"name":"@material/fab","version":"0.3.12","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.12","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4b2ba9da81ff4a64a59412aaa05225ea627fc4f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.12.tgz","integrity":"sha512-qStGT9092R8OxCRyUdTEHKvjScFAefGUN0WRV/ozL+zNxlBl/I+nmT5d5aQZ5IYkFoOT8+jGt6mDjPPZMSIL5Q==","signatures":[{"sig":"MEUCIC17RgWjXfxqH1Ga+I4WtITd26v+57aXyosHqOY0RbZoAiEA7zfPM5liaVjQWwKpN688QTgSh0uP/kIhEdot79YEK14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"d4b2ba9da81ff4a64a59412aaa05225ea627fc4f","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/theme":"^0.1.6","@material/ripple":"^0.8.1","@material/animation":"^0.3.0","@material/elevation":"^0.1.10"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.12.tgz_1500911356948_0.7832157707307488","host":"s3://npm-registry-packages"}},"0.3.13":{"name":"@material/fab","version":"0.3.13","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.13","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b426f0e156fab2bd5063095be27ec1b0cf7711ba","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.13.tgz","integrity":"sha512-FV6tvj/iLjiehaD6A5kAuxhL9DIi8mpUT1egvaGtqo81RfWVcxKw21cc0WBvGhrViPhnBZ1Sv0X1K0v8KaDhEA==","signatures":[{"sig":"MEUCIQCgJZLBjDPLYcGaExaDBnoLig4iJTMvfDv1VWL++Tr1zgIgd2ELvyX+YdCdKF97kd+pOAMZ7rKOuhf8q5Hpp8iWa8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"b426f0e156fab2bd5063095be27ec1b0cf7711ba","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/theme":"^0.1.7","@material/ripple":"^0.8.2","@material/animation":"^0.3.1","@material/elevation":"^0.1.11"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.13.tgz_1502138908739_0.359520977595821","host":"s3://npm-registry-packages"}},"0.3.14":{"name":"@material/fab","version":"0.3.14","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.14","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61f6b646482db7b885c9fababd5a847f9978a3ca","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.14.tgz","integrity":"sha512-BoBZ0EOJx39FEoC6yQ/nkR5o2Xj7aDmjOVtihru4DiIYpW5hxS41xBUzXk4NmROYjeV1S2tNAZuAzpHYuZRJWw==","signatures":[{"sig":"MEQCICQ8js9RLYL4lgdWmv49R9Jmi9xzPIt9rykNPkV4FgFwAiAigIs4Jh5xFUcXWSVEvVUY/9A0Zg4r7u6rpvBJiD4pHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.2.0","@material/ripple":"^0.8.3","@material/animation":"^0.3.1","@material/elevation":"^0.1.11"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.14.tgz_1503336468921_0.43917569937184453","host":"s3://npm-registry-packages"}},"0.3.15":{"name":"@material/fab","version":"0.3.15","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.15","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc6071b1be9ccc4d4a1cc246382fd759c06435a9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.15.tgz","integrity":"sha512-8GOxQ/xXA5WxtKCZhXeQezcXdvrCjZ7Cbhr8XXxDBj2dB31WukTQ89UYTLbdGdJbp4Voavi3Oz1ZwwS26+VQDQ==","signatures":[{"sig":"MEQCIEbjUH2+OuP6vTrzTU+87ff5QOl/KnrJ916AzTjG+rncAiAwGujvl+Dn9Dyg5Tu85dv/isIFJMmS3hR9x+eGavW5Hw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.2.0","@material/ripple":"^0.8.4","@material/animation":"^0.3.1","@material/elevation":"^0.1.11"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.15.tgz_1503586004567_0.5789584366139024","host":"s3://npm-registry-packages"}},"0.3.16":{"name":"@material/fab","version":"0.3.16","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.3.16","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8695249359d11cf75527e20fd6a3b7705efc5e15","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.3.16.tgz","integrity":"sha512-xiLEi6L7Ethhr/MJYfW/d6yMSNt7wBHswhZ+GOPBb/MQ7ODT6mSPknoNx9pE2IlQNdEY27+spijTcEpERzzJZg==","signatures":[{"sig":"MEUCIDod6LwPvyO5OekGr09vqZyEQ/IGaS9a9y3nKjxfm23vAiEA9P9zmgRCNj3B9Zb0andDi4wPpyoofF0/UceLcVj8tmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.2.0","@material/ripple":"^0.8.5","@material/animation":"^0.3.1","@material/elevation":"^0.1.11"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.3.16.tgz_1503681655649_0.7493552258238196","host":"s3://npm-registry-packages"}},"0.4.0":{"name":"@material/fab","version":"0.4.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.4.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6bf39cf5aeea968aa71931d55de2a5a04d9a3ed","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.4.0.tgz","integrity":"sha512-CA2/VZ7I/KuLtEQuIPSSeej1aY0L0gUggMZZ1FQOmdSh9HQQEMeD0R1uD905yL6LcZZ7MXukeIRj7uTujifj0w==","signatures":[{"sig":"MEYCIQCQgDL+DifsoqhJ4CHZ+h6Gm9sAdFrEWMk0TsdmmUNpAwIhANnB9joRTG8/4xZPSNQ/1KQ04AKRgBp4Nh4xnUIyhHOD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"e6bf39cf5aeea968aa71931d55de2a5a04d9a3ed","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/theme":"^0.3.0","@material/ripple":"^0.8.6","@material/animation":"^0.3.1","@material/elevation":"^0.1.11"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.4.0.tgz_1504642567507_0.7586194982286543","host":"s3://npm-registry-packages"}},"0.5.0":{"name":"@material/fab","version":"0.5.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.5.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29ce1977986c8230818ec31bf5c49480cddcb3f5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.5.0.tgz","integrity":"sha512-stNXXXRPehCuN7ktTabOXvzUiIKwXFIKIM3C41Im2vztz5afd71L2YSiNpleRU6CbNjIVGOuNyNQ6rzim7d1Wg==","signatures":[{"sig":"MEUCIQD6x3ilPl2K0hSzo0XXZ1q8rHBuyO1EaJqABUha+Q4ksAIgQGyc+ec5i4L+Ri2cjHyyKP3bgAZIKnghb5ImBbrRUmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.3.1","@material/ripple":"^0.8.7","@material/animation":"^0.4.0","@material/elevation":"^0.1.12"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.5.0.tgz_1505759741371_0.916147438576445","host":"s3://npm-registry-packages"}},"0.5.1":{"name":"@material/fab","version":"0.5.1","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.5.1","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fa6b9b81c507ee51c846f6aef17d322940d1d40","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.5.1.tgz","integrity":"sha512-6R6/8KlITdwM52ZfDQlrrZVM9EDX68MqArr+zRWH5zXrIZF0nHq1Eo5+gpxVAjX3fcMKIH0udsGttfwmOifNgA==","signatures":[{"sig":"MEUCIQCSydBvkHvzS7CpQJzUz2OmK1Ww0tZ/YAn0S38iuG3FYQIgP21PUqr8rZYWY7JGytuEZZvqZXTHqsKhajz00Kz7Rx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.4.2","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.3.1","@material/ripple":"^0.8.7","@material/animation":"^0.4.0","@material/elevation":"^0.1.12"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.5.1.tgz_1505920874515_0.5296325802337378","host":"s3://npm-registry-packages"}},"0.5.2":{"name":"@material/fab","version":"0.5.2","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.5.2","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63969c4ab9fdb40921da02af58bb0f2e89774f4d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.5.2.tgz","integrity":"sha512-PldQHOJsPRFaR5Vtk6C8vA2Vn3TK5RRqbBH6oT0/LzmBIe3PvsdTjl0kFLDWbcrEyLcJgnHKi5LjY/Y+HZCrYg==","signatures":[{"sig":"MEYCIQDFZGZoFOHFhYpnMK+or7AFvV7GSTgdG7XQtYCi6Uu89AIhAPmuRUTnSrm8rvG3MxEe9zDF0tPcZYOmMr2h5UxN8mlk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"63969c4ab9fdb40921da02af58bb0f2e89774f4d","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/theme":"^0.4.0","@material/ripple":"^0.8.8","@material/animation":"^0.4.1","@material/elevation":"^0.1.13"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.5.2.tgz_1506978705366_0.7753973437938839","host":"s3://npm-registry-packages"}},"0.23.0":{"name":"@material/fab","version":"0.23.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.23.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efa91a57b8a1858d585a60be2c2667c013bd8f16","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.23.0.tgz","integrity":"sha512-Y3WwIw01x+M/Tm+uIEc83f2kZsnTyduxCgQxfe4YV/iy13s+h3W+mqGmE0F8aoJJZBvnHCPvit5fT1vPDr9SUQ==","signatures":[{"sig":"MEQCIEvjZnGcL3F3J6QI9n2MkkDKc7/fuPcTk2scvgKFzrWBAiAyFon4Hx9PwyRtjhLH1EUWJhvx6cDHd9wlSyisjRnTHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.4.0","@material/ripple":"^0.23.0","@material/animation":"^0.4.1","@material/elevation":"^0.1.13"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.23.0.tgz_1508187738026_0.1710822854656726","host":"s3://npm-registry-packages"}},"0.24.0":{"name":"@material/fab","version":"0.24.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.24.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9348eb0a731d5875dab9cc76afef36064f58b080","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.24.0.tgz","integrity":"sha512-d/mEYyI0q9EVLG0v/jAB+Mj2qCQju0iNyA2Bw5XdcEbuEHZWPQUByd5+/L2Ofq8pPQ/xkdHqTNNL1AtpDikvNw==","signatures":[{"sig":"MEYCIQDXwtypujOtx1jO7W28i9lK3Nrd9+N/248mZvvDTqQDuQIhAJnZr8lwCBmGvzsLW7ptQ4ntcwr+WRfC2s/F7wXW0UY/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.4.0","dependencies":{"@material/theme":"^0.24.0","@material/ripple":"^0.24.0","@material/animation":"^0.4.1","@material/elevation":"^0.1.13"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.24.0.tgz_1509390682330_0.417545379139483","host":"s3://npm-registry-packages"}},"0.25.0":{"name":"@material/fab","version":"0.25.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.25.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff1bed5d0f9d7150cfed1808701221942a289eab","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.25.0.tgz","integrity":"sha512-Q0BkIWXHVu6f/80Y1HzDPILkmwrLHiE0R1ID0nal1VX5WwKAwSih+DIrqbytOeV8d80WpiiROx7VakGi65uK7g==","signatures":[{"sig":"MEUCIHJ3FDpYjruDzy02Dnpwpj7vrd+bzA3NuZVfjCrquRtSAiEAzShJ+69LghPN/CVR3d2zl63do8KOgOYqcRG40KDuDmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.25.0","@material/ripple":"^0.25.0","@material/animation":"^0.25.0","@material/elevation":"^0.25.0"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.25.0.tgz_1510603346485_0.4470076090656221","host":"s3://npm-registry-packages"}},"0.26.0":{"name":"@material/fab","version":"0.26.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.26.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1b6eea1f59bc05de38a3ed41f299d4f8df0b1b3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.26.0.tgz","integrity":"sha512-IXVusEgThb3PakfZmBTAVo74VCefTUvZbObc9YfVhW7IdG0iWTKp8WiYB/uvd4EdEbJ1gCqv/JhxDAN79nstAQ==","signatures":[{"sig":"MEQCIGg/EiJA4yNzgXH8S8+KdwuV5DP7A0KDuDuKa4UxttQhAiABosCIi/zYOouppb4iEXMxx+adWl0qQE4tUnyxcHkwww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/theme":"^0.25.0","@material/ripple":"^0.26.0","@material/animation":"^0.25.0","@material/elevation":"^0.25.0"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.26.0.tgz_1511821586578_0.11392891919240355","host":"s3://npm-registry-packages"}},"0.27.0":{"name":"@material/fab","version":"0.27.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.27.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ee4b47d4248731fe6065fcbb6423c36eb1c5fb3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.27.0.tgz","integrity":"sha512-7UTBa4M1YIq6wkseQ7kjx7FR3bxnJoV8V+wZXet/GZBlG3KhYTXIxazwqMGU2WnuwDXvquq2rhNxG9ZXj028jQ==","signatures":[{"sig":"MEYCIQDmOIBlLWrOja2vSENDZsiR5KQ4EubAsKEpkV8CtQFPjQIhAOHORvBhllG4uqGaA9SZ6fNW27E5XTZHnQOJe7LcOFyr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.9.2","dependencies":{"@material/theme":"^0.27.0","@material/ripple":"^0.27.0","@material/animation":"^0.25.0","@material/elevation":"^0.25.0"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.27.0.tgz_1513020931801_0.27590910415165126","host":"s3://npm-registry-packages"}},"0.28.0":{"name":"@material/fab","version":"0.28.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.28.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a89965fef4848b9f10743c28751b47f40b239849","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.28.0.tgz","integrity":"sha512-Vcb6ehsw6KmW7s66wi3ZHya6QLB81g6awGEx+T1wi6b/RK9YJEPihgsHf3iCXWs3YIlBY8/9FSJdF6op/PB20Q==","signatures":[{"sig":"MEUCIBA7+IusY5hugV15BzYfw6HkDiLuyFL1aPb039glNZ9nAiEAjKebB1M3HnEMr9WjNGJCRrENCn6vcTvm7EbshkHI8v4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.28.0","@material/ripple":"^0.28.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.28.0.tgz_1515437711161_0.6859250224661082","host":"s3://npm-registry-packages"}},"0.29.0":{"name":"@material/fab","version":"0.29.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.29.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0affae2d011fd6edede8e41ee17b33226120e782","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.29.0.tgz","integrity":"sha512-Pnbe2qKAxAQD8dCH0GlFZrZBN9xPhgXGamokkOjyYuWE7RHacljP69PYknVz8wW5pWMnG1Y8AoSV0U7J/8Fjyg==","signatures":[{"sig":"MEYCIQDXmkRiYajb11ogVk96ofertO56/UGDciKheZmdYcxz+QIhAO/CaJR5U36IR/ukOYlAudCXx5obDVmOqezQ7b5XZCoM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/theme":"^0.29.0","@material/ripple":"^0.29.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.29.0.tgz_1516645857141_0.7263491319026798","host":"s3://npm-registry-packages"}},"0.30.0":{"name":"@material/fab","version":"0.30.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.30.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d9e53e0bf1221e786b26bc96c5766727331dcca","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.30.0.tgz","integrity":"sha512-D8UTHXiVfus0Zs5+Nt7m4MloAg1T9lI0dNmFkpXIqa8OFj0qhAHkcwnOdNawq9P25+NBpUOpDoTKIV4AB700zg==","signatures":[{"sig":"MEQCID2xYbn4Bk8IDLl5LWlS/j2P+kJ0EGDw1svSkAfuc7nPAiBXTQ5LZCz1xAK25V1Oy0AHvyFRxWSjXvXpo4ux40s7Fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.30.0","@material/ripple":"^0.30.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/fab-0.30.0.tgz_1517868166949_0.09503576252609491","host":"s3://npm-registry-packages"}},"0.31.0":{"name":"@material/fab","version":"0.31.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.31.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efd89fe92292a558b9fbdcef6ee6438215a392e3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.31.0.tgz","fileCount":6,"integrity":"sha512-zt0L06Ry3uGZS6OFz7XsF6/qd2q8JQ9JuXdSaa3Glold46jYLteCTozsX6lzaOiznAVkoeROEIAXv5kAHHVgCw==","signatures":[{"sig":"MEQCIDDu2AzHi5/KB12b0y2AvN0jvGXiMqWIBvF0huuGHxTeAiB3uep09uCuU8hmYhQ3afN3sOVr7Qln6tCn8aPEA5oqbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29121},"_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"9.0.0","dependencies":{"@material/theme":"^0.30.0","@material/ripple":"^0.31.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.31.0_1519150980387_0.5844469838012041","host":"s3://npm-registry-packages"}},"0.32.0":{"name":"@material/fab","version":"0.32.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.32.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c236f38226c531ea042c86bdaecb54659f85064","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.32.0.tgz","fileCount":6,"integrity":"sha512-VWzka0qpDxDuqPai9alrFUQadpyEwSGuwt+vgqV0gL5vs0VxLlEa1XP8McZSvdCdHGPNEZtohUif2ZaDEiMSzQ==","signatures":[{"sig":"MEUCIFLDkkzx5ZarhvBSbPohL5DExVozugskt8gTFlGzdGX7AiEA5j/jPv8+C1OKv7OEx4pP6s0oO5HtDXcP1annseh57QI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26500},"_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/theme":"^0.30.0","@material/ripple":"^0.32.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.32.0_1520287722413_0.9786409794195123","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/fab","version":"0.33.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.33.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9f089ef8950439678d64738b09b181d25a8e989","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.33.0.tgz","fileCount":6,"integrity":"sha512-ts6fM0PLgihJof8FVZVR6vVb1sgk8pQtuGjkruPcaXoD0ZS+9dP8fkMfQGcvaRfzB55wmr0K/gqrHZC6RxjXSw==","signatures":[{"sig":"MEUCIDxkAw+2rRD4ofjINW7HxLZvDUId7VtWfsKAiaSp+1UVAiEA1XBcXybkymIu7S+1CMlfM+bEXVSzSuiKyrZyqsJWPm8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26542},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/theme":"^0.33.0","@material/ripple":"^0.33.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.33.0_1521477600253_0.9782176930959907","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/fab","version":"0.34.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.34.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62c523da8ce9a50b3ad6559ea1c175639a3f361c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.34.0.tgz","fileCount":6,"integrity":"sha512-yxJjOizbUvS17b45ZNUE+VYGsduIARmLYZ8ytshjMZapXKJKeiMiHRWpge7zwHS3ckeaiLKrFu4/7lbH04siUw==","signatures":[{"sig":"MEQCIDOsBjdXgo8k8lFUsNOZDStJzoVBfDTkgM6fhwnFRrUlAiBJg3aiKYduPyUaKVFnQqbaX20SjWhtnK/vH7PrLv9t1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26535},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/theme":"^0.34.0","@material/ripple":"^0.34.0","@material/animation":"^0.34.0","@material/elevation":"^0.34.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.34.0_1522705914033_0.19081667585133033","host":"s3://npm-registry-packages"}},"0.34.1":{"name":"@material/fab","version":"0.34.1","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.34.1","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"912ef4e0ad1c2977ccdf6f81b590bc9e18705f48","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.34.1.tgz","fileCount":6,"integrity":"sha512-SLkFoXTXxy9xoiwWEZn4JOEcYlIjH1ZqfdaxQZVaqJIMYDYVwK2C01UaXBRnS1IVSXZOybn+xZHcb4mQN6bJag==","signatures":[{"sig":"MEUCIQC0DPt1xhtRaSre4KUcXl95/fZgq3stu71xTLwblcKc3wIgHtZdd8UQbZzxV7KldPA7pXzLRXs7QiEam5DhKb/z6bs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26535},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/theme":"^0.34.0","@material/ripple":"^0.34.1","@material/animation":"^0.34.0","@material/elevation":"^0.34.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.34.1_1522798786503_0.3575620834705502","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/fab","version":"0.35.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.35.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fb3358c1bd7e0a49cf084cfbe27a64ea3a5d7a4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.35.0.tgz","fileCount":6,"integrity":"sha512-oURq/fjm3GTsAoeVUj+ahWWVPNZboEPsKpGwZo+jtqunJW+cfV5DVw23orNvePJuxnCDagygWpqePse0F0G1mg==","signatures":[{"sig":"MEQCIDmlIDtlGD2K3ab4EMKuNx0HGJjbHVF0mmZ7+yyYYLScAiBpUj+nUpA+I/lR0DqxgD48n/sX+tTYv8Ysespf7ffISA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDRCRA9TVsSAnZWagAAOCwP/iLmSJ2db+NAoW4ecPRR\nRHkoKSYr9IQ9DA2GkySmsqZ40YHyAt4Yz2M476CAcfy33eRxwUN2s/gGlXFv\nkepfdWZHSgVb7/BYXqtItnFIuUCrkfdwDrIFkqxF9sJ2upizbnbpD9BkcygG\nbEhLyoU97E9riyGT6akiyDuLdwRB65ZNCZrW34KCFnbZMZNbqP8KiqQDcCZG\nJ3Ch+UiBr+YWxNOdaHeYwLk7AqFI64G3qqgG9KoL7S9sLIdx7FMaWdGU/Nvm\nVRKMiID59CsawnwCzErZDgLNgaKxCG1LQNPrV/doqsHqcZeq4hwyAMniw99y\nk/McSCDdYZ1uUKqK8b4WXyEBMrzrUfEdszWZ9ZeJ3gKgUn7AQ+g9pfp0S1rH\n6sZXtXS1aqpaYZMdNkoXagfipjKYimAcKeXpicQVi/UVLzZCz2dPG5c6Ydjz\nH5SCoPoDuSOnidOhBREfEkOlMnUcHFup1Xn4oZAggoRwKmOkjrcK5qy23lW3\neRbJugAhs6PZvvoApB9PXPXCYzRT2VBRwrPNmgpCjycelPQKg1H7zikBUO7L\n84+v3G79T55K7DG/m4IWOWhgg8aggB8cv2voe3bcF9ewf3n0m+M0IiH3Wm83\nDCD3LCVvOs8daDrBhJ0L7zk7+kDfd8SoW3C1l4XJVbEMSKtdUuZ14bJG95jY\n+egd\r\n=5sqA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components-web.appspot.com/fab.html\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/buttons-floating-action-button.html\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components-web.appspot.com/fab.html\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Usage\n\n### Load Material Icons\n\nWe recommend you load [Material Icons](https://material.io/icons/) from Google Fonts\n\n```html\n<head>\n  <link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n</head>\n```\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab material-icons\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon\">\n    favorite\n  </span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Absolutely Positioned\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab material-icons app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon\">\n    favorite\n  </span>\n</button>\n```\n\n### Adding MDC Ripple\n\nTo add the ripple effect to an MDC FAB, attach a [ripple](../mdc-ripple) instance to the\n`mdc-fab` element.\n\n```js\nmdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-fab'));\n```\n\nYou can also do this declaratively when using the [material-components-web](../material-components-web) package.\n\n```html\n<button class=\"mdc-fab material-icons\" aria-label=\"Favorite\" data-mdc-auto-init=\"MDCRipple\">\n  <span class=\"mdc-fab__icon\">\n    favorite\n  </span>\n</button>\n```\n\nMDC FAB is fully aware of MDC Ripple styles, so no DOM or CSS changes are required.\n\n### Sass Mixins\n\nBy default an MDC FAB will inherit its color from the theme. This mixin will override the color of the MDC FAB's container, but maintain accessibility standards for the ink and ripple. The mixin is intended for customizing an MDC FAB's color to a non-theme color.\n\n#### `mdc-fab-accessible($container-color)`\n\nChanges the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n\n### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, the above mixins will hook up styles using CSS variables if a theme property is passed.\nHowever, due to Edge's buggy CSS variable support, `mdc-fab-container-color` will not honor CSS variables in Edge.\nThis means you will need to override FAB container styles manually for Edge if you are altering the affected CSS variables for theme properties (FAB uses secondary by default for the container fill color).\n","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/theme":"^0.35.0","@material/ripple":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_0.35.0_1524523216503_0.039039188959063775","host":"s3://npm-registry-packages"}},"0.36.0-0":{"name":"@material/fab","version":"0.36.0-0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.36.0-0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b0b54a4fdda83c3b4f99471bfd64eed05d2a3f3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.36.0-0.tgz","fileCount":6,"integrity":"sha512-o0D1R9J7ZwAPAFO5QYg+2McBVEJHC/X4udPLXUjXhmu1AZeBNi8kSgTKfoDQQBOyfbjSTIWtd6i1l2YnYFqbaA==","signatures":[{"sig":"MEYCIQCeNrZc/7NJoYzTKHc2zb+mtC80HnMuG06AGITyDxgzXAIhAORyvHeDn619NJa8od1FgBpKXnSWojMCdyDTP0T9n0pZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbDXAyCRA9TVsSAnZWagAAC2gQAJOU5GfLKID5wj98P4/J\nfkSE0UfFvvUfrXIPBKxrF3GzsCriAFldaNlIGoJifCpwod01X88JhiLpz4B/\njAbxpR0XhgIgzcyXNVdoWtuhGtd2haajf0PQKjPkJNYj9oSMqfeo4RfVn6xE\ngVJzaTo5QAoE4nXYxsaI8eZjhitImqhmWIrlfHNtRQhtDUS1gEOzCebI/N7Z\nJlrd8qRKSlkjksjWWBx/8hRZDJgKOat7pKXIbmtJ4EDBCPYbaFL4n/L5/dwD\nyTO/OdIUzk7AuwatGxF8V68ClyZK0E/odAjIkj4HHdxESDVWRataA7nKtru6\nUS1P8qqvdu3uhvN/rWZxhg7TqPrEqc/vcMWChQu21nKsE/mwIVHuWmF4SZIU\nszcHNKWbNdxVnYN4dLhPdk1nIl6rngv/2ARXBAK7Q2Dp5lDzC7D1Au1hIOLw\n/McgsqnYOMh1rBlbAadsKPNYCDwjuHU/A922O2kZabcSpP6XOL8RNlogc/9r\nDOziuN+62MaCowuRN9oyZU63aBF66F5tH1uFZ5ZyzlRIiQ0VGpR6RAOgzvrz\ni4iV97VcwmV6yEI/N/jBa0SzcMEXgj7ddEqpIwi03v35yKFFl+tr5jcBGs7q\n1oGJVDjEiJE9S/9VugUjYqbMa9drmHIUWBVHjsPOlFXJ9uc8B5vqRSTec0j8\nzdt1\r\n=ea4R\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/theme":"^0.35.0","@material/ripple":"^0.36.0-0","@material/animation":"^0.34.0","@material/elevation":"^0.35.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.36.0-0_1527607324992_0.04693666990716916","host":"s3://npm-registry-packages"}},"0.36.0":{"name":"@material/fab","version":"0.36.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.36.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbcf66ef2d39494467fa591cfa2f5141edae5577","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.36.0.tgz","fileCount":6,"integrity":"sha512-DGWwtWR9jPAdA8ENle0lkkLnaAWs0mPNvQC5kA5t8yacAZWZ/9IFWtBhkvqqTLsaGavG9y2BdbGD2gK0bgQxyw==","signatures":[{"sig":"MEUCIQDEWu1anl4WAM6EGkqYVcM6bia7gUk+cz0DeaSC6/Gs0AIgXP+qrkqYyOr1Oc9SGfcX/1iF0MOXiT8vFnruo+/mbnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFVzUCRA9TVsSAnZWagAAG8oP/iHkboGHHsrxjdMo7Iy0\n8G1bG4k91OT/WwMkfgRwC9XPYJG2tft1xBTy3UhdQGxFf04uZ8JS6GIUJRAo\n4Iu5FXrcboF9gFRtJTKuvv0gML7zT48poBs2NQUlgrtzOsMz7U/OM0D5BNX5\nUx+bhC6cNMGu++ix3yesbvaD60Ofu8cTzLCgODf2NxYAS317IZFlo2+YLdRp\nv52CkYVlFeWOSSFRi1XuP9fptc440veBicKFIFlmnw7x7C/Ll69hugGsAG4m\nUs8Ym8Iv5BRYD84qczyXAwjTblY/yLllgtizikh7lKXHst45/MkAqCKs8jlG\nuIStn6r/w9yo9MNICmjHoXbR7rhEDZ1PyydYeBxfKEz/w2d5d/VEzpDKRGLJ\nDvxJnzdgbawVxh8Ws1wPt975izTJyP6qqFNEw9Ams9ojR8KqMFZTCA0y+Rg6\n0kEZXmyru7+XK5bUSkx8wy5Ny0ESrg/RGvoy+gg/fifhOOcQ8LdTqSTlqMMC\nDnVc0XB4kmjXF66leq7JxNrFimqYqd8LrE8ojSgpiVPKAXG/5dbUFPhGU097\nGinVzedf19dvCUUbgWxO7Me4UZ0K472XAXLE5JvtVmbqQ7Zbyvcj2gpi3NgQ\nV06OBmkyBUXc5Uxe7Li7SXmeExjOST/Z1NvZGd/9QpfDZFXsmHhJbaB841Vj\nCQXR\r\n=zAze\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/theme":"^0.35.0","@material/ripple":"^0.36.0","@material/animation":"^0.34.0","@material/elevation":"^0.35.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.36.0_1528126675125_0.0281101435778639","host":"s3://npm-registry-packages"}},"0.36.1":{"name":"@material/fab","version":"0.36.1","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.36.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8bb1f446b7e4502fb9fcc856b8f7c78df613623","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.36.1.tgz","fileCount":6,"integrity":"sha512-HhLjXPdxnWnZhBsOYg9KTF8L6O9VELrqITm+k9lYzzqdEqasqdVBY0gHngEaeTIKmnG0bDdk0ico/y9D8G9E8w==","signatures":[{"sig":"MEUCIEjnd+Hm0L+1MvQwwatoihKfn2cNO9THBSaXSv0/0FrfAiEA+YgtpxtqRGnlcXVNSVmACJzUuFj1dpJO+Zt4160FtY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbJ9J2CRA9TVsSAnZWagAAwkcP/0V1Hromk6u64vBbBwu/\ngQNVPZYAc+pFlrr6b0iINTCDBmmHaIxCtZ1CSFrGT+PXgvmh2OCNaiSUO8y7\n7diohHdgMnEFC9o5eXMg5xzpMxvlj28bJeaD7p5GYSML4UukUgdEZIXZni4q\ndDcl7MsEvkFqEL1sdgYA/K0jQwOZ7PEk0YYAjS4kpXHu/fbyRbHJEuMQDxIY\n1O40QAmSMy+BgJROlhFICuIT+ZmwdIh7DicZlLoCswOFF+p4gm8kUCk/A3n5\nr/OcHQ+ReKm7fVGyxdIS3oREUtBgN8nGbs8XI5d7+qrDdZC1VSZBxHHEICPL\nhhvyxw8rIqczqrmf2pxcshaOwr+EGg3nHDPsdLj7B44kEGOECUH5Rwm02PVb\nQwNxyXW95522Juu08agEmXWvit3/qFek+YGojq4EA7iKVv1WIxtJYoeDy+f/\nw509WFYEfNw56bPvFZ0x36Vgn4CpOwHrOn1y4nOZb5t5RIKSxFdOXIk4EHXX\n1ftAmCGh1DOfOAXoo00YesrdsULZXZWJ7z4IRAjehgk9z69vnuO2DksxgYYu\nMEv+K2L7Imq0CLEtrwLq9JItpY2TZ9Ea2xOVdjbIsmG4/SsylI5lr5DXPQDK\nJtgnaVRai+RzV5Rxz/1TZfpti7J/JQkkg335H8ZP/1wyMGGdoojkLNksYIcI\nMoGJ\r\n=1iAp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/theme":"^0.35.0","@material/ripple":"^0.36.0","@material/animation":"^0.34.0","@material/elevation":"^0.36.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.36.1_1529336436775_0.6212251189411098","host":"s3://npm-registry-packages"}},"0.37.0":{"name":"@material/fab","version":"0.37.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.37.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f6c1427e8cde4ef5174f787e4eb1393e54c3707","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.37.0.tgz","fileCount":7,"integrity":"sha512-i/Fc6VZsxJ6jxY8JgCmfliDHF56BCsEOOVw7/rXIurP0gqyplF4LVETTerxyFGWXqx5owjbYoG8wlwaxNN/aFw==","signatures":[{"sig":"MEYCIQCVVEi+b/Qg23jXxGr/TEwGuGDIucYmg0d65ibYKwuktgIhAKQ/y8Yh1H48H8UH4ke1/4aqxg/MuJsqXdjqeYDdsBYw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30899,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOqOiCRA9TVsSAnZWagAA3ooP/1jTHooKAS2PhaiU4hxx\ngWuzymI/zBooNsHeZTRxD12xvwZeYrtBIA8zIPYgQiXaJrOz30vEDvv8sTSQ\nvhp1Sb9RhvdfGyvfvUiqfzK7ATUxMZXG07hXAI5XwO82Tzt/Lx/9v+XCUvL1\n2Cbbb2MIHX+icH52w48qR+nkyZ3FOdydMNIKpP0p4vTIYFqpaL+pdkpShwI5\nRUdLoKKJRs4Ybdx7cu01PTNNMcer/giCOl4gizbm5pY5Npp9RcneM3GAVbur\ndLhVlYaPxypQuJ/cgIHrvBkSRurjSZdR/ucbJp1rzhkQOqgDUpWnvWVRHH4n\nUA9e/2ev4/BLXERRix1Q1vU77IBfvoKCwn5vBQUIxiyhqSid/SpQ3MgVPesy\nHCLNVDDXOQcQTSeyMRPDA8uNgQKNLoXtFuKoEl1v+zoGVqn2uDvHrzfAmrSE\nfzTzCE63fXOq3zvLXsFMs5Kz7xZf8zYOTb17ScbQHyCcmdiPIkoiqIB3N89D\n7X6zgUyE+70MLdscr9k1RpjtlbrcNrniDHDeY1heykR7bEU7FR8SD6CFFOLq\n6wh9kfMedMygw1yoBwac5pJ0/1JQQz/9PYcIX+WDExrWJWt4zZtoJjariStM\nnkSRynZLczdma3SL31yXRf4H6xmyVA8Mi8O6n39YH64s58pfzoMPiEvgNhbM\n0GmM\r\n=vjoI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.35.0","@material/ripple":"^0.37.0","@material/animation":"^0.34.0","@material/elevation":"^0.36.1","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.37.0_1530569634343_0.9072611712823919","host":"s3://npm-registry-packages"}},"0.37.1":{"name":"@material/fab","version":"0.37.1","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.37.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d383a89c3b70d0848aad24f92b62bbf1c7da4d17","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.37.1.tgz","fileCount":7,"integrity":"sha512-CeV27OZFEL5LoUDeTONdz+uUMFVaaa1iVPtBltK3cE48vhWQia97oJ6U4+veiJHmx6dNQm/ExW3jsBqwsZyXUw==","signatures":[{"sig":"MEUCIQCvPWo5V4nIIk4hqvhMJ2prYYqbHKRQIkhq+77NZ6osQgIgUfkwBOB5MSkMCAlr6WmpB0h39L40jc1nKzZaFV+W5x4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQvYCRA9TVsSAnZWagAAyLwQAI62561k0HHSdcEWucyx\nkAIvR7i5JQLZBEISFeuJOOw4fmWpwiC6p9ntga0DpiiXlJ8S/QOuIlSS707y\nqOOvkafIn8lUW0Q072cmZgqxJkepYR57hbeNYyjYMigIAah1VnEqsfQPiDKr\n8zR2hpTKwdBV8s2Ep7PUolDemdrpV4uWsSQdTZyDKpvgbJ3Z8mWjJuLiFH5v\n4v4ixqZjE1npDOUhAVxeJ8HcobyzlE2q5y4K0139M8Q0cKpJUeFWPnlA1qfY\nuDXsv3kJIaV4TQctngkLm9AEznZkoBAO/ZEJAF405UWgEQOoU9mAVHhIHc8w\n4UHTU7TE8NfROrL+h8GyraT16ksirRHG+65HU0yFKOuxvLVvmf6fv/8UFtW+\nIEHbUSUITgoeqY85XQ+B0sUIIDkoQL3o/8sBygbVnLQlu4p+1Zhd4GRD6utB\noXyni6+F5m1RYyh8QIbzZGgIDx255YSe2Hn1jBX3VIsVzKMGqx3JsVmZYUoX\nXu/zABxxvI8CAMGJ6t/hVkwQzrBFtdlFudr4tQpjesMQOwX5yD5naxxEX3lB\netCMwL2xzT1uuZeo+rrHYS9QALTAuKzUVokMQm1raNBWY+uOWUWxJaH7o8g/\nrIDf6GQwBf+z08jB39XNYV7gBV+bkAVbUTBxDafw0Q1mppqOddw/FMSSWpfr\nqmeW\r\n=UaVl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.3.0","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.35.0","@material/ripple":"^0.37.1","@material/animation":"^0.34.0","@material/elevation":"^0.36.1","@material/typography":"^0.37.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.37.1_1531775960779_0.332149097960174","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/fab","version":"0.38.0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.38.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"659886cfdec53404605b45b6cb86dee36ac9fd96","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.38.0.tgz","fileCount":7,"integrity":"sha512-7N+Qok7kTMLU+zcuRV204JTEw4+kmXdOWNobuLDfFIZTfjrUszNUiNFq7qEGMMh9jwhGNCdF4S+OPqiTwFZ9mg==","signatures":[{"sig":"MEYCIQDf3LFp8n5BPDg7RCIDseWV57WXbgvWk/o7ovVAV+i0tQIhAMfLiKB3yBwXYT2+rG7bgHPSoM/ywK78qBL89p2lAo12","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0W6CRA9TVsSAnZWagAAnPAP/3Vw8bLFDvAF53zYuF1O\nfy9oolPrU5qAxJ5PcGlWgyRt6MUDYq2BOk9Lu6M3fwI2nAwSbpSKauxrwUv8\nR+PzEA99WNI0rJUU1npHoSaaYerurNNMi3MttEGrgZrSApvbmiooij4J+Xh+\ncNWNpHFaWqAOg0x2ZDAUKyznY14WZlbldaS7rp6le79YL+SfdzA38BIICuuH\nluvm60ECk4n6s59xtII6RLhvdVw1iIIwRhvU/PLL2hbT4M5JGsyE+7l6lP2D\nrHtcWNJAtYrn5zpTZ6/7dep/y9EkAFuHuR9DgySUxPcN0vTbQFCXZl/e9qw7\ni/l7TUoebSSQTn5eb1ezegs+tlGs6XHolDcCb89801SbrkY3M7QMsSuXUCyE\n4p2G/AeAo/OHiN0YbtsYdp45q//IaFVBhg4YiHdMLKkZXs7DkSq+9jcsCXuT\nsAdyfKg0/1DvmzsXgsYnuOR1E4BtNbTEe8+LCCOtEkS/ovVBAvUJashSgEYJ\ner+GwkEnxB+nin1K4MKjvEArjy64p2pie72GIVsKGX0oQ2My1C8UUzhT4Bx5\nNAm+9l8hNj2MzrEpl51rUwDPe0oSaXOLOFb6gQlzoNbA59ozzB+bsHxDl4ia\nQbB33IeaUG7ePb1yOp4hbYqIunV2rdJqcvWRLAHqc6P0R6eZHFZQkl/YUBi+\nJjnL\r\n=cVf0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.0","@material/animation":"^0.34.0","@material/elevation":"^0.38.0","@material/typography":"^0.38.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.38.0_1532970426890_0.15963064375152958","host":"s3://npm-registry-packages"}},"0.38.1":{"name":"@material/fab","version":"0.38.1","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.38.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"210cf47d6cc753f2536946a5cde4ebc0f19f7e46","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.38.1.tgz","fileCount":7,"integrity":"sha512-4natB43w8KO5dQeT6FeC+IKV23W+2Otap9GQ1/sZBjEQf2bz4XvS2fQqW2RhJvNhQmNMEC6PiuYVFyh2t8Hw6A==","signatures":[{"sig":"MEUCIQDHEwfttZHPlycezMt9Rpa9JW/t+pZ2MZrQfMqnfTPtsgIgD+Ihsbn36tEDA49vCKETPUEMQUz9CAfBGk/3EHdF+r8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbcexlCRA9TVsSAnZWagAAg58P/2zzBceknNFhJXlz4tyK\nTQwGzPIBZMO2tSvqJLx+T0RfetBU+PcFxj3wolc9Nn255Yjzo1llMLT4oOdR\nWrNN2jiz5R350nyd6y5F5MF7v9QwGOj4qE51QRT8CsHd5M7DWPVbcz0SdWFj\npq9VKMo0jPa2Vk9QX9mU0sVFKDODv7QVXJr40GyfLGMfVjbXL5MEdb14k+hR\nmisOVbN7KAQ0rmebtciGs5TDrhGDuYLEJ5JEtjDYS+Wo/OEXbcDQMupyr6dt\nibpIZb4OWAWeBrJX/CfAmYMNXd+uq63a2YdmmmeWPdPS5DeTY8RcqBVCQb+B\n0NLK4Ud+fkDiNYsbFyYWRa9En/L0NewlxwG+FeJQuNUKJFwomXFaI+k5jXV2\nZpJaGIm89+Om5ELa0mzYctnFD0cfV0ZDtwDes4APJeaLAJqi7zdmiqDCtcwV\nhvNDkjZoLkES/uH3znZZmKg53YTgXLu08QpczmBlGhonotjWqrNluxh+erUI\nDsYBhEfyhkg5lxE7F8XVkaVhxuwSP7tWqQmxV1YxtQDZD/6qK9AKfpsxSnPY\nHSJSaOvWT4QlMTPO52K37LXbBngMEk40lpNUGj0QLJ1ADMsH+masDH1IldqE\nfqL5ty78tt60A302vJkZ6Hqs4NCrrQqxwsHjmv5/q6vIBEypj53ASnezvmCe\nX0DI\r\n=9RZe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.1","@material/animation":"^0.34.0","@material/elevation":"^0.38.0","@material/typography":"^0.38.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.38.1_1534192741055_0.6505165368614012","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/fab","version":"0.39.0-0","keywords":["material components","material design","floating action button","fab"],"license":"Apache-2.0","_id":"@material/fab@0.39.0-0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"806428ec36a21ec44082917c437993f83a2f9305","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.39.0-0.tgz","fileCount":7,"integrity":"sha512-wt+SAU/bX7ej70Sw/ffqY4jr9b+GZx2eAjjBTwBRnpzPQee6CNEJMKxHOYYVNcmMhDGzh0VjS3VPJLVbKRzrdw==","signatures":[{"sig":"MEYCIQDzJ1v/R/+f1a5lhnoQ5JuIWX0mqv5uPQPNpzQIN535ZwIhAKtIeN3VC7knPTr9pyXmQ1iy+7qNA5+CExLrvyLnGJlC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZU4CRA9TVsSAnZWagAAMDsP/1VIVo5rPC1Gf2oySm34\nVznOXmezS8kIavP8YkmqqqG6pxeVCHT8zLn0S26cosq/wT5WftXbt0FmZhYt\nwoj1jIj+i2K97qmofok57Qst+gi47e7XuABGg6sHs8eHLI4AMsUtTQs5Yvdz\nOqg2AdCHfrhe/7DkhbJ6UW0QjVCa5TKJWHrdeQrN6lVBaNC5kUi5kC37CgXv\nOn9HykuPxAgfGl+1Rw99ITFLIQmfoROiFDbeo2VIHtG5I/ZQTrjOCB0+rNKT\n1HOdl+XGa9wgKznakNcokL1gT1RpYKbyhdi/JtMy26tspfT0KyNhuIZNR071\n2Pf8UFmrFTTrJ9CWd49pEOcrJ6WvOaH+nzskO2LG1wOVxbizEQFErZS/QsyE\nMl9E2PcTRlcjNybuIdcZRrvl1j0EI8L3yIU4qiBFUuDWKchbAPhAVWD8Eekg\njUGeE1ImQWuPssD2+02RfTDRj6PCFs1oGHJF7St1A0yGex0n2gpHoicN8C6g\nd0FmuBHjqvtlSCYsMxag8iunJJTc7Ts/iaCDLBzBZaeYpKN0Zpjp3Q2rclpE\nF1prpfOUlEBXVEMaT+Q9Pq3Rp4r7XMMlYJzl1h0sptLUUzHJjqbHkQHwdhmR\ncnbGSqH8dGTxyQmnDwBJjkqGUaux1ZuBVLuUeM6WqQH4uul1ijEk+K4eAinl\nbMO/\r\n=0Y7o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend you load [Material Icons](https://material.io/icons/) from Google Fonts\n\n```html\n<head>\n  <link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n</head>\n```\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.1","@material/animation":"^0.34.0","@material/elevation":"^0.38.0","@material/typography":"^0.39.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_0.39.0-0_1534432568050_0.5469844641624431","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/fab","version":"0.39.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@0.39.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b165b2f2b9517f3862d4b41bced7465d194bdda8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.39.0.tgz","fileCount":7,"integrity":"sha512-FBAdOycpRnlvpKJnLXPOzQbsdxTC+yMu83rJLCa2Ah3nVv/PI3q9PvPgi0PgjcPbvRpe52lXbTmvLaoyE4gT1w==","signatures":[{"sig":"MEQCIBOmL+xQrFhcVo3E7Ro8rKdQBV+26luE1God/x/6XrFRAiAmFYy+jcStGfCKRS/konOwoWaPmE3p84XCk9QrmuHWvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDeRCRA9TVsSAnZWagAA5oYP/ia8Yr5nRHvVuxGfEIP5\ndurtgoGIccwjy2djEf0C/IWrKG8oEfJ22kpF12OsjQuzLJ7YG+HChB8cxVB+\nFX/Uo7h2MoYzDn1fiMx+1xe93QA91CXkBxhyhJLwqu7pF3kneKcLLFqlT+0C\nwP0dc/EkOB34oX4QV+Lkt5UnU4FsPbq/dBSJyEKtJh32jZ3ouvR82S2K1vyG\nYmk8jngPzP5F8F9TqK/YWdaTToYjMTlw7JMRhw208YTJ8Dzxuj9psE7ZxKFD\nXsMCFRqzXszZRwPm9M2rdyt3VhCAz4nqB2Q1E9JSDrvVa7F9MermoUPGzJJc\no2UY3v765QxCF2nbq0THMrvPHyiYgKaFYSt0mjANOpeI4DNCPNFjtBSpVaeW\nB0jXxQjxwaIli2kr4xC8jrcm5bcU1WF5pWk1cVXKrEj9lCDXtsFasbLsW2ne\nfx9PwUwDVIXrQ0d52ZJOM5lWjHZxCPWznmjb3OM13ETxVeR5yWWfY8hfTh0Z\nzzbPp5fiacwSGRQWcT2neyvjMM3dwIbh7S9E6WrAl831tcMqlmGAyDGM2s+c\nn1uynS6i7fRKev3UShMXLKEG5Q1kjqaN9Mg/sgPTbVcb/legNR11y5kGcSv/\noHm4Uy+8TOEin0Lp3qEJbMM5bNxq37FjhTv9td9x4vuF3rVGgRQ6qFuNUhze\na0kk\r\n=u4I1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.0","@material/theme":"^0.39.0","@material/ripple":"^0.39.0","@material/animation":"^0.39.0","@material/elevation":"^0.39.0","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.39.0_1535391633017_0.6306247025318437","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/fab","version":"0.39.1","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@0.39.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"785b22768999004b2c34263a767e812e5f26c6c9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.39.1.tgz","fileCount":7,"integrity":"sha512-R4o9qbq+RYqWBf/vgQYZpRkKLEyzO2FTjrA0mU874vKKJR0+56q7GQ0Kvb3UOR2jzXF8j9lUvHjbVL5/JvEC4w==","signatures":[{"sig":"MEYCIQD9Oqwd7W76H4EItHXOKRao2mu3FzVgEvUhocK+tlVgfwIhANv0jBzFQBqwd/5rfAo9I3jVFtA7ZXkeRjv2cuHdJOVO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibTbCRA9TVsSAnZWagAA4rkP/idkoImoaNDtZIgOfw2C\nDHRkgatkV2wQzXFmbGhOLm5WTc2z2HKNlKRbklo3GOMKr5BNLC0EodnQELwQ\nN48r39V831IUK59tOJ105tPFyPptNCq60MLeN1PXQ22T7duUAdtLvSDvytqZ\nddc+n8U6EKXxf4LU37I0x974Dm3c+BjsoaORXpUPJryXc76mXLib0L1kj001\nEpaTKXBpdOBdATleaxfGhvDrKJXs9DA/YiEgZNZODbw92EcatRLiEe+sakie\nqUrv+s+8+gP0MbhpSa6AM6z/C0WobF5krcF13gtW08C4ep+wuzvawZ3xFyti\nKnJO2DlanBAbAmme0nbMkZsRak0hh1GIOPdbHRU+Yqw7oFRF+shDgcnaYIqH\nTOvpMDISy1ZZ5PXcgPqR0kTqawssNnnSIlafqgHEdg2qtzXqVGHcwdTO1MHD\nCb0aDF03GH/mrDTDdMgObKJUwKR8x1G+jptCtBXkeVCmIeL4Zpyn+9gIJy1F\nqS3l/Xpvo2ka/Eh8dj7kA+dCf9NJABY7ZlmV1VH+uY2Ke0CpLTtpESwoMFbz\nzw2WbjjG6+B5AWTgIl1la1+XUKLpSfQer3Fh8VagYKMRxYzhwY1Tw3aAiiNe\nVBTJKqsTbXJCxkMQTtq+2FknumjmtlXmHlDpP3ggLBIAJNRqrEvlPDjiADpZ\nLYof\r\n=Aba5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/theme":"^0.39.1","@material/ripple":"^0.39.1","@material/animation":"^0.39.0","@material/elevation":"^0.39.1","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.39.1_1535751386169_0.2008031868715563","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/fab","version":"0.39.2","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@0.39.2","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"485d31874f33f8d82ccaa557ebf72ae48b5d9fd6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.39.2.tgz","fileCount":7,"integrity":"sha512-kL3OEVBsYGDBPVn8H4AiUvFefP7T6WgzNrqD78tsWE1WStO7inOteRDEO/vDt6Llz2kWEAkycMjKqRViw+JuhQ==","signatures":[{"sig":"MEYCIQCgnWpZtM3WWQVJjR2SHdTHzfzjcg/J/BGz8EOHSkgfXgIhAJBuRCcQIjG3z/lUO2onP+T6prVaoCx90VB4ivAxQyG+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/NrCRA9TVsSAnZWagAAPegP/1fv90WD8mm8uGsujrxk\nFqge60aMkLp9gu7FsY9ls032FpQ9KztkHBtR9OY/fSJwQszPtoc4snql2+gI\ntqiB/NSJ/aO/8vKQPQ/kk0JGdwDmo4LzkhbPN5WVCqlRHb/J19m6uDoSXX9x\n3Q+dH/yCrNQ/TuSEbGe9rapyz+HKePhFnBmjmKv/olNgYdKxp/Fhj4YaPGXD\nAkXS4lNd0bLJ2CdzPvbMhOWVwlGzD0XWtdfi53KmkTfZUb9QgmtPYBB3DYEa\n3EEYXDIF6LWJx6Ti9aUNYoU2rnj1Tceydx8Q1898v2Ys2bI83mII8E7H0djJ\ngcitDEe9EIXCGh7cMJY5Te80tV5X4xrSn5AXsa9RPqgQICk+082NoA+RhdX6\n41+8B7F+yLpXvBEqK3Ov/555UIQcMVh7K52+hh6mHrhcLXevoo9jj3licTzU\nGAX+GAUeRPGq6h3qPHONqJyh3wLa7TsQUFB/s6944ZULVsctYMlb0EFgv/DG\namSAAWAHP5gHrbwmoAM9dycH6v0iNh6A96HbQSoUmeQDBk6LBxjOaSeyfu4E\npTY8BDc33g6SunpS8j0WXYthU9tQzCtiHUIRxKOg/61uteRflMjYoPHaqwnv\npKOr1xG7XZkhoFHFn+DHRryvEs+UmduhCyiYuKYz3ybdDuzGKb4du3/vU6x4\n1A5q\r\n=X4sJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/theme":"^0.39.1","@material/ripple":"^0.39.2","@material/animation":"^0.39.0","@material/elevation":"^0.39.1","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.39.2_1536684906655_0.09332518566308035","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/fab","version":"0.39.3","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@0.39.3","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb38c5af34528afefb08e159bf6db7b8ee14e391","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.39.3.tgz","fileCount":7,"integrity":"sha512-pCsl9DBk/TjtHub5BlyxHNT0mviNWKP8F++qCR1i2yZYombdRjeJ/IJsvZImM8jm2MNYhpnuQtQXzXbxBB8F3Q==","signatures":[{"sig":"MEYCIQDwalWKrLmgGTQjW6pAwEcru2WpLAi5Vo5mYiz6frNYtAIhALp9qCFQPaDw5VCge7huOwMiCKt+G9MBQQQcCDBVsDhb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/j/CRA9TVsSAnZWagAAmyUP/RW7jMqOnU2sn8j/jndt\nz/afcg4knq0XY2Tdd/JzAExkFzVZO9xstb4koMERqS1il4bttSoiZmRRiJPg\ndGfznux2gwMmjr9zuhOj9f4FE9irh8tg6/HuTMHSI41h5qYlUfBlTs/YRlh9\nkZYCkPE4RHARntbdNC0DYsYDbG6/Qvh25G2Vn5GQPpIL4qdEejc1PvVu4m75\n68QCx7rS8DYkngDi9OoXkpKjfzYxhF+E/EIW3YgKmyPlQYYBjwt/oqc0ee5f\nRu/3QJ5fSDY4JZvax3hyG3Ug6JheCRyrCKRNhk/O4Y7nsHNctcuOJhT8GeMh\nrx+TkEyCUesv8cha2ltYjLeCQnuJDMsbNQoLMBTvcdlOhS09XWc/ByK/BuTb\nkzqpjc66vE5RavDPppLEljFHQtuAHcIQkMkalImVHSiS59t5bdwkXsyjGgVY\nZH2K41xuhwBXkFDkUdaf4WSI9IQF9Ey7wrFhP6lha9weu8I5togKPbYlUM0F\n+Rw/p4deoAU08CeezZMXaSxo2HZJLSFWlf13MPgX4pJlF1RmGucREntF8dKA\nK+oaxIsPnFwZMTmUMnIXUx6Wp4gmQatOsrbCD1ZL2Dn/oMYutA14ZIITVsrg\nsA/qV8NWPJiEnf8y20F3agvEMEumbhoJgi2/5XahKQ832jmrUW2LnQmL67Jx\nkGZy\r\n=0Hmg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/theme":"^0.39.1","@material/ripple":"^0.39.3","@material/animation":"^0.39.0","@material/elevation":"^0.39.1","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.39.3_1536686334756_0.13808560956070082","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/fab","version":"0.40.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@0.40.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f48d860afd9ab8577bdea3d3dcb52f93df9259e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.40.0.tgz","fileCount":7,"integrity":"sha512-kHCx24IVxuIunUJs3KPUWfmJJj2sxt/CSQME3eiLo/Mx7DjtuvS4WZqqqRPxjInMoRp4VxdSoyr4gS0SHslv4w==","signatures":[{"sig":"MEQCIFZn+Yc4yfXArRyaSYr9ZuD9F7XEnpZQX4Upw8rHltW0AiAkNYfcJhOFyjNGA2/G3tBEau0G6SMoB5ew/1c6BTlZvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqUKDCRA9TVsSAnZWagAAFU4P/0GwcmwdqwQEG0+sY/09\nqUbvwIR++HijQDMTWXKqga/4SGu2jFLkMKojBkzhTiQv9LG7ws7OEUIsw46a\nOeTds2yl7Ljg2fZv/trJmir7CZsdGAmZA5yFphvEJ4B7vzQ71c0tQAkQzmtT\n6QLUduIi1MNs4Bwf3T25Gd+XVH8zkwy7PO+PAvzcOLEMn8cWiN1Vs8/7LdVV\no7/e7fU2D4QJIp17eolDZVF2DNKtq52qPN2taisZ+37zlzVGAsrCiCNu6S14\nsrNuQ53trMMnCJtSqn8/JtCX5UutoGGmRrldRTZyH6Deev72OZGkAAaE4TsC\nw3Ir0s2Orv6QvIXgpxmF/eFx5aksCfW7/JQ6LLI7C5TYWyBffzCVpu8Lht4S\n1LBPbZgfYldv9myI39KrtXgJFND2BZjaEmA4F91QfuHxt0yn9X2myjocIeUQ\nYM779xo3KyBId75czRlWhmKDZ44KhzEsIgepCcIBpIDnZfrs4WtvMAzK8Aoq\n2IXgRMoIDIZPNRM4IsMtUAYL4/4gz8ox/apF+dhkSvCzQQhEVYWOGuprLlUH\nkAx8XUmkks9ztvTz8YeZP6X2pdzDwJQ7lK2u+4jISdWdryWnlZ/GGA/v2lbF\nbxAXb/eHig/t6Ospmzc2XGiw31dikhnKclMMvQ/8z+jzY5HeB7Bj1ZOh22oN\nKDWQ\r\n=hp0c\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.39.1","@material/shape":"^0.40.0","@material/theme":"^0.40.0","@material/ripple":"^0.40.0","@material/animation":"^0.39.0","@material/elevation":"^0.40.0","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.40.0_1537819266810_0.3678113538731427","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/fab","version":"0.40.1","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@0.40.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"423f66e701685e5744fedbdb0d853ea602f83529","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.40.1.tgz","fileCount":7,"integrity":"sha512-mpRyC74OXQIzTiUtH6QU9Y1REpi3/rMmyOnoTyUnnsIQaoetM/khw0I3o6p/DtZXhn1ZhJ8myqnanlD0jfmVmw==","signatures":[{"sig":"MEUCIQDBVpjVjmnGnvKbHzhoyd3kfR8L240kqyeywVoNBjiCTQIgIi4cR7IAhOdQa8u1PO6gidTrOT8YvNDjizk+ysfJAs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8QMCRA9TVsSAnZWagAAG/sP/i0g7UqNORFQaREAgpw3\nD4YHrIxeWN3BsU6nTe4ci/0QJ07qBSGGMynW4Nif7ZTP0AHUBQ0zPFU8VZPY\neJFuJKV2Q1/bRXmRMiGnNMnP+xtyObns7Z6nLeLuGNcPpvTHrr1TS7wWpy0J\nhyNJOsNUbFJmSth/x5sRx1Pntb2gG28b/GWfq6XfLemlhOPzHlNQl7XaOeY4\nl08kY4ndayXz7M9foB4056/nbC22Vq/zqDwr84zclzpFBZNtMWvUINfur1J9\nQ5w+x3dXingChXV1MFGx01TvmvcGqXPreFxJqz97q/fYkzbUicL7ZLl5Rbqj\nP8MASAA6GItGL3XOUTw0E2bRSU49aJ9WdJQszg7CeBUmUZMyMNw0QDUATMuL\nFUjGDDBt4RGSCKG09kZ1FPTyslcKIFJlZ96IHZEy1bqPQb4b0iIDQJxogfCG\nJgbzcYSMgPDzMUM+fdsmunZPl9T7jHHfYFBX1OPFWGCBEh3CRPaL4snJQj0P\nNOIxI94+aq+wHFEQRKpiZxKBg0dikQRblQseNwK7k3edBm/cN3YdNk0C9M86\nRmFzaE+QY+PCqJpv7gaAZ3cDgKpwxvP0YUuEnBCWPrKEP27j6tTBnYiZIZP3\ns3hoXdGsrIADb6XGVO09EL0M2OVx715fdp8kYarRyh439hd/eUvnbJMDbCDR\nfa8I\r\n=XwAj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/shape":"^0.40.1","@material/theme":"^0.40.1","@material/ripple":"^0.40.1","@material/animation":"^0.40.1","@material/elevation":"^0.40.1","@material/typography":"^0.40.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.40.1_1539032076178_0.66038179608282","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/fab","version":"0.41.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@0.41.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a1f7efcb315ab303d046dc72402faa0a6fc5303","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.41.0.tgz","fileCount":7,"integrity":"sha512-SY/XhkFqlbT8byz0wVJF6vPoGQQRwcTpA7toK1WexW87tSme8KE17yAGJxsZYzIOOFZqW1xF+aDajWdaWyDZdQ==","signatures":[{"sig":"MEUCIQDi/YPV9CehylaNXhHfwc6su2VOSyXUFOM7QNzhLOAqSwIgGBPWDKRqVyAa7L69QSQOzK3Ssb/As1FVFUmmc8F/+oQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12vtCRA9TVsSAnZWagAAiDUQAIdXzHP9Kz7dbQ3gnwZq\n73bJ5wTWnFHbtzPOFM9jkG6l4wvDVBDcFoAGRQHcYOidVyPqr1kACxWWOyCn\nI58IBpAC4hHli83dYhK9dLczKY483zsNejqR3sxLUqlJVrIqcPwoZowlFMri\n4w1pykHicf90JEFqQQbEkEnhh/bgr0Cy/7F78lFeAd1rFwr2r/ihP0PPywIv\nZE6MXSFlTeU40Q+nIivddVFphs1lWzp6cVWvhPVMQrZRWC66lY5/UDVb4UPK\n3Pa0OGOU3jDjKwi/vbrr+ocFEZM8DwRwLGWpBlWI/fvgCOMkdDX+5+CbDDXI\no/7y1ofDVbfDrGp5IIFCNljEnicvRq0qrjpxB6ZHD2GEgidVm2IpyLiqtXpV\ny7YBsaPav25KnBaQwUfmw/7jlm9SUsxLfSaIMXVN3G/8S965nFY6FKlcovIB\n0RDyzux5w91iVSsE9Dpex7RCFlKeerKl+tCljFCgVhJuHfZ9KJ//gwg/N70+\noqldCwNXVT/ddPDiYexmsLSG+XStQyV2BB1x0XntVkE3CZsJmSjea0o6syyH\ngpJp8aNGPdqdRHvtQbC1kSAbzEnenSs8cNsHWtm8oco5ZZqjbEeDxkn4uQJ/\nbUmAJFmwLEEANitCn9Nda1hXFfTDqNMo3/W6y6jR9u6zEgfTXPasEEyepRsJ\nMVaJ\r\n=HDp8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/shape":"^0.41.0","@material/theme":"^0.41.0","@material/ripple":"^0.41.0","@material/animation":"^0.41.0","@material/elevation":"^0.41.0","@material/typography":"^0.41.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.41.0_1540844524858_0.5871270396062849","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/fab","version":"0.42.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@0.42.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14838da7da6717ff10337a54873d60da800a2d38","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.42.0.tgz","fileCount":7,"integrity":"sha512-zLzvh81mdizq3MwgN8iyF5KTQaId9Vg/GaBwOgXbNE05X1TfCzHZ3azqmRF1Es/AoFDeK5R2Hnj3PGgZmQXA7A==","signatures":[{"sig":"MEUCIBo6pDFngyLg6D1UrC6FDn+9OFy/EHIayBYfPIu8zteoAiEAu15iLcA3tuwesbJJ6oOhYW6+I0LCQGXvkzU7xBYm2vg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwW2CRA9TVsSAnZWagAAUa8QAJ6g4BS3Mlr3jrDcOq17\nzXN0QCKAk2gwNAn838+vt6pCJ0lN7DPjLLg+c55eDLXlmy7vr+rlhVLbnyif\nBN1qoKY02PinCAu4GzQZDTbh6DuRewJztqEl0B569yN4TCeOymVI1lMFWmgL\nq7QvTo+UfqppPb4wdxPofOhks1L6elfMyqHVPhNdWc+4WUVvG2ceiQkUV2mW\njbMSPTkFnl1tcsO2WQp//crvhCzb5K8rccXqqjy2UwkiOLS+Sy7WbJxeJL2u\n3uErcbwhxEq5rgfQe6xx/JQ/2QUwQAe39T4KBQgdaeV1yyAaqzZ0EkVpaZbn\nUDOpPVYv2uBSjMVjS/vD3WKsFbSVzK654uKcC3jAO2Sqkg1j28aO5AyL26ID\nwCMs0jWVt7m527Aj3mGW8Qc3Q2MIqQq8J8/Ue5iwfLjM79LigiqSBwYDtCfW\nhUwCfzA9IVR8lZh/fxLvZUb3xxfCEdeQFpS4xvBHEdjYmdt87s5ykR1qC1By\nYyOPSmEwsch7ORWN+3lT4CYN91K5NoIjRFq7cOv3Q4mN2dj0Ril0jKTlwsRM\njHYRTMRPRS3F8v6xdNeVoeqHCF4pBZls6Oz25745ULLj3RJJP5o7ZblfkEJM\nwJzYASCKeZzxM2simeE7rONJSeDUtxjRAu/qGLrIYF89/s110yLDlPkLQgSB\npFEJ\r\n=8Z34\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^0.42.0","@material/theme":"^0.41.0","@material/ripple":"^0.42.0","@material/animation":"^0.41.0","@material/elevation":"^0.41.0","@material/typography":"^0.42.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.42.0_1543964085662_0.6921085442857848","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/fab","version":"0.43.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@0.43.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c66a700eb7c7a00bc58cbeaa5c800085183e5b63","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.43.0.tgz","fileCount":9,"integrity":"sha512-AGygFI1S8hjjUmk71y1DYj0wu94vjHA9DH54FdcBoPTxH/sIRSl/WCHgvSYz2ALqRV1oXA8NOpzuqKxeB0ZmSA==","signatures":[{"sig":"MEUCIQCeOVbUcm5n8tjyOGh+WHJ4ok2vMxxxXxqFeuHXTz3dCwIgNcGBp5XLP4jRlt/5xefQJRvxte7tAmzYosQHflacAJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM601CRA9TVsSAnZWagAAfHkP/2Y0APkusfmWDvlmBsQ4\nCN2xNe+eYmv3yo5KwPFhoFzZPzZzDSAU3L28LrabzwvLeIDFeVJvORswSZ8A\nwLB0eRBpCr+nL67csscvUNxLxaf+6segUJ9unQovGiMMErVuhj5d+KfgQ+NJ\n/kIXuWwpiaHwM1sJ3yg7YaYZIX6DfFDB3VVvy0m+7gtiTNUDxB8DnPWUlOig\nUf6KiOyWSjIrr8Jrxr04Fq4HGsYGbJ3xDV64DrCDHHEtH+B7pvPOTwwolCCt\nK3QujT9TgOXptG9b9gDid4dqYpGcR0kjRrjBs/DLuNuT3rN7QZlSEWK15zL1\nzK7PaeLHlxzGQmUrvOSdpqqmgLJ0G9iu5g2DYPY4u1Qo53q2/00XIKi5H8YY\npW/nnWVXYPLqu6Xot6R3C14ZSdTu5GnqnqhM8IUnpUTLxhLtKmOnGkwQnefm\nNF19+2tM2BJBjSLcOqPC2ohwKTrMQo0pBH/FDFuhq79KAoDwWY9Ck/0kDWdm\nzXS19q9t47UfYrdh6CnTd4vtW5Y5x0EHciC1BmbPgy6n+CfoGPjXRqmnqf4I\ntzynFaTYLMySNYyfKyTG3ZAcn9IjLBlEcmqpk+rb+UMcavO4FLvFYRnt3A4l\nFKrWAngVa1E8Ld3y9GQSyUZhpjHsZGDGUkVpD9cc9J6IztdSOwgBdqXRwtbM\njlig\r\n=puIC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^0.43.0","@material/theme":"^0.43.0","@material/ripple":"^0.43.0","@material/animation":"^0.41.0","@material/elevation":"^0.43.0","@material/typography":"^0.43.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.43.0_1546890548996_0.9563526927564856","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/fab","version":"0.44.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@0.44.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bcbbdfb6f24c53d59e08c9c0d400d2616dea184","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.44.0.tgz","fileCount":9,"integrity":"sha512-1CEP4NlXDYioJ/YpSjh/MlIygtoC7CaHqIbucxX1O5WRPmS7K1uPt+o7netbLErAmcJdV/JrI/tqh9kKuX2x/Q==","signatures":[{"sig":"MEQCICYys91wZXWOuWZUfw009IxSASlwYYYrFLl1tfrT0WnaAiAw51ADjF6TqHYPqoVGDUnJr0fKTIPOcdrRi8KjqjgKXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWIM3CRA9TVsSAnZWagAACUgP/3egLh9mPj+aFTUHeZhD\nvcgj+VrbH07sT4rMBjF4fap6iKUezr3Ch1Nr07JhxO6Fh/Bbsp+kH5MHffAE\nVK8cyJHdjZ+7Ldzk7RJvL9GYJ/+O8ucVA6HnPE3aaotcKqCM2AF/MtS9sNiZ\nOYjGbhRURz0GEYStVrVx0ofiHghdd//y4M021ccVEwPWkK4RD1LWI2Q01c38\nIs3D63ztxcbMzdirE+iRQSjRjNKwkFil2+dFco6b5XDBtkwP/oI3i8WIrPJJ\nkNr42+6m+gTCM2WqUVwUzemfJFNUMyKEnQjkpRi/E4Es9wMJot8QOwW/gi7E\n0AjocPA4DdxF15qXtrztdNepF+t6vkd4kP/sbmJy1DaZDGc15dnIvuI0u1QE\nGg2zF+Ak+IATzRWQYqkNQmdGVA2wY4F6CVqsYXRXBEjmZVPYz9hZmSzy0Kf1\nFlYedJ7F2TCYr0oYqOgx7vBTMJmQNiph7NSU/fjbAsCtO9iWMZFrk/ldydWJ\nKtQPeOakf7BMAkTvtDIYphmihRbooLjC2NWApISmn9tvh4HgYiANsI6ei9BK\ncP8PmGpzCLIefEGDlKin8bzcVld/oHBL4WsyuUKd/Rp0nYCOk53VDX853Jrr\nJnnv581m2e6RNL/EJxdbeaV/M7kAtFKXdgLzw3+cMu+hiWIjDmkNonCE+gCE\nxRU+\r\n=SytN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^0.43.0","@material/theme":"^0.43.0","@material/ripple":"^0.44.0","@material/animation":"^0.41.0","@material/elevation":"^0.44.0","@material/typography":"^0.44.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.44.0_1549304630438_0.6811085523018494","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/fab","version":"0.44.1","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@0.44.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40f8152b4eff94995a927514563b109f9f432a7d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-0.44.1.tgz","fileCount":9,"integrity":"sha512-EoqtNkLOjJEYAPp01kfmnpFKoo6NTGZiMiXXCNRWyus5tslXFI6FE05ph/S+g0PlAiivZzZO0YcXtZBv1WXPgQ==","signatures":[{"sig":"MEYCIQCKyg+EqBEJ4SQEQxjrCEyGVhhhfVTVlfNJ6qYrRrFWhwIhAPH/e50D80QoDgdb1n78y/wYT3sXqD3Rwo7rZT0RpXN1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIsXCRA9TVsSAnZWagAAPtAP/A00Tvq749Uoik2m8bS0\n71GPwMalkNr81Jjb8h03AENLwmP5wo3yrzlSN+GYxJ8/01y0bNvEYTpeYm7M\nqHdRcWG3TpobK0wW0XJmQStaea79u7oiZDHvOkwCKSu0CIpe8gs0LlO22FPU\nmSIq8SakWiI8+UbZrwlKtktNT1CDNLudN//wyGt8NUGU6fhK3MSoEvJF3dhI\nuUM8FbbP6aiLBuYcLubuGQjd9A7qyzXtKpAWLgaXScMh0MAoXS74Wow6t4k+\n+0E9ovlMEhNKbc+tTMRVuVqD6EoS05Koy0cH5IKxP0+eFuVeFEDRYnDfyddG\nZLK+3QmOcZPZ/TddO+OGzv89WoRDL/Rj48oRDpmtI12a+fHQ5hRubbIfE4/7\ncXLsL2gvi/YmNSgXrtyR8i9RePiIcUY5H5OPcO/Oqx5oN9I1e7pL5MA6iBtt\nRFQVgmBIlhaJcXb8937/qIY9mXTihNW1yJoq5kNEHlK2+2sgO41e7nmewRBR\nKT7XglmD443GOrZQhntYwjppYr60+8kWle1vdvH5YitHwul93GjIXfK0yf71\nlr0hVqXt7ngxXQi/JRbT3SPYfqLcEcaKYA/dl2UZvBIniCuWPBwvlPXSSpns\nAgBFEC+GMJPSs1i2DzuKwTxw3XqrnZxwl1DNg8ZrKNzUs7DcvEAEu/P8cAeT\nK8Lv\r\n=rB1t\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^0.44.1","@material/theme":"^0.43.0","@material/ripple":"^0.44.1","@material/animation":"^0.41.0","@material/elevation":"^0.44.1","@material/typography":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_0.44.1_1550617367162_0.21848941663635757","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/fab","version":"1.0.0-0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@1.0.0-0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a96a96f1b3a40a4ed0d3c6d6c1d530f105a1e962","tarball":"https://registry.npmjs.org/@material/fab/-/fab-1.0.0-0.tgz","fileCount":9,"integrity":"sha512-H6/5pZrN09+jvgLyUbCbpCNw6OdluROImB+Kib1XAB1Ktp2ZHAHMsNHbGlKKl7qfxirKAeN+I/OEmbVpNhNapA==","signatures":[{"sig":"MEYCIQCX6BmlUO9uaqjpyLcrzv2y85EDqVBZNpxwp2kk5LETgQIhAJVJGqeB2AbQQ0uImT7ZpU/8jzOjDrUSC4BL/cZs3Y9V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRpCRA9TVsSAnZWagAAif8QAI0+uWFVF6h1Ly8e1EbG\n/rN2cqT0D/tV91frhqDR/CJRHw7M4pYbx0W2jkmOwXbIZhZZBsoPKdbLpegi\n3e6CC8+ndDnVuHzKikL/BQmiNIUZ6JqJozILQFtBPqDSIZKtgQqv5nlgUsa5\ndD1HUAko+bDG8RIov823w1ju7kWZxNARdyyfyiE/Lt4bzWwHiBzW16qtjr/V\nsk+PMVnZ7AU3fK0JGsNe+d4KzBv266Iy0Dqib+s/uLC9I+T2YsuyYaDNQ14Q\ngT9ZUR9HQkh0GmmxNqvh0Qx20ViScxDqYJakSpz0HaJ7V+quPxICdRtCJrwB\nNteLNa6i6DLybZmePIB4kYAVg3vAhQBOO+RMiW5irT1qMSDIx7XoORF2Oz2Y\np3qvt+by6dBb7EqvJPs1FxwvPP2PphJJgXUdU/s6F6/ndI8pHq4DhmKZaGrB\nfxp8NYNNho0/s6nxahJ0MlhoimHgaavAeXGvmiSKqH53QMYa1RRpKLTJIu5B\nm957pjloUAHKgTwvzh4GbsAvlSc07sOpCaIAtDFxpbWgudk7NPLJCnZfi4CM\nxGAzi3Aleo1FecVKxn49FBnzUGRddgyZqLzXpwEcMOtY9t4tJBw9tosYeoKY\nkR/qIMwDlgc/KFjQMG/gT62lsmbGVtvtcvYp13yfOH96nE+6XkWSFTVUNyUr\n4yMH\r\n=6S4s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/ripple":"^1.0.0-0","@material/animation":"^1.0.0-0","@material/elevation":"^1.0.0-0","@material/typography":"^1.0.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_1.0.0-0_1551311976851_0.4906790565806016","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/fab","version":"1.0.0-1","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@1.0.0-1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c90d50b0978e7ab04c06e75d0080732dc3671d6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-1.0.0-1.tgz","fileCount":9,"integrity":"sha512-BR39ILeWCw1/VQtnBnZZJ67PFN/2W0aKnTYn27o+zE/rNfKl1S/JIP4vkX9Biaiw31Py7/aTmO6Z6F30ooPM5Q==","signatures":[{"sig":"MEUCIQD3iOjcDt3/W5NN+0U04EuOxM37FSMEiWV9ioMtgiwTlQIgIHMIeKe7nOfVqzKADnMw0OgUCVcWKRnUMY22fy1DDts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXLCRA9TVsSAnZWagAAw5wP/2KiiwF9SWnU/couSQ3s\nw3MJEfxQs4pO2Sv8o8HcKeoyE7ckxQAF3BjaZ3DQgDzZjXsGG87k6mlYvhiI\nBjvJx9Qu1zGAKl9NjoWdG28hQFb/GMlB3pzgB56Y+Q3KwU/kcXu0YTjgj9Wu\nzNXdXCelSF9oHWyKGzkBX0O/xYnothlMEaLAx9vuE2wsj87ZYvvKEV3e+W6t\neczVLt69iUuotwVNIptx+4/YtlgXxIoYStR/vkn9nflMT3/9uXF6GUl0KCV8\n0CZDtUiHjGfjOhg8KC+qsDGA+s7nZrzTd/E2vrVDlKxULPk2XqvlTZvxOXHc\ntqIGDYHjrrc924iYKd+LlRcHsfNuprxlTT1fqcmd1RdbFJEHnNh5JJbktg6i\nRDXUAnDmQqsZN1jflNfv+r/9g/43Sroma/CAS3nFVUHItSWwLhqlFRV8Lpy7\nH7ntM1rhLSb/xKZfqFzKLJk3gPkmORabVhtCyQrosRRYXJOt6QJhYWDH9JTW\n6sgUw2ZEtwohLlTFXL32vZpTSYSWR3HvcsVejtO6zM/FvZ7rT55aJjh/HYHQ\nNFK0ClH3Ig4h4Wx1LwjKV65DVWtHplxUTEuD7uym7CLLxyown0qpN6yDyxAg\noDrJX6fvFg7j4CwhBgsorgSMjNlXYMalrbG1hb2+Dj+Ou9Kn5cFBGgEhrlfq\nad3G\r\n=+33o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/ripple":"^1.0.0-1","@material/animation":"^1.0.0-1","@material/elevation":"^1.0.0-1","@material/typography":"^1.0.0-1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_1.0.0-1_1551742410772_0.8632836063771905","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/fab","version":"1.0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@1.0.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"febd0f51f0817951ea964065b2612dec44762f8d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-1.0.0.tgz","fileCount":9,"integrity":"sha512-aOwJzcWUQ8AjXaynT9k6y6zZGlb0xH5MpwJCdtlWEmIxz8VxY2NSxB35K9mAjAzBJEJKoahg0FsczbKLZ1xDLA==","signatures":[{"sig":"MEUCIHp1Ch3j/8NwZ3KJvBypAh0N+VA5YSempTYJcZDzSrRmAiEArYVCVv1PEIFU8Jwy6YeV5JAw0PcVU+Pwubys7z+ulUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDbFCRA9TVsSAnZWagAADfIP/2z8UrHncqehGCnt23zD\nWEA7HQ1HNO2nnYkHSsFIP69BR6Mnd/gOkJq83iCafjbyUMVu49OVf01mSKao\nE0hqFlP5i5h+usFYh1/6KqYMvuZCXnnHZiGqJesWtIqZGKOKRoGihFPxJ1Bi\nE45H1FCc5Mfn9ALlwMUX1wgOFL/ryMVPUkLVMVIJTqpvNB614h44qhnzNIVo\nwbbNl0YJVRb++esDCiOQ3OWpowOkdJdhFef3iEhOQaOaahqLBIyA87cR5Guc\nHp7D2XkBIJSgHDMTgaO/Tp7JxM9gddPdEkPL59InZn50Nw3JscgfPDIBrzwT\n1KFxLBdiGSIkjF9ACw7atwj6shbUBpKVWFJWUvzjJ4BZjATkTT9FUotHGmRu\n2fFfq3Yet80oTJKP4On6MarUD66WyJhO0kv6cgcvmwrg57Eb445Ot4r8LyQI\nLPjlmAch1blzUvletlRqoKYe6yxoamH13Wks2X1TnMfyu61KxQrF3ptzPkp9\nZ21xUJMlyF8NIpQw7/gqQJXItCTIGf0PwXOct5fKjdJdomiBIgsZL4IMetzM\nikSQxDKYKciprWKj1aG+jgEpqb1mRF8a8QGdRxffkUaSoYmrcVx3caGgSTHk\nvM6SxJi20m9uH2bEdYBgkzhYLqwi5BFxR7PBaR/TkT2+L3YAvwqCk0oA82jp\npNW/\r\n=v5XV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.0","@material/animation":"^1.0.0","@material/elevation":"^1.0.0","@material/typography":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_1.0.0_1551906500764_0.7143337119754654","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/fab","version":"1.0.1","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@1.0.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c0e6675ecc47a4b32350e51d5e1040439be588c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-1.0.1.tgz","fileCount":9,"integrity":"sha512-tM8Db2MuM3c01gNos+0hWrHxZ8uHi2rrZA8oSDF4z9KMEMF8Il3gkeV9rwlQTKCY25Cl49+YbzGfzZ0S/LFV0Q==","signatures":[{"sig":"MEUCIQCZc6MmM4TeYkkl7aLp4XU+rGCpuqU0khvr3R7w4CrbzgIgB8ZPQ2bSJ21m1/j42w6bejlLGrykoKRGt0MLdEp6/GE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtwdCRA9TVsSAnZWagAAhrMP/RIaMb/xt2FXhn4EOL+r\naYc9ZGI8ugLfSkWMmhGXJJ/WMN1147nCHkrCsZFPxFxiYvQYcKojprSUS1qC\nl1LnAnq4tcey8ozhAyMcZ9444JKbry2FBF3XVxjLc1kXiTcnUyocegn6r6vm\nA72NEz0W99uZqhy98QBufUlJt3MkxrYNswYqLA3GMwYxZ/wMXp247tR8T/MG\nL70YdeLZh2UIr+mmOJOg2bzf8F+tGZMc90oH46TnHSr9cIQX6AAhp1vLMOES\nWU46KR/snZcknX6rhJVIK9/rIxv6VDSP3nUj2oWw6+0imbGXfSxQMXQd5xJP\nL1FVykU/oa6mEmT7VSU08kox2LwBtioyHqkn2wI579UrVULYpldytZvl9FV/\nlOrmw31MYrKgr2q7BOnfdvjtm1MmHSzv4zrw7/5NdfwOovra/kh1YuMXhXYj\nYLOE+yyRK3lPtvpGF3a1vUP4p8JxJaK2/QqdJBf0q7/EfWmAOtcqi2ZRoUKz\n9AwbVzjWXKJGC2LhooXMMwvp8sZ5cuXpnmnjkJp+HJXRXZaACQIPW0Ux5NRI\nsGBb5Wkgi+u/vAHPpsyVJcyj8myvcy2DmUizxhdVThdt4QPfdfrm1EYomk5T\n3U7VsqXa39GpUsgS3NuLUT00QsgnDyJxIk0eije9oVKd/fqEpne7msmn2t1o\njtJA\r\n=9jp5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.15.3","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.1","@material/animation":"^1.0.0","@material/elevation":"^1.0.0","@material/typography":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_1.0.1_1552342044712_0.1218453802400219","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/fab","version":"1.1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@1.1.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37d25f1c48283a19ac5ebb0cdc8a51fc972cb1e0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-1.1.0.tgz","fileCount":9,"integrity":"sha512-oCvo/4TFri+agTkGvEd5lREuwowInYw6OBbwNmGxpWQs4QGlMGHRS9/h8sfMYNZxs2TrwNUCwf/DK0WZEvniLQ==","signatures":[{"sig":"MEYCIQCaYVdJWq0A04nb8CaHJAbhdcHj4P5KZVZ6C1pICuA5zgIhAJ/JW0fq1/Ak610cZn2C8e3N1fMz65ROwL7hC6hHWQEZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzICRA9TVsSAnZWagAAtrMP/37wCUWRQvsZtIYq3fsk\nvaZSfFhap9oEl8o5WERajv9EzYylisBeOgAzrJNxTXPPj5LiqMHkA4bNyzyC\nYfDwZk/RAZZOl1PjEAML6S0wDSLmFZwH+vbeyEAOTfg0+MjixDF9jCj+V+s3\nlswf8zWQWtlKNgirRnUG80VM3893KiyQgHydmeo47nSia6oA54fSN0mhoE7P\nW0ftY0I+vj+Pkcog0CdHvLt6tlrIkX1WIwBOUvPuA1IFgB7E9l9LI1Cd0zYM\nqeBR5K3/CP39W1ujBb7e7DyhQs0ZziI+3l5qb5YxiLgGe4mKAzpmirAmHU39\nk1+CfbPXRd4IOwTYsiyQKJQiKMEPzJ1QkX5D4cfmzd/6Uq4584ZM92/zVT+h\n7KkutseMg/8kwnPovOkDK3WolQN5Fn6ItKNUf656q8OccZkAVbioCECHjgS4\nCJJCtNT92ShjtYLVTUFB1Nq0LFRiRUEc7mSxraKh7KgwMMDg/1RCs1dRSgWk\nfrHHn6UQ0ONtD3EmC0hOM8MSV7DAAF4rA/vDVMa07bmbF1+Vhr88ebH3bBdQ\nBF7coxbAaFfd7kdBuOzXURfiLU6CZ7xM0c0sEnSRt9exRkJFf2UFwQp3sy0w\nRRPO87cU/VeYbQKI6yB+InDRG8zZBQa4el7mI3klYa70B/bYVVRqubrXNRjO\nHba5\r\n=fVJX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.15.3","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^1.1.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_1.1.0_1553628359693_0.584564175834577","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@material/fab","version":"1.1.1","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@1.1.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c8cb818b76ed30d6abb2f667c7df359300fec0d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-1.1.1.tgz","fileCount":9,"integrity":"sha512-6q9F61LIpakeHDninWI4VNLBQhvcyVcS5p1nrPdPDT60IW/lE5iQy7RKivaiMINVaQ0NZDzW1LjCgI5v063cLQ==","signatures":[{"sig":"MEUCIC1ujubniJfMt0EGj4xJy9gzLNbO7J7OE/SxlUbDXFTIAiEA+NeKcKQT7zx9RdGAlkdmApgpdcK0f+LsFku599jD40c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq6uHCRA9TVsSAnZWagAAFigP/2jdapqMMVSIcxvEbhWr\n3KNKHKiSztxov+IfexNA9AHfRu+Vz55l1vUbYyi1r8sGxxPOlJHWstf4H+ge\nfBKKgwkcVi9lacXyhzMBnF4WLdmMiJeWcmtypYnloYRwP3Rq8wnL3ZZo/wQR\nSfYtwqQbEl7Qj3/oucsEyTsccyjSxOOr8BdjhKS+vDauY5FBK1VEsZ2oL401\n81gcfkz/wP/o8+gh9yHqbTrH7+BdIwYRfjOZVAIQJqbKKnM5A3HDs/bCJqva\nON6StoWOA0BlxM8QSn/UAEJEax8zLAQrbUHNWaHUqRLSkgtw/x/+xgeHa6SQ\n6c0uvajbU0qb1224OI6C2GcpbxGfyGSk5+DouY2vAhmKYyeuFi9YMdz6aO6k\nSqsdlHQoxj/SXo6sJ1yh645hVZzuYM5vGCS3nWDBWV6ZoHiDGYSWazMBV+H8\nX3KdEKTSyb1CrJjpp2YRTq/MtgfHVswe4yD/Mgwd76Ta33uRH2wCld0bP2rH\nM9IrpMajg2npFnkYExbAczU5OU/KZBpNjXSrIMs7Wt/2jSviYUfi1d9tBbPE\nqjhAFAn8AyGhLWJbd3Aw5WDhpVjjQLJc30YeZVKt9zdVdcZ5gjUBFYd6f6AJ\nMPnxV7q2yWhGRmmES9bB4KiWFyBsTfHtyIrCCWzOi1vgxGVck2GtEWhFXyjO\n6vdO\r\n=gduC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"11.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^1.1.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_1.1.1_1554754439361_0.8328770891128756","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@material/fab","version":"2.0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@2.0.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74a99a13233756a69f78bbfd98f955eb0f4a1391","tarball":"https://registry.npmjs.org/@material/fab/-/fab-2.0.0.tgz","fileCount":9,"integrity":"sha512-uMdJwED1oAuAPKwB9uUEyrhctpswG7xcYY33+RGk8mb7Zz1zxp2egVje07cyIJwxkWNLsEFuL+lGb6HRD7fLlQ==","signatures":[{"sig":"MEQCIF7JApqG806EdGaeJdNXfj4Hx73AArftq6vJFMDo95NXAiBesa1ruFO4lBMdCOcbBARErOQAZyC9Yz0D2U08J6M48w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxzb5CRA9TVsSAnZWagAA1v4P/2FyFuEMqAmEAQ1gQVNF\nU5hJMqBH9JtAlFc4YhuvZReMGSGFSEIkYDZW8Aziu5OwUWVeRomibqT/GUCx\ncRLrSGlFpSQT/dY9o5+P7EbCT10sjrRKLQXq/PfcCKsr5iWDhsGkQW3EHr3j\nFLwrYh9UTJsmFYyhbPmrZj/4ut09Ew9Yvc62zED/7+zeDuylmegKuZa9egKL\n8BDQCraSOnasrGS/nMlJXIgoy6QCifIgoV7DHEx3/8WnBsIXSDezqqjZ4x0g\nCPFuGnfJ3glSSxROtqwr0wnIwTmMxa8U7Kn2fN2tj7q1CTyPXC2t9FKPCpwH\nGT4NOJHs2W4nL8atCaJe3ThCOLRE/Jtjx7Bd1s1V59yh2UUIAfshjpPGOSb0\no5eIp01J524cggREvk0a9dRFGKgxqVlTbN+GnD1+RFtFLWLZJhuFMbgNGHnR\nBkoL/wmiXBP2z73m+Ztq2pTmFyT3ZuRJAiLWZzew+0Ipu92yNQLT9RLmg1AP\nDUNdZ2bRql+ApJBYRKkUpKzWkq123KTycHc+88Q5v91ElYutkYTHkd/cjpep\nNSYEiySzY3me8NxWVnyCq4mmCycoD//0u3KHV+Kb0A4T6lY98IEqqFjG8HmD\n9SdpAF3rYqemhvFcCQ4PkBSKNw6XIdEGPmxWC/CXBFK5vODa39W+6fjuxwhx\n/QsB\r\n=S00i\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.0.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_2.0.0_1556559608871_0.2549425619865455","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@material/fab","version":"2.1.1","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@2.1.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0857198b3117f9fb85413143fc9639dc92b36f91","tarball":"https://registry.npmjs.org/@material/fab/-/fab-2.1.1.tgz","fileCount":9,"integrity":"sha512-cv9X+hMe+JrxCQGPmrqm/ftvy1cfL338/PP09yB2Wr7W931JxQykwntyuOM3LKLe+U3o1sGLkg2bL0736ccMLA==","signatures":[{"sig":"MEUCIFsfUqRMFbAKb3ZyTUyb4gz1chfRMH8PaIqIbQ/S7wMxAiEAlp5zoW+hLnlzI1xB1YeY+KcID/e7T+SKhlP92jqlI4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1bP+CRA9TVsSAnZWagAA79YQAI3s9EkSa9LGSQX1JvkS\nLPnRUVJTcFiHDkOaFHW0if3AGFwRIFVHRXld/klX65YthhrpyIJKEC/0f8/b\n9yJTJpRZAW+3VY0gDxzGj8Ah9FaIpGl9Zx8agyCv/GAyQO+mhuQrH6HuIJ6r\n34AfVvJBjSHUITi/YPmI+vGUpKRLSRcW83PsoBfz2rxpYGgqufgozUeMo7VZ\nbZvAyMPg0TYtp5Er0XI+fyuzHlAIX+pbUrY/qnE1XJ/3eP8uDVCXXJmp/I3u\n9wuxVTj1rbRHWXraNrMklwV4jlAuK1hRtQlN3ZhWy5Yp59qZhwl/eHVZRnVz\nc0Qd8xw8ooc7kjFiCN8ybOlpqN/6ghv3z00Fk4t2HyFOVWKWhGeqhfmkGYJH\nyNL0wRePMzHGRliIxv/JNUN64IOtm+xLOcP5CBr6QLhIWfUqyAPuI9YhDJcd\nPyLnAbBJeuuRgDqINSPR1Ji9rDqE3OpWpAWAVOQIBojpPVrYQHypC4MONp9v\nS3FgCeYQE3tV3dd2LVL63YM79XFj4Nu0U0Xfxb36Jk3MAvbK0xrh5f3fZaGe\nkYQjVtruRMARaVK/Dche38zNt0ooKuc6lZNr0qvFQAfBVmFyYqxHOvuNM6pg\n5d0YVCriaFOVFmicjXSRbYFe8v6hJHvsNdxEqX+XS1M7UPe+xCp+WtrKxRwx\nxqcW\r\n=/4HD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"11.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.1.1","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_2.1.1_1557509117646_0.699246754709709","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/fab","version":"2.3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@2.3.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2302b6f21bd84c7fa6d4196079d39bf7abd3cc2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-2.3.0.tgz","fileCount":9,"integrity":"sha512-XsRTbUMsH4pE/E8CkpAahwNywzwiz73nyBC0YxhzAxfHVO4oGwjcUsVlnFMSITj7K8aEyD/uMyAYwgISuAH83g==","signatures":[{"sig":"MEUCIQCuf2ho7QdPKF+Wfn/sH/+J8ZBnNxWPS99xoHjSaQJWFgIgF8rq+nMKy0Pk9wODGjSaxo9wFzHsRt4ujBBcILLzNhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7abnCRA9TVsSAnZWagAA5XkP/2xkwD8QJVtVGkdnFMX8\n84TJ4lAUUb1MngOd8Ee2RQo4cqs4Lzx8Jvosapui4mRhXLBfbr71FE7WNgpu\nuDpweEtuBINiBfDbx+py1gRpSFXxNKrAgcX/d+5XuCX9D4CdjMJTAEfSGIgZ\nlaZBpT10ZbN3Y8ezatm5l3oOgob7lfN15GE+AIUeR6eJRMvaW4tufexLBRbx\nDVsxRjMTjxp2ldzpz2qYb2F6mTCZkwgL6pxrdPD6Zc6/X9q5U3K2kllv87WP\nRNTcavNB/0FRQPYBeOapMx///E1WYiqE/TOC2rY4w3cq3RJ9+X7aiBxR6PCU\n6LTLfnh09ee51J9Q+G0OnI+o8sZ67ON7ev/Ql09iCaksOjI+52t6oyBRfuog\nWswUWJLg7E4kW/MknLD0E4eesoN71ycsmx1HPF+UUC9RvnCHI5So4kvIo7ks\naCgv/v0Up7EJ55QSPqJSQJkteWvbdku92laPSOAfLQKSZd+uqUzfLXqpdLv+\nqbJIXWsGos3ZxbVjKcTOgbkSzMn6HtmgZAXbGsEDRixUgXMYQrg28Cg+oS9f\nwl41a4vJw/j4VYWaIb4kwY4FVs7b4+gYkb5H8MNQvrm97VLT2SrPQj0pNv4f\nb5RePnvTHwQ5CalKE0X79zT0COm7VmId5HWYiapIAMq5H9KbmXH6Scm22AFs\nq+Cb\r\n=5IC4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.3.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^2.3.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_2.3.0_1559078630905_0.12395080232769096","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/fab","version":"3.0.0-alpha.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@3.0.0-alpha.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85a1860bc5a00c4799825ecc4d447795c690505b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-3.0.0-alpha.0.tgz","fileCount":10,"integrity":"sha512-qdb/K3+lI5EoONhiF2bvVVDGxSF2+WRhhSpdXBzN8ogjPgweVvRcyg85Fw7hogl14kG8Ily5EAi1Ze+T64aTKQ==","signatures":[{"sig":"MEUCIE3seBHG1pDdjZpze36ugDO8bFAgwC8WcNMJEf9gieRWAiEAp9eZIrpQeS1L66+bGxKor66UuFm6QcwVRGYV55cnQgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":152587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHphCRA9TVsSAnZWagAAg8oP/jfwfxRSEZgALd5d9rum\n12aGD43qKUZioNQ5Y9NJudu+MI9m93Ofv1PWEnAK7S8O7Q+JbOZ4hJBaKCXg\nxjzxf7NPntQMEGPY9fjqcHVL/DEmBfEcao+SaJSapcjQwRYK/8oW4b978Vbz\nBxlwBvtQgGQEEK35BcjmvzTLtLqb1AxReFw5Y11fXngvwe3GbTQUIKzbsPWP\nZoc2wjxo3FcNSkpfuf8xkJFN1+VFb6Hy7TLN8aIFD1D/1OtiZATFd659Z6If\nRhnqw5jLNfAIXgCY8FRTpCfv+J5hbJb4nGfy++bLCutsegtGDpdGklaefmTb\n3POHFz2jCVgYpr6ZB+OJlhoqgYQZDgDYirBnU2J2BLGBHvmfkgwvKAQO2ldr\noOSgEuZdwfqVERp6lfxBRuTOxfTUePej4IHwkL9d4zN0IpWvM2YLUMIk/Cs0\nF5xhQlWt2PybIdd6GBeXOFMu5zJnjN6JytoJXtQS1x5fk3adMZxjMzWNrEY9\nnJNz2k3ukeSVXX11V/lAxma9syybsyK149cSOqAGG+Sr4wIVH2avYIe3H19o\nhJSFSRb5RCWFOWYdtfUiaqfel6s4d0TXhJqydMlUIOOlYCjhxXZ5I6nOPyt5\n23codMHPni3A2ZR6h9j02jiuIVUNBH1gfKxyQC26ZimC4HBU56LzLv0kh8w6\nzzu/\r\n=3uYJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"11.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^3.0.0-alpha.0","@material/theme":"^3.0.0-alpha.0","@material/ripple":"^3.0.0-alpha.0","@material/animation":"^1.0.0","@material/elevation":"^3.0.0-alpha.0","@material/typography":"^3.0.0-alpha.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_3.0.0-alpha.0_1560312417298_0.9188538933384043","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/fab","version":"3.0.0-alpha.1","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@3.0.0-alpha.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e925eeb84b7bb4157d3da6b10a7f55b6e36b446","tarball":"https://registry.npmjs.org/@material/fab/-/fab-3.0.0-alpha.1.tgz","fileCount":10,"integrity":"sha512-RT59pn0jkrwvWXRQntDAQSK7nTpUbzR1l20P+No8kAAyEfdE2JJFDo19T8L6P8FdELEsHcDe17aKcVwFQyQoDA==","signatures":[{"sig":"MEUCIQCU8M1DrUynLc1BXxZ74/QqY5DvDoOlNqNJj2kZi+JkfAIgBiJfMaVBhpuODrTaffU3pIpwP7exIfZ5vf+WTfTfuGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":152587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUw8CRA9TVsSAnZWagAALn4QAJl0zro3ONSO/K0b9EL+\nCAbh60ZlzGTawmqo8+Kcd0WxQcQc5tu7vVsUDzTOCrNueDdKkAlJE2UCaP5S\nbvyqWeT4tEEdPZ8xf9QNJIIYgb+zLOMibGSgKBTNB8JPhwwPjWUYd3g1QYr+\nsfwPvO+UOOP7jjEFM0eER7vR92jzufno7cEIguK2RkEyybOiSQxS/AE6yjfE\n8JauZbei10vVhfjVjEk3R5ypqLXrGLWxiCiSt1Kmh9n0ZpPvxPEsKJgh7Xwb\n1Y7h1GjU0h0A/DUtlAPxkkvVh0Z9jQXozzvy2yoZMto+NkZnvZRvr90WYIfX\nnuCfE4gZVhKaItmC4opYE4D8E7chELYWgo1FR/0f3mXYHxu6AOPAWV3I5qLK\nu45aNhqCagclTSCbrMF2K9Lv8RwPNNHz/EginMNfhSVjeK/QjUnEbOj5qZ5p\nWm2eUScoSztvFq5QLFjyXVALn1uDS/VtsOinWljbu8ko4WOUR8rwZ3ge/CpX\n/KqpOFp+ey66kDXchIPVKpH9w1H20njRwJGOxK6hLP7p/u5fpJ2xf76arAyW\npaw7HjgYfnwPsk3t5LZ8fUNt6su5iiyKXgPHSronvhOk/OmR2NI0Y++sEVnM\n5Bab5sjwNQW91WXg9yRy6FwDrO8QI0Q4r3BHfnT2FuBFp6cmmudg4gdiptGG\n3w7P\r\n=O6VZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"11.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^3.0.0-alpha.1","@material/theme":"^3.0.0-alpha.1","@material/ripple":"^3.0.0-alpha.1","@material/animation":"^1.0.0","@material/elevation":"^3.0.0-alpha.1","@material/typography":"^3.0.0-alpha.1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_3.0.0-alpha.1_1560366139435_0.8641077147832972","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/fab","version":"3.0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@3.0.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"890dce85ca914f0f5a7fb2d583484392ee50f5aa","tarball":"https://registry.npmjs.org/@material/fab/-/fab-3.0.0.tgz","fileCount":11,"integrity":"sha512-XyElWmKcCBF1igu/JTPKX3ga7L2uqG6GVNGT6hfqiq+xD87++FLHy38R87LjPh2ZtRpRxmMHjHvkDpIX7V4N1Q==","signatures":[{"sig":"MEYCIQC7b9pBse54e7cebdEPOBR74lBexDzNP2CW6dtJU/kNDAIhAJzJ7p9ZRz/JFVqX/d2rQW+uLm7xHBhcsgGV166UjcmO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":152987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/xCRA9TVsSAnZWagAAt3IQAJ12d0lpkDVqNT8JfZcO\nZN2mszQCOENlv4DYrBKEyH4QCjLRXZNNqqF6FIMEns6jgbPtpemlUvKMFPwp\nZZr42rz9iZWXQvvPbmfe6E+OT2x5xC0JMNWYnq9yHkH7GYk17Yzz+iw8rD7F\nz+ID+5TYllc0qDQ1p6xyBVg7ZQfn0fCxfDb+/cRDENjSbaSKUBN5nVA5Vn8S\nROTbOsg2oKjfJyRrcMbSPW5vS4EDCtdR2b0giVAisNPNC/MN46hdSE5pqBgY\nVJVsw3rBeVCQLWFNU5Qyqwv7B5YOUTsnjTgEUP5NbrdQsXcPCveDLkP5bRzn\npuwGsA+nXM0i+FMUJ5p0cMFRTCMfs6WkuIUY1+RhYRLrBKMLSsWJPpgyU7Q+\nrwXpN3vu6NBxKwUNRxcf+prQEYu4E77DdDtKCNrM3h03zaSXeSJlZj2wFVO2\nQIflAMCVx3dt02BSEDojoYrav8bLtbuht5oifnv18Dh/23oozPVMOJSBbCWJ\nndTOAZWbpxfVgCtctYvqM03O8M9kjs1HjoDzeYqQq7sT1kl97AsObmVjpk6M\nfrV7Rd5N7LM1JChyGMhZNStF+OudmQYLOTy/cRsPGZtiS7jAokw8TTGn72WO\nlDBiXJZROvJx53/yftMloVMjKPzFPg5bAX/xzredTLb/RF0M7spQ96TuVbiV\n8+yE\r\n=O9e6\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^3.0.0","@material/shape":"^3.0.0","@material/theme":"^3.0.0","@material/ripple":"^3.0.0","@material/animation":"^3.0.0","@material/elevation":"^3.0.0","@material/typography":"^3.0.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_3.0.0_1561501680463_0.6943846381491021","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/fab","version":"3.1.0-alpha.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@3.1.0-alpha.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73e1e0ae876b963f1e1fa89604fc1676c319d339","tarball":"https://registry.npmjs.org/@material/fab/-/fab-3.1.0-alpha.0.tgz","fileCount":11,"integrity":"sha512-3xmiYd51aqqRnZ/gFiS6FCtQxf26nZOc3SCwyU/l7XJltfRNdYQd8OW3kyHjfDSKUKb2+L/fI+UrWwoRdRS1yQ==","signatures":[{"sig":"MEYCIQCbIc/Z/FBwnS9MmX0Gas3xjAfHJE1QLuV3LCGrDRrKiAIhAO+O/M7+ToqBWTyhvM97vflx4wee/WRxetqVCrbHSXYq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEtCRA9TVsSAnZWagAAelYP+wXTicAWKgYj5/c0ZagR\n3LN5f5Al7KJb3+Qj+1drN7/UUk5dQyYHQoBFdct1WgJXxMwyIKLRmO/ogcxs\nsiAFMAva/GRF3Ij/aKoDatOghCh+v6ILAVMMlqbzU6wl0lHLyL9XK6ouydyE\n14gnhg26Z/thBLESGSfI8yQhrYtvzKBiH8CeXn8R7nBum6ff+R8lJlc2fNgr\noI1mfOoCdxHIkU2LldgONXVzIi5LVGlaJEDQ/Y8qG2Jgg0Q6yoOBCy/nbZNZ\noDtP7RAnMTHImf/uf3P1q9/P3cgXrIa/I8OtcEjXnECMhBRQkKjoIJhqCD82\n5GHUXM4iPlrsWiCv4WQ2ufymX4LYq/FT/A6g02NGkT6TP4GCK0dEFgu/iARu\nxI0sLOWhRkuh4xCyClwmnP+ubcWhL2fbcTlGjj/kkqRl1plWcxS5Yz/Y37/4\n4F1c/vVZkJWGimuAc5E+A8ZvEMAe+QMRgBEaXNlfMkmxmA4hv1QyGp/gtjZY\n+LnRx3XTTxcfGsQ7FsURqLTx3wpOGWtIxcC0cPJhg1nZr5A1jfEkMgKtnV7/\n7Xb+imqEFTFGLWI1cWjbk76MQs2xLpEC6VL8rerDYeI+zajqSPwU4nkcgaG8\nhn9XEZi2W8cKV0K9p4B06Dx6y8ESN/v6Z74QOlMr1w40paU8zznL9ZBF7x9p\nOAM6\r\n=4Oxh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/rtl":"^3.0.0","@material/shape":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/ripple":"^3.1.0-alpha.0","@material/animation":"^3.0.0","@material/elevation":"^3.1.0-alpha.0","@material/typography":"^3.0.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_3.1.0-alpha.0_1563283756895_0.687559840297004","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/fab","version":"3.1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@3.1.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ea42ee0e351b94f8ce2510bd292f7f9d05ef6eb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-3.1.0.tgz","fileCount":11,"integrity":"sha512-/mYsi9u/N7m9XlRR7tyCEh3WlYjrUqKS9FjxTdB08r6v04bTK5G7XTAtnvPrW47QCVWV0iL3FM2iwO0sVXqzZg==","signatures":[{"sig":"MEYCIQDCzQHX1PQiSOD93mbJUxtAvRk/ukdcMs+GknJTVF7n0AIhAJVSVsNnPgEXvVqwetQWoU3awS4gzKExxsh2T5ZgtX5A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":152041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKICRA9TVsSAnZWagAAMk4QAJvJTAERmWS7O4qJf/0M\nRQCJYeKYXPob6/ulZ/P60k4OJx0eUv2cpxtPAutdJGOMeWJX3XlqJlN18X3o\n9+ZUxvVePI5fM/wyF3Y4hgF9t2Nnnl+kDPh+OYIo+SMBvxcQMSwASFUTIGYd\nr75DvVYoQKPRi7CB/1WNC9rKXwd4J60GLYenhiMHx8Rg185J2fTdmU+65TEW\n5r5U9S2nGwMh6BFEHjN2VZ+/+HCvTOU2Xtboa1TU9iwIBLnfRJRPmf+ESpAl\nF0GQXCPGVB+vV3eOuUY41lEFJ+CPsSJJO9slkDbfFUL3O0jLuboxtzL6ate7\n8i2b3ZqcLqEJuSFtaSVCpUEIWY4HjFZCfRop59PRyTCiwTnxAcFaLHrAiBYb\nUgpbkSMTSWLSAuo6IMK7Pp7AZEQyfIzh/of5pW0mN9T8wup34vl3EH9ppVB6\ngy0A3EFbQ9h4GAMOAjwkxMRjR+o9vzfdRUUxQpSzAZI2xr0+Qx6Xqkit5lOU\nff9lEmSEie96s96Sw9h0zuT1a9hDpGrfMp/aowN7U2cP+lLRBIwrh+H3lhkK\nLTYugpg37CJ/BSFnsQkc4LdPDYpl+Rp7HvDbIpb179o/kDPNUfaMS2v3i9jy\nuhev6UwYmrN2GK3bOBYC5Xv2jhDW6fdBA1j2Xm1eTmgCuvXcx456aG+3IjrE\nswa/\r\n=7aXM\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/rtl":"^3.1.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.1.0","@material/animation":"^3.1.0","@material/elevation":"^3.1.0","@material/typography":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_3.1.0_1563832967482_0.9607346630707405","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/fab","version":"4.0.0-alpha.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-alpha.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d3ddc7412bd821658b0d34fc0a3265c3cde8876","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-alpha.0.tgz","fileCount":11,"integrity":"sha512-zS/9JZp44AYG0OqyPpr0cMRZF0T3DF86MxOH9MuPBVw5VUW+TV28TlAy2fceNQBsBYIfj+9+YiKl16XamEuc6Q==","signatures":[{"sig":"MEYCIQDBfhLMH13CrWYNmkcpTgS7862NG18CXF8ATQVizS7rBwIhAOUrs/lPRWm6tpOoKIZXoNII66dcYbjutfgWCajKduBt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4PCRA9TVsSAnZWagAAmTkQAKUTFJBc6V+L51tq2xcw\nNstH5FU1HTcKqcHqseh8iQJYBqtGL/XISKyRlcUDyO+QeSnMVCyKyGB+S/IV\nIuxTWzgUfH5FkNZna7EB97ejSWc6WiOoptMnEsGULkAiR9ByPl6tSk64tczk\nzrkzQ+Ekx997ET4TW4A7NEBpqXNP9WJNPPVg3qZWB2EcQC1hx0+POcpY7+d0\nqfYkNnZS0ZRDZpLqSVjq3nlZAeb44SeI0kGxkOvQpuUFuG87PpPo/hLEi0ww\nK400xPZQykFohFvTAwZo3VEd9zRyxo10X/fnhhkWoYuL6krEf/zM1FxIh5Ba\nSDuWUMs8FIrSIQy5DTn9+mviVUoXjR7hXIsKUctiN1yU6DzvKhR4EZ9BbGCh\nW29qelhK1gmyfI8l41EnuclSDsgU9bX4eVJD659jPD0LgW6+3x1IRvJUe0NL\negmf5Cop5kpbhMlUcAyxVuPP3rVtK0nMkO//dGgK2s6A8Y+HTy7DKKISMcSf\nBfeH8LMbTJ2O0d6pxMKbTOtkNUbZfsQ5Skz1TCjEV4MmUc9V4zmvtwlMnvMF\nEL9h5AqORMf/uJHM0RCIxr0pRK5URaLsVeEjQ8IT96Z43IJthk5otcH9/Ilr\nxtJfzVwDHsSMV19RwDljCjmsKWm/PrpS5PZ7tVCUSGdLnvA2BNbly4FUXVUq\nWC0H\r\n=Xd/B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/rtl":"^4.0.0-alpha.0","@material/shape":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/ripple":"^4.0.0-alpha.0","@material/animation":"^4.0.0-alpha.0","@material/elevation":"^4.0.0-alpha.0","@material/typography":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-alpha.0_1565212175153_0.07058603544605857","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/fab","version":"4.0.0-canary.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64107657d306b3d698ee924053fb18c6688c3b47","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.0.tgz","fileCount":11,"integrity":"sha512-Ykca9LrX9q5tJBkopvn11Nzxukmyo4hOu9rKmp72Uaip61s5+WzEP7KfgVZnznVcuVVhDEig9p53VrdiL/u7Pg==","signatures":[{"sig":"MEYCIQCZGYQhpsTSVlGqNfDKvIzGgMJxJqnYkq9bobEvxEo7fgIhALis4pvnpIEey2LBhl9Ms2xuvJWiGrkpWJiE/3M+Vmot","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":166324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEnCRA9TVsSAnZWagAA9NwQAJvFpC6ivS4Rra9uCazN\nncTQB54aqj2hZy9DPxd3aXlXxXniUi7gEt2kE5J3yiqF+k/n3DBBIoLU1vRR\nRwt3/dPH/7UdcxU7euMQj63ArJIiH8rwURvH3GcDfWLvzmGYKDYrghWzz1xE\nWUEitscW7HfL6x7KA1QY92E7ODoH4f7yzOV7BhjNEmEX0gCruAESM22LVm3T\nFiorD9XqfsWPipIe/kuJ4iX3Rm3/78bB4BYWoF9ToluDBLUBurBefHPM61Wz\nhxXQi/9RYcu095osAvKsHrTyFHuUmEuaORO3FLae6zEBZxyF9C9+fkn7EH5e\nWTli2Z6V+8n3uvCmbvfD77/9jjJ804z3d7T2IoBDgHuec05BnNcOhMi6KViy\nQcH/h9tjK/A4SNKR2+FGm/0DScPNaoT+gRxIknwN75lDAUo7+LAFgoSTJoTc\n5zaEyeLwnpjRwjhS9jzAVNix4B5/YW6ZeDKLo1oDybHb0xPufiShU1b5Ub6m\nK0tLrx890V1e0sWjUuYQgVBZzw6ffgSAyZLO6L60COU45hH6kUveaKxxgnii\nLTkUANXeMR7USHjDyNRhiL0H6xutkxcBhF9AwnIgor1xzYlSdOdhKWJqygjD\nfvpPP5WNq0GgasZC+DejMdVNIGBCjKpTH5OWfgLP5AnA/ZjuvRcaXA/+jd1c\n6Axr\r\n=BeTg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/rtl":"^4.0.0-canary.0","@material/shape":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/ripple":"^4.0.0-canary.0","@material/animation":"^4.0.0-canary.0","@material/elevation":"^4.0.0-canary.0","@material/typography":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.0_1567658279172_0.6214853350178169","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/fab","version":"4.0.0-canary.1","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f07793e587809d7383ca11a8f42cb25098488142","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.1.tgz","fileCount":11,"integrity":"sha512-Hs/KFfDeN4vPF25PeY/92zjvAbqIU4HLIealwsw62FlbFkrLpgi4V/Xczvgd0E1Xr7WCWvJSjLq0WeGRgz/P1g==","signatures":[{"sig":"MEUCIEzUbK8NVGSlJSmzyKE+eUqIFODLbZq8xxWnv/R8m9mVAiEApb3AtcIlGP/I3a1XdCl57Rsh+wEYWPHkgqL54JIJbfg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQlCRA9TVsSAnZWagAABggQAJa6rNWRreLSFWLtkxwY\nlstvzPsf9ho7gtm4dGicJ8uoXK4lZkCwox5of7ZsOB/ysZW10jHjJJ35unH9\nxqWaqBxNPdIJDN/CtBSDwQFf0Z6A4mj2s2bqANq58muisVzQ4AX8iC8giwfa\nSx0CpoER05cmov4IKvLdAuKRj+lUE8kTbg23iCcwSIczUMYPX6+nsPvIea7/\npSNG7nd3aM3gh5aT+7NrO0a+sJ2WcDHZltlaOeV+goa669KrKx0nGcjuyUAm\nFaDiNuRg1mXj51t07QiM8pODoi9EKJJ6GokpZBY03DV5vAqAXQIJSFxQJ7IR\nRbwu9GSDu//dR146cp5O0DgPtuYGridkG7mYIxxhSlwVGn2vyoyLgzXgN7C3\ncWczmeZk4JpxF75OjcUn9ZsH/IWqVaYP7NR1SDCJwKSykRmPpT+fGDYd2F7I\nNgglO6jG8czfAMenl2auOBdC1O1Dn+ZC0BBAylkd+VK664CGTshuV8aCYROf\ntUqPsMH35n9JvWweLUnSqi6j3Na1jstO4eeXGkAxGfFUbvxrktoamS4Q6seq\nD1SnmpMOP+HbykPQ7tmVyyz29TKkoJ2SGABSV1DwK4ndTin3eJNY4Ar3o729\nWTCeajdN+xMHJ9T3ocX08ktMxJQlRXOq2q+dzyaMeSDoFCJFVr33uCmat2Pl\nvxSC\r\n=JdFJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/rtl":"^4.0.0-canary.1","@material/shape":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/ripple":"^4.0.0-canary.1","@material/animation":"^4.0.0-canary.1","@material/elevation":"^4.0.0-canary.1","@material/typography":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.1_1568060452789_0.7405475770529826","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/fab","version":"3.2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@3.2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"193289ddeee6e4ed6ad37809c3fc85bbfd2c462f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-3.2.0.tgz","fileCount":11,"integrity":"sha512-a/uPYDgIFZi2PpAV4Rqqnu9AKK2fA6ydSAVJE64Hs6isJ+UQUzGBvimOHy/DHtFmLxZJKuyakJd1Cq2jDlgXtg==","signatures":[{"sig":"MEUCID7GfRtzrB4cTC8a+Fctgf/jgV1CM/LEwCQj/vYmpElqAiEAxh7PkKmN9UNyYvrjjv3lbm4FBTRDMFkolD7G6vcmSpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5iCRA9TVsSAnZWagAAO4YP/j29nVqRPpx/TvYH7+M8\nQ4uXdBOd6ABFbD6aAzqHJ73PFGadFkYqQgJ9R4NoYut5D7hFW0dgVm8F7xy4\nkk/vq9ajirkla5SiQVAksrj6qMqbmiYVdWA6VHBitaClUKMfPBFh2DpoKBRU\niy7NVv3mAWwCzwsVVDQHH/XsW+kAg/0i2MLAKWk3XuL0wON0yj7ZPkNSp1ov\n02xTjpNdAgS8hu3nmgLstRM8JxsEo9ZRG4R7V6ZtBsUigGCi5U5OO716I7Im\nUekfCVRNlQ1RaNgKulA/DMELvWIm32e3D+48WZ4n7noOFw28QdnAi1aP4qMs\nOjn48Ld7Z75Gp7AUmYGQRtjggkKq3V4uBjjwgGrhqHWnX/UqoOFqswdNq7+N\nOBeXn5JAlXDcZ6CXTIll8brFQmkZT5fodEk4zcpsVMb/pX1fmFBaWAfi4T2T\nLlbbCeWnfWAFn0SnnPXiM6QhQrmkQuy3lLtugX79Bp+5ewIeTXaJCxxgFt3j\n0iCCDOyhMsHRxgbgmPu4qOAed9ek905cq82swcAKyOf+48H1MyMifUtSOnBT\nccsR5lnVqkXi5srWT1ecs6wwhKLfMJy9JgAmlCX6Wpwq794CelyhCfChvpEH\n3IJ55DIlygJArYk0HpduLp32llgcGDEF0oG4nDdih0NOt2qRjFoDwCbbmb8+\na+nF\r\n=q86O\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/rtl":"^3.2.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.2.0","@material/animation":"^3.1.0","@material/elevation":"^3.1.0","@material/typography":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_3.2.0_1568325217847_0.9679851003272135","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/fab","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.79d881baf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75199b796de682b2a73e95313e794d9c81a95d04","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.79d881baf.0.tgz","fileCount":11,"integrity":"sha512-v6b5dOIKRVXJpFYkoRPv/m+A2NKiFnxzC227PaIAVYR6furQIPrEXPhAXDS0Doel3x5C56EDyWv/qh1vP4HStg==","signatures":[{"sig":"MEQCIHXNr4LwWKbMQyyImhK7C+IAi5/odgC78c5nGMPi9mxyAiBTQcBvdzf2cXdKI0A9Q6Fbj6ZjGFJMU80NCnJ4RlkNZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":173940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev03CRA9TVsSAnZWagAAkBIP/iCmSWbWCCFfkyztGszp\nLNF4G3uNIXk1NVpbd5d544rytQ11QT+b5CQuadM1HhToJZVw2cNo7V+8jYzm\nJWKYrkdMj/9Z6tjr3ToeSxHHddh5JaEdVNHZQa/Mog8RirfTLkZYyiEJl0+b\nX2wFCn3G0ZpDGEYxIMslHY7PwKmxwOhYsrrY1OZTF6LdQwRq+0jI2KfjZ5Oc\nILpyP8p1xn/HBJ1/42Oax79wxYr1PwUvVVKTkJWrYVaV72ObnRFRsO/pKejP\nsYlF3XXwc2Lb5Yo9pWbWKDffPmyThhxwcMO8qOQWKl5wCMTCIShDJCsKLAW0\nMAHR3ivZqklRG2bLdfTX4A0r0tMFp4ByYNzI+YGlagX2NfXD8TOrWoS8U+8X\ncb9TXJsnlSugK0p3pF5D2MvlaRJND85kM9FCv+k+Qbfb5gpHZbYro+pd3z/o\nRIRmHrGRnYANGEQn1XV/ruFWNCUzaeizKZq3/OzcRckV+E03tS8YhPyfKTHC\npkMLJNLfSPu7vPKoB0ERblcHAN+jtxxavx+R0pz9oMxjhbCresu+UIBdiIne\nMrCc2IhgrR9wj5AkxpfCogM9LlefLG5CSDSVTKEow098L6SVMvmWvtufi2Tn\nLgNZ4mnjvBnfSV9rUI/CxPl8Y80a72kO9yD2Y1VD8maEqwtwRS4vgFGbqwlv\nyyxt\r\n=vyKJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"12.10.0","dependencies":{"@material/rtl":"^4.0.0-canary.79d881baf.0","@material/shape":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/ripple":"^4.0.0-canary.79d881baf.0","@material/animation":"^4.0.0-canary.79d881baf.0","@material/elevation":"^4.0.0-canary.79d881baf.0","@material/typography":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.79d881baf.0_1568341302099_0.5852562249181401","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/fab","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5d56bc7d9fade87716866599b199c29123520c3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.e851d4f40.0.tgz","fileCount":11,"integrity":"sha512-9Zsbv92u7twg2RxCKQhoWwT94Ps772f6daK4uZeIqsMCYplEbR/955WxpmqXlU+htX5hT9bUP0VhWJDqXQTrNw==","signatures":[{"sig":"MEUCIQDN2mJpqdpp4AyjY61pmIhJTrM3Kgm8okWcP0ZSgfDylwIgaSk1gbTM/GlqdWV7gD4UOZJ3YFcWcnq6Qhw1m6XM1dc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":180948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexYACRA9TVsSAnZWagAA12sP/i8s3XRGq0A//VFOhTU0\nEJCbDi4pr+4BRmaZ/c4rBOJutTNrL+ZvuG9rJ4Y4SXC1uSySyWtRfAg8zsOe\nDVbLFNhWj+wNMOzwGQTLoKtVgVbGmE/2UOgWzfvdBKQF8uO9mdr7U5TdmovG\nMZv4NQ4f0cP+EGzD8kV5OK9PGxmuar5IlbT9WhtVCCPwnY28/P9LZCqAc83d\ngFpR7kc7xM5KzJexHEvXVwMcfqpKBzenrYEFkWFSUifSXgDwLVodtHFj7MnM\nJTJHYH2wOebgm31poBWiiEJxye3J6hhgekMM62BaKcmUAXNTS7ncR/YwMWlQ\nVntwGebEgbIeIQc3YC+iopOu1x7pwDQVExV3G8vKwRDk0jhY5A/Fofkfz0wf\npsOMaQyztu1PXU0YzloIEv8wLdXNV0PBpGBklQDqrZsO/tIB24UOWd+UrRjZ\nXN7Mvt9EP/rkyhCiwtz+0UofULaYG97fyny64rsAgkRRScxn+yqMkhqNYzB6\n8g/AbswS48Se5nhpdjZB6ay0MRkcVdz1fiOkqHgNX9hN8WgnKSQtX7QtoSgi\nNlcgtoQc57tffiSN2fbJpPh/7BsuSiBR7GI1AkfN2eeVy4VidLfd1arUFJBl\ng22eodvOB4dm8mgEsIDqt0xirxluDaAdr6lOSKsFg328mu17wRuxLkaFDPiF\nNMXH\r\n=ScLt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"12.10.0","dependencies":{"@material/rtl":"^4.0.0-canary.e851d4f40.0","@material/shape":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/ripple":"^4.0.0-canary.e851d4f40.0","@material/animation":"^4.0.0-canary.e851d4f40.0","@material/elevation":"^4.0.0-canary.e851d4f40.0","@material/typography":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.e851d4f40.0_1568347648344_0.4126024446287717","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/fab","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.905884690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6ca3af669eed5f4550539a69877b5ebd6a1788b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.905884690.0.tgz","fileCount":11,"integrity":"sha512-9VIrqdPI7PMkcEl2kBMg7QyCEHGVPLOxqEQYvIC9aRbUFakiKBn9VrWSw0UEeHadFsbGBKdvXvB6FqsXGO//aA==","signatures":[{"sig":"MEQCICZ1EVBKUt/gu79XQocO1xJYDHh4dOW3SRNh15R/Ey6zAiBzoO9F2xKS+6EgfjJc1kxFFVGMP6DU/VsQ6fML2UrLpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB9ACRA9TVsSAnZWagAAeRsP/2eqfcJoeUPexu9bn/Ff\nZcH9JpWyEeTumt/OEc2KS4pifelZz6mHpLCugYKQhoMQgTk+uJSHCFK5pva6\nYEYR1NdnHNRLlwMeA8KFt5RTqxIV2L6wln+cRZ29fRJh/VZPDFOdT4dskgjg\nA6hoPOzEAM4PNQitHz9gr51w5fIo0tj9/PVzg/5CRYKD9kbq7gcqygqTqXq1\nyDjJoZSWB8lmFuf/XuyaswdYXm5SRn3bC1wKjYA7/WwEJafO86ZgdhtWo109\nu/68CAf+7jUh9yz12vNsMoHdXjM8sWSyFesOyaJ+e2qP9kLdCkTGYJveAgK3\nHc8tNKiyNVbTfCeHz8eEoCY0Vtg9TXunWvo8aStvj1d0Uwxegx42QcG/dbGJ\ncnqwlYBflx8LBrO9XeW1vUSLb7KbyuYrZ5nK4kWdXtxZuVdk6K0v6cjOai9J\na7me9Jf2VFF226DDi+PhHVzejGC9gPBAAaFfI/Orm+pX/fBeYHH7b4LDk6tR\nstF/uRlJNJcA5HZFUxi6irdyG2d4DwqGB1c/8a0bOWkIyS6V+po90RA4CbqM\nvLViY0Ub6wpVpArD4UBXd42AaMk7vtzXWfbGPeTLR7ouF4ALbokwohE0CD/n\nzmRuBqU9AfSBujtDb7eNn+xaDmEY+zYebTut1RmXJPV4xXsmLhx0nym/aRMi\n1N04\r\n=bH+l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"^4.0.0-canary.905884690.0","@material/shape":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/ripple":"^4.0.0-canary.905884690.0","@material/animation":"^4.0.0-canary.905884690.0","@material/elevation":"^4.0.0-canary.905884690.0","@material/typography":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.905884690.0_1568677695940_0.49924303584591323","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/fab","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.199534d61.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f24a3a13bbebd106af0b6f6a616b29432d660b6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.199534d61.0.tgz","fileCount":11,"integrity":"sha512-HhB1+y/rf/RXTPPO9oc0cbgj3UhhX3sWvnFWK8bHBeAABWMCbvWmuUDY4Y1M6JG6VtP1Evv5KUh5hfIHabMEdA==","signatures":[{"sig":"MEUCIQDHanggC7Jvctamh0KRPcASqBxJQCUEIkS3Uh1kRddyhQIgXaPLFMJdr8dj644IMOsmWPRzmrS3UauiKMthvfMTg6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlu6CRA9TVsSAnZWagAAgcMP/jtkUrX2qwoUyq7Fy0zP\nQse1YJovEI87X4W1vpDXTGoVrvIXjI+uM8uX++FPt3YrfEnQe5d1PxuTYaMY\nEyZl0KgC6/fIe4Z/fLM+f/ae7q354Q39ap+XxY1qGcW4ynAcosno0kLLVzVW\nToJDaFpemv2DPkRM2meS+KigPXHZhy/dNYwJ4UEp0u+aEKeYlFvSKT4uhLuh\nWi/YvYEFY/EnvPAMRkrpDefg6QjfnDYsqZHajDB+M2vOrknDExgoMTuHTuVI\n324JF+IXtEkXX+tjYRE0SsrD3b5y/2V4JskTq2JgEmlui9Ok8Wq2Go4x0e4L\nSoP0y898XSMR0YDFWTycHfUsGo6fmCpYXCdBZWgCxV1sFjk4/W9X6mx3C55u\nj6xZsYBRsG9hBYRruT7BE0a52wInBd3qEA6MfORJCXpBMYeZBzcZKoMEXUkP\niwxTVBSo3i/jKxN8eOZeFhRYQ4+deKiWY4kOGV4qn7vKVeqVEn5lQY9SFDuT\nefDHLmCgSe2F1Pruouf+ITvN6wCdD1y85n007pI1fCFcych8+ZnxN1gH4Dvk\nNipL3gk9cQuVUt2Y63gnsAa2XtjJ7L2fAqz8kE/FXD+BtfvvGkug8r8x/BoO\n+oDf6eKh/EUHJh2fb7ZWtaAvj2irB7h4/V9ZJzHFNfElpQwlyYV2hBpgQTsy\nrCGQ\r\n=9tXj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"^4.0.0-canary.199534d61.0","@material/shape":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/ripple":"^4.0.0-canary.199534d61.0","@material/animation":"^4.0.0-canary.199534d61.0","@material/elevation":"^4.0.0-canary.199534d61.0","@material/typography":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.199534d61.0_1569610681637_0.9573474779586986","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/fab","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfe572e39127e50092749682d100cda2d335d1a1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":11,"integrity":"sha512-RHEuBckWB3C2vun7QvL/OlIA39gE6BK8EIocE4hQGo5BfYVLNO640b1Tn4VRHYIiI0vV+Mj2onb1gGzRwn6VSQ==","signatures":[{"sig":"MEYCIQCd0PtI0PLHm9DdTgCTMowi2urYwKZZpxNsCTSTmwqbOAIhANtuZx6xiQ1cizVrm6Hu/mJbFZS2322h7LO0EoirtJIQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaTCRA9TVsSAnZWagAABpkP/jAgpCMLqHIg7RAmuJXr\nO2+gY7ZgnZhGLpu/XIJUGR+XnioEYwT9FYtHPWj5vzCLPMbCwUgtXZSAJ+R2\nvNOnEUkkhxbDpcwFay/+EdCmMz+c+IdtfC4MhUR42tcOTYFwM90200PVuNWp\n72O2UJumIKRQys9bi38/oD9KpWsgeMk+OeG7ctJUhF6KHk/50pOEIamVxtUO\nSplJ6HGiFBiyQMHfTh6C/3krSbEKBLJX6V5X0nhpOpf7p0S0Ohpdp5AR5qyO\nm+zgFO8Gz5X5L9jpmxnrY3jiuUEsv3SVUiDvc4LOd2goNb6uGnJYETIQc1sm\nkNYgz96KdPKfcL217PrGPYCgTrSaUSPuuPYAzORIHvwAwPV2FTdOL9BG9Ka1\nhhTD0+SZyFoqmHZOYb/OtybrzlyfgjA8Nh1M7U4V6+VfsfHTBpwdb+RVOVkB\nYlByXYJs1bttUshNNHCwWIo2AHU8f2CuU5kQ7h3xV201P1TUKi5NXTF8UKtC\npRgmQtccLzVgSZq8J5EXqs/HYT182fNmxVGe/kUDLjpKnGhYQwYbUv5hheRd\n61xB5tgmO3RBjxXSB9zOqBxO5qY1fjvt9gSQ3WzRz7GtrWDJJEYsoUAGJ04m\nC52tfpsgwWjtr262hKvvtVrSBtWWK6SuPMDlrKE/il+6EEywfMU5dQXAh/Fm\nOBHs\r\n=792a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"^4.0.0-canary.22d7ad2fb.0","@material/shape":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/ripple":"^4.0.0-canary.22d7ad2fb.0","@material/animation":"^4.0.0-canary.22d7ad2fb.0","@material/elevation":"^4.0.0-canary.22d7ad2fb.0","@material/typography":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.22d7ad2fb.0_1571165842703_0.4589734631885922","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/fab","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.735147131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2e4435ddc079414eee2a38e672dca7a3b9f3983","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.735147131.0.tgz","fileCount":11,"integrity":"sha512-Lg3yFRlpAeDf8qFU8hD9PHxI4SGNGz35fmc0j7MfzzWAsd6pte0/cfl14ZhZ0JpR2t1WFk8Qb4yv+PJK/yB2eA==","signatures":[{"sig":"MEUCIEhkhVBSNFFpHuTWGuda3Q7PgI030NtMzwQh+AIyecLVAiEAj+Dv02YTnTF8H6T4ubvWNb00fzOCj1p/F8djgzhXA3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEiCRA9TVsSAnZWagAApbgQAKHy+mfgHDXdged1/I7q\n3pSHTV0Fif///my+IinYUDGcAtky2PCzH/4Ek9vauN+My7bSuF8Zsl5Z8UcL\nirbwD04E1zBfDRolKYGFA7Oo0jOi+jWhE1Tbc7cdGWsW8UW73L2uh6Om5HOF\nYXLzK268QXu/8lpGaA42iIOb7MmtteLh+zU1c2fLlUUCRbijpSOpMshv4U7R\nJvQ2QHwl2isuTt1XR+UQ5IrFnADydCI+yDDRrkt0CYwjROmheTJHTgQDS69f\n+OBRXeJfM3RpY7sDh0bTy9nsvodd56lWqLstEzGe5zmP7isWX//0CNvoxJaW\nwDS/C69/AV0NeYABNnglbSOS5v/M9Un9/Tuwwes12P6ssALEfdhiuy6p0VQN\nTbvPy9Vs3t8mzFFztnbx6dEXYhBOopkdK3FKRtEzuBF/DoAxM+Ta/bIhcB77\nlD9735Q8oZ7NElv70Ns0R328tlgEuaTdY/LnTkzhPdez7EG428F0+Jwv0Tiz\nLUWDpS7nRviE7OPJlG9KGRums9Dm4rrHXcoZ+Y3XK4k4EHiOSKp1lGly1rBF\nkD5aAON6BvapSMAHDWd9d+8c0HAsPBM/x+Q56bwvfOzwZQpZXYcVO03NnfpF\nWi+C0/brJi8jrb1MuGip3NUYZ7g1s0NMfVSugdBRID014HQlRLzO6dQdQ+Oh\n2H5w\r\n=U+8/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"4.0.0-canary.735147131.0","@material/shape":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/ripple":"4.0.0-canary.735147131.0","@material/animation":"4.0.0-canary.735147131.0","@material/elevation":"4.0.0-canary.735147131.0","@material/typography":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.735147131.0_1571189026071_0.10839683620702423","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/fab","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cbb96d57e8438a7daacbea0237e965754981a2f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.062ade5c0.0.tgz","fileCount":11,"integrity":"sha512-sEnBGpTYWUEkLUG1wQ2heB2+QKq8hfZl3LxWS2on25unHDV90eNQMvlzveDkYbW6NtTT7IyiSot7VgfCwbS4bg==","signatures":[{"sig":"MEQCICVjW+NjcJk+6gk2y+pFyMuibxILm/OkLhAsmX1gwjq5AiBoatZOKXUgKzlC6LTNUuhyZgZIdibaegLHVdN2Y+WWkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp713CRA9TVsSAnZWagAARiQQAKE+Azyz40wxweFwGKhX\nabgoG97U3dTgZarLfQr3jLQnyFE6UvRPpkwR9dm3hmkB9BcYbfzQTVDQzPHG\npdacR0b9ek1AKKrOXlwUFGsOiYNGEoXNL32MPzAchtS3CEebgLNLJeaoszxj\nDpeZaJxZQLPMkCFR2K7TzjMRgxO56zaef+aQVHwjSmO9gnrJwcRQ7YoErw4J\nAS55ukpqSMQQA7uV7uL/wnAzOiGuZbuUV8WSb5L7X/3xq1o6/bf48hFLhy0s\nmbp2tl9JMlQWVSUZZ4QLqMr9TFRx3QcAAZPWwT7hjTt+3LEb1ErV7Dsgdkih\nOxhpTnULZ2NzFHE7RuMOi7Db5ri7pYApfFFnyiFYzy6PiTXTKUiCNQXF6qhp\nQg+GCyGtnN0WRoPHMTQYSlWv6EV7z2iFKyLET5TaGm7vF6NLrTPh6ZpaeEHG\nJajgHDaXraFkQ5jVpo4/VhuunSz/JqE8mZedvfXTnyGsIr0Y1d9NvSCpA5fv\nZ5ktaYqpV3uLjnApoNzwNybKabSraPT2CIjM/13rX5ZG8KsJLXHWTE89/Yr4\nmvJGnYbAkwpzNTK5oFLvAaIMhgrYXAvHDEw3Y4zJ7ZG/Qp1QTl3jQiwgzUTa\nTBGrLyEyZXTQyanNsEwPt60olZgooc4UmBz/ZxY7uPkLEvmFTUwr8USXXcrA\nLUSr\r\n=FnWX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"4.0.0-canary.062ade5c0.0","@material/shape":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/ripple":"4.0.0-canary.062ade5c0.0","@material/animation":"4.0.0-canary.062ade5c0.0","@material/elevation":"4.0.0-canary.062ade5c0.0","@material/typography":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.062ade5c0.0_1571274102358_0.36047936463788655","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/fab","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0111466d617820a68a9c318e988f56df46723a6c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.774ad4f8.0.tgz","fileCount":11,"integrity":"sha512-0nTxDxdPvqq86Ud0TrZUa70H9kxQTTn47QTEI0ytAsZDZohzAXac6OmNkcvBuNpcb79oYVNMRCfvR6A1GlfKYw==","signatures":[{"sig":"MEQCIAFfQJnKeCTUaUsnzwBUwGB+YDJJGsvFA+4VyIOYPMlqAiAbtzJNSdfZ0NcI1n5fNyuooJxmaxhUzvOTpf7hKeRr2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hgCRA9TVsSAnZWagAAuvcP/3fddUzHpaHZckkZWOhO\nuMwy6Zpg0gW3y9/W2rCxQJPP3wbyvYLLMj3nJEaO04EV6Pkop4NuuHCwwo69\ncTjHyUMnjREtqUp67hRevtUSEUC0fwrPChCob9OJbcV7L6rJoxe6pjvBmZv3\n7QRvIoB5SO105pxAYf6TtWwUqdDGZIm2teEAlE3grz1PCmZfp6eYzWjW1b6X\nnGnZvKIRpZ5LRVV5hGaI9XvlGBXKB9jLGLo83daxUI51gQjLbfa3gWoucxMC\nWiMgCBXmA4b8zYwk1sRDRUvNhbwZWUBq2ACMY2h2tvLP6vIeLPGG+WaO4PXR\nTRQa2zMrdWZSmHXch3olDMBElZ7tVsdh9wxxIP2t+wDekxRtNPYWk9lSpnJL\nL2/X9UG+FRwpQ7Cuo6PjJim6Z/TPIq4nyVFL4fCUsXnZFpuGHo2SC0w6HwwB\n1DcjrWUjDgDdS4npsRihBShXLGq58iy7xdKNWWB92LqGDtppbKWmAHuLtxYK\nmwAz06zRxJ+iuiZkmGPJaTwIlAOzu2neplwR1XAuNV3+9darZMZPDdkPPgBj\nSDpKf/RYuH2k9YbVQy5OO4cMLqjQI8EDw1jqQ1fMvYEUEwNhZpsQsBUqlk+c\nHqNH3nSNK93eE86IpTCOPQyUqWoXkVCwq6KJ5vOf/r6w1f8v4/pfw2ErZxGM\n/7Kf\r\n=eCNB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"4.0.0-canary.774ad4f8.0","@material/shape":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/ripple":"4.0.0-canary.774ad4f8.0","@material/animation":"4.0.0-canary.774ad4f8.0","@material/elevation":"4.0.0-canary.774ad4f8.0","@material/typography":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.774ad4f8.0_1571285088109_0.8440515245965439","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/fab","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.5916d18c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"212800c2195e59892ab4f0c12f8775e6582eb660","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.5916d18c.0.tgz","fileCount":11,"integrity":"sha512-5XzsWi4YG8M+ZPZVP3MFfcp5vLB4hpSF7cM1HqV6uILKxkI6tI84RkKWv/95wYlBqafcFnGjyOHLHM63tdA/kA==","signatures":[{"sig":"MEUCIQCWYvoLXIdqIN9UlMiPes2o4WKaxPt9L5gDyoZJbCj8kwIgRVRymJpcSnWOAr1OGNdithjlnJwUhpbcHnyFsEz5pKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvYCRA9TVsSAnZWagAAR/oP/0vyK0+qYTuiFuUaQajD\nAfrWXUnXsZJd1XGFdriNUOBpXr3LXsBsDR/I1DpAoA9I0Q5Dolg4ZVLyCFOq\nf+VgLL6UoEzxGAXQrBnGeuZxxz1PPQa3oyn+ScIFLu7jeXsURm1HvUo40Qfw\nCbp9ZKo6jpLrd+cehyRrQiD6riV7em2rL5YUAv6KTYSQYi21NKgS1/Zicx6i\nprrqm+xWeL4cAuBSiWI+sL2rmaEgJ5VFB1UZ15IxuXrggebyi/fSJYCSToDa\ncDCGm96eEkpvxHDb24YpGsp+fv+d14v5YuX0h+1/mcJdp7EGuilpY6RFCoOU\nLUn1D61huGMjZ+Z+0AeR1LHQ0qbJTmQLfngW6xHDhiPgySZ8tuWy5HdfIwA4\n45xIBzGhG7ZGjyiGx4RLQkYxh0Y2+2CNJpIutbCYsIDfZS68fdyVzv46Mgl/\n/PVN1pGB9VLi8CFLZOpnd2JxDEGoIBoIgXK1RNPqPRbiWuJCR4e+9JIPXMIC\nCaeKjTASQG3qR6nfV6vfBjAVzC583KqSleHl/OFNpo5pKsOdwpk/o0/2KWBo\nCy7cUrZ9nOU6DtCqIqYXIxBYZrFv1rQZMzAyB0aA8HfRS3MiMbYhJ61l8MaY\nY0x4AeXX7ubxbd6ePobvopTvmVAo+KMJ7Wv8G0bnYvRHNY/IHHwFvFMWgV9a\nFIi8\r\n=ICWQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"4.0.0-canary.5916d18c.0","@material/shape":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/ripple":"4.0.0-canary.5916d18c.0","@material/animation":"4.0.0-canary.5916d18c.0","@material/elevation":"4.0.0-canary.5916d18c.0","@material/typography":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.5916d18c.0_1571429334963_0.8569298918879928","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/fab","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.d4141c95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33657a7ebc1d4c5a553359e936f6c2f488b2ecd6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.d4141c95.0.tgz","fileCount":11,"integrity":"sha512-TcVd9W9o276OK9XrIiQiXd/t52PeH7qAFgEFPS0CStCSdm4KTmWIps2g5Akw3bY+BVVIy6zFRcHrCAdkbT2Dew==","signatures":[{"sig":"MEYCIQDgBwKxsiGjlBa8g1B2EpIL+k7G6RpgPej1h3JT2GLiVQIhAKXqVgtUQ6UVDGfeK1TsxkoX1cCUT3X9f+rSUlJmWKr8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCXCRA9TVsSAnZWagAASbkP/0V1HZtx/y8nPdkYlNHd\nNkubOWLwjgA6M1s5MtWxBTNzlHeIwRQifVzZS/mQK2z5GxgV4RKUn0T0ulVT\nmd0rU5eChTcT3Cq5C5g4NLRvUhIakVQf+WzYxKDOCfDSfdVQNtimiLoHKK0j\nzylTyhRusTD7lPYDNAWEj37aLMY0W0VrR1VxOlPoKpkAfoZ8TdQO0gNgmVOZ\ncDUbn5Z662ih2v2760Z54Tn3V4WmqyPVXJe2765Kv8qaO88M1ALZquV6rvBp\ni/jI1Mov2T82g8ysb3V5n8Fg2OkXqDCCZ4YBvDOZ+06q3LoGnLkDEZImXnwA\nstirryuJVw7DBmaC4rVYwNkTDWQV/VFGsh3Gpq4uUaxazMtd7ITmsE6qnaEE\nlSgjTNZXVfYp52ZbWBSYa7mfnxhuxuVXmO/MMdD7wzscYnaiPMka5+UR4WSR\nCGAR4EdTIs4Ut85WGJdPqzmewde61qLVR3e9/DBKV1ixpNaW7J9W33ELZZJc\n6w/NQPE1yPQivPQumk6P6iMJNX1QaBfUEGxKvuVmeIgQ45uN5O5pblvdWXKb\nWkyRoEVpnrJ7JBCV7rebJI+TS0y2JDDakwhUBpyw381zZELUSvIpMiVtJ4x8\naFLm0OhAe6XrAqLmcFb8Kg9rdIofhHxojG4L7MkS+dogohIm0zlq9nIb8JMP\nTsL1\r\n=k07+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.d4141c95.0","@material/shape":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/ripple":"4.0.0-canary.d4141c95.0","@material/animation":"4.0.0-canary.d4141c95.0","@material/elevation":"4.0.0-canary.d4141c95.0","@material/typography":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.d4141c95.0_1571881110721_0.5521006666944717","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/fab","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2740522dd698892c9603a24b7c7fd5560694c38","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.2b878b3e.0.tgz","fileCount":11,"integrity":"sha512-qBHU5jg6WXS/VP1857CsCn4Mbv2nMTUFWZFyJyPGKProKYmHL1k3s7Z3tSjROt0FjkRlChils80PkyHKZ5WvJQ==","signatures":[{"sig":"MEQCIH6U38CJuq1dimKk6l2EYqRgv2S1QGvfL5XQtLKHthV1AiA81u9ZYQVizokwkif4NMZ+y/hxP4yyvN52o9s5nkOJWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslm4CRA9TVsSAnZWagAAHmwP/RVWXo7/SIRWyP6n6KCE\n4fx9nNI1R/AAH1BU0/1ewzUCWwy/NQZsgWitqNCfJuJIcasWcOJ70Uxqd73F\nT3UjWSlOOK9te8BzS17sgbKCNRj8HnYFyG6KvJzzgA/BtAY2duSBzjeTw0E0\nC0qotPEqoTBkGSoHtzju6tENxzTcSYJ/wlUMh83cRnDj79hgoZ7vGyz+xuEO\nND/ahWPvQKYMSKIAIAKSR+V/DyPtG2jyXHy7ns0Yp0Wd8FkjrflHv8Srge9J\ntWvO9VJZmInyhIt6IsMAaJjHnUcP0r3KE3GGqP4OeLTNQ7U+TuxWdtgo0rCf\noIEUYsVyOUjrGw5OrxpUNDIhuEYVfzNrPXJZU8a9r7KnO09W95yEHkh0rK1j\nBe5UfexYw3TeWBABanlO2XP8n4bnsuyuNimC/Xi9iFS5VX0FsHJ3nd7asINp\nq1MRJbQUOcss0LKd4HMxp6KheaGPuz8M4pQR5OlJp5QlAxMZsqlU7+LubRAB\ncVV/R5gSdGko6xo3uL3zjsCkUfPwZqDSgHyo4Gk7nLU0wqhA8oczZRqTudvI\nY1nJ/ZHaScjtXCKrmRGwEwJ3GOZFwbVgcNXoL8kYfAGh8oGIDXmVJWKn6bjc\nGuMhbVkYU996wHqusjxCg3rDoIrRajbTMMYQZ3vPd05WPIUi2BKIsgHp3bDB\nRBdT\r\n=IX3V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.2b878b3e.0","@material/shape":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/ripple":"4.0.0-canary.2b878b3e.0","@material/animation":"4.0.0-canary.2b878b3e.0","@material/elevation":"4.0.0-canary.2b878b3e.0","@material/typography":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.2b878b3e.0_1571969463745_0.46551211532523906","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/fab","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"976dfe489331d59d5cb0f10705747efbcbb9f2b4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.b06c0efe.0.tgz","fileCount":11,"integrity":"sha512-rUieStRlLoehhUPg8SCFMk8NJNWb2VAM5Us+6eyWOFmnZyKxY4QEDydAzbwhJ9r0WV6Q+zyVRdQh6pnmfyuKQg==","signatures":[{"sig":"MEUCIAMddh8Ckf7+ZqQGBRvWmKRC0UALoL2Y5zHGzQvHfn6gAiEA6GCKPjFs8ArUV3HuP4McmW0my7NkXn/pWNu5CDp0Fb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LcCRA9TVsSAnZWagAAqQ0P/3mHNnpMt+2ncgkRmlhK\n/d0rVOHmNqHp4jTTdhmB/WSmxrocISxVy5tzDBoChOswxLq3ij/8BpW8a849\nKWE6houWNNjkiqnfwJMzAREjoUQ6OQRPE2MupFFOhOtZDdllMzs70jJa1pHL\nhaH9AaaBMBC6Nd7Entj/SjqNEh1YSlnNMdys8RJM5SK7SjlKG017s+yRskoM\nL0zqXumjqqnNgQTtntpkG43/S5JTx0/IWo04dKfzRfKuMBADbmyEId7rGVkn\nPwEhw+KnditZovv5PbQtAGKBrpZfr4ckjvNja53VDWgUABMc92rosGUrPOwt\nB/cGjKvsPes2RjtQwrrmapjJhzHRGsRfBKeYOTnFo2/ZBMtYUiWsR4VVgzhX\nEiKBtQ1qR5gV6OhsBolzGM1HvsdstsH6I+4rxsay5TOf0O///PTx382M5UHW\ng+rbiGhPRPOHxFUibIcwJo1sFWAqh+9nMaH17Wh+u+eIWbn5nraJzUw7XBfs\noAAhT4OgQDHDzfjC9l7V0VBm7XIRn2eKoK1Hlri4ITEsOtTEY8vV+rtlMuNt\nTxC9sRKYniympNWlfBC+TUC45YTwvIt5CIZfyrn72jYEPO2cnqAyV6pun6RI\nKYLi83dk/k4Gw63o9udCwHzvtUO7VzM1XqXBkEuKwVklfsar3Qs2cZsC8OtD\n74Ik\r\n=bCma\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.b06c0efe.0","@material/shape":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/ripple":"4.0.0-canary.b06c0efe.0","@material/animation":"4.0.0-canary.b06c0efe.0","@material/elevation":"4.0.0-canary.b06c0efe.0","@material/typography":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.b06c0efe.0_1572053724475_0.3582308971294723","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/fab","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.01628efa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"230af8ba199e23e47cf4d1a4c70119b91819d537","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.01628efa.0.tgz","fileCount":11,"integrity":"sha512-4muztNYMUChCUgP+z0tRtYHIDC1NckyRGrkHC5/2fizdxvkqKdiMYMmiGQ2/QNY4DaGSNcIUMXrS57qAqPcV6Q==","signatures":[{"sig":"MEYCIQCHfE5n5SvmGe/OyHRdxmIzpf6Ql8NYCaY+GJ+z7q2C1AIhAOQcKf61wVySM1zFQ9IJasPS0jgwZLB/sXa5v5OnYfcD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HICRA9TVsSAnZWagAAXa8P/jVWxRUfkKbepC0C5m93\nMfF+J/VjutZDsLaorKyo7LbDL5qoy4CSWnXjxZO6NmYxgZw0Fxf4HFxGznTy\n2Sd8M6Aame7KRk28OQcvIKiA9uV1p1i2103vNom9LYXOQWqFjFxb6h37TXZW\nchxCcHDwUAAwB5ky+4Uvdh1iTpxvBy3oG88cpYfYbedz6jhTlF+3svohVAdt\nWjJp8e+KmcO7E8EFSBMYHh8PLr1gVGc3mbCfT1TaCyDe10dI6D4Defmk9ri2\nD0md/S/vruXXNQOlHbA3prXD1LZV6eeELpzeWIQ1na/Ag39jc49MxcXo80Jz\nooe1UpAhlardVhbXGuA04ezg3E7SqGVHZAVvoWzIZRwUylCkyFCi/TI9CQfw\nQgx+bXD1teP4xf/k//extLNT8/Fn/il1ABhQTsPV3ocCEGgO/dvP9fku09h2\n2iqIaYdKrnudgowhpWL52tjZZ1mZVOwaSw+zDd0A09zCB6ejtNdPaKTwkI9g\nIRlxf1PRY00SsYZ9KMsbY/VRLi+TjTT9Nr9KGfVxTDi2DCnSNIyb4JyRXqbg\nA38Iw9Rgv7EZOKoSLDkWkbZJ7PRF8W/Z43nj42IdL5C241MJnlIhgyGf17Vj\njGnv+tisalvtZPxqXjLxrkXNg6fa0qSv+FZKafi6LbLyw2srhI3HinJn9GO+\nPDui\r\n=E+Uv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.01628efa.0","@material/shape":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/ripple":"4.0.0-canary.01628efa.0","@material/animation":"4.0.0-canary.01628efa.0","@material/elevation":"4.0.0-canary.01628efa.0","@material/typography":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.01628efa.0_1572307400009_0.26143263535386563","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/fab","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72a7d7b7e0643eeffb1b27daac6ccab3a082fea5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.b5c6d66b.0.tgz","fileCount":11,"integrity":"sha512-uZSk5s8Ii17WAxDpkV3U9aLlwODeEvV2Uc0wrNBuIdk/50YvB0Kjy+YXI2LIScgVmLZtidURlvJ1zpCZa1/r5Q==","signatures":[{"sig":"MEYCIQCxovzblpEN98/fDkCACV66MDX2UU7uTMtVaxZKAxwfogIhAPRTgI6hjzvq01lm4lGDqVrvcpP8EQbbieljBS8sk7jK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH10CRA9TVsSAnZWagAAV4sP/3DPmTY0vq5B8MGPC8kH\nCXGaWvAR52mNH69mRFY5YZjQahClitHkYGlIwOxtlRKXwRnKtNDf8DXP7BTH\ntBjV3mP7e0ExWdbC2DIonPL/GvUn5ViU6fmKyIM5bbGV/YvafpQFAguaM1kq\n/Z2JxyniE6zdiMceJVKIMp5evfzUym9YijtpaugbhnhZ2oCHzyj8xVG1Dd4Q\nJjcaVxKoDdKQscaLWfjR7uphfX3G4lhqsD7KFl2FPt+zo3Gz+3c3m8u0ecgS\n23WIRL3q9abr8fh2/H7NrqnMVwf8Lw4BS6TWvFjdKICX8TrwJDgHvcoHfVHB\nV1zmvoA2/EFiPHt2hfek5QkOTioCIpo3cMaYlf2/I9oAYdeBgiOuQrUvkNml\n/FP0fa5NRERCd/mD1O3EHVcZhn4bxAN7aDLLjeJj+16UYR+gVPqs2pyZaAhQ\n1FU3Z9s0fUETfPrnTBFp/AMiddZ1Y8WMs512yWcdxYJYOD6fhDLLheAITK+0\nu9wH1tHwdLTX+Iu3egjEg24bkOFrO06eOvg/sj2crJ0sW9wqW89fPttp64Lj\nQngYjA6Ezfj2N+p8W5Is5bCP5Zz/7BMYR6kRRfdnEugjq+lHbaWx2izkQFco\npdLN4T48GIEnJ01ovKQ6N6gAwOwSPQo0Wtt/4qpH774BlvMXPbRQIOGc6OnZ\n88/F\r\n=PSma\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.b5c6d66b.0","@material/shape":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/ripple":"4.0.0-canary.b5c6d66b.0","@material/animation":"4.0.0-canary.b5c6d66b.0","@material/elevation":"4.0.0-canary.b5c6d66b.0","@material/typography":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.b5c6d66b.0_1572371828058_0.14990912957543756","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/fab","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3ea7560b57de4e38cf6840cb701767dda95a6c8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.cdf858ea.0.tgz","fileCount":11,"integrity":"sha512-e9+dWUZOZd1SNBFf+daID5Fbxo2mSUkvGzr5B3BB6fRSr9aF1xsMYogoelihTL3vuAX3h+e9yqWYVq4pt0iw2w==","signatures":[{"sig":"MEQCIFJCRUjrdw/ih0Czgzvkyc97UmaZGGtc93HR5ns1ofJuAiA99hqzD02FTWAdXcoG3NOHvsjneLeODxp2Se2P5QlL6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJuCRA9TVsSAnZWagAA0O4P/inH4laZ5EytKWX6ztwc\nyWHC76C99VjTd9QCm5PVb4z3AF/icJq/u2AAfBWEW1sNVf5hrJIqkSEHSFFm\nJtk5PSkAyaJeIhDIrQWQ4vVZKKUhd8to+JN+RSZUE3y0SOCKNuRthN8Ylf8G\nyWbW8NhVQ1bAV/jlrNzSXXn4NxtsEINMGuiBfVzylTb6aFdeVb5v8iX39Mkb\nmUPm/MpOdXWwXl0RsZmJZakdkHdZwU6Iqo+m9ri6nSjibagfKPsbGt9dK8al\nF1io4/vxd+PgtVfjSJhIq8QWq2J60oyBbtionqxRkTxiqgNE/cZz2wmVomLV\nLlEZLKgdzLyy8ylJLSBXjuJuHomvZ/01ynKve5eaQM3Yl/Zn+d6gLY2vPv4w\n3kV0jn9JN0mNaC1JVQST/aSqwU4pZsFZGNVpNMazDf7XgUjk77Vu1PksWbS9\nxFZ6nqa9UWvvlH/40V3fH1c1P5vu2qBNdlspkCfzm0ZEckKyFsl8rQQxUibo\nVUIN6L8DdAzPiPAm6nqFwaDOxst/99XWnDB26Mw7oiFS4ULa1+JCQgluvBoX\nZrUk0KxifSjnPsWuLs0z0zRWH3rEU0uwkLBHJ18MrpcRl6PObESr7a0oowWT\nIoJLWh4l/qhLcKj2gU/itoLkmXt3dy59mnitpMS+7Rk5N9iUFtbo3rT4sVaG\nxGAK\r\n=ozN9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.cdf858ea.0","@material/shape":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/ripple":"4.0.0-canary.cdf858ea.0","@material/animation":"4.0.0-canary.cdf858ea.0","@material/elevation":"4.0.0-canary.cdf858ea.0","@material/typography":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.cdf858ea.0_1572631149465_0.699294018434415","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/fab","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.719b57e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae2cdf8f3206a352c02081bf861200e386460158","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.719b57e1.0.tgz","fileCount":11,"integrity":"sha512-Tfy3FOr/T0AalMWbGW5saqV6PULnRscGP+u0FdDT3b2abhzDxINygBQ2m+IietoFp+a0PK7WwjMwqeAg+sZeVA==","signatures":[{"sig":"MEYCIQDpTFx2nn4WliwObEef/b3IIPmfqTWdsKg79prN4ZnK5QIhAIZmeXLB/ujf+uVh5xtxgY0NkF+LJUsKa5zHKuPUjZAQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8uCRA9TVsSAnZWagAAefIQAI7k9OPK3DPkebQIA+iw\n/dn4oLiSkTgfzM6VT0oz06crLnqoa5Lu7M+vN2BolPBgLAUpdqMewikP2n1L\nscn2OpeJM38IsKCqVi9Oq02g6DMFMtIdteWqF0rsQXH92cwepMGOLBxE/cS6\nK/L5wLTXoGpxkeG1FvOpzIJVCzPQUAs+MMHUdnTAZjB7Spoe9rAwX0IaJ8+D\n7eg4iL9CdoJxJiKsb0+7UTLwaWyyClLO3VvqQYvW+dZkZt/4LqPxmo+jDkgY\nyV0zYxOgfLIbu9BWEpdiGgdJvTB5ASpkSWyDGi65iJgN4ldaQV34m7ajAS1o\nrc4TSCihDI5b4rUPmD0aPIsihGgExfnCPoP0VZiZMerPxOeH5j+R2dqXv6kk\nuBEdT37VX/+G4Qz3Eo0poxr4hO8uvTyAxDnkIpjItHtLZagzaTPHINcyEsEN\njhu2ngLHjHwx8kRCiWCTWTTINHnwJUmmVWeKzxyqSL1OMU4PVlAQyPFD1XW5\nT5syKmlHNmgyaDILphi22Upfov49h52rsGT4Paiuf0yN9T7+0lu78nrzPG6z\nBRSU14uqSHqWIayC8YtIxAM2KN7953D/7napg96Yuo5+H/RUP/IkKR8c13Au\nAtTiyoINSeZA3nfvaad2CQpyh7PwIMcWR0j2aNG56GcJlfNPwC2xmGBMOoy9\nKMTI\r\n=FxtR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.719b57e1.0","@material/shape":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/ripple":"4.0.0-canary.719b57e1.0","@material/animation":"4.0.0-canary.719b57e1.0","@material/elevation":"4.0.0-canary.719b57e1.0","@material/typography":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.719b57e1.0_1572638510285_0.5740064055887997","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/fab","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f709829e631cda3688e4548b83901a1fc7966790","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.97cbbdc2.0.tgz","fileCount":11,"integrity":"sha512-+KU/FcreKfACUQCJosLtgh2VySR/uab5TRkZZ6npLpYbb/qyhDCSYQ+GDpbhyYNOcjeMykUIJ4ycniJH8Q8ArA==","signatures":[{"sig":"MEYCIQDKFh84MKU4r5hrBMOPqHHXQFS2P71Mph2QpyN7TIN6VQIhAOviIpwEkZmFYAceg4VLvfbgLSN6JBbBmpep4SUMgsqc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWqCRA9TVsSAnZWagAA8D8P+QH5WXwSPAyJV9Fq+pNa\ndLm2PO76vEml3V+BeyEaMcin9dXHcBISX2SG47pLUrL4WDNQB8q0h7YGo+6d\nI6kbcgpzTes7+JnFpDe7gAUG0CBewasP0UIo/1WGSVgNzUWv/h651rXGcjE3\nN5QzK6aqtRzmQ2uIWkF/luf6/ThK36/unanY85psbvQiHTXVcm/TxOgNFJPS\nj78PMm/1KQKFKEuB/b674/cfnv2Ujs1cbN5sO8lrE02JQUGKHdxSP9YG7Xry\nvfc3RqOp8E0kaiNMThCHGNkbaVlg2QiQrc44NxxomLj+/IpSWaZBRJFgC27X\noeyzytnX+Ecinm9/QCyGGcRsf+nx0MWHq9t750v4LxSrjg159AxGpxt+9Hrk\n1kThJtSRwsFXq1lP+v0/4q80Wbjv/xvKNe8cGgEeBZMByK41WeVNMarebN2s\ndlB3QNrL4siJLnPg504rMlw/iUdHg2JTURFKXqHJ0XAGiOkO9/Ln91t6lTVi\nNxj7reO6Gz/IWiG+EwYAF/E75CK0GGAueau+rEH1BRw8nOabuyUUIb/1VGcL\nmvmyhCzQGb6GT8U/L8w4ueNHUGkYCzZnErITXuhHqQDqgID1FZjYuT3QwfJt\nyC2TEXlx7a5jEd7iJDhqxQmd6986JXYcxAQ1BTREJKEPABOa3FRQLvhOkp8K\n1pLc\r\n=wvLB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.97cbbdc2.0","@material/shape":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/ripple":"4.0.0-canary.97cbbdc2.0","@material/animation":"4.0.0-canary.97cbbdc2.0","@material/elevation":"4.0.0-canary.97cbbdc2.0","@material/typography":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.97cbbdc2.0_1572640170425_0.685197972094195","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/fab","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87cf41642deada4d409a4635ecbb1316123306d1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.8e36b3b7.0.tgz","fileCount":11,"integrity":"sha512-iYHFRMRWR/e9FcQsKGjWfHvDBiwzo6s1whgwhv3hGxdaaN9kLGCzwHtFQ9vvYj1mSJP2X5YC/5q7jXyUle4EAA==","signatures":[{"sig":"MEYCIQD5P3FZG30p++cE8XwwqHgwGbsBIGEmGR6zQbvfofb6uwIhAIzANLDuhCi8ZHAeJxYIzHwpoohX6DFdUclCNaBNF0Wj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ00CRA9TVsSAnZWagAAJ8YP/RG8zZK8Vw8Amstz3oel\nHtWCzrzy4tnMhNExr/NxaJG/yztmTy+65rzy1cKamAep/uPK5Xk7kRaEziKB\nH1kny/p/4sgQdnr8/ZBThKYoqtV7rSHFvgMEtN4DNJl33imbSqmrP2T0W2PF\nUltSYZb7k3S+UeCEeMNLtv0eYwwQWsJt20c5lAWuISr0zhCVRMvOdXW3eavL\n4RDhoBVwLk9/6Iz6EE2Z7Xpm5cz/8pg/JDU9AtuKqUk2pIvsUwHgm5euzkrL\neRMKbRRMErLrqWVslpKCWPX8iPp3eB6OrNBbvjG9uOJEEpa1zoRyZDxpT0+b\nXL8jRoJ60xM5W/v5Dj5RWevCuniL69JcC9KS/NMQ1TMM/GoBjL4wCvDPRKsg\nWLJmIyj7n3sLzRY0nYc4S8FDINukrQU51Q9nrV2roVqjS5bTU7KfogiuCrk6\n0pUPKFoMAbAblsQXO9Wvpt0uVlYmZe1k7NSWzTa0VWY+SIMZY/s9ezNsStyb\nIdfQ5XK4Ki2jUQuxldXgHD7yvm4B7udY8+bii+S2jrNnfRaaaFmuBs+mHTYy\nJkqMTiWHDCe145HmZwzfUhW0RyNnxntyQvIvFuDI01McOnNSOtMLr+NPagl1\nsys9PHYZH/sM8Uh4FdTy0JV2JveD6zxTZNTsvcx1qCRfuMKr6/XwSiO2kh82\noE4h\r\n=ECDo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.8e36b3b7.0","@material/shape":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/ripple":"4.0.0-canary.8e36b3b7.0","@material/animation":"4.0.0-canary.8e36b3b7.0","@material/elevation":"4.0.0-canary.8e36b3b7.0","@material/typography":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.8e36b3b7.0_1572642099783_0.5767413173743992","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/fab","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3b7bbd062ea3e8cda839811423c7d356ddd8567","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0-canary.62d3a09b.0.tgz","fileCount":11,"integrity":"sha512-Bbj+82ET8ogboS7Xi9B7WnNYwMNLL9tcK+9g+rcIBhFS+cWuW0oQw+xLphxHKtpDILU0tMm+dU30iFDHsj3eAg==","signatures":[{"sig":"MEYCIQCusWccoKGBkMUzr5Rgt2DNL7kosSre/saEMnqeLzGSvAIhAPNPDGar38M9vVubCmBPMPfXNBfV1+FvD79HYp2ehJOx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9nCRA9TVsSAnZWagAAxBoP/AhWGkeB/KYwsrF9I8Fe\nHsnweIMsQsB9KclnWtbkQ4rmETyrjE8ufPUOx1EnHShG0DCUai26v5ztmn26\n1ElvDOWGBjcwgtWWAXoHGH3t7oxa4xtMh5l79DEd61QeyEUwPok5BHHZphW+\nMlHisSKnoMwfpV7P6Rtt4jgdMWUdojkKdH2+GgezHotOWUET6R+fNXRLaAvE\nD/G/iBWZyfWCRmdAIxfdUuD+cQGTGiUOP8/QFX9tMPK/sLewBUrLDV86D6ai\nmdwKojAJiNx9khg+tD7ue0Zuq0sk4yoFmQqz0iKd91cty2MktFzmWSFZkIwO\nl4f70CJUiE3g9B5M5jHPKQrkOMijfBWEDolEXvasKcxewFYDF4Di32V+3ZJB\nic+n5oDl2cDj6JEACGdXiKldtZOryapxICse2foEPrDStdpd7tLBFqJsmfFO\nc01fv6Q7xNuSGVRWx9egHD2gyh5tMZNBFupEIWIfXiByGIEuQnXWkz+HYWHm\nCnTpN+sQjFxzE7cKsAntPaIUQdZsChLwg3W4/QGH3ahekwAOKSlj90GY0pYT\nSVolOGttjlsFPa09poQqwsMbvQcoWT7lgNJ2xvONcfqBkwVX3kg8ITIs0lSl\nUJrCPVRksQbR72ve3TW6+1IpIZsWqzaooAbcmZ8iTCxEjrMoWsbYPtT3tozK\nxLRt\r\n=q2eY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.62d3a09b.0","@material/shape":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/ripple":"4.0.0-canary.62d3a09b.0","@material/animation":"4.0.0-canary.62d3a09b.0","@material/elevation":"4.0.0-canary.62d3a09b.0","@material/typography":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0-canary.62d3a09b.0_1572642662644_0.9866951487655944","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/fab","version":"4.0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@4.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"634035a4ef087856fbc639de60efc32772d8dcb1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-4.0.0.tgz","fileCount":11,"integrity":"sha512-YG5fubnZUEFLumBuc3Fw6Hcnek244OKJleSQhWVtFS6I2EgHqmr0gD8ZCKvXARmieyh4LRn7jKDK/WFJh74ayA==","signatures":[{"sig":"MEYCIQD5FeZc+CZal72P1IM8znwPlHSPTMJ5Hsk4So+hZbLexgIhAMbgW0dh0VEzW7jHOBFTpQIbo/aY/iunRYvUFMcuk3ek","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcboCRA9TVsSAnZWagAAKMcP/3ivClKy++SGKkT0U8UV\nV2w0zLd8xoVrpBCr/hmkOGQAsP5sqNkgpYkRBfOCh8YwDRFrasqHUFTA5WF5\njd7yGV/NLnhOO3qt9sfXFVo7XEM6/aMY+BswHnEwJUZw0/EkS37Zoq+hIZtB\nbOQ9lkKgsOKjCkCKQdTDXNU///4m8q3B7n9pP5f4NJg/MbNXfQ0ukgJAaXaJ\nRvwl0ZzYvxRFBdmjEIdyex0f4XDomzMmFeZQLqhTpfRpgkbQamQFKKcCdgry\naBmupffBbRFAtKETrvpWORSD2aU9lB90EcZEJeEA1gOCKFpHKmPMvFQQaHlZ\nsa4dyeFRiBgqAsV+x7S628nJEmKDX2arcq8pNjv4SYMhh3CRjkmw7AhibHhk\n4rZij01fvr0C1fAFahHIdof5DF/8YQoT+olt3BXFtHsqYLFD2+LlhQCKTUE4\nczlev7q7C2wYq9eBvxXnhQ7LchYWaa7idPnD5KWFx+5u3FqQu+2iLfMNe0FG\nbV22HKTQn0gA6aFx5IpPqSxxYd7BNrq12uy7z2ZM03onPviwYaR10b4ObY/g\n/v6po1CSgCxfKL95kh0fWSmVAK8Ah7wrVVfplRKuYXzm4RAHhl1iSJ4JpMmC\n8UzwtyLASEf0uNFeXOfBAeot5BTZS0U9qdaLGCOFao0gSSEzaPFldxBCOrml\n6+IY\r\n=QSYv\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"^4.0.0","@material/shape":"^4.0.0","@material/theme":"^4.0.0","@material/ripple":"^4.0.0","@material/animation":"^4.0.0","@material/elevation":"^4.0.0","@material/typography":"^4.0.0","@material/feature-targeting":"^4.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_4.0.0_1572718311662_0.9206643314020386","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/fab","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37e397edcd7a6f8fea19ea44f0a09b509dc33f76","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.b5eb51e94.0.tgz","fileCount":11,"integrity":"sha512-p+Pjx99AXfVmrXkhz/jkRU12SR+N+7zluhBJ1R5H7YZ1hwQWo+nlIvWu2f3U0fB9Bu90WZgZJbZlTehcm00iGw==","signatures":[{"sig":"MEQCIDxz5/n5T9RiXTlU4Q4DoSW5lNXtlk10x4qIljZgNfs+AiBoOaWeJfXhoDSzk9bX4VkT5VPg5yipHOM66cKew4hEEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGOVCRA9TVsSAnZWagAALigP/3wwWrtgnGYHc2aOUBHI\nyR2IapnsP9g1Mlaf5uGg+XzPGD29N/BRKPOr6wjSKrljC2QJW98TMQFh7Ftr\nmCfklwQ3lt/j7DMR8FB46ztAV6wbfPbEfCNBrgfKsvBNGUoxT8Q41XYnZTXI\nC7uh2OYQJpLhyUkFhZV6OFgMiHY8HEaQ/OgrIZBE9jF7NLlFHte1uXVb8VNw\nb+CeUR5YsiWqoxvkV9uWLdoqNUHsn5Jio3FePAj1ymT15yWF7AbVLNFSA9QT\nNetzRTujwZFuvLFh1xjPwjWCUhce2xHrqghZBUiQsfvihM2yu6FOra+ugiaN\nHHUvnxrWdydp3TcA0XFHSj252NRRp/BdHepUuzFe4Tpxtx8bda8Md/xuIVVg\no/dQ6XAHcAtcv+3Oxzd9dBqQKequ0F8fYdIakx55kUlgFCTsbTlNIdstzQS0\nm0644ZQAHShXt8Z3X4rpEqwSksPtZcmw8zQdbzRqLBnx/a/IiSsmd9kodNSG\nl8ZsG+CdLQ2c0GM9qgHxAsDHL/CiWJ/a5w1ztDCDUxcpGV4e1Su7kNn7BPWB\nZBZujg2FLEcOmr77M/5cllvgJjB0NPd/ddhIBa5xQmw6A6ScOYz79VOKcJo1\nOvdz1HNEh167E8fynBZaF0MK4Y69LP5WqtI6wqmUDuKXglPEWMIEv1b0nq+X\nnZy7\r\n=RQF0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.b5eb51e94.0","@material/shape":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/ripple":"5.0.0-canary.b5eb51e94.0","@material/animation":"5.0.0-canary.b5eb51e94.0","@material/elevation":"5.0.0-canary.b5eb51e94.0","@material/typography":"5.0.0-canary.b5eb51e94.0","@material/touch-target":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.b5eb51e94.0_1573151637370_0.0832869248319219","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/fab","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.58500806e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4af9ced30cb4cda0ead130cccb52ff6562814e2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.58500806e.0.tgz","fileCount":11,"integrity":"sha512-2PAKNJ8/abnSKEhTepdPKA4D4UmExHsd3aI5VihKWzHh6QrAa4FRn4+F+0dVmWSD9nc0PMgtYmF2Fbh2CCuMBQ==","signatures":[{"sig":"MEUCIF54/E2R77OrmYNshzlJPFXCapRfy5eUywShlICqRr7QAiEAxFT44a4e7DkH17HspBijO7jqInUm/vLV/hgrhNsB718=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYthCRA9TVsSAnZWagAA5u8P/i3PC1MMj6gSCu7yrMOW\ns/jTwDO2NG/VkBzXEyug8P+0W/P1ANdNjlBWsBuj9HzyZpqlq1h6LDRZCrmu\nJej+N2tq02f8eZPT8+dAYGPtTE6YGVvogngu/F043Aj/VlLE0uexpTMFCCNc\nUMrIhl3LSurESIzj5IlFvz0/4FNTWyxgRalgKHO0SJklYEmyn097LMz/BEFu\nAPzIyEQEJNXCW2cUnc7XDMcx3IaMevzhv3VoBTYomznBhbPmDcIl2AMSFX9n\nYBHPERUSdUDSwwS+KBnoayv4AOeoPxKklFdFUV1+orMhtq669C/cddI/LBFi\ne2z3eEfPFy1bL+XkuNfaGzSgq+UiuvCKJLwx0Cd9Mx5tUkzHjpWf1Bb6ULTT\n0vcT3nFKpeX/AfiRQNENR+6rFCFTqz16/gezIc/x7lb1ox+ijXWbfA2sCwBW\nA9PKHeMfr90tk+F+K75s1CzhfglJsPvRW2uWLuNW1HIMR/ZtzrNg6i9u/64+\n6bVVOT2diyaeJKhEJyLjYazKwwDeuq5pq1fxU3jvFikBXkOa5UV/njC3AKB/\nMvKkiOi2TUfKqHR0d4Kqayq4RNPeEpShzoPIl0U0WONgo4Dg4nyIFkz9CrVB\ntdeW9feUH4DO+MEYD00tMF7c+5ePgZ7JEXnFgNe54jsxguSMkNkMo0tFG8PL\n/42l\r\n=R5wO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.58500806e.0","@material/shape":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/ripple":"5.0.0-canary.58500806e.0","@material/animation":"5.0.0-canary.58500806e.0","@material/elevation":"5.0.0-canary.58500806e.0","@material/typography":"5.0.0-canary.58500806e.0","@material/touch-target":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.58500806e.0_1573227361276_0.7761468254122617","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/fab","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.66299b646.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a753659d15316fa9e72008c823dc2b5e70a54b76","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.66299b646.0.tgz","fileCount":11,"integrity":"sha512-FAq99QHZYZENqMYn3yvCtfLPSoBmPxnMSY6Vqx0hfs55qsIo9xackCnyeNf01MJYv5tdkq85wUre4jcFZ8PoHQ==","signatures":[{"sig":"MEUCIQCDAZAJH/3h0CU9UjAh34aAqb/sufy5TxIZZy7iY+2gdgIgaCtfESg+UPqodOWr9GkDQ++VnPWJan0CUxvRk143pA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdE3CRA9TVsSAnZWagAA7scP/0qxBU/qG20WNgRslTwq\nh/CcIUpl8l0DYIqQ7UNc62Q3CpB7/HCBMga39+CbfRFUk00pT8O73aALUx2M\n+a51LjPJ46IfyR6aAlsweM7OayX6KriAo45+ZXUONs3tRSBuOFZ8WwjD78xy\nM35vs5kXN8+/cJIzgve2wwkc/Ctgf6TsKjrTMUCqSOSmrtF1GpR5QZ6yFPZw\n5GS6RWTtpBdVE/R9rLF6/UCnWwDHrE/yLotG5g8NYrvBVFBb483ai1eCgh8p\n+HN5t1POXsDDvH4OKx8cqmhOalnp6bxuh20K65+xFXV8nJKWf/psq4dW/i5n\nFQPftRV9QQ7mikSwAXXiVtVQqJNZmhuHn6fbEUBr0Y3juBvEfLd8C7kl5FFK\nK7W0MVhOCAU01iHeSKwfpQvHL5Etg/IeHoZK3BlGlpWlDwNQiC0p5/kJtLpz\nWY1ov6Xv/V4GRbD8QFKMJo6R86kNAZi/W1sC6fBPHhJIhHXiKEyODd8zaE8b\nmPRJh9eIKP3NgHiXZqLhSQj2cA4OclOOXVrfoFmST8ptgSCeJbpr2nhE4j38\nOVJKE13u9pRowQo7uLlZ31YEwoC65IgVzrACEd/kNmuRq/AwCyNwC1iLFC9s\nTjPdklJc9MCCEe9QejDsUrIO5FU/nXh/vRD8BJBNmR2Hcp+uRwPOztVfQ18k\nAJ6r\r\n=FnEr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.66299b646.0","@material/shape":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/ripple":"5.0.0-canary.66299b646.0","@material/animation":"5.0.0-canary.66299b646.0","@material/elevation":"5.0.0-canary.66299b646.0","@material/typography":"5.0.0-canary.66299b646.0","@material/touch-target":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.66299b646.0_1573245238785_0.5107419259701298","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/fab","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.821871e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31aec375c4cc6c4bfb5ced36ae5c3c6b9c54291b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.821871e04.0.tgz","fileCount":11,"integrity":"sha512-C5qDfldhBMOW1nSzHwr/B6CdTDkCrcaDNiVnIAIGimYmwtq16Q5tC72CjSAxLi0tFilJoMwoX2Um4+j+CjnvqA==","signatures":[{"sig":"MEQCIBKy4ydjjb3iaQwSdKqB9WvszjjBR8x4KHpZkpgu9o+8AiBaOUkDfN9oy/5GO2GbkJYW+6LNFqf99KyMLAoRG50JkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd3/CRA9TVsSAnZWagAAF5AP/3jXSCHDxcozd/So9GO6\nlXRk158MizCMfbLnVLN8VR8AQSN9oHXa73XFaC5l/fP63y5yJNFL+qQVzRGs\nLUUT2sUSmO3INwMQ5KTipvMR3zunq+r6e1dZPnjz4Q+P+SrNWy9UaAayD4oe\ng/wklQ9ofbc35geBxWZKAbYObmf8l5Bz0yV2t5KfHY3U4sdB2u8dTgIaMluu\nk9REbi/pc7X20nB5xoc+iXtASWd9s4G5ZMsMqeAPI5jtCr1A81qg7HikEQsc\nhyjg/XFWHdZMAqoNY9re2TSjpG3T6gkhAX8GwrZmaZYEx1MdmawczybXEoS/\nHFTDmCr8cC1rdq/67Rn/zcBvCFfsjWOu3UbqGLEh9roxDE8AylOMmCdTKMQS\nFMNe1eJitDo0U8eMekcA415kDQ/6H2qY/sOJQkaYB7QARF9yT9o4SNGLMjsf\nY5p2i9zk0hqFgn0yVVTdS3pLf7IcQxCNApzt/o2FuO5H0P1rG4BEFtewYP4i\nnWhQ8P9BxQI0TpdRo6qEoOyJunHTicZnvF15eYzn+AH5QykedgNuMTy4U3U5\nHRvN/OGvrwHsss3wsA53patXS2LW+njDS/kr+c5QX01ztB77iPYtK01jAuha\nemw3KiwrAoSEh901sGcYhQbFrNlu1SXFz3CiwEX3erQA1SrvBDKGL5fNDZqY\neBVA\r\n=Un3L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.821871e04.0","@material/shape":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/ripple":"5.0.0-canary.821871e04.0","@material/animation":"5.0.0-canary.821871e04.0","@material/elevation":"5.0.0-canary.821871e04.0","@material/typography":"5.0.0-canary.821871e04.0","@material/touch-target":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.821871e04.0_1573248510913_0.015846592285356564","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/fab","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.491fddc31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"293b33bcd300a52ff455bd2bb8450af8145c15ac","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.491fddc31.0.tgz","fileCount":11,"integrity":"sha512-z2CPF0Jnnketxp/+uGsDIbPK71ekFjirplqIiLRf+9bDGnaGPDPPGS7fTyMJxhQaxm4jU3VgfV7dcVHOvzK6zQ==","signatures":[{"sig":"MEUCIDGt4ciKJ9wC63EAG++OT5R4Q2ayjilmFnhQ8Xntnd/zAiEA64VnGsPh9cwv47dvN1NAcN1qLCzbdp6O51jU9HnogpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxeclCRA9TVsSAnZWagAAQ3IP/3hkfOZ0mJppBMx/NgEk\n/OWPo01wgl6oQg2k3Cg5XB2Ts0ETkT1OzL3HS5fNtpjtWEUWCp9dnWc2l0x/\n7tQJai3rKzhnWxxnQY3AtyOYtf4N5DSFyuIUoiKRNxCuwJTBpJCn9va4DBmr\n4a0OLPixkPz2HoXuoK0p2/lvdBJV7qv71fxjoFVKbTheWiy66U7p3D4ZtPSm\n/ZNrpCexYnznpmR2qvgvP162kixv8/9xJL1EXUfq+m6bANlUyeEt6ABEkncd\nB7XIN+cdq8k6FPvDfewl9rsDMTHRi8XT0tBCBaLz/8pRSUIG70jMGKamxtXR\nLLmr2y9RlxCMh3s1H9l8A+ZxsgpJSwlJOyIMW4nh5SsUx35X8xNwb7tlmHLa\nNksLcHVSfUWkEBLj2tqlak7zi7XGz9x68PFNVPzxwL9ezsPFrPYM5BdsRTBn\nwn9s1vHhdxje8kiaCS0sz5tq5U7EIBB2j1VWLp44R5+xP8QEDLj+ncdtNK9X\nvrhebxV0nWYuYkADlH+Qghg5F/d7YTuGwIV1Pn9f9Xh6sNaAiFc5NT+1A/0/\nrrY+WF0vKH1tke8jF8U9aozJGRryU3q5lwIfBw4IiMMZQ/FPH/oKyEqqDGYq\nNO+viMQsxe+XIQ7xb0r391Hnyk50AaD7geFBfP+fUACNoJ/DWGFySDURzFun\n5qvQ\r\n=XDuu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.491fddc31.0","@material/shape":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/ripple":"5.0.0-canary.491fddc31.0","@material/animation":"5.0.0-canary.491fddc31.0","@material/elevation":"5.0.0-canary.491fddc31.0","@material/typography":"5.0.0-canary.491fddc31.0","@material/touch-target":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.491fddc31.0_1573250852782_0.7799153723043106","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/fab","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a5cd06630bc80b678aee1c0a1af74507e55ea06","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.b0cecf145.0.tgz","fileCount":11,"integrity":"sha512-yrGZ1j7JBR/cRJpy7UKmRkzGcPJgMgTvT8qIIxL0oheYwML1BtrajGnI73N9xS4QlFFR9M3DGb0zuNsRFxQvVw==","signatures":[{"sig":"MEUCIFr0SCwnOTww5kSzsTVmRwCJbentPj8EoD+9FVfjDj1uAiEAz0HBQTCMYjPusitZMPcGq12tNk6C792BAzXnSxZd8X4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwihCRA9TVsSAnZWagAAm5kP/Rlt2ua19LrwPNVar3RB\nWFzMqsZdnSXeHPEeaGw+BJO2UcvxQsdozqWY2RZnq9R2R4TdCz+vXCou7ihR\nurHDz2F1kOlthKSpYHcRrQ0SG56RwLbTFiIDYepw6wfExMf3xeg6UXtip5Nt\nUqh6K49tghBYKz9QchrVAKyjHS8LS34p2weXo5rCj4C/lF3wnpYUEl3rqDwQ\nFH9LFpmKPrTG/pFOnzD7mxKFfSSGeJfa6JQeN0xcXg2akZYJ7Xie2txPd2zW\nkEzxfU+f0YT10Enc0tzz9uGp1XEqUhzJzxLzNcLh2d77Zt2sn912iZ1yOCz0\n3K6aHUx6WczAbt1UN+lxeU4IQ1GYyYgISBRBa87+pb+s1iAclIRotozFnYLu\nNCuZSKrNffSrIW+3NWUH3b0rmpvkpNBwVvyLK31N3w0Ya3TvjNYOnUpeG6Vq\nK0woIQDKrsGaeEdRWVc1A3WptH+L7AeiwAaOtS1/9WZd99htoyPtwOk7UgAB\n9v0+v2Da1p+t5XGhtsxGERGM+74YnNabYxpy0dy4m9DP7nD75dgYCsBzj6Jj\nDIErHz9nbFjEbRXx9QAjypKBT72IClxnRTiijtOTp1XMDfWJCwPtdU1Iwmvy\nZK7zAIkymXNjnlCZX+dAgczzFiaDi64j7eVrPRRiwOzduHVM033209jjIy3w\n+5qo\r\n=o1kV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.b0cecf145.0","@material/shape":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/ripple":"5.0.0-canary.b0cecf145.0","@material/animation":"5.0.0-canary.b0cecf145.0","@material/elevation":"5.0.0-canary.b0cecf145.0","@material/typography":"5.0.0-canary.b0cecf145.0","@material/touch-target":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.b0cecf145.0_1573324960742_0.21565383199183796","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/fab","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7c4093b793e3d452c8166d64993797de6958be9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":11,"integrity":"sha512-p7AUlT3qIcKqsR9mauGN/mKlIfOujdZ14kEdzXlqOGKalgHAUzb46OVWdlfWaa9GCw9muvnqrFnf2c3gpPPqXA==","signatures":[{"sig":"MEQCIHFCFOIYuqOPR0Wh9Tc1UqFKiNW60XKhQuzSo4girYVRAiA4PVASkhDNFLn1KmqvM9eFF+ZU86jv58hq6Xqe8qvRKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBbCRA9TVsSAnZWagAAF6wP/10A5ucNESDJzbe6b9UR\nxIidOY1VtX6iSZgOClHvDLjs2eADe3z8s0K6/6PSmtrRwZM35kpUZ6YUlR6i\nT4tB2726irvSjumTBoguHK0haWlcA/f7wpB16Z28czAIOAIgGBIF+mrSl1x8\nFrL9rmqqLCQYECOb49X/jBU0tismLI/PxXNmpyUPzqpvZ5vpyXB1/47IM59T\nU5M+GHviUzFmi9QnyWL70FB4oUv8d7Mn0J1EOHDHVrAq6NsmmEncdYXyHf5V\n45+ghJirOW70OqNp2gE2vC4oRtGJ8nh2YvTCeX/QEv9iIGPFl+OBjh61xgr/\ne23RRGC8o9QieWu/HMRjeLL6UnAYmGxkf9LmJKRRI8w6S+naV2FxQzl6ehQ3\nDICw+rFeoC4feIynIWGxWTf+5nd53+F74S1kJq0+hDSwgdE0Rh8SediRNS/z\niVsI41e+fNgr5gmzqgIqZL+9qME7tipExlq50A/LOOfi+glDV6n8RFQj2zWl\n3REid3QeqIVtxcwna1IFPWF34/TtAF6qG5ao+uTae569/5x5zgfZPO2B+eVl\nlLSAeFCq9mSGi3GEeRg4FRXFxgI/KDAAqoxjOaep7AgkYualz8KMAn+yBdrc\nXEgkjEb4HYG0qTxK5g14n3LDMXAI8HgTRysWkAU1UF56XbkA6C/QdzK3wSS5\nEVVu\r\n=8Lr7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.afe0dd1bc.0","@material/shape":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/ripple":"5.0.0-canary.afe0dd1bc.0","@material/animation":"5.0.0-canary.afe0dd1bc.0","@material/elevation":"5.0.0-canary.afe0dd1bc.0","@material/typography":"5.0.0-canary.afe0dd1bc.0","@material/touch-target":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.afe0dd1bc.0_1573486683070_0.7818761328855925","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/fab","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"889e86093e89a7d3b320d0d6a1488a9c1d61ae6b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":11,"integrity":"sha512-5/Wid5jA5JTewucsLSHpzAeas8ny4DQSI0bFT48puW5Fjx74XQfDA06EtybaXJKpXSz27Cmg7huPcb2TbN/YCg==","signatures":[{"sig":"MEUCIQDiRubHMZza7AMy4j1Xw4xcf6McsJI9HIfYlFU+ZvHGpAIgN9VnLUVWjHxMkkNF4hSDM4VRu6Bw1ivAqY7w6cd8t5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXnDCRA9TVsSAnZWagAAjMUQAKT2vK8ng8prv9iC7Qew\nrYKgaiAnww8y2wXiJMZkxRoc3s9k0O0ppTx8aHN4HUiamOeLbpIweVcts0LT\nxFaZMHtOVQqGeGSZIu1tkD6r0MGHAahwh43K9vfauyznoFX4QPrsJFNeNh8t\n8zK6/ec/B4Q3xNxNscdY3D7dyNLZUwsDFyb1I3mG0vstpm3CmOPgrxGBflg1\n/3mM4jf6hCv1xq3jwP4Pgx3FXi3xb1/a/Z1s4VJPumGBrjEYgSqQTr0RHGvR\ncLkUkgVP/55Fs+GpnBdwxIrpR1yI9HhQuIlNwkHsOs03RNvlr/mHuB6HJyya\nlaeUQBTtTSCDnpMb33/RpRuquUJQ9mdXx+6Oi4PzIouWT1VF9DGAZAOp4qL7\nnrkl4EtyhUkvq7o4ZAxsH2DR7sub+6dXAklZpv8bCkdmnH52B18UPDqbm60U\nDIz6z1/+KV21CYHJOR+qBTVY6VXEJbm3yL0n4e7+/7o/B5fz+quzX+Zgioed\nzhsDQJDRwJS0PLBUsjLm8lQshrBJO5hrZOLlV0WJv+odPHKxbZtdweZJgOf/\nXdoZeeuyHlGNsFfW1cNUAEg6vReAMsxBxadrREArTjXlRnBRRpMBKpnsZq/Z\nwmOYHDYKj8OJ3G7uLY15CN+86qrjepyQV5MRF0SktvL2gDgQgEQ0zBugCEce\nBFXc\r\n=sg62\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.b4cfdc40b.0","@material/shape":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/ripple":"5.0.0-canary.b4cfdc40b.0","@material/animation":"5.0.0-canary.b4cfdc40b.0","@material/elevation":"5.0.0-canary.b4cfdc40b.0","@material/typography":"5.0.0-canary.b4cfdc40b.0","@material/touch-target":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.b4cfdc40b.0_1573747139085_0.9281826497380345","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/fab","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.525989b5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fea42151ee612271684a7d721a8a3544810ff791","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.525989b5d.0.tgz","fileCount":11,"integrity":"sha512-397HcnW8UBkwIkYbkmb3QE2JL3NJzIlMUHbLX85GHiw3bJQgTTv6FSUnDL+PF6E8//BC7WwAOGM6vQLirB8Y/w==","signatures":[{"sig":"MEUCIQDtlBSlJ2rVQXNo2awDb11iSAgOv5UCS+N/2dWorD84PQIgDQf5P+/CJgEKTw0GPNygtlyFbxmc4LVx+ncwvaSUCoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeO8CRA9TVsSAnZWagAAV6YQAJF/FpQWmBaRUjJeyr2K\njvLBTWlX1ckLXrnhNpiujUPFYpBVq3mavRLuRc4fLa7n0PPB17SPYI06XOSK\nye1kdi0RPBLmPtcGTUbuCX0Y4doqVxrkVcjuSG4twSltDNbgvLyenNNkuCKS\n5256OMmplJeBS5iWtbx/ctxKkG8LXzc/AhJcIM0Wd9ximbmWySmDjgPVSATz\nuQ8D6/vxUrNBFoO1dZAXYYgqL4BD6obTGYjCUXIEyZiz9fXNI93YJfH0aPuV\nn552VbTk0VSz+ZJmFIgzCcr1i3J7B7iUJJUL5xHerUvj/DppckPxS8W0I/DU\nvXP402+t0twJI8UPGVV1sdCTHPE/lNGwnSau2i9Oj+9lwtsGrF2Cnrr4EOd1\nC2I5OiqdGsztWqchqUL7YhQ0ONvDmHHgNTtgXp96rUKiCj2cz4D10LceMv/2\nBBasunMSMk7abEH7n0mstBjbr6qPE/PmgjIX8WypLS75/24DHgzYi6gJbvj/\nEMNRxsWpw/XLhTzaE9bTzSxP5UaXk9EYdav7SgsISgelMlUid4yir2D7ehq0\nFBCesWqPdjsj4HJpmODEUA2TNSVqPU6ZYFNPI61NWF4rLSbX75/cHEg4ZHla\nNalS50u5LWSunogdhjs/B5EtdHFfEl9dy/RYFr1zTecu66Uxfwsk3HvzowXQ\nRZRv\r\n=2/NK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.525989b5d.0","@material/shape":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/ripple":"5.0.0-canary.525989b5d.0","@material/animation":"5.0.0-canary.525989b5d.0","@material/elevation":"5.0.0-canary.525989b5d.0","@material/typography":"5.0.0-canary.525989b5d.0","@material/touch-target":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.525989b5d.0_1573774267448_0.9250727254124569","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/fab","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.7084b403a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e16993638132532867b20f6830fa6da22392c499","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.7084b403a.0.tgz","fileCount":11,"integrity":"sha512-VmkQprk/xZb9wYeviL5EYvdwH7NkVnugM3zyC2xZpysKTANjSvlwnlWuUDDfErcZeHnp8df+fz/W/+K6aL44Xw==","signatures":[{"sig":"MEUCIQCKIyA1Ps5kx0/3Ne1fetN5aLouPk/yXjw9L72BeezlTAIgDMXk1UMhO8nyUXuHb85xbAzZONCWNkmJXisYHhD59Bs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfoFCRA9TVsSAnZWagAAzqoP/3WXg4k/qjNa3sAPrFPG\nhP95QCt0hHgGH45+thQGIFF6/X90tNq5TVCpRcAKTo/V7Y1BmBMHAYJsgn6r\nqM0VbcpYppipuV1+yKWvkUalvSWr3E1takfQX4vSJZCFzgJUHxI3i1op8rm1\naXVjX2aMFO6akiG1Rn+TIhs0Ec4R6Of6jlWXvZQ1NNtCf9L3UF4UDn750/oj\n8m0v+6Vq1A/+q23+UZF/SH8NSFoqqxXHsz7Vu1IdZCq9cackD33s81RrBSL5\nhYXHCqYZr1Gn2p3l9Z/AMXxKQtKF/mWQelzglZMTu9xD1zEWYnAsgtfoC6JR\nkpbk/ejrKxfQRKSvnlW6HB32Uw7gJCXMDkKHDEvgX0x/UGMp2PS5/+qrdW90\nBqfyLtn64kZYQ4e5Szlv7VDzWOzXDeoLvZFfII4/hyGpsfUIqqByKceHMK1R\n9ADcnb2ZGSHjMf6DJ4Eq73hwbtYhE4rk+mZwx2BScX9JzcXjhuTzrrqNLxVy\npTD5LIxQXms9gtpzZp0/efuoUQcmpez/nc7FbuN1MSjLqowwQF2JOZ5pBBj9\ni1aJPbeb6NEi2Kjtxl087kJIoT+epObLx384OVbvHXxmFdIr2MvNlIdydAhN\nkSanIiEk0dTkRw98SbT6NozUUb++d51rHmV0FB8spFm7QmGWjPEmZeI9hhz4\nNAIw\r\n=9Klf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.7084b403a.0","@material/shape":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/ripple":"5.0.0-canary.7084b403a.0","@material/animation":"5.0.0-canary.7084b403a.0","@material/elevation":"5.0.0-canary.7084b403a.0","@material/typography":"5.0.0-canary.7084b403a.0","@material/touch-target":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.7084b403a.0_1573779972702_0.8936370086147634","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/fab","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a2975440339aaa38efff0114ee172fc1955b8db","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.3cbee6dac.0.tgz","fileCount":11,"integrity":"sha512-MJhgUELw9Tb3Xjej7M+n34flR8J4BnPa9y6iIwpvoPpJWvax6zG6856oAMQ/FvMv2gbpdJsyDGgBWNKcGF+1eg==","signatures":[{"sig":"MEUCIQCr/jFJxOFLG6ne8xvxgx7pW6MFafIFI+BDhTvgVHv33AIgcnNLLZRNJAabL7yZCQ8N0JZ4Y1zoZa+WBPAnsP+BTCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyekCRA9TVsSAnZWagAAEgEP+wVujWpReM5G+YWcSR+v\nkOpkLP4BlnX1hDCNoEFW/JF0YLQ2q9eo38JC10H7DXvv5QyYGH42sY/gdRwz\nmaHPFBHDxHjpsKME4xqgf/grE66NDxf/GBfGDtc9K/nkTDcVlzDf02xPQdC1\nz3st7NT8BC+avPxFC9CzzwdeVeZH06ifGjyraczwSpWSCotBOZofwu/R1p4g\nZY+PM8J5ufUkSMHWixnyFu009Fv0KIU+psZPfAn59VP/FGI2ySeiyEm8UF/s\n4mvuCTNgh23SQ0TAYHRn6ppLhcaMBgUP/H3F6jxTEaj2Ue5I1PoIh08W4fZf\n1KMekmz9mn74vtV73QZFI5ubHZLWY6hLb1PRR1kcEwrO5O7ugN59594KukhI\nRx4tAQLKC6NtCsS+FvUC4vbAWXGoQ6+kZK3hCtgfy+DI6kUm1djikQkHXiIF\nKYv4Qsi7Gc8P3WPbalyxT7wIh8pX0QxXlXDdtjoD+wyKFBxADsM0rIe0bUn7\nsVa5ySWz7LyY9Gb7ka2JrzdvE40hPvZtGWF24k5X1hCsX5UmYDG1MIFBkAzw\n+oW3QoGi/KHzWEdntJbx5aEYeFntdFChHzyjcaDop1nPRsPrO2Qd5vB6PJu8\njI0Fk4zlU/zAo9L1Ds3C6SNKmJQC6xcn3Bb/qe5+NnpSPdlMKUdiP4AgODfJ\n+odJ\r\n=bYS3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.3cbee6dac.0","@material/shape":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/ripple":"5.0.0-canary.3cbee6dac.0","@material/animation":"5.0.0-canary.3cbee6dac.0","@material/elevation":"5.0.0-canary.3cbee6dac.0","@material/typography":"5.0.0-canary.3cbee6dac.0","@material/touch-target":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.3cbee6dac.0_1573857188170_0.7688503560221129","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/fab","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b38c9d5445a54cf5789f00028f41ce70e8c3fcca","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.591a6ad44.0.tgz","fileCount":11,"integrity":"sha512-O576m/BexKAOsxts0eHaWbihvti4cf8DNCAfNvcPwOzgcCrXzRgE+P8h7c74PiVXmh0ZFSyuPujuzrYpJusFoA==","signatures":[{"sig":"MEQCIBxLFerBhACkN/jQxLsmqY8RMfZARXF1eNyPot10TGwkAiB3vaRQQDtXHzfIAXtAw96D/LMcwaThpfeSbxi/p2jO+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3lCRA9TVsSAnZWagAA6MgP/RI55k4wwY9taFNdUdCd\nb0rw2vlIMOvoRc1mKwhi3VDKZa4Euz74OMAMfOMClKju0HMFSoaLa9vQVnHb\nfTGaDe4lI5PCy1LtOMyx8IU9X0yAARBw0cDijwRcsOt2KLly9Y2c1klZWL9U\n2PynW8cYUlPKtpW/E3g2YDgPbboRKx9drq3aKQ9lJvGQezdUsTd85T0BGgsF\n7CN+e9vocmSmm/iXsdxWOk6DY4A+u5ySKBw9vt4ugjS4fn7dwQexBSPA8J0F\nUInOf1WBkihPHaZCu+zwwlb7bFUBCxGPT4yqblooux7FJYHL6pxr0oT0VsOd\nle2OcXVoLWOo0YQhb9mvTWaiu1WzydoEftWAwQ0We58/pSkK+ZtBWX7B3oO1\nKZlFa4BllsW4+qdetS3wiRpPfjnntA4/ju+HyeZ9vo+issCMQLF9/Zds4INP\n3NdINEbX/ZPSMmIaEMPt7O8591K+t4Fe9u87t5LtU3MP8Mj2gzdWTG3VqRvL\nb9C7NoRv4qWOWQAlfwzmGDPe0W9Z2PawBVsVbVHGdXIxzBMYyq4SnncnbNsB\nBSX/1ys9xCUqwbf/vbcjSEZPDHKi7BtnKX8ksPcD2eP+DrbSPDP9b5duiDl0\nSZws/Z0lh0TveODw3OPvcVryq1BuvlayI1rTbzOiOLzjragh31IhBs1IXAWk\nRGea\r\n=/3Wb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.591a6ad44.0","@material/shape":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/ripple":"5.0.0-canary.591a6ad44.0","@material/animation":"5.0.0-canary.591a6ad44.0","@material/elevation":"5.0.0-canary.591a6ad44.0","@material/typography":"5.0.0-canary.591a6ad44.0","@material/touch-target":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.591a6ad44.0_1574120932614_0.07316986116912694","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/fab","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.5729943ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ea9a017be75969a3acf69a0dd4a341cee7a681a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.5729943ba.0.tgz","fileCount":11,"integrity":"sha512-GyGdW7rnjnV8nxbiQ5bTqRtCAux6Y+z46hLLmNp4mOFe/irv0KqNukR+xz8PXevct/SKMPPMU1SrLHYxKOxQ1Q==","signatures":[{"sig":"MEYCIQCa1RSWyJ520ACoA5IDh6AxXz7MZBngSvssUf4swGNA3wIhAP5CuNKFdFjuXDhHhT6IakA94SmRN0mUgMJzDXGLJKSD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1MzwCRA9TVsSAnZWagAAhV4P/1gkqTZskV9QF/dVkSvy\nHRibLnUMfQGIOVNJPseVJk2U6Wwveqx6ub28E9Jl1hjIuCd/DKqF6/IqFMIU\nn/B2QFKxs21U7Nt8KfKZVY9UVlzStjqThCXxt1NhtMfLQAw6+KjFPso7F1rh\nPSPi06puJasJ/T9S1LCnh8NoFr7CY+cgYDWfxEuoUKNTvagW0EaGpA16kiF7\n0SVMt3yqOGJ1cRbW0yBnmIZDheR4ymWRW3wxx6he0c/hpFVCsAeXOCeIeP6c\nlgybn1lwtGPsbeNBEx4oTuxj3JeRI7NPVNAbx5QSfSTcXBNOjZHj+2nVFaoT\nT3xVGdiEIFe5KXZtVpxSI7pB/d0gn6wV3Bo9J6no+xS4ITrs6ykALjxx+zKo\n3c7mCQJ8LMa5NpErosjJO9u3kmTmsP14PS9Bgtl080DXtk2KFcs8vDZOhaIN\nISBRTGC3k36IH6ccTACfRdI787x+JxPbV2NcTYp9opwFE3TdkrHwhSC0estb\nUUM3OZWLENQMdZWB/7+u5jHAVE+SkrT246PZn35h2mTkoi4gFbx/+ikWCIIn\nggbDEfsgEavrXDsdHk8mtujJdyu2N+jTXeSq9nraOhWpyfK8P9Ae8mMM4rVE\nJPE2y1MQ7nOmJSFyXvRazJyhmnsR4/nDh74shdUYkX6zGySKobftKwnM2uTx\nnkn4\r\n=mpy4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.5729943ba.0","@material/shape":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/ripple":"5.0.0-canary.5729943ba.0","@material/animation":"5.0.0-canary.5729943ba.0","@material/elevation":"5.0.0-canary.5729943ba.0","@material/typography":"5.0.0-canary.5729943ba.0","@material/touch-target":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.5729943ba.0_1574227183607_0.043314468951804797","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/fab","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97f3b751da2e66e2a45526db654c0b6e149631a8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.e89750dc7.0.tgz","fileCount":11,"integrity":"sha512-9iafo+BXWUkhNYay2qaUPzCmW90tV8pehF5TeJMExmBGeIwwZCoApcIuGEvXIQOFuByZIkvj/8jzeOK3naBrOQ==","signatures":[{"sig":"MEYCIQCLVLDXN9HudN4lvhrPyjI9TDJBZ6KZzKwZyff93Ki6BAIhAPQ5SdzCe9OzSI482datT/IeA3vo6r03xCXYco3DT/qq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dr9CRA9TVsSAnZWagAAKPEP/itkdZ3OloHqC5EkXPfe\nSZgyUx+6dg09uMxMw+u+GnDSzmlCz3fGuWaeBqMHdTM6GcTtqRBgVNUSNprg\n6JBxLVnaPbbN4YYF8qemLVeGYD9rsyRM/HuD0l3k8ftsRu31hV6a6sY8YZp1\nS+EvOQlRjR2g64tqDT9tcBpeZwLxpzvsd2i9tEz/Ey4Mst4C5sbeTQHnyBhO\n33RJhZiORc1v1vxlz3PjcH7Q3hQH7qbCP4CvGM6EmExpPICHwwjKIUaBs0nw\n2tqyoUPqee2XbQhA6f+8jdt1tYVXDSXgePTN39b+lxiR/RfNanuZmFzxyMxs\nhRbJOW+cXgqM2fdka3IYDyn6pVikIco6MI1+0iVK+/bl6LpxNIxz1czGi2gr\nWoQU7+B90djsGFv39mAx9V6waQTkEY5GDq53FNrr1HXJNrUmbaGKII4zvoNn\na07QHE/Mn16f6RYedi1NaqVxEO/aTBDsP9XqZ+IlipUv01rl8zbI/09Ao2Ez\nrtBrxWwthC2vbXjB5HGQaOaunEz53ifAa1P6/XAVJZfHZ7WkfYiflw1GQfIw\nPXnKLW08DCNjvx3pqZ9Bmo34T3qfjhcuviSpO5ckbN7PmaQYduF7KvSker8Q\nAo471+WMPHfsZXoFa2cSy2gNZCfwwT33O6ykL1Rv/ypxWMoy5liztZBi2oQI\ntCYz\r\n=gtxY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.e89750dc7.0","@material/shape":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/ripple":"5.0.0-canary.e89750dc7.0","@material/animation":"5.0.0-canary.e89750dc7.0","@material/elevation":"5.0.0-canary.e89750dc7.0","@material/typography":"5.0.0-canary.e89750dc7.0","@material/touch-target":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.e89750dc7.0_1574820605104_0.2993067908296758","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/fab","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51ea3d75b90d283cbb4ad2c511c020316a24ca65","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.3e560b33a.0.tgz","fileCount":11,"integrity":"sha512-cmIFzfOhamG/gZrzuRbG7q7Ph54wghv6NWkmy6hBxwVLlOYyslM6zrBuTSDTnj6ub/SlkOMdolnfk/P42fyQdg==","signatures":[{"sig":"MEUCICwagecw8z6bBfeL+EHl/lxEQcqWNXjpzPsnhc/j56aoAiEA97MUmpvpFoPJsaW3h7jOrZ1bsumCWdAggH5VKzeki3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dswCRA9TVsSAnZWagAAaEUP+wXw5j+3yyy6cIpSXwul\njhS7IZ883fwjfPa1GR8H3divIgKNjlPoB49/LeytqJAf65nlyWr1phyqgVeT\ng6HBoG4LcFKi9DqyBsYvzj4AKsGf2FocvnPime6QBciIcuA+RQojX4TdCGGz\nUCPEyvyQyNGydcqpgMWO5Z+0zlxX3bXzuI5JsHpJf88z2pES6WgyS1Vfqm6n\nUuwiMah+MjuzdAR1lSth36QfjEzna7Dcp91jivEtMja2dDaiYwLBPmnKk9XN\n/jGRSFufAKG2JRQ4wxy2TxfXAJdBlrs/ztvG7MUjL6dESbYTLFmI5lBUXw0X\nfGVFbMCpoJUK0c7MmWKIghpzeXqSWfjbckDtmbKzVEE8ezt4gRBpG95P2c9o\n7gSeAchMrOx11TT0lMEZRRuzuNdJmmBHlK8lmd6HE783ArnY4Ejp1um/IPfJ\nvt+uBYgSIHdNGfjGpHZLq1W6jR0skJgoZnQ7TMc1KEOc/kX8dbA2Rnxwamb5\nGWur6wJCcd7vldTaH/JAox8a+ghb9GaMMrN9cOlwb5YjAW5BcdDSKcjCvtlA\nrul/YWz7T2DtYgwF7tH3fHH51qw13DEFNUiRdm9g+DDhjbqDKM4Yu6ItsTBL\npMdCW7kgH8+USuFGNCYIbVGw+EjSIgV3aPN+eVfMsXR6RUd+CiKUL1i2zK3I\nNpRa\r\n=2iRr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.3e560b33a.0","@material/shape":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/ripple":"5.0.0-canary.3e560b33a.0","@material/animation":"5.0.0-canary.3e560b33a.0","@material/elevation":"5.0.0-canary.3e560b33a.0","@material/typography":"5.0.0-canary.3e560b33a.0","@material/touch-target":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.3e560b33a.0_1574820655418_0.37082711473954744","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/fab","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"928b901162fbd7112ed45f4fa99a0e171b830970","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":11,"integrity":"sha512-+dGCdeR2CktlYnwH6uqt0H/OAxOZjTAWQpr+stqqKuwEGsAbVMHz4xRUZyyPX8+oUwWskfU3KXapWDD5Zf+Xdg==","signatures":[{"sig":"MEUCIGiMZsXrQgST98SPakzS6N5pukIrUuQjvFOn9H0J5XxvAiEApA3DSV92H2Yap5wnpsRCXdvWVNZJheGgK/WaZxcq96Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtICRA9TVsSAnZWagAAlYYP/08sv1vIP2t8q/KbocXC\nqR5YR+zfsQ9rXSAaxs0XregQOOcrfB1v6yzdjom7om39bMw8CkDuY/T2mnL8\nbFNIKGNWoyrcHjR2ns0256WeGSeoqbZw/AatpbUHzekQmiaunQCV6sqHYSjp\nsZ821S14lFTw2srEn8nx+NYq1Byrcace1RnyUH4aWHa8DLe3fwCk8oGvl0Ac\nKcKMpwYHfsCSG7DoD+bonuQ87cT4g+EMGNiZnEWfgtmTKGpoICuZoND3Mbmx\nuwxj4DF4sADNO5XG0MdNmcLtYV3WMMz8h76X+au8Bp5fl/rwmiB/cTqHatFZ\nXZooY3ZY4/8xC39qDToRuCF0WLg9f4RAQn6MMD8UFbO7Pc/gLWPQD4pAihN2\nmGSJHN0Xdi0NY5emeZ0ajSJxQqUIP8buvseqPJK6KmBhqCuUxLgQgDTAsmzN\nBFSHtADoX34WKDHBc92fG+WmwGLSwyxsddKYF86rkexMxUAjLcSdceU/CBKv\nIMCsy734zVLR/IdEexPx4HY9khOtGSxLy52lfnDJ0/1cjCNRXvU6Acs8YI9Y\nfIxL3oo7WsHpshYaLdi7MKikHtqIFxPBQNDIH6UaXqqU2zT6pJg91wStSFGf\nxOr1Gh4O0TRq2GLlVceMbreXSnDJWhDK4CNfiJCFP3POy1+glQbLXSV6kXd8\n94yQ\r\n=aoYd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.7fd17ce5e.0","@material/shape":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/ripple":"5.0.0-canary.7fd17ce5e.0","@material/animation":"5.0.0-canary.7fd17ce5e.0","@material/elevation":"5.0.0-canary.7fd17ce5e.0","@material/typography":"5.0.0-canary.7fd17ce5e.0","@material/touch-target":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.7fd17ce5e.0_1574820679802_0.8203085248481676","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/fab","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.ec729683b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0485fc630c10f0833c6f27fad27a6b67fd693ca","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.ec729683b.0.tgz","fileCount":11,"integrity":"sha512-hQyVsVmGZzs2CXJueC7gNm+HTcpuCzJguvZsj/Gmw7nOXihjVMU2XFjYOYoHPVZBIwhIwYMI8s9pDySIuKkG8A==","signatures":[{"sig":"MEYCIQC6UIgrJqRrgJdsfqb+/Q7IW20LIO240CoWZIzvXnVNJQIhAMLf1abVQrPlqhVrDyf8A+9Wv+v+QPVlyt57JB5677Xk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pxuCRA9TVsSAnZWagAAnHEP/jrN5YuJOsMzhOlaVKFk\neDDh8WZzNNEdUdHn+spJOJcbVxJtNF2tfP3f//imBZYVTubgKlJXbeRjkNkb\nBVHu8rTSl2CFd1b3WFmpwpADcw3witPYdHMPQmV4MsoEFswP3YTXmXZ7KvKG\nc6SWWSiW2ox8ttnqqd0k3APT3Ha7HwizfkacVO928im1q//YZBD8PhJkVBlw\nrkPvkiq7hHrwr3xTRPAQlsfb9c+EQUcILKbLoR/MCTpZowZdiJTTbt++75Fx\nvFZ+jvo7m/M9p8DjJ2H/bL863WwtzJ9tYVEHqzc8DFsKfMAt4rH1P+1OKwOO\ne5lq5UObRpjnCOQAWIJDQc70Rcg1rFiRxQUJlbtPfZqNedW8N+vedSKf45yL\nEDxKasHa8piA/RPIGU0oMEzfZladJ6OcIXHCG+ClOoZz+pgJ1Uk4TTbpHbRC\nEolrl6695hb+7jqwwBgETL2/g4z6fgnKfWFAOYvEuseurLBxa+oeadMHVRma\nU3EPUMGCrXltRQEKL8Q960e5tWNLB/UvkeNbS6J0B+aNo0PrqnXuks6/DKC4\nQ/o9wD+csojcgMblJn8POR0A+OpR0NQ420V4f+6sx9oIztZyRP66RnkSicHo\nncOWxmOTxUs4D43vH9i7tCGCVX08mgc9UP1d9rXrxKFl1JwR8hoRsEd2gLzR\nsERD\r\n=jJH8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.ec729683b.0","@material/shape":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/ripple":"5.0.0-canary.ec729683b.0","@material/animation":"5.0.0-canary.ec729683b.0","@material/elevation":"5.0.0-canary.ec729683b.0","@material/typography":"5.0.0-canary.ec729683b.0","@material/touch-target":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.ec729683b.0_1574870125739_0.5000710893907898","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/fab","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e535970ab88e132669abb2cbec9dbf24699e01be","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":11,"integrity":"sha512-u84ta19CdL8xlNXRsFQaqCXo9avQ+knscAkctlqoPfEPY8L4xkcHCOk7IAzfsqp9tiGzYjuJ3Fi7va1I9GMkMw==","signatures":[{"sig":"MEYCIQDDWkOfcbkgqAJLqCVwx0iDXT6kjWBUH3kkUmsRxudYlAIhAJqThRFe+lg3vXKf9ASzNb5qNa4oM8OJkHn2pgeFZWJ3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3suxCRA9TVsSAnZWagAAqvAP/3tHW3le6HToIK2KOjMM\nuTQyGAFTnEVaVumRvGZDNwjhrAGG4/u26V4307h6RQ4RN/uPDXZWy6kIStNN\nc2xhDbmqjRoYe6qirHaoO6FzKmmPdj7KTW8LbkldrsuQP7ktV3Zp3t0hfrmV\nRn7zRBWNfdWn3Pvx1RbYBqdr4HYpUpQMTxlvEvIHfpm+PZ2UtlAxUqpECeNB\n0fMFfpJL9guLEr6Imlp//x9OF5IjawRJYMsxziL6cP5ebJaF/eLdATaVvo8C\nn9ZtG0jcZUAg3IyO8qFe5dIRUm3AUH3EaZT0QyXTsvGUy8Ih1x/pA3L2Yb/X\nJ49XPDKJkiS60jx9VS0hHeB464oZyMJSa4aqDJP/u9QpAvjMWselywNHkz/t\nwsTu7t/TG29RPE2cJN55+nZokgl+lncnypyrHbrs4fYDq3H7fABt1dxlVtBm\ndryAOAtEGqk6xtyArhALFTj2P331RmTEPOHnxXWpNtwD0TY3QzRiLonOIT5U\nAmBvWauBs/b1wfQsk62GSuCZZXsQCCGKJGwonhq51OMX4c6lyTQNW6RPSpO9\nRj//znCg9/29Glx/u6I4eSyd3ty2rYYeIIuf+Uf/z1fXgmdeD9uWoKC3hLTj\niUHajmicnxezTxNBmf59VkMLuUSM9eBE4Zej+hhxsZjkS5hCyWZa0k7TlcUA\noaNi\r\n=JYli\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.b8bc4a26e.0","@material/shape":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/ripple":"5.0.0-canary.b8bc4a26e.0","@material/animation":"5.0.0-canary.b8bc4a26e.0","@material/elevation":"5.0.0-canary.b8bc4a26e.0","@material/typography":"5.0.0-canary.b8bc4a26e.0","@material/touch-target":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.b8bc4a26e.0_1574882225265_0.6926009372731383","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/fab","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.f978109c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61c78709c46f01616b0352e55cab92968221f22c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.f978109c3.0.tgz","fileCount":11,"integrity":"sha512-ZKNIZnXaOXODbm6f3qiz1hH3uODJ+c3AbuoEOPSMUGLvuqEgcFyGk1voDfoHoWHwrxyk23ex6gopCfFlrd4guQ==","signatures":[{"sig":"MEUCIBx9FPWzYlBuCjtFtLclrKkAjGO0vPqCXUfTeV8C4nMnAiEAlnHSw58cpot21prN5lFDys/0Knfnp3uQslY6voyfKvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UTlCRA9TVsSAnZWagAAVlcQAJouwBQTvll1hGV+5PnV\nJO489bVbvigIZJBbYtTs0DnMb03sd2fF92xhkXq3yZYF07t0u2v9P5z7Fc8L\ngrJj8Ud0CMU7q0eAxR0nvw/K55HaIWnWbnigOmes44IuDUa+blZ6OgMKTjy6\nJh3I6s2Bz4YEQHTtquwbcxgDdh4nCrcQewJx0OR0tCHLzqKEdsip1L73CXEL\nOLaffL5Y7wqJoDWbEbMztfVKCuR6YH69AaRPMa+kEK2yeymcP/Es9CXP8kwZ\nPClmt3A/9pGSYN8za2yyUrJGoWDz3UNBjZvyzdPSXZd+fVf5hR6ArY8htfn6\nQ9I7nKb0NLHdMSLKlsi9FzmqxG+Aae7lYCHFdfmTJDUbqgJeVLdO6mRww3EI\nK/dTsPsXNxRF/bdwQl3J4XRhynfEZnuBJjxgHrM+6Yyj/m6NEX7DdqRcQBB/\n6906WRS1NF6BUc55ObtAHi5fWzD/+z2pUAVfXJVlmUbxdK6k0fLuM1QEK5p5\nwD5XhgYyymyc3dByHPv5n70he0nTIZqe1zH8m22JU/lcpoi2bb2VKJLvn+JD\ndq5ddPMyVu7ZRZjk09dNMAFIBvKy9B0h9prRTAObLduvAIwjhVheVgUT4Fgf\n9jTBiK38uoQEoxKUZbL3AF9LOQ2dsgWzX1oZrs4zTLSyiftOUgARfI7Lz5GC\nm4sM\r\n=A8pn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.f978109c3.0","@material/shape":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/ripple":"5.0.0-canary.f978109c3.0","@material/animation":"5.0.0-canary.f978109c3.0","@material/elevation":"5.0.0-canary.f978109c3.0","@material/typography":"5.0.0-canary.f978109c3.0","@material/touch-target":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.f978109c3.0_1575306468517_0.8729540176424007","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/fab","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8b2c632a9b0284eb9694f7b99ac94a766813b4d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.ad9dfe706.0.tgz","fileCount":11,"integrity":"sha512-8ifCVq39WtrzrtUvu+ZxiZMikNgJAyNRIIZG5jML2PzdnOtCNc1qwJXbB73vnskh64NGR4fUYHUOviAJfK1YXA==","signatures":[{"sig":"MEUCIQDaZez1idg5UPYg6bZD9FVWKnDf5oVEbd9cbVaznlA+nAIgcV2v6ZL9wHvUkKecNHMQ1bLdKl8jt43IDw9+lILWfmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1DCRA9TVsSAnZWagAACtcQAIF1MOo+I1x2pfnl3PDk\nc+Wm0EKTfbQ97e89Wy7QHLTl1CmXO/MBoPTIAUnftWRpJunWdpWZz9LEQDMm\nvA4YsJ5HJg1zol66SFEmMo+bLtf5CLzrlWDw8+ZhxgRQ34KvA/HBfl5qDYMQ\nkBHJJr20alt7PzwbTUGToTx78VmWOPfvIo2u+PZgtYmd8nk0D+rl4XsL/W8Q\n7W6+MuFKgbYhmKNG/ITsyBFTWYSWl5tjCpD7vNS2Hm+0iENuX+aeYfAr3YV0\ngxdIHXc3EDjW64hu2OVi5Y6tF2Xf3pcygZciXfN9WnCqGrI3H5+o6nBSVdCs\n4Ft1avorK9Yhuo2yWzcV7R3QcyOt4MPskd8vJfPC+jDlgna1GZky5CeBrlt3\nHKKCUZtHe64Ji2bZlansTuzVMMwGS5orCTtm1c4oShIv8wkYenJINTbPOF8E\njIeXnfNv86bJslyuYHhmM/3SfMl7/l9qlsE8GnyQP0wQOKVnxlhC9CvtCRnd\ngUHtVV5FT99cOvwCtK7eaVAuJwT6LUYLgVf5HXQ1JoQe7hKL0vVWn/Lgq0Vd\ntinCCfPBf/BsUyL75+ca3a8Dwzla2mbL5PMZdsZ4lLyo7lRSPIcxce0JJgMd\nZhzOI76eo0lQuf/RR/pBBKUYzX3ErVCHUPmIvLqXzDlW13MA9OdWdBnGp3jA\nAUmH\r\n=aepI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.ad9dfe706.0","@material/shape":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/ripple":"5.0.0-canary.ad9dfe706.0","@material/animation":"5.0.0-canary.ad9dfe706.0","@material/elevation":"5.0.0-canary.ad9dfe706.0","@material/typography":"5.0.0-canary.ad9dfe706.0","@material/touch-target":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.ad9dfe706.0_1575415107544_0.8251530815339327","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/fab","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50bc9b31b8bbcc1d5a13e14c7e2d3a5832ad1f1b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.5e45d77f3.0.tgz","fileCount":11,"integrity":"sha512-KUeapbnHa71nRy7GRKKaq+2a8+oNQ4Q61P+QhFm+bdHWauGr1Ta+bEIHWxBWHuO1MN6e03iEkEUzgcEINi5zqg==","signatures":[{"sig":"MEUCIEabBcjgl5/iYzKpmoN9QcZUEVQqzt4etHkYNeTcgc05AiEApzP2qk8z7DmwXxLl2scdJltwJ/B9S/lDOD32M4uyTGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u2tCRA9TVsSAnZWagAAOPkP+QDqlFO0Irw5nOH85n5d\nFavuPLDyYAKyeLYrkUujPdWkyjxC7oQQougnw1ouGQCX7TgSq2DA/aXHGWFn\nzJ0IDwjgXTcENPuO/ZotqGQ3RjfA+7rtMU7NkNX7xqShm3w8SGb4R29YF1dG\noyNM4pEsIJaU+tLTWT88s/WAY/NvBAXIYVWqJ9ZPAz7FA8iXhEDbV+p5ijk6\n7pcBs4vd3R82+rfophrVQSSZf1Ydiw6PgkptqaGSGGFiz43zBKvsQinT0dOT\nILgkH+ZJq+Al6xz/F5+MZgTw/qGb23lUWza/kaV9TC/wdPq5StArR/xxpY9r\nE9EvnJ+rmUOpt7Oru8XKYORIKg3auEWiNfXphHdbqjj8Kp0bUGqx7P66k96q\n+EoiDLoLXCQDIhO2s3f08vpZxYPon0Q6LA/A780F50CRTfJbRFwpR21IaZPt\ndznCTjUxnITY0dJHa8mJtRVq6EOhUsPsnXWBrJKfD5jTRKIA5GHOevtLPA0Q\n/m/BZHG+KsR5MTPfh17Iu+2gjT3MId423Un8QmeINlegt3WETakWkqAlfcAE\nIWul1/yVHcFEliDenb18vzl7xrVr9CdWFNmehRztw+okEhRKhZ5kGJzO+T8K\nvGxbO6gPHf/X9D/pTnLMwGh/ahcmxDXfOui40kKdWMMU+FUw+ZAiYG9x83tV\nwb/H\r\n=9Mhz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.5e45d77f3.0","@material/shape":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/ripple":"5.0.0-canary.5e45d77f3.0","@material/animation":"5.0.0-canary.5e45d77f3.0","@material/elevation":"5.0.0-canary.5e45d77f3.0","@material/typography":"5.0.0-canary.5e45d77f3.0","@material/touch-target":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.5e45d77f3.0_1575415213466_0.48462950220853496","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/fab","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f046ace2534f6316a07f88b07e04eea11456246","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":11,"integrity":"sha512-WW4Gl7eKz/b1f6mW4MBU2NnBCrvhGEVtmCjkGx5IE01T5lXgp3rmHLGiOi8rv+lzsYEcSGRBvnh0B5Y+chiZOg==","signatures":[{"sig":"MEUCIQDYik+G2JDmp3Gf87sgFt6DQ90X78l0SqHSprI0TPKJdQIgfr3z9Wq5X9smQHXEwaMu4VNBfTVKA5VYzgr+aqykYWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3MCRA9TVsSAnZWagAAdwEP/0LtpdWnKT8Qj1Enz2C8\n9QPTcHbFe8JB8AaM3NyA3peJ8N0QWTR/FzB1ZX/ULIUMoT5WOPRRuU/UECN+\nPA0LbslqgGPsBtYO5CFf42YYdz7B7LSspBZBLaON8ibM5Dw3ise111314tOu\n/EKs6UjO3GyFCCFjZtsWzLGQt8uPdTakEAxHmxYcstktHN9k1OvEcsaMgMOS\nQFeKscb1xJXAfMATZMMC63lrBzKbshkKJpV41fKL1eF0U2u/amKtQloXPhvF\n9+jA2C7hnjROA9UPD0s/FH92rZn/b3ZaTrNaF/CwFBKzmS639hyv/+ufms08\nsd+LhhZ1SLRACx46zW1P6WsJyLK15/WqYjXVDbBvYGGitwrXdrYwbhEC0+vV\n5TkeeDPCcJkRS5800Vk8NCFZn6Z+NF+vmXfJLiSE5sIoEVzvCDOuMtLxTwsR\nOP63wvtFH6DGAgAiTS7gUAp1kNKE85IQBxiTmH50yZy9VK3UirY4uaorOE3l\nzmbV7+bFwOSxYQvTeFX18auP+k1BGVdKDoUxZt+wSfNQyX4z4RfTPtS1NWoU\nAIasZMYFxV3HKxjCOmm4KPCjPsyA32VZ60m7qhkd/WurJ3h1zgk9oCt977j7\n7YR1ieE676BooFnJ0d7d/GR7Cy3TTA8wWQdfNqinyWU1O4fJE1ZmLrJH39zQ\nohln\r\n=cCkj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.d10e8cdf3.0","@material/shape":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/ripple":"5.0.0-canary.d10e8cdf3.0","@material/animation":"5.0.0-canary.d10e8cdf3.0","@material/elevation":"5.0.0-canary.d10e8cdf3.0","@material/typography":"5.0.0-canary.d10e8cdf3.0","@material/touch-target":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.d10e8cdf3.0_1575415243685_0.3001850897305316","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/fab","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e53b480ffe677f0c16234667acb648f5f738d9d3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":11,"integrity":"sha512-L6N+LR97nVIOdjFQ58vSX9n1XjxPmP1gCtMV8MsMWN5YYzGJPvFotPM2Pu6NQ1FLbwWUvDLUNWxj12ijUN7E+g==","signatures":[{"sig":"MEQCIFrEPvmYC8LS/v6IUl7B9+6Euts+XkRWO25XjZoewub9AiBgyYbnYd3ebpNSx0MsGxmMPhxLd6O1ILQuBUF5EBScrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXpCRA9TVsSAnZWagAAddMP/RjizXmTbUs0F8wSMtpN\n4kiLOeD4Dsi0Umbk49XtxRoptg5jn+Z8zaY13Canv2mSw9QkCCeKDYZbOCh4\nATOBf7sUVkp5HPzmQjGw5ntMum3XyogTP0Xzdy+3xWT+cL3dFRrwpmpMCjyt\nOszCm250YZKpqXhFy1ktTN0FiZO55diivwKrVFB8NB/1W232ghNKnYvngLmd\njXsJ8a81sc6nMP8yOftdunZw1HX7/gO4Dikjr7fuFyLMj16BFe6pxs7Lf7Gf\nNUtdZ9LIjIy/MpRIm8FnTaxiXotLIRNGu9hgjlX3bwnwAlA5NwJsGmq7wZ8p\nE64qGeGOuGEaHQrZdu5Jd8qm3Bb5sZlg1Wu46u3ILG5YQDJHXqrEuOVZpQn6\nOotmuAdJLmbB4t40I3klm1UGQjRBSA5+p1HcrQWvdoY4Beu+KCqkdu+qvhbD\nkE+6L6iHTi0mebV2G9/2fr2kXHkyWPT52ufcywWkve8M0E4aoWT6yJj0mGun\nb8AWOjEZv/AGIKPojp59iTAk2H3nAKDdp6ufHBqxQoc7lrgyyC37flYUbU09\nProD76nbxrZlHSmbu88pUFNhXVkaQzCavksIyMrVXQxbFgHco6M82m+LBne5\n9XnTBwCOGq0Xz9BZPcv0GTyEEcudPlX+FI501Xj/xDTNXxJRyExRdrxhv9sM\naock\r\n=binz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.a5dbd8a2a.0","@material/shape":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/ripple":"5.0.0-canary.a5dbd8a2a.0","@material/animation":"5.0.0-canary.a5dbd8a2a.0","@material/elevation":"5.0.0-canary.a5dbd8a2a.0","@material/typography":"5.0.0-canary.a5dbd8a2a.0","@material/touch-target":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.a5dbd8a2a.0_1575417320874_0.21724046847642375","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/fab","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f52ecbaa1a3cc37d7f2a3c509579f43714607d0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.ba879b68b.0.tgz","fileCount":11,"integrity":"sha512-iJPFURc6hYDB5RjzC6uiUyKi5FuBksi0qG0gjtkSx42leSPfaaNKkTLRFB4tNIIXINvRbvbn24Aad5D1sq2clA==","signatures":[{"sig":"MEQCICAioUEfVSSMe+5gwNUuhYZAPlqj+V3QTO/vFdXSwbsrAiBg7vVuarCuoJsj6r2vYf7tgm2O189fW0PV6ZTHE9NR8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWmCRA9TVsSAnZWagAAJbkP/jEeLiQpb+Q/F4G33L35\ntaEppWa9j5sYX81G8UFQC7wSMISHaKOfeB8e00hGRBlxO5qiRTrZ1BFgJcy+\nhaYDL+4s3Fn1iMNipn10Oz3MfWl7CaXE/SEdjwEh5I6GugpuAdwI/XzKHXdl\nKxQmNqwVf8fWVBR7/dRBcw0EdYGAZGOTHrlhjmCS0HBa9qtwvvQM9PSjGgxi\nclLaWjn24SgJ88mukgjxG02umhQOLnOMRngp1zvkbxYI3h+X41M4rUr1rm+y\nRNosBKcojUsUnj/tI7GjFFGOU9/d1ALYCs7DCLzXFSEBcSrcvLTwrBk4LG1f\n9LcblXkcpY5HZ96P9jUQ9ztuiWJSsBz8jBVXPSILiL7OtVl/IQACRORWJ1Ej\n3XvQVcwyCVjUr3/jV1u8UPbAyxD8A75BwRgAjn8mAy88UfwulrRDGjz9VIHE\ndJ42Y18GDeNtP2dRkc2onvKcOhNLkldEnokCLitvNiFtF7/V77s28/ggFu6M\nJIcnfKpG2P/2GVFg6yT0VWyepie9OQb2UPpUwktlA54/KgB5okyoIZbBE/5q\n7l706qWmiJZoeFLZ7u1Oge2+DQAdM4hiwskA9dGJFr0dmOaDD1GeP7AzuD44\nkcdSoCJyFCBUTX5D844McNOv4D1/h8z+kEcEnv+QFSJZ8ekPAHK2aWWYyuJ6\nxx7r\r\n=JHIc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.ba879b68b.0","@material/shape":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/ripple":"5.0.0-canary.ba879b68b.0","@material/animation":"5.0.0-canary.ba879b68b.0","@material/elevation":"5.0.0-canary.ba879b68b.0","@material/typography":"5.0.0-canary.ba879b68b.0","@material/touch-target":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.ba879b68b.0_1575490982266_0.7535969279311261","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/fab","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd9cde8b1c6d74c542b5a617388153f1441511ac","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.aa0eba489.0.tgz","fileCount":11,"integrity":"sha512-x3nK33zYjd66L3iZe0ONACUhniVPLnA1bo/eL8r3zeZMg738fWBk1jNal0TFCFFWKdKAKGfOkoXz711tYZ19+w==","signatures":[{"sig":"MEYCIQC2KYq92wc+09r/ADtQgUfqZftQ1ndpyT1mZH/1Huwd9gIhANMeB2JokmQYtuuK09OuJPpFvvqXpo+SxC2PsypmCkyL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bX9CRA9TVsSAnZWagAA/zUP/1Gsxl5nAmPBJTvno2ch\nNa1BGm1h6PvWSCc/HGh6z6Ozmx+sgEiIH2CBDo7f631RVLzsLsEJJs1fp7XF\n6jfArwMAjqnkdra2+ic6AsNBRyEVmJpdDmdZS2b1GHayWq2b5NDuWI22au7F\n/xwGn1tNZ4TUtJtoVFwIG9XZ6kduUn5xssV2xtxB2AokDWEHp8NVsaZ8wIPK\nm9WLnkvHVODB1YMwsz+08lilp1lTp9JWT2VUntu0NUhvCV1ZxOGeu/KTPJlv\n31ogif/UoD0kJJE4+QvbIHqhY8bwCmoerJAMs26gXVQRD8nhRdWYd42Eu3ya\nKLiZ30Nt0Bu3PUCWohB+kzLtNEqHuo16piTRN4sfrjfefJ9oAOrJi88XpnU7\nfn7jpxh8DCVdSon3R0r2o7l6PrAnewAdhxcfwfwp1NUGDpJBK7znCwF4ChUh\n5pss5Ga7N20D1ulP9xoxDd47wuSMDrgPMN7bjdnjsX1kMLFVOghQyuLX5oEb\nstlNwROOKakx1wuv+I4AauhE7wGiCYhT4+3BIclq1fyVi26xB1h/dbnnmRly\nFjeBxURPHCIxyIX5czx8x7jywlJIOwvcJN8aNtgH2+pyOJS1hZmDewva3Nzn\nyvrIJCo3In5oT+bl6jb1IPpTNIdYsxj/m2cqEaVjes3NPkTJMfQZ7BHTrSFg\noMJv\r\n=w8Bt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.aa0eba489.0","@material/shape":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/ripple":"5.0.0-canary.aa0eba489.0","@material/animation":"5.0.0-canary.aa0eba489.0","@material/elevation":"5.0.0-canary.aa0eba489.0","@material/typography":"5.0.0-canary.aa0eba489.0","@material/touch-target":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.aa0eba489.0_1575597565305_0.9742680180756482","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/fab","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed3e04e4704427174946770749b8d6c8c43808cb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.cb7b71a86.0.tgz","fileCount":11,"integrity":"sha512-GqYjFF51xpBOZwr78RSb3avspXnMSCedqOgzYc/JMBWaGa0NK+zOVmhhApznATB49XWx5m/yevocluH5uqzxDQ==","signatures":[{"sig":"MEUCIAQyRoMrSx7KZdPtEqyISqqcEe8ekfGlrAIG+mnwibxIAiEAp2+G7s1MMFh/qrunHrbI7OQ4xYtgylHDkSqgdZG6zuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqdCRA9TVsSAnZWagAAMb4P/1ZnDB5jd1ij0uvXGWBT\nar0Zzz7Pm6+9b7eom7i/wosv1BV5CPDL7+BRbmj28P8jQ6ujsF2TByWsUNA3\n5Gb7fU3lhCnIhDHNjOYgPKqL2nSgE0BM3gHjBizxUPufoDsG/UVM3waokjHR\nwgpT4MJfWXv1jvbmYROO2AlAIAQcCQf+gDvHpPIzxru9CuPli4IskkyFK26Y\nJoVZVCnxHMjwwnzAGB4NBF7X0s4UzuQlAmT3gFL8DI+jRa09XO3jEkEW9STi\nJBKVatkm4Xk1XSdpN8hemM0Szov4csfdMToJFLM5ZfAwvmo5jLqOYQb1Gu1p\niDV1+qeoEKTp23icVXki+BtOjV+/bbSFIXL0Fyp4WFRma3qEMZhQUt10Z+Rl\nya/uP0KAVAqYcgAJzoi1JJQE3HQVNBS1/MTFrDGbCymaR8Bvx4l2rcxt0Z9R\nrtw7RmWAyND20YS8D8S/dmw0st32nOwqbPRGSwLawSPA+Oq2F9Wt/D8k3dhu\nUrHpi1gOTHqOP2BGTFFbh4y6TFM03ztFKwP61T6zlK+Tt4I/Jm7Cm0PHrL+u\nYSNhtgG7ci9VwmsQ6HQ1e7IQgcekst17sviztvW3pf/+SZmXYbS96y5ISAfG\nMTVNrl8ow0OfTnbCHKgp8//Opu6RWCtWVrbIBKcy8CvcY4Qvk+RR0DXDziLg\n1mDo\r\n=+H/j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.cb7b71a86.0","@material/shape":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/ripple":"5.0.0-canary.cb7b71a86.0","@material/animation":"5.0.0-canary.cb7b71a86.0","@material/elevation":"5.0.0-canary.cb7b71a86.0","@material/typography":"5.0.0-canary.cb7b71a86.0","@material/touch-target":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.cb7b71a86.0_1575676573289_0.9874904547403887","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/fab","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca1065c53c3db9b217ceaa073c3bed2613cfb2c9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.50f110a6c.0.tgz","fileCount":11,"integrity":"sha512-48mXijii92ZDtwZb5Cpa15XMVt/02DD9e/3pOXt457F0krE66RWgQ1Gb8IsVC8ZjcVQIcoQvbu4s/Qit5nD1PA==","signatures":[{"sig":"MEUCIDifxlac5keXjtzUnyKUDH32SwHoKjph/GmCasFzukInAiEAlCIJjqyS1OPmq1spsV17jbHTUSAus7XRf5+ungHauo0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd788QCRA9TVsSAnZWagAAo1YP/jsN9bixar8jnHErKvTK\n8aZA7QH5Ezb/yReCf3HmUzLDTV559SRXDHu+TtaJF3uPa0nPTkWWSr+q0k+s\nV575IJLhTu4c9YyLSLu6eR1RDHHZAyCwLg/La/fwY/s4R337F+gY31RYL7BW\nAZjjS/n2Yrh5t+Oxn9q6S5KsRwANNmXEuErnRcS4fjJVlQID3SCQKW0umGjv\np/kRvrzOgDkWRgwhjTrltNrF6t36B9BW7ibzsvVnEM+oZ1hFpPSmBkfWiW46\nSRQl7ZblgarmhIsx0hJDHRW5hYf/RbMaCArAqBDSQkfynlTEs7NN8spzgKXZ\n+NWdpUDLnx18856KwTBDsFqnlQiLVcY/A55oFCwp5OX48BhVR+bDPdvRjsg3\ntyuxDOkD8onbcg+LiyDLal3cXLbM7VU/LLxXW7iokR+7CW6ok3AvSOhI20ax\nXFUNrnMfEM0als+WRFKQ9Yb2Y6tu516pfmbLEQgSMfXD+5Yz0oSQNYD2LNOc\nfs6A6YefV9gp6CtYO7TSdJVZz+2SwnQmuWBwgFE9gEj07bD5Bpfui38SeBuL\np31FhQMhU9Xd8VyUTX6u3cDAuI3STGeM2oMX12f559dzgMWz1uatzq/Wo7EP\nEvgpbfY0WT2B/qK22K3rGHkEv0CDUu5VwmHxVVPKXuUieZG4RqUyq6rpHlXi\nW46t\r\n=eOln\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.50f110a6c.0","@material/shape":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/ripple":"5.0.0-canary.50f110a6c.0","@material/animation":"5.0.0-canary.50f110a6c.0","@material/elevation":"5.0.0-canary.50f110a6c.0","@material/typography":"5.0.0-canary.50f110a6c.0","@material/touch-target":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.50f110a6c.0_1575997200245_0.26084502090556283","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/fab","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"828d1522908550a97c37b8f0a998baf4c44d7f11","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.878a08b7c.0.tgz","fileCount":11,"integrity":"sha512-9X4YdDaJXqPzcAdiqDDN6IYG1qErAiXlWXAJSdq3l4BSa6OUF03oSnruPoCXg9VylUIJggwcTZ4fchSSJWAgxg==","signatures":[{"sig":"MEQCIH/RQtx9WvhzAnIboIxDIfFXeJvKx+t5sDcaj9jKm/DTAiAJT0LagZhdiap+YxupZWpkLQqbQjJ4NP4BF+4OeUFxZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6mCRA9TVsSAnZWagAAaOsP/j2z5xRstxcBDEtN6/Ws\nSPlp88ZzWjuk4qf2jfJTQq9buwLhxXHf/lgGDPh0eT4cDjvbWqGuKTuLLwtT\nNYtzrf+gDz5Fnoc44FA5LCffadoKr5i4aRhLJAVryOF1JkiWyjLfhArYAG2z\n2cglQzdzxa51nrzDxIepq4CYTUlN7J5NIS7BOas27HP14klcc9ULPtPujB9X\nxjfCngnoBAW+O6qSZknNNFZdTR3cyLBs2cHk/RGkZdbQfHduOisrixfUV2yK\ndhHyT2VoPgCGlrTQTBkNrMGZB+sYYMXMprjO4m9aLfKqttEcq67sg+X/5Alg\nNyNr9ReydmoOGOnEpsE7q1h8/+R552+y3TQsgqlFjNLUvxtkFBVutfuRvZm/\nb2i8LitQY46wVhLBVxTbY1zjVbNMbr7TlW6YAiJeqbrSLT5uO+okJjL/RyUZ\nBwTtDg2OrYJmxHObLJIuDAeTa5KoWyoS+gz4CNs2zYD5cs6MxmkPMN8KPeir\ntySy5RXEvfnRaDTqR4YqoVVRkOIp3qWIr+lUwpQNgAnq9MFfPrj7j9VUnj+H\nje8Y3n3uLzIpqCIYpY7tU37ES4JZjoUjNfpPYB/EbZO8j+gwPVF9MAgjf17o\nE27MRtGGwuFC+n3DFVz5icCAJk26k6DTBAgs4dsd6OR/zLAQPbvexof/eGbC\nebpe\r\n=p9U2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.878a08b7c.0","@material/shape":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/ripple":"5.0.0-canary.878a08b7c.0","@material/animation":"5.0.0-canary.878a08b7c.0","@material/elevation":"5.0.0-canary.878a08b7c.0","@material/typography":"5.0.0-canary.878a08b7c.0","@material/touch-target":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.878a08b7c.0_1576095397890_0.31136671401930593","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/fab","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.397905b4e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"538b23f3b9162b252148e7f33533fc06c37bbed4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.397905b4e.0.tgz","fileCount":11,"integrity":"sha512-r9REIaOWmaUQmhMkfUBcdpQwr5QhFJX5Ow9F/lmYH7bU+FeAaRzGlL56/UXiQx+qtJT7VwnlbSfxzDt8usfODg==","signatures":[{"sig":"MEQCIAhw0OZNKTEtx0sUBpZaWnDOmSpcuL/8cEh85ysUPj+QAiBsNL2UfS71nukqtRhXpzRFK7ypsOe3vnfo8NJn/qxmZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8apICRA9TVsSAnZWagAA4HkP/2YbDB8X9eLvEbHNEFqz\n6gBZjfIsz4pU1/iKqgBfebuCtdTIJR1IORPgI/CIdmlskRalmcg4CsEql7zk\nYX6At8HucetpTPaBk65Ykorg7jt1gN9kM803viF7r9KhscSt6plLW+t2qfIX\n4h0G26wBr+Yw8MUYMUguOiGUOexSCUGn9p8wEOARJ74mf+bhKHf1GwU/vnZi\nP5ROnytd1rfm6TzaMWBUTZK6y697yzjzaFWghyBaLFhQet1OKG/7lDLTBJFf\nU7+5vIzqVLXRXBNfdPYfM6ozEyMKf14ZXD3SqzSkrqHytmcL/utdZpuEMVe8\n2/LMcXqN2koZBgZgmWAm+V2z3aHuTtd67hQhUfOYq6jvw6pl/k3rrcTYZYiX\nscEylEmKg72P92n8U5kgRmcFTLK+SiKmfkSKUBgjE/1IPzz2TGXNUUozNQJj\ntjt+ZBAs9BhNrOOr+JRZGD3dY6zowF0gNavj85rpNcmUwD1IRd0OIxq7P29w\n7ywhkHNedrcxiaw0GDAaGRRBI5Um0Wlxu86a4Q+2ZAGDbmMYb04Hg83hUnqI\n9hC9TpX2GP6MafT3RJEqPK4DCe43ZCjtYSMMFNaaDUT9pCgI4KwpylcU/hET\nF3ZA5lI377vSdE8yT4FCSLCcjjkaHPgtrmeUmnn6qDYUq2L62fegZ6u/ELwk\nWsNo\r\n=35O+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.397905b4e.0","@material/shape":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/ripple":"5.0.0-canary.397905b4e.0","@material/animation":"5.0.0-canary.397905b4e.0","@material/elevation":"5.0.0-canary.397905b4e.0","@material/typography":"5.0.0-canary.397905b4e.0","@material/touch-target":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.397905b4e.0_1576118856267_0.08566433586438982","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/fab","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bae41e9e942ebc2289327624e7768dc0eab4162","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":11,"integrity":"sha512-ywi2XyH/d+zU2nouvonRSBroEqLnP2JXzXb5OaJoNW3B5bNCH5hc3SRk4mPYhdqFMnfRjL9A5NV4ztdQFo+Hwg==","signatures":[{"sig":"MEUCIFgzYX7mE5FRqrocgzINKqUquQvDt5yKmXfO1ezS+4xvAiEAulqw5pxYfLhzeVBStjpS0Hu7pCg9ZSLFuSjztT+deEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4aCRA9TVsSAnZWagAAiB8P/RuT/ELPLxBOes3eLca6\nC/ci0Y+mTDh5aCe9jYjWafRa4Ee0r0gIsQcAGXjRvTrFbLrBbpgn7/DLomVF\nPnWx6cQaYHzCB1USjeTBDtQh7JWYt06dE/BUCKYobuZxKlIiORJsuufLS5BQ\nFMU6DMJWydpStEPKxiVZmDSeaKZv+qummT+aMYp2+vgdOPUFMthAwDB609lR\nfUb3evhRq0bL6if0UpxQT/ykhfm7L189t0yNDf+ISn4+KUI3GD0dIuWYVn3h\n9IoLp5FxFUsHlAbllDwCP/rEbhC9sKFbchok3tPTntRwiN+nD7yWOXtOkn66\nkbYTp5OIPv/WC3CiNus1zBnk8X/E6ppzqLQ9vcGqD9b1w/wJrVgjCwTjPrTe\n3Fz/MKjD6ck0pf0QSYhsRYJW55sGouwzkIR54E0rrysrxOuE+vwSVXbTLP4L\nW1aPeKZgtT73yfINDnZ5IonSGlbI5TMO55tnx+IFoFYEvs5dPymZHDd0elgV\nqYsP54GzUR41oTOylO7nv7YP5J0hRN4e/xccad/ylkdRSbUmD8BGr1Tiz/HO\nxK6sxc2zGeSiw9ZhXp4v0s1QlzLjERJ9VnHfvs/5dSuf9t8hjos8KlK9IauR\n74uQqJTGzKKEfqVCr3VZO69V6C9gt4xjNY/nXUXXFbVK5sQDL6cwS0vyLpaR\nbMGP\r\n=84+9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.1fbf5bd1d.0","@material/shape":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/ripple":"5.0.0-canary.1fbf5bd1d.0","@material/animation":"5.0.0-canary.1fbf5bd1d.0","@material/elevation":"5.0.0-canary.1fbf5bd1d.0","@material/typography":"5.0.0-canary.1fbf5bd1d.0","@material/touch-target":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.1fbf5bd1d.0_1576177178171_0.6356172923419205","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/fab","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b98a2fb14bbb9a9c85f3194f08d4ab4e78d3ef7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.b723dfa78.0.tgz","fileCount":11,"integrity":"sha512-XFOPr6Wl+SwYQEfprKeqeYK1D4Gx41d2lj+So3mJeFX8gB0hZu1zoLfqQOkBdkmvvjAF3wzIhDXzcPaH06vUQQ==","signatures":[{"sig":"MEYCIQDYkDcyVvutnJ1fwwm8lFxW+ijnqZbSyCUfB1Bd9c+yyQIhALT5GFlm25aT0SbJFn64eMLusG2zLlNsKpuykarnozpD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p6sCRA9TVsSAnZWagAA9gUP+gJcqDrI+sYqkC3xk4K0\nS7sLE6c5ErTpOrnaaIDHZ4vqWfrmSObQA6blI1UEnDQpo4+TcUaTN1owoMck\nerTT3KEuP2gu7mmnBu3PynXUQtbNM+auLQ0VZKu6TXIyxfIQ2661hBBRCHJG\netoPzDy+12A7h202ok40VEzBqIVWVJwWnSKo6fyDldFoIi8QdUXTCCmHCqIh\nzAaLneY0kiTtP1GSKWO/XHDzdZEZj1J1QVu9RUUCm93skZl9MAMtpg4Ns5qd\nYHyP1w889fdVVaiPL2uH169nP/6LuUl+JLE5goLVZstELbHYQw29fLuKbWxM\nAR2nfCfzc9x/b7CaSrJm/0SM81NmoRR1oS3i8hivhEdZKTlzI3Ll503BTDSD\n3RvFSttK4tJBBFbn7FbDOMfUP1WZnU/gEyC1J671e7Vzky4Rw6owBQas4+Uq\n6mvayEFoc9KF+2l+Cjycu4wMC+OyLCNLkI9vZhrb4EelaL2b69wFRTBHI6nu\nHBXNs3YIPzQy7+7cXwd3NEesAXxV8qg/rSkL6b+v4FGvELzAUzfv9rDoDcYS\nl1IRXACS3beLA7/NFQJ71CzavB4PRwJ+VwsKepq4tZ2/K9Jpx7hD3fZUGVfR\nqzdXTLrf/lqEH4D+9Cb4//rl0p5tCBmadiCJeG5vW3SIvopFbiVAbycwKYpM\nwhdE\r\n=BgGy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.b723dfa78.0","@material/shape":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/ripple":"5.0.0-canary.b723dfa78.0","@material/animation":"5.0.0-canary.b723dfa78.0","@material/elevation":"5.0.0-canary.b723dfa78.0","@material/typography":"5.0.0-canary.b723dfa78.0","@material/touch-target":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.b723dfa78.0_1576181420084_0.6791799838027943","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/fab","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.1c494e567.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e28140ede762a1a97782feafc4b0d8ff3f03bc21","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.1c494e567.0.tgz","fileCount":11,"integrity":"sha512-LOyPVql6DQMZsuckWtU1QWkgDeX0R7+5EUcJu5fJhK2SBw+36FjFVdvrW9Btel1tWFJXgXTrY9WcZl4yAO/NZQ==","signatures":[{"sig":"MEUCIAE5zK71g/00T7V69LCRdHZUAFlIFAhWiTE3GCtIkX0UAiEA1wrzBYy1u8lAlOV50Tw1QiFDOG6+69h9In7wiza2OCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s8sCRA9TVsSAnZWagAAYqUQAJBSV6F614plMysla/83\nHzryYObTFEg7AljbXj4HQlI1ceeOT/qz1HKFAdv5tqNbOQaZR5K+c3SZd7/s\nDjT5FTjfzxtU8PbRasJ/z4+ml+QSsQg4khEQbGYC5scI81fyHNvWZAtA+Jlx\nunYRV2+a6Qzdfd6RkyKN2WK7mfVagsk2I5s3pHKfdP1rbMa/GukIbza1ygd1\nq/Msv1T9QSmGXf/ZcgGjCohRH0f4xKmwuUjcdPNSrW7dtVwNdfllYKkr1oH6\n5E5MxGca+6+qUDRRMjQ1L7TgxA6vHbBfq2RsV2ralWHz+9jF0b0wpUkcbiA+\nnRBTj2ZIJLHZymS2ZKxpseiYZDf/Nj9iFuUpYONI1UuL9XsuuX39S+3NBAIy\nAYPpqa7gzGsfDffAuD/HlunrWYMURm3KbEeTb1Xk85vkxWgTOZDMd27GobEC\nVP4eAHtddAjvIfOZZ+qwrsnt1s4KDeTJxRc5O+Xu2bE5ptoJCXchPnIomtea\nHDjIv/GJIEKZpQvkSz5/zIb9Zx4KGbMnOy8f/ZLuC+qb5P8SkJ03QYSQ0BYy\nSA7CLbtTwA2XJeOaYnAXBBr8MvAnzN30ufBRvP1vcnkzLSYUhgTDQz2L0hhL\n69+iZWvFrdIpi9EDnTfDUklovKglCDyCPRSnNKx4GV1v6vX+4TAG2/di6aMA\nnXka\r\n=xYDf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.1c494e567.0","@material/shape":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/ripple":"5.0.0-canary.1c494e567.0","@material/animation":"5.0.0-canary.1c494e567.0","@material/elevation":"5.0.0-canary.1c494e567.0","@material/typography":"5.0.0-canary.1c494e567.0","@material/touch-target":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.1c494e567.0_1576193835812_0.5168936329038893","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/fab","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e04d5d7c732bbcfee09e1ffc617fcec4d03de61","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.c9e98a125.0.tgz","fileCount":11,"integrity":"sha512-SHHHzrHMUxrOzfYll0NqyTVz7abJ3QRWfUgBb2qxhPnm4a04lmMsiN4n3cdOAzQ+uwHusTc6j/tmFm3fplWlQQ==","signatures":[{"sig":"MEQCIAfescvIauHYC9vkBQwMNxFvz+2O26l91h6PksAPvpjCAiAWr1cTxOkaQgKqfJgTgDn1m8sawwWp4o1eegd5X3JfyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RoTCRA9TVsSAnZWagAAvQMQAKMwIpqPdVa4SJmLsF6o\nft3ra7PgAaCRNpz+UQ/xzBAKwLBnotyKZ7rjNINW5IhPseQdc4xAf0UGT4RX\n0sVabEZoSAk+3uHFpeqKOodHD78HCDdwKbCkCYfZYsgs6VUqw6XBQIJTHUBi\n89JAHydX9K8ux0OV//14CzQ3QoqPs8zIp76aA7Z1eJiYAcy+13di3r3sU/Iu\nwbscHIz4dFDNNIqdoOhQQtz6NWAnFI2om3hW5AHDQfm2aE3J+BBjsAsqpyKf\nEejxXyk66FVgenfceh8QbMzmIYH/nopttGHYt38U/MmivuuC5H22GxAMRrNU\nRL/5qzrEBsILAD8dN5apGDgJToI6ryYF09aVvqy/Fq1rre8zYgsFxZ4AhfE6\ntwTZ1xZP+0RhKpvdhznHMRJGv+Sugg/eoGJk7bNYcon7zHKgLx2syPR4XBfD\nzt/x41G/A1lHpG/DYP/KHdjF8xcahTAG1hz5GClSmEotlwUk3c0sLfVLH7IF\nSuT/auzz/FYYlKm8tpSElOV2VtXk8ekJaBKr6rsqdk2+L/pSySOLYrLSRb8Q\nfJVW8Z3YZWd+UpX4j5gRyqdnRnBDqrkMVCiBYBhcijS9Cm4cZ6UGKR+Y7VvY\nd/QGsGgwroY0AaCGK34GhM5uQFc1mu9wS+1mTDY06zeAvRTgSAFVvpsV67Do\nHWqn\r\n=rxNB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.c9e98a125.0","@material/shape":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/ripple":"5.0.0-canary.c9e98a125.0","@material/animation":"5.0.0-canary.c9e98a125.0","@material/elevation":"5.0.0-canary.c9e98a125.0","@material/typography":"5.0.0-canary.c9e98a125.0","@material/touch-target":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.c9e98a125.0_1576606227505_0.7953081668055806","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/fab","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dce8a65bb98a7bd3fbf77da223263ec2c011c80e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":11,"integrity":"sha512-sack7QYaKh4+Hu+wJaup2Qjk+we1QpcyJ0dAsz8kMhIurKR10DKcPDuR65EpzShWcjmxcnsiWovtUp4ihJczgA==","signatures":[{"sig":"MEYCIQCPtJMdP+0KzmSwvhVHBWZpjVRbUIPtBIzPrjS1JoeXqAIhAJuCzYEcTBD8d9NLSf0dezRGm6EM6EB8ZEI9yyUCZVGU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VfACRA9TVsSAnZWagAAoaUP/3D1cYzEqESAhoKpbfOI\nhC1CeTvidwEaf/W7N48CY5jQBKR0uNT+mfLDKhYA/+Fgv7mXfyQyrvBNDNy7\n7tnMgVutLiNpU2A+Ej9Wx+Fb7NhpYH34nQ7inFHeeloKxTd6TedGQL9e+gTO\n/gt+BnppGaPMpGFqpfCCiUCl1Qp6WnfZKFzwBVzCOxwp1FD22IsSIDC3VvpV\nMpEi5wexLrpwBGw8b8yN7LGJYx5/bokGSPhEFGeLFxEZ2vWyaP6NNk29pPCf\nvHDzuRVsCqMJs8kl+I8Dt5yx5Eg5iGMvSnA2fViRpm+gY8uzSn02aSBRAVCn\nxgtgYFcEktLa7nbgt0Vtx9mbEbwx7TT1Bzzbxc7MyWBDqPForD/zGHQFmf9z\n7WJ6MF8iAyc/q7PwZUWFEEgUhtiNVJgNtTcgMacNdwwSoyq4fp4RYFe0VxC9\nULRCu/kFa07+MoOldYHFcVZSe83i3tFRbvgO9fI6D34kTipxcszbNdjp8aDP\njWcT+RwEu6ytpfZNaORCngNMFKPuORp6SqmDKYPoGM99sZ38y5z+DaSpVSdd\nqdKEcw1GXgSLKIjf2Q8jvt3QxWXrXylSxlK0+HBPzg2Tw1qxWUcBIrg1i/mT\nNJoW8X0fVtpKRcc3SmjB4inBArFht0kVMyfAnlCbY97M0MMcHttg2Op4G/4E\nkJNg\r\n=gLTh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.5ffe8f7e3.0","@material/shape":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/ripple":"5.0.0-canary.5ffe8f7e3.0","@material/animation":"5.0.0-canary.5ffe8f7e3.0","@material/elevation":"5.0.0-canary.5ffe8f7e3.0","@material/typography":"5.0.0-canary.5ffe8f7e3.0","@material/touch-target":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.5ffe8f7e3.0_1576622016480_0.6897563288976596","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/fab","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.47949b08e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f56e1c574d1aa476726a804db990229bd90e80e9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.47949b08e.0.tgz","fileCount":11,"integrity":"sha512-gBfJhkXfL3kTQqzEaHDoNrmkyeqo4Te/Uo1417tbFYYjiaeHlZlHH3CRJxsdCBhL0Ia74XnkBMbTgkxcvVaMEQ==","signatures":[{"sig":"MEUCIQDKg0QmedsWIZlq7voGFs4e9FNCvIieYAqlOQI11SyHBgIgDLxrnou57DvCY/FO1Lu8HCPzx8VEiw/YVOSO64oMihw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSmCRA9TVsSAnZWagAAep8P/1iTJyN13r+WvuqmihkR\nAuZyeRzVdrmqNAr3Mc8HV9iWXol8Ibt2Iqp2uZpnSfd+shu+yzNoU8Qm+z2o\ntR56tf1nCRDv2FdoKdYb2kYeG4UIs9BtUsq92b5cBX4Xz96bCxESO3va9Uib\nsyeyXIQiqFytr+iMkIsFIvZz3XGhlWY7sRjfS3c074Ry6Ny7NkyfJgtSdg67\nHS53MjI3Kto2p6p25piHmU9RU/QSz8I2Wc4EB94kqG+t6A/Eq/2ukgnoD1yx\nQXGfo+4Navou8m02PJ7Nw4r48Wl9X6FoYnUjvdMwjpsTcxdtUJfR+cfm5+PB\nBQI3O4BJxs2Z3pEAgj1sZgjptsjyaOg0bnSdXKphzFyNF3CEnG03CfSVmctB\nz10yXk6CehxBnEmSYxEbYh9KxYGNTcjUZe9jTgoKeEDFHYYe77vTw7nQN+1q\nxDFitgED/JSBX9XGMVTOPUtdS4tJOBnGq8GGYIbh5PZRlTfN0LQebgW3Xh33\n4ZT5TZ2kkXTU7d/sSR4okg4neL5JEV3XpX19qy42hCZEkBjZXcK/rdN9Gvx3\n5GlXcDHJx4Xpy54xquZLnmn1cuPmZo9scxO6bzHu2Vd/8aQw9Kz3NtnoxoI/\nNFWZ/Q5ewpd6ZDZNHsF4BHb/1vx+U2OIAjyYA6AARs5CgcrDwBo5X/50McnA\nH5Mh\r\n=53oS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.47949b08e.0","@material/shape":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/ripple":"5.0.0-canary.47949b08e.0","@material/animation":"5.0.0-canary.47949b08e.0","@material/elevation":"5.0.0-canary.47949b08e.0","@material/typography":"5.0.0-canary.47949b08e.0","@material/touch-target":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.47949b08e.0_1576690853710_0.8536838710941577","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/fab","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80fb13c55d243e2a6d0bfb11c44a36e2413e0949","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.b240bcc1b.0.tgz","fileCount":11,"integrity":"sha512-gSi+9bkZhB3xghMA7nAsuDbuXXAcZmP8Kcvqoj3YXPI9kIjhMKpoD00cQH0rF6h8vunIuF1Kk/LvEEeHLG43LQ==","signatures":[{"sig":"MEUCIEk+5O8cbAAswkRx5oNkSsR2TzmA8NARYl+r3y+5GgowAiEAhnV0ZYrGQ07YvkWh1OQMv2Jpp0HhYJxbb505atlvKYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ns+CRA9TVsSAnZWagAA60UP/A1JITJDTp+NOaM+3rvT\nvHn7rrL7a/pJ1g3yxE3V/CS4tJLPQIoilRxi7qiDMhPKWXYRD1GyH5v8MGUH\nPIeU7Si9C1Qs6hlJmGu6I+MwnXATUKxWlnbX6du5wZQa8YEX2Y587DgM5IV+\naUqVUeDCHJmuQCcoLr4Lbfr9/Nv965iBCNFlpw8xfXlsGfQF52HJJNX2kntg\nK9FZH7/VluEpJaTgwyBDhdYXLudpEBMno2/iaccbAerR6/gZf9zT92OHmn9L\nxPd/mC0sI2BqMkkHe4+HuMibW3q+20V36Srktp15hbKrTCFr9utbXm/qEa9P\nar6n6e4xHxl71qg99G+oms8Ub4RBjFzM0fXz4PkeRm8S5WpVOwFP9obfPEVk\n3s7uu7vBoGu4oOWvj6DX6rkujgpbZ+z1BdN+Vx6Zy7YkdbGPEqOOY9mfsAl6\nNCXwXgWDh8r1Z3yI9ecIX4HX/a+VFm4Re8i/41011sEENetl50cSuYM5anim\nhIbML2d3CiVkylfwvoSrC/v3X11K2KOf+b6agwDhbtr4oT3+yaBOteIkLefc\nDd/LkPtYWsS6TD0zkOcPpbxA5/Z0411tfKIJ9El54lEU3EqKWp1MzM0jgyI+\nasnSeqlUSbpvT1KnSdTzYV0XyCIzHhRUmrWCzZIjlw9QnprHoY2+s+JCZ9sW\n+DDY\r\n=S/b2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.b240bcc1b.0","@material/shape":"5.0.0-canary.b240bcc1b.0","@material/theme":"5.0.0-canary.b240bcc1b.0","@material/ripple":"5.0.0-canary.b240bcc1b.0","@material/animation":"5.0.0-canary.b240bcc1b.0","@material/elevation":"5.0.0-canary.b240bcc1b.0","@material/typography":"5.0.0-canary.b240bcc1b.0","@material/touch-target":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.b240bcc1b.0_1576696638160_0.3615344488066692","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/fab","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.391674a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"919df93213fbd1debeb188292dd1e0704f83b589","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.391674a26.0.tgz","fileCount":11,"integrity":"sha512-bZOhDT0OhAvZdeQepH+6SQ2zsdPr0dEsdulLj52MKTnI/pgHOmEMteyRBOpAyRmCAeVqqmBAbW1HMeUVsWXvsA==","signatures":[{"sig":"MEUCIQDO0lBLChcCmw1oeSNE+tceyUEotwOgpryUNer6IMVA9AIgcmCv8YN9BKtQgCUi1nJ7QHBYqsYl1hEl66bWuYVxdDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntNCRA9TVsSAnZWagAAltUP/AjTqtUz7ARPXoJDBeVw\nlF0DHWYJ7r4K5D5eER4iAH5nRH+xYM5H/Rh6X8UOgnO0v0wRHqj+Z5EJQFoH\nngCv7LRmh8Venor23tEBqSoICKqcGM82xS+40ALWZPMiOtHZeO3FFQ/osJTD\nuW4f5s6Z89Dtn0kOc6EM3xxxQU+jGfM12RWaDhXt9ZqrpqGlzMU47SQBUNUk\no/8Y6miUeSvPZ/PRlhPiTgesEISnWTIHTO4PfzGRvAb4URJFGaLnPe0OupiW\nnLFQx9sC4lhf/RJqfdn6+oUgGiX5pgQJSahRI/PX+LKSyT8KRPiihk3Jnk30\nCzPAXirXjF6rvPfJp8FMtKwwKEvWduzHD/r41nTzos9mzjxMnayVflwA9WHY\nQ8kT2mNptKQYWnysH6ht5B/cVuXwEyzyFE0H6DLOiI9MqbPSRhr/7nEbEl2y\n9Dt16fYRZjamb1X+iU6Gvd/Kbt5IQcMB5TacNGyCznbrGcDLsPl7hPTJaWiz\ns3FF06HtN2ncpTkYqeSlRlmaN/zG9ihT2BQAQjSkK5yqHW4NT1d6WGSTlWVS\nD02vKWof/yBasCo+fhK53WRPhBDZt38vqpnZ/y0fWeaoX+EL3SGgjzPVwrsL\nn6eQFh3WRmXKXjszs9f+tN/Rvnrf/W6tqhI+6Uyki0NCznql99EDAK2X5kGO\n+TNc\r\n=BFRw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.391674a26.0","@material/shape":"5.0.0-canary.391674a26.0","@material/theme":"5.0.0-canary.391674a26.0","@material/ripple":"5.0.0-canary.391674a26.0","@material/animation":"5.0.0-canary.391674a26.0","@material/elevation":"5.0.0-canary.391674a26.0","@material/typography":"5.0.0-canary.391674a26.0","@material/touch-target":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.391674a26.0_1576696652523_0.14919136635487718","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/fab","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.c4837746c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36d46b38c6a57e52c9c30e8e883f80170b10f480","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.c4837746c.0.tgz","fileCount":11,"integrity":"sha512-Ds5htFkGaDz6tDpVAWh1SmJqmo3jDhPJY5fphJjBDy+gX3/+6+q0CMsUvDKNBiOBfVamGBtRLJ0PRecBTbB4yQ==","signatures":[{"sig":"MEUCIQD2OKMvyFxh2rHA6Shp4QeWFEMwaHZPBxRTQXtfq5XlXAIgX68uLCxW6Ulo/e2EsYuimMOcego4/kuGRNLonzygpYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n+DCRA9TVsSAnZWagAAzCwP/js8Rn05Qw2vFkqjcj9t\nJH1egaYzPqlKgbDmrrRYGUonvLdmh6QDUcQZIHeRtwI0fc/kCPAwwJgp5qe4\n8o4D7RqHHvw7cCAll5Nxj0Dj1G9KmYQSawAGqfLAqKrfif6Te9MGwN4whbe6\nOYzuDCVtoPaDyDCTacnv9gBVeZiSCnVUiV/gUGpcDng9h4jCy526/crCS54Y\nQCAAqFdlIhl2Xk7xcsoCq38egeHyNd+LNeQGTq5n3aZ1WKXygatcL3BxHJ6P\nf+J0qZfpB8l63UXquAz6qx8rxXegutJkxGY0O0L/r67f99ASC/btUTsr0DYC\n7Fy1L4wfzInUi42CDsvsqJwJ5MSXRtmjyx80JIbZOC5bX2tghXD6Ef+ss2ky\nWYK4I9lAEKvxPxTTRqkrmzwddc5O25xMphZwphqE81iIwTfOIyGQvBUUpM6g\nwVFWSAiYVPD4n2ARa2cgy9SEfcGWnQHjla7r0z359YVUN+3GrweAuRlE5Z6G\nGwaVNHrIQBMR3TZ1+aB403xnUWY0CkkkMx9RTfJJrqyMwgbecUstQCTxi2Ce\n/cmhu46cd4znfQ7VgaL3NYaa2Ky+DWxzYGJKSHioT9VZ1IbXxB4DHG5WteJ0\naE0s+Ed0H7vjeNqBxlL6LaMJrJ0MRrsr03gsSSTxwGVLYDTAK2eNSRAIkNTD\nEnD0\r\n=ZPad\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.c4837746c.0","@material/shape":"5.0.0-canary.c4837746c.0","@material/theme":"5.0.0-canary.c4837746c.0","@material/ripple":"5.0.0-canary.c4837746c.0","@material/animation":"5.0.0-canary.c4837746c.0","@material/elevation":"5.0.0-canary.c4837746c.0","@material/typography":"5.0.0-canary.c4837746c.0","@material/touch-target":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.c4837746c.0_1576697730953_0.44461311415554583","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/fab","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.e41a70425.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a1d0e44c5c49b9f56fb35893aca189cd3e586a3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.e41a70425.0.tgz","fileCount":11,"integrity":"sha512-Ff+Z+2v4sg1gZnW3h2cPcCeN+j8HayeG55n1cIkC35Ivb+DVopTD6d/GTf90DJ/urc1Q2E7ug2ILG3IUslQArQ==","signatures":[{"sig":"MEUCIQDuUrlMZWciLeVA3Li3Ku+En62YiLocN2we8mXVYimgIwIgXoMD8AUEqHNfoS06KYqw7y/yuqaBQm+t+kIv5Lswh/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rRKCRA9TVsSAnZWagAAgmgP/Rk5hlVsjMSBgo5Lq+0g\ncWrm5tfA8d/51M2XJfHX3G2edXEHYYwY/c+zwRxNrfKn2ajip7iyJ+SQp1zl\nh/oc71QrzCkP+YL7wYa6/UjcTzJrBN2DeMAr0X2Kpv+1lSQ6h0mdbFJx/HZM\nFVuher7MwoLp+H4qoUZ7UvgVrpZINSgLuh3zGbUqJcHWe7zejP3WAQuvHTkI\n65FTRSQn/aTvR5nOPelzEvOYgq3jVwELrYfethYQ1zYCw198fisPLmnXydRM\nAuEElZ/GvZu+WiieNy0gGxCI3dAeET68KDb+X4vA7tw1nS0P0F8wmdOwneI5\n2rlbqtbgNvvrAZp0oeUe1ECECHJO3I2aHsWnxVL2dZszTACsN1LgUh8h3qgD\nwk6DGeKUweKVQB8cVxHTpTW7GRmlQWeIB44Yg+fJSoyhndyWjnv+YuW7QYBu\nTxzti9wj3JXIlfEBn+1ltUf+BMjdXYeIfBnCi1/ym3jNa7txVc7YwtKqZ/vf\nUIErPvG7Io39DNU6N6FjSPQiODqRv+Tu6kwYuk9Fz/e7Ssi0V2PXhnTHPew3\ne96XcVj3yfJaPpYW/Wtr/UdGRjnhYQsttgYdzEY0Ymo3kW5kmBXQJZF1+cEZ\nT7p48aNMdK25CIUeb03+wmaKm2f5efVj871h9Zn0nzHQMmIY6xqrHx9uR5A2\ngbvK\r\n=qUPO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.e41a70425.0","@material/shape":"5.0.0-canary.e41a70425.0","@material/theme":"5.0.0-canary.e41a70425.0","@material/ripple":"5.0.0-canary.e41a70425.0","@material/animation":"5.0.0-canary.e41a70425.0","@material/elevation":"5.0.0-canary.e41a70425.0","@material/typography":"5.0.0-canary.e41a70425.0","@material/touch-target":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.e41a70425.0_1576711241970_0.24967254549275397","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/fab","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"539cda5bf504bc5c81b23115e6256734cad142be","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.bac43eb43.0.tgz","fileCount":11,"integrity":"sha512-uApIR4zYu5Zw+0ZCUEKYWCb388NzHjWw6YZtuUwHpDU+G18kNcAVKmWcMZF1/ltDTrr++/uzmrDVP56aPndD2Q==","signatures":[{"sig":"MEUCIQDtsy88E+jY53J1HxB7ET8Sg2dgo7WDdVtxG0VfPePX/gIgBw2xWtUqndmqnIgEaENAZKB7iNcuA+0ktlBSIBkKjRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rUrCRA9TVsSAnZWagAAVLoP/2UP7H7QctmjH1E8wpjn\nWgWXqfmS7Wv84ghisSIwNxlwM6LhGNEMkTmRM+R0Xh6XHr7xqYqqRxtfySy8\nnVwwkIpwD2WTC4UEjoY/MHBmdvDdii3tH/qrbkC5RuhGEURn5YrjvwVpfaM4\nPBmISnmrfm3W6nRDvjJgfJS69QuqnrXMeHi+ylt34Q0IBZX/5bkp0E0unJR8\nVcsLgpfV4NyIKXn2dFBDO64v8bb5FC/2HNuopFloy/o8durvbnFIrGg2RpZa\nLx8B1Eb2j8i01TeGzbp6F9MCPt8I4Ef8K1YEnQzjZ+ySIoQxPyzb/xgXXQ+g\n2UdYYMrwCkPlV01nHfLK3b576AqHoMvDJqxt2xB2VIcxyVRvATZE5hogdwi1\nMXsACCMAb3rvX/8/6Px4Cdd28hTwY9zuVj4jU12G4EvAxKfL6DyzwiMOzE8M\nzyQ3P0Md71rGMSad+lz+gIDLcdJ8/tayeirqPae1eLw1NZNAdwhBEuZGlmB/\nBP/FUG9qES3+3qs4o0QKKS+w8d7L9eJKFDjC8F9pBn/bCqqWgpVUO6CDcwuA\nNzeNz6qIN5K+BcinDmHOkC+QF251xwsKO28yq38vdilgJaig8+wNhDLspqAp\nFNfQjwJXB2kycEN4EjKdYlGd/mHjhFzFOfzyd2Bw1ymjn8W6F2C1zYfghjsl\nJCqK\r\n=9hJ8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.bac43eb43.0","@material/shape":"5.0.0-canary.bac43eb43.0","@material/theme":"5.0.0-canary.bac43eb43.0","@material/ripple":"5.0.0-canary.bac43eb43.0","@material/animation":"5.0.0-canary.bac43eb43.0","@material/elevation":"5.0.0-canary.bac43eb43.0","@material/typography":"5.0.0-canary.bac43eb43.0","@material/touch-target":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.bac43eb43.0_1576711467357_0.09148491431118311","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/fab","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.2e491de55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99221710978dbe7d44ef666e558fc276c893f294","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.2e491de55.0.tgz","fileCount":11,"integrity":"sha512-DL8JR6thW5RenqZ+v+lSPxVZD09Ki4xQkJ2dOdKB2ZwBIP/Bd7AgjH3KW03PwQRh+Krraa912I1cKIti5Q2vcA==","signatures":[{"sig":"MEUCIQD+NcnWlC3n9kV3JLJiklc+NTqAlbGrEpX8WATZwFk6YwIgEp7YjTo12QsTyUk5ARPJgsboJCIaZ5fZNZubPsDcZPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1XlCRA9TVsSAnZWagAAh4MP/28stuPmBp/sr/iNKN7W\nX0TJeS+5BP4Y+W8XMWpSadsPeEnxMRwbLg9yJmVM1c/2fa9FvcfmGUoU+BcS\nLwQNCCbohVMncwzVgL0uSYqDJZH09dseK0Ev29iq8wqoN7lzZDb7zAAnbCAy\nf49Uao1wNo9u6V3k8dGFHk75y9yNWi8OXdXJATLLRHJltZ8gQPH/CXyLqZzj\nRmGzlUhNrdgYyn8XxmWXDeSzYIsfNTwl6hM5y+h8ZXw1/eS6jpfqDYujZF5C\nFSLyaX4C9MkZx56vAknkFBwMcTciPPmkzSnQ2kzb/D94vnMfZWwSgnPS/NCf\nU77NIUX7fxLrvCZd7fbXioQ1kf7tjJvtCikduTz4nKbtd3vKXFlk4qMeb5OZ\n9XMQiMpUhNJwox75p6Dmm/L44pZ64szaK6S3G2gyS7VJ2JqB7/Mg43W4adbF\nNTF3qpFa+YgI+ZhwAlZ5ZHLQvmEBHdn/V6Y6qGaGIRRdSIvJMr7yJbMpD1qi\n+xfSWRYu6mHOMp8NMpP5UWyvqGEoSMIg8PZxCAk/SH9zuUr2bAmGl5mBuJ7b\n++ZO9ioQkja0vlL0BIkWhIuvzdtCwt+pCIeyvcNrpazon7215yydWuj3aEhz\nRgnEqOcI6ETkwY2o+j6tpWILjJ3cTpUUxd9mkgR9M/cLVf8QfbtlSRa18QGs\nY3Nu\r\n=uGAg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.2e491de55.0","@material/shape":"5.0.0-canary.2e491de55.0","@material/theme":"5.0.0-canary.2e491de55.0","@material/ripple":"5.0.0-canary.2e491de55.0","@material/animation":"5.0.0-canary.2e491de55.0","@material/elevation":"5.0.0-canary.2e491de55.0","@material/typography":"5.0.0-canary.2e491de55.0","@material/touch-target":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.2e491de55.0_1576752612586_0.6177019614124297","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/fab","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.ae101c144.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f069733af312c8bbeaf490e773d2546684a09723","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.ae101c144.0.tgz","fileCount":11,"integrity":"sha512-y+AK+rOZ6YgFQ8pQwXz/MnaJfOgPpDcY+vKMqxIsPecymoIAcvxa3wPWtHEsazI/Hq3o6hqTQ+gHeaHJGqfz9w==","signatures":[{"sig":"MEUCIAaD4C+uYO6MBEjsT2+00Omq1wJ44I8Zl5XEJwoBITwFAiEAgfqUGZx6v/YBi3uvcpAhsPrNntPS8JdWg4MZDjGH15k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6RsCRA9TVsSAnZWagAAF5gP+wVAcClrqKYWiBDWlXuT\n8rZBETvdZ1sBvANb3+P0nb8Wz/xcgv8rDZf/0PshsKBsO+pef/Xr96enS1y+\nDcFLdmzcYCLsapADfsHERHcEqWX5YtEt9bQTLkoirOGAG+qr7ddl3BP2OQ4k\nUkL7N+bZCrMC3O00xZ/mESUEPZdTOKKgCzDFpOAdAGLHafytadVahR6iA0Hs\noSaeRIz4MOYStlXJAecj6j8loxF6rEWer5MybgpdK6Cah+UAeLs3TAhU8G2O\nkX4be7LNLTnWrRs2Rs/jGvCEdWjVTS5tAiNGXOYVAvBita0dkiJFarM6qYGU\nwTboBGOtPF23GXKM7n/hvJ3hkUp+sT3WqpkOfv+Dmz7leeTPLOude477SIjN\nyY4lPnJs61JNMgt1NmNhfZhYxsP1wJLjoMTRguzby3ndrvmQa0bk7gnqcOtz\nYqXenJBmxXChz8yjyJXMgp7CVBBXbJ+rGLXkH6m+HPnRNHNS2LxkTuDQeKvO\nUkaAf+niKbNYn7WyijIgqJbf0SKbQ+TYmeItFeolELb+Vy75nOIKJoLu7y7I\nbPPHKYR7O4C0d3L3ClCTBCB0Ma3O6RhqVhjPinEu5hGhYDco6q7Xt3koV4YT\nSu/VOG36t59/vG+zVmHYgas6jpgvsgI6dHa9qYFSOMAGELybvnw9UdfZ7EB5\nvn9C\r\n=D0Pg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.ae101c144.0","@material/shape":"5.0.0-canary.ae101c144.0","@material/theme":"5.0.0-canary.ae101c144.0","@material/ripple":"5.0.0-canary.ae101c144.0","@material/animation":"5.0.0-canary.ae101c144.0","@material/elevation":"5.0.0-canary.ae101c144.0","@material/typography":"5.0.0-canary.ae101c144.0","@material/touch-target":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.ae101c144.0_1576772715924_0.08362960155579358","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/fab","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"806acf61b29d06c8a76e1be44b4c9e702efda726","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.a51c31f26.0.tgz","fileCount":11,"integrity":"sha512-mWJNGCS0nLeo/CAEztCk/Yx4isllwW9hAYsI2xFStIUUNNA0DxhOcwr01FOwZYWI8+O+EppMgfLazHPsi+DHvw==","signatures":[{"sig":"MEUCIQCBLewACkUtf2N/bWWaxzXOyvVWSrT5ljeV5lcqSe4gUgIgZMXol0P24gLHfGvrs/2EXJ/pNJPLPS2c7Jp9NG5Ebkc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+7ABCRA9TVsSAnZWagAAqjQP/0FJvZxjFLXCW/Jf21m/\n3kZ0/QbTqTtv/Z0ZLZMYHMO0IZ3e8YCg2YotT/VTOduDWDdv6CTiRkGwRhPV\n4qJivTJdIMC81gEI1BZLOgCJcIqHG1TrLnAZ7fpaQCJODhRVCCd2OVPLMclL\ndH8GGxL0ma03yHUy4qYjsWAP1sOjBAlNHOpA2/gko5s0Sxhl/dEYoCcDjKQx\nMUMBz98JyqEI8GEo83CINofwg1C3T/EefA8ALplagKalUAvWWgh7nm3Ggp95\nCErV2Mr8PXTdhJ/fgvnHWtr2NwA7oh+b3mPZBGZ1yPeiW6MC0+1VSUhZJDwX\nSAtipNlfLPteOH5C2stOZ8vSu1Fyin68onrEZhgnVz2ypWgWmK8BcI8Eb34W\niis5/MLf8kEro5Oe0zFIthwLNgS+pJMePfyDtgp0msNwSlpZRvaIF6ymIqB4\nafmwMi0nDfByA0rPygkLrJ6gGYZRV4/F01lMB54RJONtRndEid4KijVjePs7\nKd/uZ9nu01r6G0cm20lcODI5w2DCxAJPgQ639jDpF/6zRUps2NOiQl8s/7/H\nqi4ojdNLW5xGMwrhDj0Vu2q7hRmK1vmrAXXQL1c5ogDEMhibbR4qn56Rra2Y\nSHX5Ep0UChR2SePb+/j7z94Vew74DIqBMJK5IRf+SHr1zwAfrPqf2Ve1ews6\nwCK9\r\n=qI7w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.a51c31f26.0","@material/shape":"5.0.0-canary.a51c31f26.0","@material/theme":"5.0.0-canary.a51c31f26.0","@material/ripple":"5.0.0-canary.a51c31f26.0","@material/animation":"5.0.0-canary.a51c31f26.0","@material/elevation":"5.0.0-canary.a51c31f26.0","@material/typography":"5.0.0-canary.a51c31f26.0","@material/touch-target":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.a51c31f26.0_1576775681296_0.9184581239908394","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/fab","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b76bf999b3f304d225fafa6054233400bd99851","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.21fc4e13b.0.tgz","fileCount":11,"integrity":"sha512-9Hhg19QJEkgWwl3NLXk0U8NIrWH2bhZpP/5VB431XBFO0oUo7QN4skjgBazOws+002XpwSzmfI3E5GMdeZgTuA==","signatures":[{"sig":"MEYCIQCjXzbd+Qd3fMk6OKb6WJWCcq9B4UZXW/gpsFRUl9ebZQIhANISgGe8PHYIFbT3oFLBU51amBsa8jHZh3Jdtyz5qRXc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++s+CRA9TVsSAnZWagAAFAcP/irfWs0PBX8Lg8tobsgP\n+AuWZ3wCFiITsc/fbtyzMwXw0ouwqlo0O9p1hBvHbdPmw+y1d6INryKXCCEg\n2xiLmITY2Nc4lQrNWJ5D9d3mRj6uS701xkPWl1S+dtTKwbOvhtgHYzF0O4WR\nFZL7tyKRmNX/7kShWqg5NK2eTUn6RHWhGNr3zq02UYMrfa8/SRM30ifVCX2N\nhJ6NtCIZxK7g0sDMUdx7cpUiF3VW3ue7s5AOGomvQrRhzvNlwhtETvkpnCIl\nr/S2ke8g31p0+4yJcywv37PeG/WfLt6ANmNcoBJea+QT8nylKpkmrLcvfLUx\n2NNAkJlCnVeM+TxOrk1LbpARjcLHDj7M2f71Qb8SIDC56GzoRB45RA5TwjAr\nf/bk1Ml2J37SlQlSLyaddo8Tw07pd7w2/ODJaZrdJX/Wiv91iWJsDSWHxPfP\nL7xUIklfsW6Y65z9A/lhxUtJKqIVLUTKIRegkNVdvZL634KhNBPuqC9CZnjc\nR/u1dL4XDUrjSXZ+HwVRnDaxNhsHnUgz0kU542kFa8Ror8/MiKhpu4tpKcTh\nJbwTuc0Jv/VBzOjVV0I3HZfyxm8wF7WQRcj1Xk9U4tN4XVrTG3+fofufnN+4\ncq1wMyGjXQCtAs0EdnqMTeZdW6Z/2IXXl+ZTA/aN7AG5/WqUFxA6he1X6J5v\ncvB8\r\n=ACVJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.21fc4e13b.0","@material/shape":"5.0.0-canary.21fc4e13b.0","@material/theme":"5.0.0-canary.21fc4e13b.0","@material/ripple":"5.0.0-canary.21fc4e13b.0","@material/animation":"5.0.0-canary.21fc4e13b.0","@material/elevation":"5.0.0-canary.21fc4e13b.0","@material/typography":"5.0.0-canary.21fc4e13b.0","@material/touch-target":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.21fc4e13b.0_1576790846218_0.16134384352033426","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/fab","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90dd2e9ba51129b88fe303c1eb08ca369d788396","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":11,"integrity":"sha512-C4fanr8fNvxaiXCDVtLn6azP3MFkn9PgK3Kump3tvCgIs7tOLerCMSg1cUK2Fo6gVRtdDZcsD2dITAMl27R8Dg==","signatures":[{"sig":"MEUCIQCETx5EzLUTqJ8rtJEDaPgIzCyXTf1gnO0Co0mciWsrfgIgDkPNR4c0/I8v2PnJJ6aNInhpmt2oylnCewW60sh49ew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/iaCRA9TVsSAnZWagAAkxIP/1dqYoLKf1uzw23hXnXX\nqxJTdZWtMCjtk7MFCg0Tnan4esl9tTkaiVj6MvkktExQv8sdud5cESTYyOES\nsUOb1ojltEHDTcL7CMJIDWehSFvPraNQmVjy/U0mfSn+8iCGu2mnMwIpSe/f\n560a5klDsOjXJr2wlq39VWBCL8Sk5+K4HhdSrVSH6fyK+51Gm+mEpt2QeP7n\nGgUQD2hVdO+b+SljRsQLKxa3F6HD1s6S9/T88vahZGPat1URq3blA/zSWKfm\nve8ECVHQGSH5M9N2LUw9G03oSSV4SpC/h1S3tYLAid+nEa7XkPQwB/HsT7L3\nd7WMK9dB2ceNhpFPl3JHgoFKeR21w3v0Fj37xJgfXFkCaNGj0gbt8TP6YYfl\n3r26gCoh9vrbunSJdK61VMhrUV/byMYNzcfINUp0MdxVsIgQGtiahLb/HwkX\ndzXrEB625erXARq+f/OvJ13SWh1Lp/aVKect+W+WjJoikWFapG7tegjya5a8\nSqRbQeOda8byRRWnA3IQQlWnRSbjdfZs58/KKj3BfSziKIoPI+yW4vJsmBVv\nVXjX1Mc63fyHs26Lqr4fiMHZp6SsC8x2VYq9g6oR7QlcKzMpIIHWd7QFtgoq\ndOaz2h3uYm3kfKbrmgPmGwcIZZDhYZztL13FUHLspcCY227DOx/gh/ZrS1cG\neSdt\r\n=Mzhk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.d2ae6e17d.0","@material/shape":"5.0.0-canary.d2ae6e17d.0","@material/theme":"5.0.0-canary.d2ae6e17d.0","@material/ripple":"5.0.0-canary.d2ae6e17d.0","@material/animation":"5.0.0-canary.d2ae6e17d.0","@material/elevation":"5.0.0-canary.d2ae6e17d.0","@material/typography":"5.0.0-canary.d2ae6e17d.0","@material/touch-target":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.d2ae6e17d.0_1576794266280_0.2303685830479154","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/fab","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9195bf435a1f079ecb761b7e688b9f5f532cd59a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.ba30399ad.0.tgz","fileCount":11,"integrity":"sha512-focUuWbJzaoNCMm83+7h1BS24MX/4nF4RFkbn2WIGymxKAo6qoO7Z+kleOAMgq8cFB7+mjmS4Qmxm2XOLC40Jw==","signatures":[{"sig":"MEUCIBwLeWlYZMdbM8YPcEd1h5s5bfKUyhxDapwVrgLKEkPGAiEA/oXbJq69eWbyZ9BMkai3GZCQh65KP3fkqjHA/qeCBHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B9wCRA9TVsSAnZWagAAI4cP/A8k+SRdIQJxgMKWSm5w\nds+PRs23TQPCtd5Rxrmkk/JcgXhQNF4ZxmQ0iehtNMsllftsnRulPtx9iqHv\nUQ4nk7RwSFCO/VIZuFqv+yaxYRZFqeqN6PV/7ah2du0txGlNG6HlhNlheHwL\nqZAh/7fYKLz5BhC0pce24Wp/CbxVoL9IrFG9mC3OhoS51N4vQSLWgMLpefkN\nyx7EsjkribCeN3p2HbNjkGWwZp5/T5Liaufb+QJOOm51nAAOiVMM29tojc9T\nyttlQc3oFm2MPMbdGylr+KK7gPi0eEeon6dTPdk3ezKHPaUllWTFCoASnYDn\nhdrtgHz677fSv9x+SpRi8ILd5GWuHjxejlGOzYRKLvgN+UECDIoXsf8rtPcv\nX6M73h6aKSU5naf+gv12xdVEu2O0J8NXx3Vg2H27RfuqhGU9fWdZfqr8r6JS\njQnW9Nx1xAhwEK8IwBzzBP5DJGfRJTZuKCfUfpIxYESNgFYW9gxedG9TkSbG\nflvW6zwVzuiSRCZuzTMSKRPBHYt771OI2VNt8aTOvWgLKb0nxKDpoumzQ/Lw\nwpuWtvMri2jEJDoHeTgMdvFRsHuTHcPWNp4chYs0D6FHM1M8HkFz4d2KwtLB\nVmJIdMzaxwTuAdxqhpr2Sx9wZFhr0d23P/idipREsn4ULM26hUb7ycVT5trD\nm24o\r\n=7PBn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.ba30399ad.0","@material/shape":"5.0.0-canary.ba30399ad.0","@material/theme":"5.0.0-canary.ba30399ad.0","@material/ripple":"5.0.0-canary.ba30399ad.0","@material/animation":"5.0.0-canary.ba30399ad.0","@material/elevation":"5.0.0-canary.ba30399ad.0","@material/typography":"5.0.0-canary.ba30399ad.0","@material/touch-target":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.ba30399ad.0_1576804208245_0.38075009814787575","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/fab","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c10fbd32aa4307bf09f19788c1b6952fba0c240","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.a08ccec35.0.tgz","fileCount":11,"integrity":"sha512-3YeJkzbEhUEKW9kgU/AAkB49c2cLoNiDnCBVFC7eUEGcD6BZJk6I1JsYwdHJPErcC4GOtaHEl5jLrZY4Ovjbvw==","signatures":[{"sig":"MEYCIQCDhty3/RvIT9LbgbOSUj30sJXLVUGsXejYX90NjbdXggIhAPU/8jVTbvGOa9YStUx9e7iQB42iZvZNRLZI64rG7F6V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/VjKCRA9TVsSAnZWagAAgsYQAIG64KhsG69GUqx4F8S8\ne4asHiKgWfuT1xRD27bhl2SGdWwUkg/5bN3G5Gr4LwCTPqJm/MsHHz/KH0jf\n2rAXHXdWHsi2QdeGG652NF9FnV2gRCEHumblshGPZ04qlukcX3IPU23hDFXQ\nK+VWYQ3se0+RjCZyh1QXC0ktBUvcRmOj838EEGA2+7f3hsHw0XdpfcgzqiqB\nkh7btyYIn98hTOmKs0XGXskvVFfEUBC+fe3x8tbZxSww3pD0I0btJaLdF+FE\nQFW5yNBkMGP5R7RpkiketUeiJ7mSa9eM3EOMRXUzurp8YQU1sWYLciKzsvwK\nvuQRswEEbo+u86mLiM/vtdjWPuwZhYzWryGxumBPg8NxXncmUVfTWp5/EQko\nBqMSPD8WbPOamivRVdFvDvseJKIq8s+AAX3Kn9pXrD1NOG6ziYnUqJQIe+rs\nTD+b7ki4Rxfc4UaI/zT+Jis9vZZ+i0//s+VzuoAot4HePItr4Ezd/uxOM0VZ\nytPAo7sqvFwpm9810xRRzrpmXVniVEav6+sH3ff9G1/1v/a80LXZB9c8h4yw\nleYPux5fXKFhLr/XvFbEv8EFq9dWjYssjHiLj4EQJOWu3o+7AX/4pXJWmVsO\n5ZT/bjs+YxZsSgz5N4wtPGsBVOZizDc/kFXxqGwhbERBgl7D26xEhc+WC9Lt\n1HEe\r\n=iisM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.a08ccec35.0","@material/shape":"5.0.0-canary.a08ccec35.0","@material/theme":"5.0.0-canary.a08ccec35.0","@material/ripple":"5.0.0-canary.a08ccec35.0","@material/animation":"5.0.0-canary.a08ccec35.0","@material/elevation":"5.0.0-canary.a08ccec35.0","@material/typography":"5.0.0-canary.a08ccec35.0","@material/touch-target":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.a08ccec35.0_1576884426577_0.9062137555379586","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/fab","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9041925fc04f54d1526c68e7d2d4df694e2cc46c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.a2f75105e.0.tgz","fileCount":11,"integrity":"sha512-20TqbElWFbjKYlQ+J/gIuT60rWBJY3GHOLGa+NcqgPdiVz4YSsrz2JViMhC5slZ7VBw2eyXdUEZ6t+egitSRqA==","signatures":[{"sig":"MEQCIEKbiV/za2mR/f+Y57uW7V2wC3XOI3vt6mfJ9l5v3QEGAiBLvljnffKDzzec1aNNhE3m0CKVQ+9V/b+vHP1RmiUI+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARn4CRA9TVsSAnZWagAARuIP/AtPB8FXrgwWbWTfKrYA\njQwRpvNskaN6OMjfK9X1b/fhOMWl8VxyvZf7u4MhzbLKxxMEuhODsZxM3Cpf\nIxJxbb5fYhJo8msR8qliJ94upMXBlRILfp8QeUWD+/k7mkNF57Nzy8Jcj5D4\n/1z/dzB880UBBdH5gchuUyzdcy8qbCfpEL1LNWmb5FU2gUG8qt4X9OhxHrMh\npmBAtbG/7FCNFERLNgdETmGbfbF1mYbmW5IBbYDuriIusXbQaAXqodFPP3oH\nyk7u6VybbyvQdo1YzvVrGNdmFWRT0hzzCkH2pQ/sRO2CCVFRBQOC5sBTal/u\nu9aI5hSqqaCcTFWhZyHoR3Dv3mgBd4UeDIk8YwRqDHDVraz+COpedW7khvsf\n0MRVZEdt+0xEVZhAMJluTYjUx6D35TxU3ExSPk5I92RzNiKJJ5IYSLh8e1g2\ngdZOH4ZQD14+Z9u4SqENjq0B6yh5M/mLdGSZe5r8nFLcsojVebwpMmlNVxGt\n8oBRB7fuQKAxFpeor2o0BZ0TTDw5GMm576/mjd6qPDb0csD8gjB83m6VPsg+\nTC8aJdgOnfKiyjTmimb1JoBg0C3GMFNSklPRMLNj/X9Cg1QILBHkMdllk50c\nwJqcpDnSBuu1r8bAzUrW7e+5UzxstcAuftvaljYsNXKkygipFeGZOOa/iSYG\nVpQs\r\n=jZZR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.a2f75105e.0","@material/shape":"5.0.0-canary.a2f75105e.0","@material/theme":"5.0.0-canary.a2f75105e.0","@material/ripple":"5.0.0-canary.a2f75105e.0","@material/animation":"5.0.0-canary.a2f75105e.0","@material/elevation":"5.0.0-canary.a2f75105e.0","@material/typography":"5.0.0-canary.a2f75105e.0","@material/touch-target":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.a2f75105e.0_1577130488496_0.5344479634229358","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/fab","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebedf32fcda394593feec5b18211f00d1ed5bc31","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.c054a24c7.0.tgz","fileCount":11,"integrity":"sha512-3WQ6pb8GOiCrj5Bjy5PlBL/DQ9wTF2RMJJ0YRHN3KoRAtyIfUqb/bzL31Gi78oqt0/rpfpHzA8vjvLwmoC6Y6g==","signatures":[{"sig":"MEQCIGvfzGIsLvs6YTEIKHBt6j5zCzSjiZ/kpatgz21RwxDFAiBa9NejXWvu0NpeJQqkwb/TdUvAlsQRuAnkrLApLhQr/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATacCRA9TVsSAnZWagAAFWEP/3fIbkFnIGc8Qp/WXuQB\ngWKtBTLQr0cedTINKnfJYXQ9KxcJU0bNtzSS+VT+pD0RklozlZiDhbuKsOLk\nobK9/AvxiWjh3SE78Wie2S0bR1I6mG2cx5tkx/x0t0r5KNjPQInWmb5TWdCM\nB9GrTY/XiMoH+f9U2FfpxoFpeA3vh3r7IesEboIZG28ftOVZ0otfe3z3F7xK\n/QhZb4Bqzzp2nvY28L78CkvUScPxpCcyrKL9XBflrJphrPArTkLGk2xpf01Q\nDiN7kFjUmJP0KdIbsRLoITS4OO4FqfPU5KygYyM4Sbj/9qijsUEhX5NTEnhH\nWNbExalUP2RQVyREcBPI9TDLC8giCi/VUSnQGoGesCV1WNUpfJXLLLGg8bqh\nF/b23t701cMCRV/TlDF3bdz1OlTLKULzgYYTMHCCNCdC6oROmXGVB6f0bPlV\nuXLLmn33n3LEliFumVjTWNfOD+Xr18c6AX6KAo0oaduiWwYLkV6tM29SgqqM\ny/qUlfIMgNhYnjZIpfNlXlU012zYmvM3R5aYPfPMZp4qRK5qsycPiqoxn6en\nFOwizWufPKnmv3Tf97cjRznVdeIb22Y3AvWNtQeLih+Ea3tJnOqNpCxvjZiC\nOUT8frCA7J8MEdIvESOXXY0quxfeUpNF6prbwct93v/UA91xwi9NSchgVccN\n0KZZ\r\n=s8g8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.c054a24c7.0","@material/shape":"5.0.0-canary.c054a24c7.0","@material/theme":"5.0.0-canary.c054a24c7.0","@material/ripple":"5.0.0-canary.c054a24c7.0","@material/animation":"5.0.0-canary.c054a24c7.0","@material/elevation":"5.0.0-canary.c054a24c7.0","@material/typography":"5.0.0-canary.c054a24c7.0","@material/touch-target":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.c054a24c7.0_1577137820089_0.32894616417851674","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/fab","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"663c03072d57c51330fc0c73d1cbd8c3ef770855","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.c6808c51c.0.tgz","fileCount":11,"integrity":"sha512-R0kDiCndVYjZfu+YMu8S2bpWzVMSppjj0erP8AXZCJiSSo7A+uLBOolgiNSrMV7+1SLv5od1WJFZ0Fw/NZAt6A==","signatures":[{"sig":"MEYCIQC1yz8oq2WRmbLC3MmcoJejlYi14pWWW7xclqwybJlrjQIhAPM1J2I9kEGbUacRGFafMBiph29SR87wjVVe+wRFaeIP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATeyCRA9TVsSAnZWagAAz3kP/iiEJ/wkh3sYBN53kGnh\nTL/cAe6QRnn2Y+A5i1AjQsGBpTMHsGEeY2vLU/sLy2m7ewEToz4oGxoR8Xd+\nSgbOe9VekiLjEzQbsK7Ip4PS/WGzDu1qd0LmB5JZy+Hvga001BIBX0UFz4Xp\nGV9k7ca7pfwfBy7dIFPcdb2whXL+OUJNhspj1kwh7asXh7I/5kjcDoR0LFfw\nX1slEiypI1iYsQ3m6f0zqIylMgpy7rFl883bW1zRlXY4ZYEQjuAZOKbM09NL\nQjpVcn8ZifiTwunwpuFE81XtAODQz0UODEsInkysnqF3yemhg6q6Iqc01z9s\nHjvqlMzqYevVgBL5vKIVJy95d3l0/QdOFPYP0xNYCCdCqjIwEdx9pj2NqfuJ\n1MD97hmK5B7T8J1Q0zi8tUVnOAVTdMkJtyHGVmJ8swmlXv2kHJgsho+jUmCD\nM0fjDTymtkcJ4YrF2wKEe/0ZaVGcD4iDgOMgWrLBFqN0bSSqBZOLOtTrLYE2\nxPSNkZOv0r3d0fof8a6ll+q0gNgOgRI0ADpYbw+jZ+8iNCRpXnTS/5u3oCGN\nf+f0mvmqjPrUty94H7QHU0ya01NPZko8NDQ9XTdo/HZjwARAqmyXLybQmV/M\nzPtCg2z8msgrAv39OKCPoZzF6IOyHsirV5bdGm62hrFlX0T3jMWqB+Btbm+p\nFg9Q\r\n=9jN9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.c6808c51c.0","@material/shape":"5.0.0-canary.c6808c51c.0","@material/theme":"5.0.0-canary.c6808c51c.0","@material/ripple":"5.0.0-canary.c6808c51c.0","@material/animation":"5.0.0-canary.c6808c51c.0","@material/elevation":"5.0.0-canary.c6808c51c.0","@material/typography":"5.0.0-canary.c6808c51c.0","@material/touch-target":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.c6808c51c.0_1577138098073_0.28442167322951084","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/fab","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88c1c252d81b289c7dbb8ecf1418e6d106ea780e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.7bce9cf77.0.tgz","fileCount":11,"integrity":"sha512-qNO0ipZcghhRhgHgaLeBokqxA5Jr67Uu4G/0M9KnnfRQIi8KBNmHE3Z9POaNgs6NdN+k6cEG94beRmO21qLIaA==","signatures":[{"sig":"MEYCIQDVTOP17/MPJeWMtyWWkMW42qAvFmLQvt3xivsPffgXAgIhAMWu1C7+BLnewwJiHhQBqXQ8hdpOg+eC8HKKSGcFY7m2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/nCRA9TVsSAnZWagAA1SMP/RwELgLlUQyHZfWFlP3K\nlEywPIFTmw0oiLmA1G0VfJuxbEc7yTTjpvqWi4pQl3i7Ov3O8J8jXXGlEXgG\nvoRJyNbYkwT3ktwp1kiZlAlwNZ2S9BI/t0v8Ql+E2yM4pyTyL2cjf098FIwZ\nkROEJ2mMynE08c6aq15GDNnn0s59hw4qedrh6UMg3rIthzgjve3qP3DcCYKJ\nuPu+FAX69onvQ+LNwLptopt9PpoNG9BYZ2Y2KGl3BpWixkK6xQSrq9/FEucD\nakzalX/OeGLdfKKd2y/Z6lNHaa7LrMROKs1A7oqDRttQJNJJSkBHUaeekzFZ\nVpPEsFv4hFdlkixxdIfYOBBQJb7xv7cErMW4CIjTr/D0v4FhBPz25K5nr877\nSYdGRAoLEr5gEl71TWzZBkCXgGqDoq71dfzXtrS9NX70X6raGVL/LnVwKwza\nJVEZ8D9pZ/DcTBNE2OdndV/YgIyZ77+M4Pe2S7HOGKJVCrZCHkiBKqvSoFrN\n79sLNRf7SLVWosWxBKXNB1jMoQAFSsfFLg5Nkrrmzu0NqQXGrPl0smLQRQfs\nlG2w/9r7WCpWMY3GEIXbXluDUtzAfpWsZWQTUga1mlEbfQPb1x42psWku8ZZ\nAhhORHXRtNuePzyPG8UyZ34tmP6B68ISgM9MzZC0HY33eq1d2tqZFB6oLraa\nMV+L\r\n=f0HZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.7bce9cf77.0","@material/shape":"5.0.0-canary.7bce9cf77.0","@material/theme":"5.0.0-canary.7bce9cf77.0","@material/ripple":"5.0.0-canary.7bce9cf77.0","@material/animation":"5.0.0-canary.7bce9cf77.0","@material/elevation":"5.0.0-canary.7bce9cf77.0","@material/typography":"5.0.0-canary.7bce9cf77.0","@material/touch-target":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.7bce9cf77.0_1577385958896_0.5390023098802932","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/fab","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db4b629bb531e9aead570bd4ecb55ab33fb0f266","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.c92f038c3.0.tgz","fileCount":11,"integrity":"sha512-LKb1VkgP/Aln00TC2o+5NZD2L9RKr6EbX6HlPk8dEAQEl4rLzk49Xr8UyG+m8KEs1GPHsWaVSDPfaRZfs1c6iw==","signatures":[{"sig":"MEUCIB7miDyoLbClApveKMugQBhqmhPgVQIvKo/v6f5xSRbIAiEAzKF5Y2VoK7MxChii5o6v2xosdDklOMTOUtBzRDtsCgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQ2CRA9TVsSAnZWagAAyZsP/380Jf+Yllyx0eQcLVPF\nc0UqkyyHEq/TJ2T2Z1/TLzdsIcqgsyj6df53npyUHLKIRcH+fua7vcP1/NbC\nKQ0blyzrrlMA47OSpWr9UOvoBrBjH4wXUZjKFKcMdTBCMNlKIRCGc9hdBSJs\n7n6ZgDUOU/s8aWumCjrTMj6/YDtSh+TzIgCpzr37CPKJYMiFfG54ECrMLrB2\nICDU0tOK8AmE5rc7FaBtgeTwI+BlkwiWymArXBcrsyZX7iv+Dwb6WeXfIoEk\ntiixTufC3pYAZCVFNgQuLydfW2V3c9jYbWMv69n5ziUdES4kxnQqfoeRGjlO\nXLNMI5zvJS1lsaahigxGVsVIIYndJXgwU0TNO92166lbj/WmjX4ONrYIS2ha\n58geoR8zvdK4lGq25VTGTHVv/sMQRPydxkrStUKfcrWBOFRHZl4Vyf0i5Ua9\ntS1H5iHi1Q/rvJw3SLDdyxbTZid3UEO4hpWCrUAhYjZsMUKs1Hbl2V0hya0k\nXZp7CviWh0R+eOjPFeeY9FwUOR0NPoHoDvdzDMu6uG/CoilmuNQWjIHEJP47\nKMYjC3EBhY7k70h2KmWB4ysYfZ0d/KChz6gL4qHKB7yotnTlFhL3VgdnCcl+\nSW3C9RByugSzTPqRTU9V1Ai0eGaQDNXZRKGJAuV+fRyz8HCmR+CZeyeEb3II\nGqh+\r\n=Tcz5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.c92f038c3.0","@material/shape":"5.0.0-canary.c92f038c3.0","@material/theme":"5.0.0-canary.c92f038c3.0","@material/ripple":"5.0.0-canary.c92f038c3.0","@material/animation":"5.0.0-canary.c92f038c3.0","@material/elevation":"5.0.0-canary.c92f038c3.0","@material/typography":"5.0.0-canary.c92f038c3.0","@material/touch-target":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.c92f038c3.0_1577743414097_0.5169728539380416","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/fab","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5d010c42675a3185694fe49f82566528418da9e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.1f1ac7558.0.tgz","fileCount":11,"integrity":"sha512-cDKjsLYfDkea70C2AgW70Dt8Jg56RB92lzAgrP3fJWZpgcjEvDJ6mwCseaM0d9/cm8m/OuXevXkFJCRbX6gbGQ==","signatures":[{"sig":"MEQCIA7efZP9jp3YAC8xeZOQwfRwoS9t3JoOpqM3Zx2KdTNBAiAjkndDQypViufbMzHX+lqBkayMI6Uqq1t8CXq8Q2g81A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDliDCRA9TVsSAnZWagAAp80P/1hf/CxGCn+iq+GuA15A\nNiwNY1y3mlOTjUmcxgHluRuso63mUX/tbGsriVWBKVFIA/wTX2TTj76hd6/w\nLlhzPQ1YBOyuatqBDd1YFYOY+CeSiQu82OoUOiIS6P28PpCWzy9ZzkjdjeJR\nxqzgDilL49txz6lE/TZPDObX5Xu0Bm4hLSIp6ll5V4/U30EW1DZIBxIODeai\nlobpEsMYKaQW8DG7obmdW/U/SyaiN4+No8VwU54p2QLIs6FNwEoSgklxQgXw\n9Xsd5EZsp4IM/uS7tBzR3Y56kr3iYDsSadONll+2z80l72q9zbF8inY4bpgD\nLuJYLgDWESJ6d7fOcdUfhkJu8S9J29yzAp2j70ZZr1FPsg2caZeMmc667mkF\nt4HRSvVXOh+ram09JNTEH5SC9KUJul3DZmAY11MsKuSyCp/U6ZHkWLQzJ8Ji\nyuODdI/h0SmotUuBkFG10qo9zBVdyEWWHf3Zx13uzM1G+a6b95eKBCY96Nla\nHwas8IWb502ocEyQRA1nKJ6fHSlHvta/kh7DFMQW3ovdJKrJSzJ67Tnldgvn\np35QSvyDiJ7wifHtNMlgdL0tIRKOO18SIwQV3XNJQ94zCUJGkoJC2jq2XrSC\nlana46FTpQ9CESxA3XumK74/3q/AaIMJVMu7xe0XExD3nAWXfCyj0s5+J3Y8\nJfsT\r\n=lCRO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.1f1ac7558.0","@material/shape":"5.0.0-canary.1f1ac7558.0","@material/theme":"5.0.0-canary.1f1ac7558.0","@material/ripple":"5.0.0-canary.1f1ac7558.0","@material/animation":"5.0.0-canary.1f1ac7558.0","@material/elevation":"5.0.0-canary.1f1ac7558.0","@material/typography":"5.0.0-canary.1f1ac7558.0","@material/touch-target":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.1f1ac7558.0_1577998466683_0.014306950768391946","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/fab","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"534cf0f117916dc5e08ae2bc8c8258c6222f4966","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.ec26e799c.0.tgz","fileCount":11,"integrity":"sha512-0t9W1g+j8Hxn3+Yf21gz5f57GdDA6WuHMajrzi0nXCsnFNbaKpVhlM+KhnQsFv9T5Px6FcvmKHjSemAJXuYyrQ==","signatures":[{"sig":"MEUCIQCIWwa/EO7O2OVK/EP04RtGwbW5HfakozzvmMrraV9emgIgUwlEbl/sGpqX9SXvMuPWJNFx+9qlxQLn6B14skd9Nv4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPOCRA9TVsSAnZWagAAOkQP+QAINH1Dsm/yiBi4n+Xo\nSD502pB4oUMoD6c0l2mBC/GTy2MrFrsX7uk8TMmvsqGyj5r626RjRM34Spg2\n3cHjPM49YdXKPUKbLuA0Nby0lgpq5HS4Zsp0ywoFtVdDOm9d+dwXCek3gxUH\nWJ/Ig1zAAiDbF1wPcuDXrfMZ/DiyUOt24M8wrRv/kMWG0ZgMeKKRiM8Ggnfk\n9v25qIm84jPHxBDjtKjKiUxqayu8qGLrOdKThLKJNFUALxK1uEpX7BlSgvcj\njCjE1WPI5XRL8fj9ITXlA+EiifzFKydm+XKw/I5Nmlgfo08gb+VOq8jxiWxO\n/Vfe1Bjufx4x5RbzA3Bd3PUYHHG9VQaAf9rTw1GHJznbOPoUk8pmHCQrVpO8\ngJTfts2gTHAkLTGZE9fZ4YInPPc2AtkCfYeANVtyETIFEQchgl92rFGwSRKF\nRpC5G7+4jAdoFUkrhTnuociQqwKKPtOnA1SDXk2Y7VsDHL5QaXKlsfi0KWBg\nydqeE/la93Z6GO/XSj5XssYtfvPUy6BIN35YnCYD0xTFPUScEqzwD+wT9xiI\nY4w0TVHjgZo2SEy56xe4j5cvnb57yOcdhUW/reRzZIBvMr54MVJQWu5o1UGG\n4CzMBnFaB6grW9mFHJ2JWVK76fw6Svabh7R2eOs8O3dMtc0DA+qqCFHXUMtZ\nDYVT\r\n=pgiz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.ec26e799c.0","@material/shape":"5.0.0-canary.ec26e799c.0","@material/theme":"5.0.0-canary.ec26e799c.0","@material/ripple":"5.0.0-canary.ec26e799c.0","@material/animation":"5.0.0-canary.ec26e799c.0","@material/elevation":"5.0.0-canary.ec26e799c.0","@material/typography":"5.0.0-canary.ec26e799c.0","@material/touch-target":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.ec26e799c.0_1578001357969_0.7622141334519732","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/fab","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f714be1e2ce05a35aeb52a80dce5befa3ec264d0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.0a40ced40.0.tgz","fileCount":11,"integrity":"sha512-MoYhvKyES3GkeQnBmxXA0FztmT+RczrQ8z7sFidYBaTX+bI1otCQDGgYK5CnzzQDsTQUmZajZvskGtnAfAnVsQ==","signatures":[{"sig":"MEUCIBZ7tU5uvfPZ8Wll7a1ED1VzG0ih2fC60G7CaFMvWKMQAiEA6gPreNduNls+sBr+VhdCvawHwxBuNeAFs4gt4oBjqFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3VcCRA9TVsSAnZWagAAjZEP/iwTHH2J1HhxnIhdDF5S\nPXe6FOwac3Bj3QjkiS8EPdJC8/BlcN0kU7Qi5n1OaLLwTzsofTBtgG29Uofw\nfQGq+hpgWpwkLzoM9flFQdxXb0w0DrsbKMnHQVQgsT65BXqDATEkMCElqdXD\nw9WaaTfUUR3SIqe1/3VsJFCTj0Cz49TM+DO34R7EJI6ZuZe+yAFbLEzuwlYG\nlm4AK6PzzZIPo0V1E+95KmnByNYNWvdlKawJd2RF2Gdj0awjC9Pe6gbxVZTH\nzTsPsZ9AUtuqlMlX3Lxz74kVmeCRfmInd1NKNx8s3uYjiANyXxJVoaxpNilp\noRX5z+MH2uFrrqmgEdgS121NpFII8IfAAjcr5EiKrVO8/Qd7sc6fXq/JTr5w\nnMXl546lSFcpAQH5jGFSp9cAKPaL8q/ZG+nbmiUA1YSY9FB7huEPQUON0DbV\nGoYbAOGmSNVxlweu9VqdB8/OsMH1ZE9/Rw3c2eRjT9M0mnkzRL9vdPRDb/fH\nB76PHF2Yt5O9P7So4FDD+O9+2k6/+/deI4OQD83BRGhtZhW63PnyvMeWrE8m\nMao4N5rOYK6r/833YArftiTnAC45e6k4DzDL4uwdbK/oVQ1ZgDimVSn7zxM4\nB6Eyyd8jbHW6rD+20/AyegkB74CYIGoCIgsA8or6vqYbh29ke7GzAQbBnIuP\n5Mvd\r\n=W9B2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.0a40ced40.0","@material/shape":"5.0.0-canary.0a40ced40.0","@material/theme":"5.0.0-canary.0a40ced40.0","@material/ripple":"5.0.0-canary.0a40ced40.0","@material/animation":"5.0.0-canary.0a40ced40.0","@material/elevation":"5.0.0-canary.0a40ced40.0","@material/typography":"5.0.0-canary.0a40ced40.0","@material/touch-target":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.0a40ced40.0_1578071387363_0.3598121916636068","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/fab","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.3adf84899.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a95dc9996168761a22373c030e5f7ee56e7d2d50","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.3adf84899.0.tgz","fileCount":11,"integrity":"sha512-VsHAR8TMF06K9fgo8k5zwfBMygUDXwKa/adMEOkxE0CakoYiQ8cdehHitKtGYE5Z4FcOLQXhyW4xSDnVkqFPFw==","signatures":[{"sig":"MEUCIH/ams888+0aGIqcIou+RUxnNkXMeCyjy11YotBl4WW+AiEA2JNi/uP6k2pyLgNM3oGlQ3yEta17PyP7qA62xFvMNc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4Z1CRA9TVsSAnZWagAAFQUP/AmbS8av97CYFdO55p3c\ngsXsEFEAm50hXLe+Y/BbPx0jkdeP99Ia4Lz/aDOn9gFgyDrdiKWemR7jxhJU\nQAt3iu8CpY+O3RfHaCrnO2vZkQ/S35b7UpU7BYtaiyjpOHmFYiteIeQpwfQP\nTnY19YveSlAWLIw5DdkVLYEne7PvEU0KuAma0QliKryhX0A9KxHIl8A8qOxf\n97Q8d2b1fdfC7LVE4BDTDWqXA4Na47ofSBeRTgqyq+0DgSZKVPKA0qfL0Qae\nrHR9JSyqH9hcNUNvChrbGi7TDIhTsj18y9ffvfNgY8RyiNiOMhWd47hGExAN\n/SklfZrACW/w4bllG2qYeiNomnWAUnoqtdcMCR8vFKqVpYACB+iwNHFKTKr3\nabP7N5XLCzEpcbLUzEiOKuUcEi+mB0fxdn/toK7/dmwzzXCRKNg08+nob8cb\nSCZ3a8nKvi9OaHGwFfiN3s1jXnb/VF/h+xWuZaRSalHlM9vD3/oBCo9O09ke\nKrMlpRgk6/pzKus1G9lpD4o8c7l8CS/+ilda/EYYECWUGhnm1bCsi+CFKF2V\n+piesOfnCKLMknS3Bgk1K3QtbVWIuOMlj1RXBXO2f1Xaj1l7jpumuwkAkqZe\nnAnie8MgqFYfMRU4F11VmALnusEm8XeIemNIlItC07W541BOqWHAEd0mICKe\nHXXZ\r\n=dP/I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.3adf84899.0","@material/shape":"5.0.0-canary.3adf84899.0","@material/theme":"5.0.0-canary.3adf84899.0","@material/ripple":"5.0.0-canary.3adf84899.0","@material/animation":"5.0.0-canary.3adf84899.0","@material/elevation":"5.0.0-canary.3adf84899.0","@material/typography":"5.0.0-canary.3adf84899.0","@material/touch-target":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.3adf84899.0_1578075765182_0.930417283918813","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/fab","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b34a776a206183bea449049c8706fa887c61cae","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.0d42ee650.0.tgz","fileCount":11,"integrity":"sha512-orHZaT1KWAyYNo3bBF9IfZU7vHuq6Dco0LCHMfvUddqtadXOw0mrw9JjzrgdgLSi+IXI4gc/gjDiAnetLbPqDw==","signatures":[{"sig":"MEYCIQDNW/60kapFpYTUx7BfneJxwJVGMRKm+ZUbTzh9vgdTfQIhAJ+WmtkYf5cmbiFrRpRVnS3eTQRP3m7TFsdqodkJP6T1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QQCRA9TVsSAnZWagAAcHsP/iiMZVHd2PUX0mcVjMjH\na9iwZ1h1wq17jTq4jXftk7fGC8a4oK5BOvacHsMz8vYmw63DOCzsebTu9zBn\ny/ZijkPUGu3VXBZOu9JbDcLfaiA6AUiZ9Zau2BohJnlcb6MpB33jK0NDRGrh\nHaHeIMsap41r1GO4mhp/MbGlmqAnN7kLb96DZw53xDkzE18t+T8iB90snxL1\nJntCdBbTVzYGA7m3lwreY6HxfABa3b4UzdmdWr43KfvCnRRuEtUDVf9EpOwU\nn5dyj8jUZsGlITp+Bn3s9jOXiz1+1D1EoLzG5naKCTxICwuyq9QEjguOw7ha\nor4GfkP95t38J03OEO0h+p9INVq1gWW52Hcc/tmcA956B+UJ3W4wZR5Y5YWU\nwY2IN4vCJ3mH+71bfDnLu7/GUDClBNJtKutHFQzrPhYIDTTZvRwD6LIQT9Pm\ns8NjvJBq836gJEjRu6UYMFL9+//VJHIQq5SOU/CsmobnRDX6hN0D1xdIuFP5\nF5DDGAk/cbcKOPvgEFmHDgkgrCZWauceHBJzjL7wU67hY3mFUTYP+nc9juKk\ntXmim3CZ09b0uLR0kRXcNDXEX3a8WoAGCsDf6crjOie6Z36UKzc3FbxfTXzV\nwWo3rGhs5gnvQ4SWYmC+9+YVRYK5OgM7T8HonfW4CYStWw6CKBythLdB9E3i\nG2Vv\r\n=GcJX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.0d42ee650.0","@material/shape":"5.0.0-canary.0d42ee650.0","@material/theme":"5.0.0-canary.0d42ee650.0","@material/ripple":"5.0.0-canary.0d42ee650.0","@material/animation":"5.0.0-canary.0d42ee650.0","@material/elevation":"5.0.0-canary.0d42ee650.0","@material/typography":"5.0.0-canary.0d42ee650.0","@material/touch-target":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.0d42ee650.0_1578087440155_0.8407714399360275","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/fab","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1e333764fd582ccab03adac46ebc28aa0f551f1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.847dd1ada.0.tgz","fileCount":11,"integrity":"sha512-L3FpS96mxBySsyA+12kw1NqrqewEvHkcTj+0t5EmiBZrEm9InzCOoKtPEgdQMLgwTQRIR0zKfxS+++r0vt4HQQ==","signatures":[{"sig":"MEQCICEA/268aCUG7wsZCeGjbRRPg4xz1acAXvMJcbmjweyFAiAPwIHDyNvvjE8yyac4MLkTPXaETroLzyZ9bhOCx32RaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4nvCRA9TVsSAnZWagAAY5IQAJDljnsXHfeZlA/VJaLX\nf9FKRJ+V+IK3IRn4AhoyRpEsa9GGurxwwUb9XAFglSSSf1EpHlEC1IjUAYvu\nb4b044ZquKovGU7rlLC2i1SzLOi7KmOz7brfnGtfrocfwCSMqFQ9niwpsgUw\ntiCSDp0xCwtA50WaCCmmPKvSN2fjbevwGSlhFnjYulNGYwaaqxpiQ6HrFatE\n5k6mcUhK62bLwQJ5ck7XwwA3DlfNS+8S+35b6v3teGg1JAArH6Ut8FBekhqN\nVU3bpCeTol81qIYnJVZujN3oL1cpJHI5qxhQpFurPS/Ta0Snj40xji5VHWdL\n0dF5oEiI0742rsNp7rVoPcKDvuecJtS8zBvBVTgbjLkWP52rBc1x3MoDkJF4\nAQHBuB3VhMDczXt8AAk9G/BDC/4ZRYFUi/SZGXBjbs+vZLyHqJkFBimROuNB\nkblAzWK8mGkht7d4nroU3SR6w3ltYIJWnFrbcnkxM/hvKia1aekn7i0TmxSV\nvZFRM5LUqlTrFLaRGj1cMJEORUioPw9FTpIIg9/+CtJuja9pTKqkOCPMqM0e\npT7iWd/HhjGe73JHZFOaStHOS7qZp50Fd4sbTmz2Fjd8rVHW1GoWwyi+5Kqc\nr9t7v87ze96khkUFts4xmkN/n1gtwHFRle0yK3PiPX+dYyBe8RkgWRyvCWFz\ngG1E\r\n=pHtj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.847dd1ada.0","@material/shape":"5.0.0-canary.847dd1ada.0","@material/theme":"5.0.0-canary.847dd1ada.0","@material/ripple":"5.0.0-canary.847dd1ada.0","@material/animation":"5.0.0-canary.847dd1ada.0","@material/elevation":"5.0.0-canary.847dd1ada.0","@material/typography":"5.0.0-canary.847dd1ada.0","@material/touch-target":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.847dd1ada.0_1578338798666_0.08645972949413583","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/fab","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd85ee145ddcda9e976d89141a563a7076ea27cb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.39df7e5df.0.tgz","fileCount":11,"integrity":"sha512-LtGMapc+xQmrX1HdONbS6qhdiw1tyL8WKBti10sJfuyn9BJAkpXrWxZRi1DDbVPiqf15vhuugGMdJspnIxhi6w==","signatures":[{"sig":"MEUCIQCGPnN1CLNRP6nGQd20ybNr+tZCb1Dk9ZOWjoOSvVQULwIgR8yKkw+b5GzsVASU8H335fL6nlNkqK42IpvJRy9YAug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9cZCRA9TVsSAnZWagAA2yAP/3rk4j/4bbeE6AyFKwOi\nayDBR46eX4wbX733TwaJVOOL3PSl/0ejg1CaWFyFhWFbChGkFaKdiDrnG8pb\nnf2YNaDHrZK0SGVabme3oItGsLcQvr22MRfDLPz3X3G7PcHpTNsP/mhm/gNt\n19wp52vctITemSYUZph0TM1K1gMuoEt61Yi+h2E0BPGs+X+qy6f5zCslBRCJ\nAQ1C/Ffie7F6ir8ZaYRGKSEzhuK5mNorQppYArYBPEgFzLZFAxPq9yTJuJlV\n0n4Xz7EGG2FPy9Xs6RizA0xYqDCvM17fOsmAnNWol9ff1rM89mx4mod4Cn5c\nnGkd+BPPzyOB8t9g5KbSVyordES/oOgO5XVIhjxFbTqkg88RvKgRyP7yw5lc\nI8eujEq7H91aufLJlb5lwjtahWpgLjeJ/aAGdztlMTGKREyebP7NuVgWTwU/\naUsZvkmKnHuxsjHU2+xzHEdFxCFcDTRf90C/56kmZ1P4xgzndKd9ycxYTzK5\n0THfsq1llZ8FjLu+uVGFOKLkBdl4GwWs1wXZ7XYWAA5tk7m8vUFJiXPE4eiy\n51be43CWcW1IZBc2ERNBBVCKO7x4HTVSIfdNJGPZfTQo0QKJ+dsnSgrRiX/l\neHQZL7QrJwYQOQQdabXJXhA6i9OFa6Th1IXRPnwR4gYv20Dt4qJEZwsYn6vl\nrAfc\r\n=UU85\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.39df7e5df.0","@material/shape":"5.0.0-canary.39df7e5df.0","@material/theme":"5.0.0-canary.39df7e5df.0","@material/ripple":"5.0.0-canary.39df7e5df.0","@material/animation":"5.0.0-canary.39df7e5df.0","@material/elevation":"5.0.0-canary.39df7e5df.0","@material/typography":"5.0.0-canary.39df7e5df.0","@material/touch-target":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.39df7e5df.0_1578358553529_0.8413718177698211","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/fab","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"719d3494e216c1b5b1dbc3b3af298ada98072142","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.f1a2581ab.0.tgz","fileCount":11,"integrity":"sha512-0kP8zp026w2jGB85SeFlZu9h6gaUQKm2DLYUxSpK2qS3wwti0RYnXQEb/0IctMesxCV9zUQ/wMlb9VKrr69aGA==","signatures":[{"sig":"MEUCIQDLeO9JcTCtwdURJz6junoiP3jJYHbDiMpUg1yRHtNDjgIgD+7a/kr4jRRu7k3TKr1euVirnPX3pfXM1IdY18cSN60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJz2CRA9TVsSAnZWagAAGF0P/2D6DLd3DLQaVCk0gU20\nqLXasysHv/xiPW249e6trY+U46Nb8mR/uEv61gxR5DDob5d6Ku8wz6G9vccy\njIomR0oQ3iv/rC2P26F5MuG6klR/wU5DXloyhupDY7W44Pa15OfRJDjD8Krn\nPc0B2FmHGEH8hjBlgEXcLbmz2X95w5HdZ3lCoOar4xnvntm9YqTgsDnAYKjV\n3OaIs/Ll7ZdHmgA8JdQ19Nw8h2aLwnIGOEbsiA+hwt8R544UATj8vpmDYGKu\n9INDOMOL5IfNdHFa+HGUAf4RVQ9ooBlSLC6gYJSiTqimC8hdFcqVpoNj6RTk\nwRkxJwFLsEvBiOUOO74EktbZjv5EL2OxSK817/MPLKFvDTtA+KiSOkl9QVoY\nCuV+Vkl0URxZ9M26nAl8aHnKUnoY4SonJhXV8iFS0ktQQg5R22stJfHZ+IXJ\nkxKmx2nz2uyYsNNnLxPJW6o3CWgPeBaNRImUxeklVVXUTZvLX8hGxxniD7p8\nzt1JqNhejyQJ9AabNLiJZWAGsinbUQbc931l/G7vUBvMVccoyNSU2NTz8HpQ\n2xMtx6I+iINNX0GIja3H/GOktNRkJsIF5bae8oPwYTTTT3ECdOMde3Y+/38x\n6OibXsDw0eR2FC5nLxCcMw7S/G1QVU7ytzIqot6OstsBNhjga9hqupmtlkr7\nOP75\r\n=kUUx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.f1a2581ab.0","@material/shape":"5.0.0-canary.f1a2581ab.0","@material/theme":"5.0.0-canary.f1a2581ab.0","@material/ripple":"5.0.0-canary.f1a2581ab.0","@material/animation":"5.0.0-canary.f1a2581ab.0","@material/elevation":"5.0.0-canary.f1a2581ab.0","@material/typography":"5.0.0-canary.f1a2581ab.0","@material/touch-target":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.f1a2581ab.0_1578409205742_0.2439339534322882","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/fab","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85cbc3d282aae4d7adc586066028fea8549656dd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.7c7ddf347.0.tgz","fileCount":11,"integrity":"sha512-FHoqtcPNq8nrpV2bDCmYhZub4hotfOYxI0C7EqHqzgFvjev6QOFzaBfJMxGLYWjlnnYgsEzzPhSLPqwInL+PbQ==","signatures":[{"sig":"MEUCIGV1kiZzG4xR1GLJGCjGWV8iIGV80OuUal1Gdx6Om4B2AiEAj7+lVfGn5KPC8lNpJxfSgQE9RdgM1TyHAPA1jckZTnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKDnCRA9TVsSAnZWagAAegsP/iKF2Mxi/9OlIAIuU7u6\nhQnUat23mOKr+ldApyOKhFxMKsJMeXbzr73gmZuaETiG3jEhNWjcC3rIB0YV\nzBwM3heG32Cd+p4dPnfk8VM08mYkngVJPfyBrOs1obPAghN3Cu3/E3y8vWg9\noboyJSMKjqqBykre9glCFq8BTps9BeL1G9YWZsl+90vIUaXQL5fStxeXxzTW\njXtzBMkq6phFfrPlNlRzp00CjLX+x9ixmZfoIl6LS0ZkO0JPEMzWU+zR3UNV\nHs0nkVQObFYeETqoRMSYqnhvn4vJFGR2wWwFI+wWWAWcDcy+CBOxJCQVc4kH\nslpi0pA9s+Pn7ePygdhBx0UPCsacGug63QmXs6VQD8brOytrCWETyCHiOY/q\nviMtaqypteuJSwnOtiIkuCpZ1qi6s1pW9/WBx6e8h0HMx48Bk7JtrvJg1WC3\n61TlAj/6ruYdJMsoX/ayRVgxxkIYK9BULeTsUZEo734j8jCzfaqCkfX3NWJi\nP0GuhsX3ZjPFLF1jR6E7xCrBEyxd4Op32gH7pGxQCYQiwQ8loBPMGHn9AYfi\n93v2EERJcGa1hmDCHOabyNGKDpYrELmXsdUTe4hoKO6rdMnZ6sLqDRIgMuxu\nvJ5DCiFcHGmSPRt6r1lKb7DlrGv9GTM7ta5gTLfulX3AsBBZVitM9zjLD9AO\n2rN9\r\n=HoCf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.7c7ddf347.0","@material/shape":"5.0.0-canary.7c7ddf347.0","@material/theme":"5.0.0-canary.7c7ddf347.0","@material/ripple":"5.0.0-canary.7c7ddf347.0","@material/animation":"5.0.0-canary.7c7ddf347.0","@material/elevation":"5.0.0-canary.7c7ddf347.0","@material/typography":"5.0.0-canary.7c7ddf347.0","@material/touch-target":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.7c7ddf347.0_1578410215530_0.09335940663447473","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/fab","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b302672c891ef05e6531ff23b6953e7196114d2a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":11,"integrity":"sha512-Q5J1t39j3eJmppha8QlavMXZzJ/3lU1PvCgUydu1JBwehzO1jjzbRUZBhDaBDAdinJMn13rjMd8q3YDrD//EUw==","signatures":[{"sig":"MEUCIQD3Sx2ChCDXyZAy66Zu7TqLfxq9eSE6tyrASUD5jiO8KQIgLw57liM5d+c48sY/b6UTkkbx2MZ51bGUqGzyU7Wlmnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMmgCRA9TVsSAnZWagAAr/kP/iNE75HvlIJHArOZ7y4+\nhIzH6AgiRWOZkUqKVuAKF5dZCJ4s6hGM5Q5UXT72ANdELk3Y6UW2qJfX6yZi\ntDzRgCt6lWtQE1rlr9D9Xnp+I3RSVjQzzAsdlW6XMRrSLoNgWSTT7orrblfA\nPf/bCkrqXSKDJJaL0lzTOx1rZaNrdjnhfs7DwiTrM37ACN6BeDgsf1MBC9N0\n3SAF0lJJfWu6YcUySDfXgZYdj5DDKXSWa0YxGnAqoKo9VJgCvyGii4YxGpcx\nW5QNtuyzTDkt7kEx+inDf50uD8dsPBqXU6poiXAWhn/tW+mQAE/U6i44FkS/\nTdvw2tosbeM1UgptkecU5q1UfeZRUbTbW0NAQNpgfgNq/b04V6JGh8ul/NSz\ncLJkb0JGOkWa+ITRwTDjaKCafqxmIe5AMSdewJS8avWyRs2YT9Lr1AKibdzo\nqAAVsr8zaQ38Eai7ob+3yLKUOuKE9fbjpzKJnqlbC3phI3vdZH0S/ABFs7fC\nOJbuo6yCaVe7h0dsYbJBfYqBSwzupFitnopCYSPm5oEXaPdcvYKA2ZOmoKIw\nkadxlLT/8gFHu5lnsYoXiLR/lw5gYnaGOBt0REtnjGBVT5C9QYrJ7YjBS21M\naz6+RC7X5t7Yrkd1HXJUzIe8P6vEBM/97o/8kNVBIfZeD+dOyjnIyWZQkTkb\nfota\r\n=TxVc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.a1c84d4b5.0","@material/shape":"5.0.0-canary.a1c84d4b5.0","@material/theme":"5.0.0-canary.a1c84d4b5.0","@material/ripple":"5.0.0-canary.a1c84d4b5.0","@material/animation":"5.0.0-canary.a1c84d4b5.0","@material/elevation":"5.0.0-canary.a1c84d4b5.0","@material/typography":"5.0.0-canary.a1c84d4b5.0","@material/touch-target":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.a1c84d4b5.0_1578420638691_0.20014025378141787","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/fab","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8134a48312005bae1a48b7ef346f454bf640976","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.ec9f16578.0.tgz","fileCount":11,"integrity":"sha512-aR/Ifei9tzvvTYco1IHxAYbtvaQ68a0Ir4vWzgXHEywLs7nS3TTByw/GUv4YYu1pD5tJNjfLbQ1l7RwvsO9bOA==","signatures":[{"sig":"MEQCIGDC0zP4pHo/dVw2HWGZUMF0+7O6EVDW8xqu97SUCRR5AiBzji4QBS77ZKS7t1WJfFyXg3kgUd/xF8RHB4GbBDyXSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN6FCRA9TVsSAnZWagAAsjIQAIfwsDvLeqmrBRHoaRgw\nBwTpJJOqUIKmIFpcHQEi4GExsirO1K8vPcFb/bHtVfT/NhjeStuTnGR1Blcy\nWSawBMsJipFW6nwfn8vlsc2iGqF8cUV4RcpdMYPGItCpkijkfPNK+C7AFvqM\nWU6xPIuGsP6Yg0IZc0D4E+ZpQ27PJ9odjaxB4sBFmFc7kAfTKL/PJvhFtIL4\nXWeXc5o9R8r01ZxF90NcjaVAt+rv5E+27feFszh4/mCZJhlJNTAssPXruhJf\nCakqlk710Zz4dtYh5Z3S6YLThOginzTLdK1tRzRdpQ6koqiVaemmmVa6Ezx7\nUu6clIqR7wmD47yTGvNHkgEFH6n9ExG54QmKM5HaQ8d+8M/aL5JPrCJYjDzI\nC/Dm9MnV+afg8Z4AORHnfHxoskLNm3LcRuP2qjLbg+FTVQ6ixJWw0gG12Pof\ntCK0sVuiWgZ68f15KLL6qyktaaT4EEbg0FTZXtEgkoPRHOR/U+B8j41n4kLQ\nWkK3vonyXQGQUWKK/ZcJLn8ymsc1MhL2zkrZutGTks8RytzXjah8VSTbhfDG\n9rO36KQPlf2sHcBdBrv/gjDqlLKFujncr0UFogFYIbiNzBo+fUoew7aZnc7b\njgrfdlhAoR4OkUC6XBb/wZYuRLbdpGZ3jEwviYf/u41Wyu31yfyweEFuE6dR\nw5OT\r\n=sAlV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.ec9f16578.0","@material/shape":"5.0.0-canary.ec9f16578.0","@material/theme":"5.0.0-canary.ec9f16578.0","@material/ripple":"5.0.0-canary.ec9f16578.0","@material/animation":"5.0.0-canary.ec9f16578.0","@material/elevation":"5.0.0-canary.ec9f16578.0","@material/typography":"5.0.0-canary.ec9f16578.0","@material/touch-target":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.ec9f16578.0_1578425989347_0.8563073975159397","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/fab","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.b602226ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"859184891ccd99c3a55e1992b93e2af5487a7be8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.b602226ce.0.tgz","fileCount":11,"integrity":"sha512-edHL5EL/XtTmp9expepAx9qnLgRebZ7wVq04kfQ9Yjn6SSBBgv+nVYq8oqjohJQWqEU0RDBZ1gqMO7HhTcyc6g==","signatures":[{"sig":"MEQCIA0Xv/y7Jx7JNFbdUjy8JllgGr28L5UNv0D5JeRWvgHdAiBjetsnpynjqq82WM7e2NVG0hih/7AI0qjdn8mqrXTFNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObnCRA9TVsSAnZWagAAjXsP/jySLlvMrAwAuAYFjsdv\n94AXcvf48JSA9oKNtSK4Y7Zzrr+ZqqKMW7QZzdzXRvJesyqDtQ6U8ml0ImWY\n/1ubh8k4wbKPFUyFtq++nPNh9/GMXSjjfWlNgazN+UT2tziw0SLUxIZSjxEF\nK39lWeOxw1gz/YH+rqzOV2xBfBJZCgdTDbj0ykjvCdfeS3+ULgTosOzO7Pg9\nAI83WINJ/eODwkvt/BLtiz1UyMCEQne+5eT7vuMrpnt6ewzRPoJMzk5iuM2K\nvQPZ+tx73jy1CZ3+NFTTZtZcDHV6r9augOlILhi4zZtWLIf8LIfmaFTIXqQ6\ni3Oip2tr7QbLjBZXolyyToAP5aEjEPCZu1th2K5aVINDtQyle7RVItbRGRZ8\nh4fFPmJsDH8LAFQ5jL7sHYJ2Pasdxljd6lgV9TvExWBTUEz1Tvt/DBJIkcRf\nVWgPP2DZuZJmSVPHU4J2DKhFQA7SSGXISYGqTxj1RU9Kjw/doc9KQHCCfjTY\navtUvO3FuapdnwXPep8oGNoVUcwybrp/nWt+0wYSAfIw5kQZvLnb4H1GQGQS\nPlOoNpYlAJQlIUTbp1HRDun77/vIYORNHRNjZ3qPXG8KDRRs6+Bj6w/kUARM\n61zUOP0HwBkc2KNZUGcupE4p2W2Leaptrm4m8Sh/BU23jj5Qk+sBhLI/o9cv\nehM/\r\n=M7Lx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.b602226ce.0","@material/shape":"5.0.0-canary.b602226ce.0","@material/theme":"5.0.0-canary.b602226ce.0","@material/ripple":"5.0.0-canary.b602226ce.0","@material/animation":"5.0.0-canary.b602226ce.0","@material/elevation":"5.0.0-canary.b602226ce.0","@material/typography":"5.0.0-canary.b602226ce.0","@material/touch-target":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.b602226ce.0_1578428134723_0.4665416545306491","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/fab","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04620e7472f7b4f360da6b4337b7d5739712035e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":11,"integrity":"sha512-om1D1h6oiycezNFVi/3oRDA7ZKzhQhou/Aet8aIDHkqmzQUT45f4H7LwqYXB5TaL8VAKLj1V9HfDKzWuVsIk+w==","signatures":[{"sig":"MEQCIGZ1R6G/0dQtrfAI0xBNMipP13nn29/6B1y0zUcBRtONAiBhInqDNrpkR3wiiIiLnh+WY6rF1DWe+2iEEDl8yCNbHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPd/CRA9TVsSAnZWagAAmhYQAJtN0oLqI4Ot0x/aN7Ne\nCDg3ccbAT8VEHixWwgOfCNkRlaaOz6uu6PN5dkTN+lHfaX6pNwQNtP1pbT+4\nhZeXVkQ5W5tyAfucIXOtqy+bCzGPCQ4XmLvlTo4TKkz299FHxGoYG2iOJaz7\nL/Aq5nNdSBtquYTcRmo1zpAn7wRiyUuoSZLWwomG7lX5oj7b0FPINwx40077\nSIzFjouvJo9CpzgLc5JgOZoBGGI0j26TaUvrtQzWoniZ7wljSFmJAIfvE3yw\nf6wsSXW5WMvFmZDPFxuGxgLB6iQkVrg1u0AaPl5BMlU96HI2R1JGXM+reRT+\ncN3Se0zhYJerXROb5v6CoKTqHufHOx9U3fRQ34niqVPirCyUjG78HZPszJ5j\ntN0a62Du1we0z5r4PTT2d74QF0t4vfhdvzFsHE/gFE4Cl3T9yWqn8RN7MqwA\nrd6qBgHAzt1LiQGwjuOOQZ68r8Rzix3zcQDvlSWbRmHwwq3m9uNIec8C5U68\nH+urXIvMimfuUFFUID0zZGoyOSCiFqCc0Zw9H7ClcU1BuvxAIA6OMczgM89f\nAyKkupesSxTdQjYSmgFCOFCyt3tAjeOPlKDrAiq+jUglASJDLeu7qdaJvtvM\nyl9onUnsIbZJTSRFDw/tqWHkhRrXws2bzq8dJKf+npm10C+kg4GFBv3cGcFp\nXhjQ\r\n=5zbF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.b2d2dc08c.0","@material/shape":"5.0.0-canary.b2d2dc08c.0","@material/theme":"5.0.0-canary.b2d2dc08c.0","@material/ripple":"5.0.0-canary.b2d2dc08c.0","@material/animation":"5.0.0-canary.b2d2dc08c.0","@material/elevation":"5.0.0-canary.b2d2dc08c.0","@material/typography":"5.0.0-canary.b2d2dc08c.0","@material/touch-target":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.b2d2dc08c.0_1578432383485_0.2947985674574032","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/fab","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dd9591b83f3af59e5992f2b0a24b1a8f2b34d6f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.61f2d7580.0.tgz","fileCount":11,"integrity":"sha512-9SgXTA3uVPEdHwIINszhQin91UGi8B/bTJyVecugveFQoXHfJhFGQm9Iz7qe709C4phmY5v9VoxrLDQwZKESFA==","signatures":[{"sig":"MEQCIBYAGTXTbnzeqEbMsVhYIG0Pjtva6Ms0HBrItoQmHZsoAiAqFyM4i1FvvDmca6qa5VIEjAmbs/ESxPIJ9UnRlohLgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPquCRA9TVsSAnZWagAAUtwP/jmOjwxFeyhfJerKWkd3\n24YVKuuYDodKcUuD1r6fSwAPFEgwxo+pHUiAlq57zk9k5p1SV9bY56zQ8VYd\n7xUVvJFwStXDhH1GPUp7TWcO1v8f4beGecdQVsjKwnG58nAboCq/tG+5A/N7\nFMnhyKMgbS8yPj1LZ4s3MHC0Xr9o37bn5F68mNtibRqM50o3X/V4XyXHudMI\n18CP6HlmPxfIi0Etnb9qg+BNfEm1sc2U9NrLHpT6d8Q62RZWTwQKYnlfJW7e\nCPfzGnZmrOmat/fe76LFdSxL09RBzHjvNv8CGoWnkeS1lb1CKMQ7grH17pv8\n88KkL5gOZl7XUTGRpMUGMf5vPfHUPvRkMi80B7p2hHr6j0rli/cJN0F+1PGy\nrMvu369w9vtgqrySVWfMksxyCpk8ypEH1U4Cp8f/DKvLS5IyjB5Dh+ABqXwy\n9q1k/KDSiV0dSyN9jC7JxdBVPFudM1lWXsJt3WbR8CrE66pl8G0oz0VwlVlP\nP4CNip8uQ+2lRJEli8riKj2Op+jMj/vIkRBPuwd1mIbSKoEwr0+SYsxh+/Rd\np9/D5Ij5YnGIoN7VtA5XD0E1/tBe44vSVyJy8la1iZbgRQRvgqBBh1yOGdlA\n387AT/mTtYBVIgERINzpOZ768eeGiTh+WF+MpCfC68Gg59wFGHS2yV99uGaC\nSqBq\r\n=6wYS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.61f2d7580.0","@material/shape":"5.0.0-canary.61f2d7580.0","@material/theme":"5.0.0-canary.61f2d7580.0","@material/ripple":"5.0.0-canary.61f2d7580.0","@material/animation":"5.0.0-canary.61f2d7580.0","@material/elevation":"5.0.0-canary.61f2d7580.0","@material/typography":"5.0.0-canary.61f2d7580.0","@material/touch-target":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.61f2d7580.0_1578433197535_0.6407065276785644","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/fab","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f8caf22f90c84b6504ec2c3b1d6cd90f12cb863","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.d1be53a2e.0.tgz","fileCount":11,"integrity":"sha512-CPMlT2QFSyu11qsrclx0PJgs31jD8IymvOK4WrVQIYxaBDxrDCg6V4YcvHf3OCkAxWVQsPpVTvOjsKnTu988Iw==","signatures":[{"sig":"MEQCIFgIXYwSFlMaJqSVw6fwgrsfllu7fO0nXzPkPs39Ke8iAiAmSmHN6IDRe3X0WKpRchm4TIzM+6yLNPPCwjadrTCf3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQN0CRA9TVsSAnZWagAA9H4P/jDdxUu9irZT2Tjs7xNO\nX5kABJ3pzKQV2/XtkGIevL2vWVEQPNVYG0hJ2XzhIGonJrQBzAvcL9AaWChb\nj4dPStvjKxWINFHu9kV0ANtH7sQruN7AYLa0knRs2ayqhicfzXdo6u5QY9gO\nPpsWthFD4+buWBXFLGC/KmB0YsUWtWFnqvb9E+DtOrL1WtZdI+W3kOLQcPUa\n1immHUyrNwqenaulRq8FGP3Q26xIM81BwMVBCczV02Yo+dxBz+yYQg6Rnjwl\nlGz1dKWJMwjsmnzpY/u9iYWQ0865hWOT/MZe7jSe27/rHE94BTy7D9pLLsr9\nXBaq4SFCf0HqjqsZD5cedfUfed+HVoyPioUidjJ8G+9eBDoIujO7BGvSuId8\ns5Gqw7bOsdIrHFJZ1ARL5SviogOdWofrFADcuYUKvYraH5CEM3Mu0Pa60/W7\nrNiE1vDOjk7bD0ALhCgGjSiy7OmTwQebLK8r48VHYkiB3jKFB5f+T0NODyk+\n80WciaEmcVScHzrFfpSnyh6ivi1d+3QXzHfol11g4OjPLbKo2pJnjDjJWght\nHk4OKz77AUmmE0WAfDn8QNWfXOjfCdjpjdIMNclW6YIgiA97jtXl6kWPbfJU\nUFFK9ItEu1/9rTcp3n3TzjqEXSrou7P0hd/8qRXUj0UGCWVGAz90/fiCyH1t\n1VDh\r\n=j25a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.d1be53a2e.0","@material/shape":"5.0.0-canary.d1be53a2e.0","@material/theme":"5.0.0-canary.d1be53a2e.0","@material/ripple":"5.0.0-canary.d1be53a2e.0","@material/animation":"5.0.0-canary.d1be53a2e.0","@material/elevation":"5.0.0-canary.d1be53a2e.0","@material/typography":"5.0.0-canary.d1be53a2e.0","@material/touch-target":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.d1be53a2e.0_1578435443646_0.4093334398178383","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/fab","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"223573aa6559ccebe6ff05398ba59787d62055a1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.9b0d06e32.0.tgz","fileCount":11,"integrity":"sha512-z16qPss3ecbjBuL0Mf4Yb8R9p0E/aau5+cv9Ylij2G0Cc92jS71ih0h+PsYwxandV0Qxm0GYVHyC8URPteRq7w==","signatures":[{"sig":"MEUCIQC8rnEF4A34zwU5SrX7nd4Eks57vXVeNMAj/rkci8tOdQIgL901y6+RnaCryGndv+Tdz/HUQ+gu8czlXkan8MOl5ZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQP3CRA9TVsSAnZWagAAM9kP/i5hvEFozNLbpIFrXDkR\ndN1gUnbOJNb9RTCmLCms+TNkHVSHkPP0r3VHfrXLv2eX/83GmBgwb+WlRld6\nISI1SKAwzMh5HbiHAUoo3kKsdIMQkR2wh8jzNqGhHMHhuDerjQQUulhwKWi2\nbdWkaqhCgqXKHT1D8Oys97YrzXLhmVgYCSFXFG6aONnf1+w2yegWfqtnVlnP\nI04+GYU/esBn8yI7fH7w4CALhwdIjx1EWdDGMpnN1jQZliM+ii5KJNhc4G9k\nSKtFncJNXLhrx/ZUrbZSDCt+xUWDTiLVwMP/N2aW+Qh/YIqEBubmazaPGuxF\nc0YUgqJM0DQj7CQOvkjXGqGF1PVCgZj0LPtJAQKt6FKtYyzkzdsGWpSCBPNT\nfBMkxRD9t9Jam4UHCQF3rU3gK2GPpvKEyaJEBX9d5HQ3cPfeuIg8Uz7EQgrc\nfs8j76AeBAvzAyLkpuQ6JIrwpWSBNPUBJQaW/Br9gAUzZMk37hDMeqbafD/N\nT0OptIpUd66Tp0JYcnpvyMFE2TvnfqWw2MBSQOkOidwGNoxzVy2+5qi9u5hb\nyrZOQQTpTAOBQ6OMscB/L+w7zRCte9JKMagvSJ5t+ZmBstU7LNlobps0SCz/\nGW+ZWWd9NqzbtHZ+N5exF0wCE38mG+bGDf3Fxp6CuSjPzK01bEijLeWd1/NN\nwPcY\r\n=ui9G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.9b0d06e32.0","@material/shape":"5.0.0-canary.9b0d06e32.0","@material/theme":"5.0.0-canary.9b0d06e32.0","@material/ripple":"5.0.0-canary.9b0d06e32.0","@material/animation":"5.0.0-canary.9b0d06e32.0","@material/elevation":"5.0.0-canary.9b0d06e32.0","@material/typography":"5.0.0-canary.9b0d06e32.0","@material/touch-target":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.9b0d06e32.0_1578435575330_0.6771478188194551","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/fab","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.730c807a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b09b6bcfe0c5fe02ce756beb7bb1b39187b8149","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.730c807a0.0.tgz","fileCount":11,"integrity":"sha512-8cBYjmEDuC118jx+CTSaaT8JZebIQgw4ldhVw7KlsWhwR/bKghMTT7BKIkdK6PLdJsxWuMtPjRDV7sxLWQtqKw==","signatures":[{"sig":"MEUCIQDl94K5yzlRdJdA8ZcLbjBc45J0K4BDtNSD1HAcagmMzwIgWWA9pWjSfO5Lt28ZOzLpkc8SrJrI3GkCN5f7y8+YRrQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRWCRA9TVsSAnZWagAAGogP/3NyI2YBT3rAl6VGkJEx\nVkBPLYn1ClHwUbqbGvjfVfNldSmc1RaW9rJGn4GBAs+IiCMThoLNNPZkMWXc\noj4bXaadFlyQ59qwuJio8ypXP4mbGw430kao5xH2VBPlI8kvLp9CBiJPdXkD\n2pDn9R/jFJoHnHvZul7ZFRq3wayVW8IskF+ZnLKZIAioJjFLZs2cnAsQtqKs\ntRgk9CWki0BmYGqDrJM67FEH2e7jK/jzfoh/Duc02fWWugPerBAJmM7C35Xm\n28ldaXZCpEO8BwN2BV/6GhOjn+//knl1B3wxjD35ea89S26LhKsq+n0R9FZy\n/5yOPTX7VLNbcK4FN4Qi+xaMrGW1Cf194p8wG9Q2J3CS3XpRD2tfWJj/H1KU\nY+Vz70FMo2Hni9YJEO6eyl0H4+jqm8waGLfTHhxFP/YcZotx2WXv/1t3yXpm\nAMQe80NM6itv0a0iO8rZpq8apvQhOISfQ94Ziu/vcJQpI/A9NA7YjNi/xS/a\njKCB5mZrujfaQI/25WYeNmhCWdcCfB538UQXBXAlRUnRekAm1PRlgtqWzgTJ\nbdAypOZKAEb02qSw4iu335RjDVu5eyXdNpaR9EWGCenQATNvOs1v6j3W9AEx\n+okiaVzEEO1xClfFRcR6ygz6e3Sx8tZt1klxQoingakj7pQ/7lHkcEAcIG5w\nEogn\r\n=ENXd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.730c807a0.0","@material/shape":"5.0.0-canary.730c807a0.0","@material/theme":"5.0.0-canary.730c807a0.0","@material/ripple":"5.0.0-canary.730c807a0.0","@material/animation":"5.0.0-canary.730c807a0.0","@material/elevation":"5.0.0-canary.730c807a0.0","@material/typography":"5.0.0-canary.730c807a0.0","@material/touch-target":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.730c807a0.0_1578435670544_0.5049025521068715","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/fab","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.2213152cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0c063be1090abc9afe9ba3f0c779cab7bfa8631","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.2213152cd.0.tgz","fileCount":11,"integrity":"sha512-+kVEStHRg9mkTXiBr3gMH1uCfyRIwNaa7ICy3cvL5J242UUOigT0Ad5sG+vYSxaQYBUR1IFOGMvLFH1Pbmj82Q==","signatures":[{"sig":"MEUCIGT6X+EiVA8/PhkWlH8hGHhHlFMD0BkRwgF9U3SR72mzAiEAkkRmOAWzBrR+FqV4qOGiCVCJzKLjb0+HKkm0GFekHOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/UCRA9TVsSAnZWagAAQNMP/1MAlqReqSyGW/eeTu8D\nNBSbBfcVlhjFJDX9f70fp8Fh+aeXTtBJRrHz0+VOxmwOkTqcrY880ebnynJS\nh71yz/eF3MkWdVdRATyoab4trkjNrDsoGE3qbbhWBNhvpcfsCvDZW0PoxoAp\nrymS7xL3uCIxbnTtV4vAAhMe/BAojN2YXMb4s+s8gqP/LTzvzrGWrsW4+k87\n1IbQiGRyR99hPqvULBR9nzQYSmRasSA3jy5JCFCbBx1WCroXib4Tn770oeDF\nklaSia/CnQzwWcf5voH+E0DdN7bmoFWJDeLkRf0EuWH1PsvRQeEmc7mUExIT\nyQVaW3+AQSgpqvDFFisUh5uAD/LfaOkbD99URV/3NTaxkPsScGqd9n4PFih9\nFloOQuL76eArelWLYB0EsaQ+/r/5thGY2Gn3hiAFxNPH8vYOSK+UfJ9EUPvN\nS5HtIKNq5cD8HT0nW36OTj096FMh+U2dj1J/5qrKxuedblGZW7dlMFcABxL4\nBgKEvF5Dn4+ZZz0Da4m5s7R0NEBudpMKiLTdwNvLDA9fAzan0d9HHS5AoTCX\nLLOTsQcPUbckWTImpcImoPhI5SS5pGgaMtTKPbjtCM3iUhPfTpJTsJ4O1Yoj\nLjp8IM/4HLgB91aTKfJ1yLau6pZTyaCrpjP4E+85GI7FdQPxyQpbjtE7YwKk\n+Da4\r\n=a0M1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.2213152cd.0","@material/shape":"5.0.0-canary.2213152cd.0","@material/theme":"5.0.0-canary.2213152cd.0","@material/ripple":"5.0.0-canary.2213152cd.0","@material/animation":"5.0.0-canary.2213152cd.0","@material/elevation":"5.0.0-canary.2213152cd.0","@material/typography":"5.0.0-canary.2213152cd.0","@material/touch-target":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.2213152cd.0_1578504148370_0.9886165483283893","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/fab","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.5750f7169.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3695f853b8fd0af8b87b1e603740d1c3c1e66171","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.5750f7169.0.tgz","fileCount":11,"integrity":"sha512-3d/fnEzkOXQqs4xvZQTtm+MzlpiWadIJ7zyza/OMW4LaaN1mpznZbt3eTbIbKLqDT0yJOh+oGQ9+drwDljPuVw==","signatures":[{"sig":"MEYCIQCk0TFz7WFVPmjZEDRRXbiiBN410/RdoZI1aXMY7szENAIhALKrsvqsKf9KS2S6Ob6BFDQpIAZhJPopwkOzjhYzkn8W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhf6CRA9TVsSAnZWagAA5F8P/0T5lrc6ug5IHhqZVrWs\nyBawpJxsUjnxEUG0Fw/F4Jvce9UfgAnGNhKGsKIXIG+iW2xWTv2nNX9PCgPy\n0j0iPKjo5oVPmD6i5M+D9q9ENBhO0nXJWB/wMwBrQwRGEcdYRj+ptoOMzTVY\nCwnWyo9SbYwNCRncn3TOhG+CNdmSEd2uHWE1nHZ4qa2RcKFQACY2Lg6FzISL\nwC/vC1R90XsipuMTK6zocOVA0TVdP/dGZULUaYfWlbqDBM7NOUSfegRz181f\n5d1sBIqrIREn/w3kZXUv8JtHrcfjlb1FOoQmtpzLsFUb5Mf/TeZ/rZyKzXLL\nsvY1egv42yYFhRZ30fTdkQ0GasciZP6XcLLISCkQRD7h0NCdjBJ41ggYZGf7\nq11h3LcN4ZZfgQLBRZUUvCLVfSH4qHARAucJvIoxQmFd4Vfi3zNeg7rITMMV\n71mvETIfZ8FqfK6ENLZt4oJXY1VosYZNzK89ca7rXnGAAnnO4XRvWrfNnz3p\n2gEvBpBaArYOMBAoK7kbC4RShf00/a9Qo/I3shjwCU/h0bpem2pSoorab6Ps\nasdeJa2mTIfcxOwdiDy78lNcr9EWO1sQPxu2r7H+j4E8/GVlEAyuAL2xSN7L\nY56U1kPfvT0Z9uQvIHSGHEoc9qreYTVoufbpJoXdVNi2l7/amQ1JOhpFmNmB\nczl1\r\n=yhc9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.5750f7169.0","@material/shape":"5.0.0-canary.5750f7169.0","@material/theme":"5.0.0-canary.5750f7169.0","@material/ripple":"5.0.0-canary.5750f7169.0","@material/animation":"5.0.0-canary.5750f7169.0","@material/elevation":"5.0.0-canary.5750f7169.0","@material/typography":"5.0.0-canary.5750f7169.0","@material/touch-target":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.5750f7169.0_1578506233883_0.563528232318643","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/fab","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd2570d3aa1fe7e58d40577a41dd9eda6a121c10","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.f7abc7a43.0.tgz","fileCount":11,"integrity":"sha512-0FQr9ViUHPNoXNjXMcdjhzNnCmypcbGrmKzarqMa9hFjZGuIf8lO/PJ8GPh8YW6nAbmURLjd7Ly1PSVVf8Kl9w==","signatures":[{"sig":"MEYCIQDvA1ancZwtavMjfb+wM/co6694yAGBDCl6GEiDVTf0dQIhAMAYjMiZG7v/vWwYgrQzC5mNO+M2ZO5cVuCusSq0kXMh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh85CRA9TVsSAnZWagAAWUMP/Aq03LGVH289VFpTwxWW\ng2QX8jC2URW7Lanm3bun9BUCasOEhp9hNUL/AsWSBk14PQlsgLcy+l0KFz9/\nd2UgScjKWI3rvi/zg9w6xPYOyMD4Btvd75bgmuq0w+6OseRUtGTUJBJMyX6V\nZAhcF4G7nijB1Vee7iVFLp11xsdiuTNSVrTQZZX+u/Kh6Xz6nbTSqI1jCqpq\nHx9DfjUCwKVS6nXoXDXHW3l28pkEjbjCm2AEps+BtTOEGWDG+ERdYoz7qOxI\nrJxM9iwQHYWbGsdkNqNalRVtkqmdrZ3yyRxg6fnfqx4nD0w7uscfJP+Yed+i\n2vD1Iv6JaQQixhlf/w4kG++kxZXfxw/7E4gDe7+a/okqYiR17tETWILpBWrl\neZtOHPUKMNJjD869vqL+IVHcWPjT2yRydN2A+KZ8YLwjFw8C92CYodmMLft9\n4dysgOnLxnr/O5cnh23NhVWyNBbRwRJWh+VYE1AHqzjohWa2wBm4ADiLXVIj\nQWLT2Hp3x8jjRaa/uRz0aKegqnD9mVI3uBZytcbKVgoenaDFwS26mheC58r0\n2sbX4GxMViocpaNussk5HMOMdMdoG8iKZyVA5RsrGyM8HJD48gCbBh80WN8h\nan9E7gKfyXF0x0SqO8bAOIgDGqDCtTmvgeevF/bqMs6agns7uv72bWL2Zt6K\nkGPP\r\n=7bW+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.f7abc7a43.0","@material/shape":"5.0.0-canary.f7abc7a43.0","@material/theme":"5.0.0-canary.f7abc7a43.0","@material/ripple":"5.0.0-canary.f7abc7a43.0","@material/animation":"5.0.0-canary.f7abc7a43.0","@material/elevation":"5.0.0-canary.f7abc7a43.0","@material/typography":"5.0.0-canary.f7abc7a43.0","@material/touch-target":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.f7abc7a43.0_1578508089417_0.18193325253750436","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/fab","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87d6908f829c4def7b1bdd39e1b6355a8553725a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.bf7b4a061.0.tgz","fileCount":11,"integrity":"sha512-CcOY+9zcudY8rBGAzgg7iY0i1zJP0EK5VVCnz7Vb5GqVOrb0NrvtC1fdlKp42hWvlj2HSmsgve0T4U3P8cgT7Q==","signatures":[{"sig":"MEQCIC5Esf1+U1crcFVHikWONQ6fWiCW+Az8ZH1L0dlb1rmRAiBY/WSB4b5ICoUZgsjk4HkWjuBO5oXjfW3hwM+MbfbzXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJtCRA9TVsSAnZWagAAjBEP/jJHsBBd1kV/6gVwxgWf\nzAsRuRmp8UkBteHPA7fYT9o7lb9yK/fun2Oi6x9j5DF77IDWC5HVK7iiVaFw\n8ilXT8pRK4MbgSZFsLGnVPMVPaCPXtHItMUBU77EhriX3sMF1jwrMMbe117Z\nhv98aQYrpf42bmCX561qQznaAbeAzVV5svhk1GvqX9JoLINwfd6RAVYeByg1\nqBSq5x92aZ3OWCaNJWliTaM63NU3EdErbVVQtBqlz8TddhwbFkU+PoV3n6G6\nEZhEV9FkKZ4x1hCkZjxiH4+Yx/0GzzRx3ZisSngQTl3na23xIGI0whU1Ki6e\nydoGFbu0OgPnBiWH9QFRcFi4bkr+ovR0A6zXHW+2egGup7fIkIZfI4jWzoqC\nbcUVJjKQH3JSsir/SmuyehjfzihaZwHHuhnaKc/JHNa5F3e/z9BWnxJ652jq\nOMC9GqbEvuWxleWeQL+Ze16+/CtBtIgInH3Iaa59q88IZ8S6LrhzlJCJc0Nm\nts58vBI3cxf8AD0EVI9gp8O4mQG6P4xwqUQltL4blh+tueEq5HHdjdmDQuQY\nPNK8+TZ+s1mVI8OHMyIoZQz9U6d8tm8WiK+jmjLYeMWg5O9vSyOenF10MIiO\n+4xeoZRrLDSGti5CaMVTvRfTcJZuUH0CcDl9PXEp0R5NyuwaLXmxCAeGynAJ\no089\r\n=ctO+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.bf7b4a061.0","@material/shape":"5.0.0-canary.bf7b4a061.0","@material/theme":"5.0.0-canary.bf7b4a061.0","@material/ripple":"5.0.0-canary.bf7b4a061.0","@material/animation":"5.0.0-canary.bf7b4a061.0","@material/elevation":"5.0.0-canary.bf7b4a061.0","@material/typography":"5.0.0-canary.bf7b4a061.0","@material/touch-target":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.bf7b4a061.0_1578508909449_0.8332345852056378","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/fab","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.784fa7903.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a2d27a7579f496f7f0fe9e56f6e545355d469df","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.784fa7903.0.tgz","fileCount":11,"integrity":"sha512-ZFh19iYC+UpjNz6YRZILmCb4VtqRwAdx7KyL4UcdMhJra0mu46pIhotipEyO4WKO8nzqHDsnmWMDJK2gtYIu5w==","signatures":[{"sig":"MEYCIQC8OuyWylccsXAJcbFOmEQjkDATSgHLjKxH2BfhEPafKQIhAOcFSl4XzO0N2k1J6vCfyjZ7lLEWy9TRhAKazUnxS8hE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFikrCRA9TVsSAnZWagAAME0P/jJ5GrrywD4Qh59f3pBC\nVrgXxIDzSqxOkFh/MUxQm+VB+wGC9rREbDlYjoCKvb4mbWqjpP7L/DGQKToy\nEljfPnNAyAdF6h9cz9Kp4Jwa0M0IYYNEYDyJzMsr46VJNxRUapnTOl9d9Upe\nc3pIUD6OdGmVYH0XWGCfmMMXtKdIBcSVLW5Iuf5FSlLvxWZ1NdmfNF5OmEu4\nJEzxSHEvSemsCy4eRp0LeqFWeeyTSrExwif2Qo8MkUDb+a8u2Au4i6I1sdSf\nycx0EVrOVEFoBojW2mlycT5U4LZt+1mUItLva4HPeRR3tnUbB7eUwOS3rAjW\npyLx7bd71ND8nAsrjQ8IKX/NNixIy0KLZIZyKOUS4ibsE/6vEI6TaVsIpafG\nMOLVJn/07kTfMMNH6HqnmTuYmSqmYWbaK16WE0VkyuDSwvQw8LasjUk7Zr3J\nVdFUNCZZxYfNzPcCw1/WAn70LH+BLadhUOD4BLU5KmY0TaRUl+s1qZmcFo6W\nfds4cRIPQ0dYZ0j9FR91yfvPZ2kaljWEgyVLVk6u3C4w2+stIORd0Cn+BAoe\nufV6aIH0vfy89aFL3W1WYGBY8c9Bjl6UttunQRNsGzDCPZRTHeeX/wJl8HuK\nzHTiA+s0dGk/S5q+ECBOeHaIA3O+AFukPEuD0sZvD0puCKArggTQq8BKqa5r\nnm/z\r\n=u0ub\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.784fa7903.0","@material/shape":"5.0.0-canary.784fa7903.0","@material/theme":"5.0.0-canary.784fa7903.0","@material/ripple":"5.0.0-canary.784fa7903.0","@material/animation":"5.0.0-canary.784fa7903.0","@material/elevation":"5.0.0-canary.784fa7903.0","@material/typography":"5.0.0-canary.784fa7903.0","@material/touch-target":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.784fa7903.0_1578510635100_0.17915650961727403","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/fab","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.823c050ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03cdb6d42e41235efc1d484e914a215f705d799d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.823c050ba.0.tgz","fileCount":11,"integrity":"sha512-UbunuTwIAbEQ7ijy7QhzAo6naW66/IqbtL72w1/ovOTkRMSJGB2vRSFq99hBPe44CrLKuIw/k3odulTb4BXV4g==","signatures":[{"sig":"MEMCHzbev69ITQUYiIsBpQN/pF82nyOG3rW6PnjEtsuZ31sCIH1YLaAcjkgCLvI63Rj2ABvu03GCZxvrRBhDLIqx/IRr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjdcCRA9TVsSAnZWagAAZfAQAJYR1w7ZnsO4o5FlKGuy\n/AwgPBNlRkQ3gzESsMqFQZeZujHg3Q0EP0hxqG3E3q/Yz1lkoz7r/U715Kuc\n0FEIAjeJ18GbXO2QCOV81oGf5Q+xFjR6i14OFIHtsfOxPYqQFmLf5Vmi3hYI\nH+6KhLSAncR6ZFiFPreXOWciBRTAll8YaOpJLhwh3jzBa9dONNEvoXkRZm6a\nY27y89HzDJO1tn2zZPd2JfM+KsHpXEFMRHpyVybBK5BOGjXBN3UnGHP02O3R\na8ZNvQnNgGoVBKW2361OH5JPjoCRhe7sZXygQy1mshjuO5dOcFnIFEccmQA+\nHrVtb3IBr4hitLN7icgS3FPPF0/DQkfK2DDEp2JpC6SjSNOAVjZn23v96CB7\nGsSHoNRLCGyp06XR0gnhmtql9vqMw8MFyWfGtc6FKY74gmFCRoyGPcquvx3d\nL+yLDZwAqw8IeD7cUMGCptTyq5thkiGlb+UQVcj+VE+XfL1KQtJ89fF5C0Br\nR5s4erEodL2iWwmtIaaZOuKaVhiaLklyjJik/ab9OZ0Zw8t/Jd3FTKMB0l0A\nUqa/2IGu4457ljhBzN9iPh81quqFE+dZrlgpRWmB3gfTjbls/2W5E78J0bbm\nOShubtMoUNTBd0Ns0b013UJ/Y1ly+W9I5G9BYGUSOxF2ptbrPi9lYv5bHFZ/\niakK\r\n=qsMl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.823c050ba.0","@material/shape":"5.0.0-canary.823c050ba.0","@material/theme":"5.0.0-canary.823c050ba.0","@material/ripple":"5.0.0-canary.823c050ba.0","@material/animation":"5.0.0-canary.823c050ba.0","@material/elevation":"5.0.0-canary.823c050ba.0","@material/typography":"5.0.0-canary.823c050ba.0","@material/touch-target":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.823c050ba.0_1578514267760_0.8259213306468183","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/fab","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.70c708dee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d166ce0a6ff5d97f93d820d1bd1f033f06662f5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.70c708dee.0.tgz","fileCount":11,"integrity":"sha512-l+aMDiRPwsoQCNStX2vPkE0jig1cIrA0CgcPPkZLfSNX22ie+Pg76E1AvdFIst1KwVPTSGD4hepguue0S4Q22A==","signatures":[{"sig":"MEUCIQDtdPNfx1yce/f4HfLughzaIkgL/4/cqpNSwiYjn25x8AIgOF8ZFvrOafmVMEkpy68d3JHOIsnW/YJJqjDeI0phk0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjoOCRA9TVsSAnZWagAA+e0P/jvLD3e709abzZ6uuttw\n0C2/ph8cSp2JU5VEuSOBfv4x1x3fUVwVLXqxffz9U/JZkj6h/oaZFteSDfkh\n+MWndvTnRsyfoSwAKqSVwcWVr8bnxcasBPo5Dqsdlw9Tf4v2Fptfp3VTBFk7\n6zFfST4KrMJYD+Q8Kkp/xe8YaVrvlRdOhV1gvA+/JSY5hX4Q9e0l/U281whq\ntMh6yaS7ofP6OgWTCa5Oenu326NaMa5qQGfSe8QGhHlj+cjhY/vVx38PcO6w\nNdrqgK7hZ4SbZ4DeDsApda5lfCGWOmNYUAtIESKzwOndDzUbvapdBdZCmGBu\n/3Xb1EVdyFAU5INnEYZx+3WYOeomIUP2MilsPoJdmdi9Cz1ammJQ6CigZN6r\nkANeE8U/Q/MRBn4te1rsiIAES4KGbkYv3yGgPp3666baAChj8vuJ2oUE2rfy\nD5mEl6QwMxhUsiA/6sUCmKdYnNvlbFbTEQbuBmd+X1h8w+m+lAEhjSUvwU+C\nPIYfhqM4Gar4j4I29cOy7BCwXPzW0qvbXZTO7evnRpboA8d/Ud+9H602I9zO\nIRjISEEAx+M9SoNP0LGstZCCFEIbBniHGK10vHOC8kpbk/aFORkHWXNTcrqj\nUJYMa8FKbhmrXR0930zIUuXspAZwbD76U5NmjtveiGpSDf+V7A6MbyTFgEx9\n5k67\r\n=BHgE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.70c708dee.0","@material/shape":"5.0.0-canary.70c708dee.0","@material/theme":"5.0.0-canary.70c708dee.0","@material/ripple":"5.0.0-canary.70c708dee.0","@material/animation":"5.0.0-canary.70c708dee.0","@material/elevation":"5.0.0-canary.70c708dee.0","@material/typography":"5.0.0-canary.70c708dee.0","@material/touch-target":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.70c708dee.0_1578514958225_0.5517748179920756","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/fab","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"300fedc11011d089c136d856c14096b1b74f4e20","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":11,"integrity":"sha512-LhqR4l6xtRvcHq0TJqhXVbTCxbNSXVhJHTywnU8Yrhc41daFBJSPDzXCBXNbGN43pnHQdRYQwbSMn6ySINVMhw==","signatures":[{"sig":"MEUCIEl3lZD57WbJUpY/lT17UrO3TGuyT68KasyXdnsIqle7AiEA2TODxE7gdD6SSAZiQiYIH3TUeL8BZMahWhzwPYD9OEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzfCRA9TVsSAnZWagAAE6UP/2/PGH7mDp8N6AOt5cpm\n0U+hWXxmv+PHKhCppDBf7e2rZj06+LJrkKOrM0J+HD/ymIOJYxApDMfm3uvF\nKY2AOv3X9csoiZLAeLUfZk1vvqmDat6UT/9E8dU1rsGzFoDn6SqOCup/dRQx\nnDNQDBbuuNomFE59muztx0vfWQaOSmgDiM3PnXNeNmgOBmvp4fzEwgArvnE6\nwRyqgjxoJm4TGhlZAC0xMmRclsa3CTjoCS83nbePf0hAgSJi6WFY+WxfPITW\neq9w4SWwWSTs1BAEZuxeY2il/IPxpQtrG5KlT+YDid9F+6wQe+w3D1gQcEwF\njtB73F1mGiyv++JHh47A3QUjELZBNPCDHYBe7iYJHMPuzSltkrswuZkKUr4q\nML3g2Cp5a8X70ujSAA9K3tvQQKs0nmV89HoC03TIm0hc21N5Yl06oohVTEX/\nYeA4KUDFSAOWrMMcoolk8XnGAwKijMXNAltQJ2/W3+wrG1AyXOQ6zOJavoOS\nsfkai88c0GV8AYJSvXaoQy+aXy+NQTpIWYrw6rcGgpI1ElPQNaZW6eBH/teY\nku7a7/2ZRYwP/0xn5vAxF+Wr4W8X2+XGzQMtIUg19jtNCH2ePQnKIBMxRSSc\ncsiqRX9ULoSWSJDaPZvZxiGHVotDbdRqJ7Ne+LPOcQVqfaNYyhrHFlTmFqNp\nWwli\r\n=4AVQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.5ed9d13d0.0","@material/shape":"5.0.0-canary.5ed9d13d0.0","@material/theme":"5.0.0-canary.5ed9d13d0.0","@material/ripple":"5.0.0-canary.5ed9d13d0.0","@material/animation":"5.0.0-canary.5ed9d13d0.0","@material/elevation":"5.0.0-canary.5ed9d13d0.0","@material/typography":"5.0.0-canary.5ed9d13d0.0","@material/touch-target":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.5ed9d13d0.0_1578519774855_0.7017561651766344","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/fab","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ba9d69554a673c75511b029e48e7766d0c7714b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.4819cc7e5.0.tgz","fileCount":11,"integrity":"sha512-he9kLto3RL+DlILg2qDxOtqscyF0JQcoJlOn1fsbTO1F8acf/THXALr9I/a77ozViTsBzma38avofwhdzOp2bw==","signatures":[{"sig":"MEUCIQC4ig234kTD5UA31+lTSvbMnsIWYHENDzrh/evtDzMJgAIgBbofdklQv21QX9QTSXQQTSfxQeBTMDy4Z309oktFtvw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlCNCRA9TVsSAnZWagAAYzoP/18xJzZ8NxTBBNngdNOK\nPzJW7GtA/OW8kHY5pj8YGNDF1grtFPXdd4mzzOCOCNursSVQW9eqjLnkATqM\nGyGwXJtibQBlXiVbXEb15/8O8opOdUOMvvi4ylyWzNDJLd5UfgEYDqBGelqD\n21OzMXQpUOqg19IyHsaJGNXUuDM8I4vO1GwlX963f+toX4LkXSvLifVfcpxv\nqfaILO3vag54jOhknt/gxex98gIIwwLwcD7CbO66VXbtx3Z8SOMCWvhAb7FU\ntOaF1TsHGy1hXQB0L7jj/ESxXrRJbv9Mz7T9bUGJrJ1mj3ht+M2aSM89VMTy\nad09ELgLg6CuAXOvVGEq3/mGBnLYYpObR4qRS93EAuFdKQolAQgOyuwJhi6i\nXrL7a7lQYApyfIWC8JBoBFvyHb7nvcHOQwaFv+RS08Iq4sc1cwRtLBqWiH4D\nN/ysJ5i3IgWlhhJvs5eBsFkRaLry60k9Hwq+UEreneaVkpLbXitfbohR+7gp\n4jYdPDUshUTRg0O7LTNo+gc7MfrbMggflXTAMF4+k8+qACe2+pE/9DW6Kd7w\nmNgL1SSJT3o/6UlTEqoabrVau1HdyWtNCedtenlxCL2x9x6FzC5W3+0X/87O\n8vrd2vZFxZBNayS5yutPQFNeZdK8nV/IBLNiinmBvKDstPkD51w4yjz3gZwU\nfDrK\r\n=ld1r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.4819cc7e5.0","@material/shape":"5.0.0-canary.4819cc7e5.0","@material/theme":"5.0.0-canary.4819cc7e5.0","@material/ripple":"5.0.0-canary.4819cc7e5.0","@material/animation":"5.0.0-canary.4819cc7e5.0","@material/elevation":"5.0.0-canary.4819cc7e5.0","@material/typography":"5.0.0-canary.4819cc7e5.0","@material/touch-target":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.4819cc7e5.0_1578520716926_0.3473174848401579","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/fab","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a54fc7c479a464d289842a35826a37f2e89ddba5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":11,"integrity":"sha512-I175wbfxtN7W7XBw96Mw40fAvI1Hui8+HlX4WD8RzMOlJofQub1FzD5N7wn65xfJFjOnWICZb1felSY7Uve8XA==","signatures":[{"sig":"MEQCIB++VLqlUSr01a+9pLJcO3ifPRyJ73McM2SX2XnwZWhdAiBbhTcsD7sIDalm1sIhqFLskUao86OAvxRdy0+KxWgRtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlTBCRA9TVsSAnZWagAAMswP/3fxngcDWpTPpeYYdXMu\nLWPmiyuQGdaZsiYyU0P+AaGZDazhedpbUjE4nSn2RiWqoaYChflumAAtC2kC\nAldKFDwARlKpA0408wq6V37sko8QXnVzQsPnvCzpwBgEs0IlKdinf8lNzI1K\nU4HdfoPiI3yinOg/aGGIVRSfh3HoNWjK4KDkhGggx6aY06s/QLh+5/RQWf17\nioyqqu+c8a0CBajRFI4qvy7pJ3l1GI3HhklRr/APuLINOMh16pUyl1Cj2CwI\neJIqQ9Gu5AWZoYzoVIy9Bjb8iZk0D/MqcmgEBfNZg3Y+eUDJ03AehJ9UrmUw\na2RPPFwWv6Erx88Tk4qzbk8xJI3d4qNGM62+nVjxq8Z34oNmoyrWEypcX3YD\nwAw8E3R+nYzgU+cesBtnqxdjP5m78+uhofUBznGFrTanMVEzyOAO+GjKUKlD\nqvwtNFDs0gkjSj4jVXGifpIU6h1X7UcNF155lS2yO6eLFrYjGTb+AANUyNmc\nDv2ti5AkzZEQZ86QZ3TARFqg96zb88F5Yr/ndhA8NwZmvNAqud6Wgm2gpjAD\nTT9+N0eTuZGbyo2rGeEVJdjmX56fwLmA2H/Q8HXa6E7DfnQSus52qVihnrTV\n+31ibBS3C+1oS1CqfRmcAeV6sMoPSVuiEkz67o3loKdJoJwhZPySx6pzD091\nJKfV\r\n=6b0a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.fe3ffd2c3.0","@material/shape":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"5.0.0-canary.fe3ffd2c3.0","@material/ripple":"5.0.0-canary.fe3ffd2c3.0","@material/animation":"5.0.0-canary.fe3ffd2c3.0","@material/elevation":"5.0.0-canary.fe3ffd2c3.0","@material/typography":"5.0.0-canary.fe3ffd2c3.0","@material/touch-target":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.fe3ffd2c3.0_1578521793070_0.09519130813422638","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/fab","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.c0e850090.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57b5231a5c51f2040042ca7c71a507e0de00b214","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.c0e850090.0.tgz","fileCount":11,"integrity":"sha512-qQb08ko9vm+q1UVXiYY6jJOms0gpDUvHT/X6Ew5NlTOL6ewy38y13KpujEY7TU7ZfNPpUYh+cDc8KAXvZOwBBA==","signatures":[{"sig":"MEYCIQD7A19wTWw2JIebLbGMoyhUuFghTYZRC7bwDZqywJOxdwIhAMJNsDCMqBT2+8AMdFYTPexWOjeBQLDhon/mXuZYCecR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZgCRA9TVsSAnZWagAAdzAP/jwvFHXX96Q2ifnz5Wy/\n2azOC0XjQ6GP1P9RWRFy8TbVEZ6aLUlptRdT5Dep9vavaS4SsLzLiV16d5p0\nTCZWLT9oKzQ79UpQ23XvMobCNng0L1GHF36aCl4eCaeS/Qua/dd/KkC4jHUT\nLlsAn1WC2BratKXPBXVaVUWQBeSuPKM0Bah7otWfpYFC4Z1qetFvSfmv3lrh\nAx6M3kNL3+ERwe7pJvSfVbO0oBxI145wSiJTPpw3/AkszmUN5Qwgwskgjjyi\nB+ewBPELo+4h3sMQ6ytnnVTVV7cwoRm460NObgide/JE0NzNOgCtdblA07uf\nJaLchuX0IaQYop9Myi0/4nZ39cufiT5ylCtfwsq0H4POkj+t7v5Jn7URtIJ9\na7Oovo6X7CTIxT1iqL0Af+coO/b39liLyBNDJHMQeMm3K7G8OVdJ99f58RJE\nj6XhISW9unvnzngMNBDgv7xaKprBS3g2kJB83L4t9VOwJAnlKWOlwfQhnuMk\nGXbTmAbs4ptG4NdROlRoyWjNVMPlR8RjmuJzYIwH2dirQUYLyU4IFBU0CFe4\nTSPg3mi+CbQDoBA2wLHGuJ/VxSi/gM3JZ8nNytHN24+B36cexL0DrI5SxUAy\n2ScQghITydHf20++MdVoKLtBfxrmOenVwPiZpjoEb1UV1Gv3knscvWhHol5J\nR04R\r\n=KVNn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.c0e850090.0","@material/shape":"5.0.0-canary.c0e850090.0","@material/theme":"5.0.0-canary.c0e850090.0","@material/ripple":"5.0.0-canary.c0e850090.0","@material/animation":"5.0.0-canary.c0e850090.0","@material/elevation":"5.0.0-canary.c0e850090.0","@material/typography":"5.0.0-canary.c0e850090.0","@material/touch-target":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.c0e850090.0_1578522208177_0.41807080487997594","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/fab","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.615f86f38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b85da7ee36ed0377dc771a3bb9d9635b7fa13b11","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.615f86f38.0.tgz","fileCount":11,"integrity":"sha512-mU8e4FJjP8DPC/dRk1vvD9xMKTEmMRjvbdfGP70HSm6UN2fqccGWXyEWPFA5ws3okrykb+uqiO2R+HKggT8IgA==","signatures":[{"sig":"MEUCIF/7PqAbbY9am7camtsmG+GAiEdZLADfOyLOSQO9+pNhAiEAhg+3gUaC59MG1DZ9FmOVNPwlcQdwt1UCyZLPyhoKAZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlpnCRA9TVsSAnZWagAA2FEP/AqX0x9NHSeTdkAG3Bur\n9/010x2Lo230zILTfEJMNF7BPkVFdYRpBhPrBkyLkTIXBlbJG7vE0Owth4BJ\nyAaDMpFvtM6myYGWDsPR9lNuuHdGwJuKvksxmc1kQSmRQfpbXv03GyhZzXpX\nGSGPThJKvcsdExLQGokoUkoYCf8vmkAvWBM4URfDnYvbq/5SggWkz6bYyFtu\n7zM/xPgHx/AboLDng0zTTPZwUtrATfzURguGDy25h4ejh16MBdSsmNRe4ds0\nlxXGcRAgDibBTBK44o3nvwEA/A7uJt4zXKXO1r55z1p1+ySvDXw49wQrbh3o\new2EDq+UJGA+dWeW5C0LG0PSNI6lje9Wd58BiVQc4x8bXhr9eOAuJn59VAQ4\nnlG1YvX5gV96wP2pES43XcstiTMN5Nwu6m0cuPys4K3J4SyteE3tWdbnOUFi\nPcJzplK3ZNVieckTJnnAFi8jDsFK2q8xbNZR0pJhUpa53K5057mSkTifQk3Y\nH3HwQ8m99VH2YThPnO7HNVAeADn8/L4ut7GF7aA1W75n4t/OU0bHHbpK/Hjv\n7ywvPJbZX+3vWxHLRktMgGOcHaykuuvieRfIoQCCBn+0p7ceu38YZ9VAYQQ/\nu7UgoYCF/7e6Xe/PXFFnlIHMKY2wJSEmM+gIBVQFQ12qdpopa5Rr7izTTnIF\nhmUi\r\n=nWL3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.615f86f38.0","@material/shape":"5.0.0-canary.615f86f38.0","@material/theme":"5.0.0-canary.615f86f38.0","@material/ripple":"5.0.0-canary.615f86f38.0","@material/animation":"5.0.0-canary.615f86f38.0","@material/elevation":"5.0.0-canary.615f86f38.0","@material/typography":"5.0.0-canary.615f86f38.0","@material/touch-target":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.615f86f38.0_1578523239012_0.9731718109644907","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/fab","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.1eb032637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ed88e47359b3877e87e149bb1c25d5b21a8f5af","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.1eb032637.0.tgz","fileCount":11,"integrity":"sha512-MsA9uAC2kYBA4ks6EzXUBg4W3166N4dRj2JDhriZSPP26v0KxkEE5xOQBio81QNgta0Q9UBqMGiPmr9C0C1d4g==","signatures":[{"sig":"MEUCIQDOIRi8o5/UyXP2nX53t8uOKyvkOx+UPcB4TYo/GIJhWgIgGoy3AJLDT8eg7QihkCPJ/SFDapqcJtDTe2MomfwHtZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8BCRA9TVsSAnZWagAAuMIP/0J18z5QohslNL8VxSIK\nd3DoduI0Q0VmwlnbtQn/JcbzVC5IKTMT8qzF/rpSw60DjhzExE/rJgmS5r7P\nJKRCePy4rLVynQVaJY+hhbOhkxg9qzdzj6+6iFdMK5uclgEAOJe66ymluTvo\nX/aPGAzeamjt0zVPt65dusj8buHSktnnHazkwZwRmwGwpGQb+Dltawlx+Jqo\n5GtAvmPHeLK5C+D2zGZ3uX2dr3ZJKhiBpm1XMRwyhGtyCrs6h9PIz17vZdho\nJyqRe00h60R6WbZshA8EeSW1spKaFDwAsj5ZY2v4ihA5iKuf+edtObkUPmVz\nXp84GTutuvlWWs1QpWSsShqYEKycjb8TBvixNjFkoSkBgr1BurtR5zOCbkRZ\nWsQBZf/qWfi7KFl4EC4AmeoWAgsidPZ2j2mY6KO0xGMWS2lnj/8K/+6l/wtr\ndZE6/RRnlPt2o/1RComfbRXw3TMpIj7RCfSW6BYp2aQv7yYcqQR+5pCOwuhZ\niUah+UBceQniFj0EGISzj3UVBE0FDhZIHbwydAwGL2YouCj6SfXGPseBsigT\noEULcMlP2OR+ZZUZLtmZbsKuXLa7P5VbACbdLYpOmUOevPjw12nLc4EU23Ys\nW278VuNOCc9wqNmUqXuDA6KVzbXPcwBO1O5ilBFjK9XMpr/irOwulAez7oJS\n9RmK\r\n=z0+1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.1eb032637.0","@material/shape":"5.0.0-canary.1eb032637.0","@material/theme":"5.0.0-canary.1eb032637.0","@material/ripple":"5.0.0-canary.1eb032637.0","@material/animation":"5.0.0-canary.1eb032637.0","@material/elevation":"5.0.0-canary.1eb032637.0","@material/typography":"5.0.0-canary.1eb032637.0","@material/touch-target":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.1eb032637.0_1578524416641_0.34254794541710876","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/fab","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffae818f5c2d3e66744a09fc16457df6d2293caa","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":11,"integrity":"sha512-IKx9QaQhROqlB0plyQb/ndbSwq6QBo/WK8ArNkd8sAWQvwSqxgGBSbMkBk+6DBcVUsi+ALLzuWJ/HVl6cA1hng==","signatures":[{"sig":"MEUCICkwHcfCAVdPOUsIT2Vtqrlleea6/eJjkxyYrZYaaesHAiEAiD569Kdsn/JTlIXrQ2FhG1bb3+JwNgerBJoW2WfK7b0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl82CRA9TVsSAnZWagAAZiUP/1zf3vnyzjKmDotm42bz\n/rqhd/Nw2x2vhPlxpeCXjxCuQYtPpo/Kqz0zZ53nsRmHy7UiH3CK8UbNPcAp\naa2RG30Tn6IBcHEIRHYdA/pfYWiK6hovOMRj3m+505owQb/ZXBWnRbAZp1WE\nNA2i//dIqgJ7wkNbLlPdczyjFquZpQ6wll0kOFKk1fnY/RuprWvKUgC/NWtS\nq8yMxrY3Wm3vrfQTxo4nEI8xAU41hU2bkWJbQ7zt8Obq74/3Bud2942h4nLT\nEPJS5IbTuZ9ptFUxW+tAf3e6mR11cqOSyfW13GKZdIfa1cNfF9vbW0ICCEfk\nsEUfVHxrBUTyiU664siYlNttWQZc8WamV5vXy2S4CfnmktNplBZrbBFnNHUb\n5izwPbTegJHdLD7pUKCnVQWJpQwMUd43yLGTdAJ6c8mXPRjutpssERaR6m1B\nSdT/gSIuWaMf7ogqUZkOD+G5Zup9yRWkoSwbdTn/TPtXGl/fimqC2xCGxkgS\naNwHFcdb2jj+k5gGwOEZHeYZyugRTnWTbUUE+gwH/Kgsh8vWDh/OX6t8i3wD\nEKK75PBrcO/Upp/1ZKMRVitJnhgAAugTrAm1FTfXh5Wi8xh4nnWKQa3HedFh\nAzazseF4c/FhDrZNyzkgk+kGh0IY5ASFKzHKxW/DHca865HIQVhKbx4BTZaf\np0+r\r\n=OeVj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.5bc5ebfea.0","@material/shape":"5.0.0-canary.5bc5ebfea.0","@material/theme":"5.0.0-canary.5bc5ebfea.0","@material/ripple":"5.0.0-canary.5bc5ebfea.0","@material/animation":"5.0.0-canary.5bc5ebfea.0","@material/elevation":"5.0.0-canary.5bc5ebfea.0","@material/typography":"5.0.0-canary.5bc5ebfea.0","@material/touch-target":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.5bc5ebfea.0_1578524469643_0.5740905602749831","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/fab","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.1112b8def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef512adfaad639085318c185193f95051bc40e40","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.1112b8def.0.tgz","fileCount":11,"integrity":"sha512-FNhGqVyGwKtXY2fMw66ryS5oCql2LwliiRMLsI/vnYXgrLUXI863BeRVcavPi2qeld4fWOnM3bXL0YcKDoAZ5Q==","signatures":[{"sig":"MEQCIF+502y+BbYF9/++UdYQGjseBrHg+kpou+QTF+lV9fg7AiABvUW4OcqP1JhNBtG4dUE0M4natXwFVCnrORiGvApS4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TaCRA9TVsSAnZWagAAxmQP/1dH83lgDaX10BjUosHU\n03EWriW/pC/jDxy7mhaJoBd1gsbeshXwKk8IHPhFHaaz0v1DIJZnmAmu3Qtx\nCb6A/myjE5CtjjAMxiIZs9VBRkhrQ8n9FRZC4Mb8Itp0V0ZcUssCZJL+wy/X\nylX/YSApHpMfOZiNCPdDNSJg107MRZ12FkpDeoP4DdKa++2VuqwYnnO/EHZq\nAbcLDuitz8EVPzfiQxuXQ0z+XYa2MYVe7Jhzytd8Yy6Rpfs5w0lrmPt08zc0\n2lVHB/g1Nl5Q4+ccrnFbvvgvb46Z6/MXSgZyEiC4HhG1EJOhvzwRZzOuWc/6\njXRMEZdmWqKd5Lzs5RACY/8YE0ILMuuqEj8XVamdMgbGWsCzLfnzbYN37PVN\ncA+ODrOwtJzt3DelpfRomeg1TDVhBnr+Lgka69NAam8ohu19kQogbJYIMH18\nKOOrKkby34DD5kX5IOx4d2t2dueJTYqnKEimBOPT7ZtIyaRMhkw+SOoUqp/1\nbVx70Bk/Yv+TV4Hxd78y2dbeNYsJPUF/KugvcV14w2aqz2qFJ6Rl0dmafxn1\nUTl5+Vpt60rYFFoLrcENkzeV1r5GsnTn6iRbDCTjtjtWb5acs5My75HvBK6K\niXzKFwRRUq9nuKle9m4m225xJTt2XLDEIOl9dK8dlQ5zFJq8rJRxn5HSBmda\ni6h2\r\n=hFIP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.1112b8def.0","@material/shape":"5.0.0-canary.1112b8def.0","@material/theme":"5.0.0-canary.1112b8def.0","@material/ripple":"5.0.0-canary.1112b8def.0","@material/animation":"5.0.0-canary.1112b8def.0","@material/elevation":"5.0.0-canary.1112b8def.0","@material/typography":"5.0.0-canary.1112b8def.0","@material/touch-target":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.1112b8def.0_1578607833707_0.5081563286472897","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/fab","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.aab102017.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf5ab6651d4c213c6e049df4e2bba4725282bcfc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.aab102017.0.tgz","fileCount":11,"integrity":"sha512-9wM/ePH3y0EL2ZwLYvZiqy5ZXyHFY8YW6wkqEzrABwpYtxnPTI6US0FGTfn5qux7koVxfN7CQ74lN22b8tTnuQ==","signatures":[{"sig":"MEYCIQDyKmqczHB7H+8YN8pO/2Z8EW+wMLPhn9hGxB0HmOfSjQIhAO30quqS2KdYSTp23pRLYHMMLTydn0C86bn7RizxDisS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8F0CRA9TVsSAnZWagAAeVUP/2kFPKN4MxsUFSdQeIzF\nlvpD9MHdJkDBRXzbtNaEJu2hUhh38RaJKFJUy92PyzTLDPMogxVglK1g1fEg\nCNgpvpcDA1rYbUw2KMTL2dqNtmIwi9jX5Olz6dY2V/8jCZX2or3dhkSPAuyW\niCNdiNn+zajii47m7CXuag32l5tZWQPvIHEkLhuw3lPXz9KpbjI+p5DyGDhs\nSF9w/E1SojPcLcBu6y4Spzt0wOV8jthukfw9+mdSgGIsTx1WbSeaADb4zNdV\n7/dK+rrg/5OdRnzrLfkNrlK6Mp+WTAJwj7LsLTc3FJQ1DH1eje6eSbKsz9oz\nzITXo3sJge//nQPkSk2SYl5Ua9oE8EuTq8kPe24MhufYlF55gTZ9Wid425Vi\nBPMQcpzyeh8TrqE5Hv5x6L9JtK+ZoIbNWdTPQFOYk6FL4mD1QTKHhMC/xcAI\n3r2L9XJP20IjsdulYsAWvqdt0X6UYj9Pe6/W5/MRStzYlVhu8MzG7LlkA7P1\nS5/4D4QJ3waIGXClwVbhY7EDIRbOipAuyuEHWsomo+DiuCSEo/NKAJmtvsjJ\nsD9JIVgUytNBHTrDbhnoOPJJ+B6mnbXR6WKcoNSixEUjreewdHM7PtIANAJz\n7shWk93u/iuLKEE02AFO01bh1N+m9TzkCdAwMdEemyFNwRBv35RDBhNMMgZv\nlDXa\r\n=CZJY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.aab102017.0","@material/shape":"5.0.0-canary.aab102017.0","@material/theme":"5.0.0-canary.aab102017.0","@material/ripple":"5.0.0-canary.aab102017.0","@material/animation":"5.0.0-canary.aab102017.0","@material/elevation":"5.0.0-canary.aab102017.0","@material/typography":"5.0.0-canary.aab102017.0","@material/touch-target":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.aab102017.0_1578615155799_0.5227150925435973","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/fab","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.426913342.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"255f63e668085bcbbf313e13e6c280ed32588096","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.426913342.0.tgz","fileCount":11,"integrity":"sha512-BoZ/9tKjuDw4cRDy4QmX8RgiejnXsylAwf5vFzwo82EUaEU5w01j+9k9PvoAVVdYjVtph9xxLQ5VfxxQCLnoyQ==","signatures":[{"sig":"MEUCIQDTgF/pcP/msvQY7jGAyGZTG46q45PZX7S3Aj76/BG3GgIgWUhSM1uE3exgibIFhL4jPUqBkT/C4GkukwWohV+Mza4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9cDCRA9TVsSAnZWagAAPyoQAImLyU08YM3Igtdh6PBb\naptyjbp/c4Q/i4nend+o/wjTgruYv0NVbLOAZ2BQOQV370AdTpKhobpReAkv\n3UunGUQBlekLVvwZUSByk+7KATzwz1bq+/P9x3JFRn5422mTpsjPqJDUuxSq\n1wYt7MWhwMfaNI+WJMr/Yp1i0uj2F0U0paEzzBL9FEseDCAKQnkkBH0IBhpQ\nVfX/tsGTyelqO1CGer0vEhedR0GgSDUfoxMQUt9g3QPYMb5Y1zgGLmBhk3nd\ncecIMBilGFStQ7nHt2a6IwzI0jODhAjChGprUy7XARgzamlMHP1Ko6HAIIy4\npOq73IRDJ/t3YV16VHwGT8jOEObBTtEtCeU2Pct9ESO7u+UjALi4srLtWB/3\nBQKBs2Hh2g4U12xa/Ube2r6CNW30XCqEpZaZ72ZCfEvh4ZYX8UQnxOzuws7F\ndCGtPqInk7SdtAFksDc0H3ZE2HHkZTsOT1N0sCU7XT5kA2qDMCekbI31z8Sy\nvmR5EVFySuL4rXl5uZKCLi/Wg3gZgtiP6iokYOHvH4Z3O79xwYzOdI5fN/sw\nVzqn4WKUBTcotJnUptSzzwMGBOvDoY5mKKWawc12kWvD53xwdYSQa//TXGO5\nf+Vd6mz8TB2FShVYzC1ABD+qVhasS6kxX1veba2TTdyfMCW1kYD4akg1d7Us\nh2W/\r\n=26p0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.426913342.0","@material/shape":"5.0.0-canary.426913342.0","@material/theme":"5.0.0-canary.426913342.0","@material/ripple":"5.0.0-canary.426913342.0","@material/animation":"5.0.0-canary.426913342.0","@material/elevation":"5.0.0-canary.426913342.0","@material/typography":"5.0.0-canary.426913342.0","@material/touch-target":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.426913342.0_1578620675068_0.6179460432225663","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/fab","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afbab7ef1bd21408bfc2c5227569c1d0e20df8ef","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.d4ea9a706.0.tgz","fileCount":11,"integrity":"sha512-7QQtLyI+QCn3J7AV3/LG7zN9jpFpSo0vz3Z9GTH+3b1DnF7FYB+G5GqcOpW0Cfcrsol50YSCtFl1Li83ihR92g==","signatures":[{"sig":"MEYCIQD2alA73MxNX+ugHIvU/iAVbRMufNM0RFHAMTascsTBGAIhANucVcRY/eQOETouDG25WoRvDa8WPsESUQC/WXsEWdUk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLOTCRA9TVsSAnZWagAADtQP/2WdaD2iaLwgPwrNSHNi\nW3yd2KeauTHb+TRsVaVfe6WqJQ9VyinWszx0YHq9QgMrYQ03gUISf9tgKRY8\nLWYn043dpvZTKoprh24EgiAEO8Kt8KExx3zzGvShldoC0kdejfn+MKLXiNXF\ncRNC+o3PHzS6j9PhDGUt9kZvgUBZUXDhztNAtUpJ7XZXLso9pmm4blUtRcZw\nV4Ky4n8tP61t067Bfu+XfjimtY1meWkTGNkOLTVOfmuIkGdFFyLgoEbsFmFB\nbEx+MShXvSnnlgzHCNMnh6J47fZAsvRowOsfGyHHVxs1Y2hjNuQ9JGE/cmBa\n4vdog9DjBg7W94r3jn5XI1X9EnPiIRCxQyPzwTt3aG06oRR+pH1By4l9yK9q\nvI5tv20s66DPEfG4UuOhByK1rjsmkM+P6ejh0u547Zxx7BzfMgf0KBPfc1Ne\nUeue2wkKQ7TZhjxvptuxW817pUooIBbQXYEbkMTK0d6Wt7Dn/RIYJ3eHUEjc\nVzaribFuj8NK3sqPDjCR/Z0GlyPIF3Hmu2GG9K+IOzGX06TvPI2/1VwD2Bt0\nx1TaMbRn8sLuCLJxM2idJHUNxrFEWkgQFrXVSxJwcXIvXqqjDKvW2dY6Iwhg\nahGjJPd8TU05K9n0COi+qRkIKbWSgivZdMFKpMeVD7vYoIRDP8o6DJRumciC\n3Mhj\r\n=AFp4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.d4ea9a706.0","@material/shape":"5.0.0-canary.d4ea9a706.0","@material/theme":"5.0.0-canary.d4ea9a706.0","@material/ripple":"5.0.0-canary.d4ea9a706.0","@material/animation":"5.0.0-canary.d4ea9a706.0","@material/elevation":"5.0.0-canary.d4ea9a706.0","@material/typography":"5.0.0-canary.d4ea9a706.0","@material/touch-target":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.d4ea9a706.0_1578677138865_0.39479600315895613","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/fab","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e11e07ace218315761f87f0e8bc5a6839d3a68e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.7d4ee2996.0.tgz","fileCount":11,"integrity":"sha512-UGjkBmv9A48SiSI1Ptg619nXZJDnbHmfay6BehjmAZeHV7yvmQRqWIz7OOup5Lf0CUcIyuqsJiLZyZvhsYcbXg==","signatures":[{"sig":"MEYCIQCxlvFdKpxzptRg/UDf0yr5GF8WWydSBFeM71bSh938lwIhAOwQ0Q+3mmnT5WSJz3GhO0cj0RsEaNX/PunOaSxBGzdw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLr3CRA9TVsSAnZWagAAoiwQAID3jRQ3LR2XF1UHKRgl\n0L3CrMtO9swSdO6laCRMrUdSt46mXvkV4KvwsJ/m3ddCux1AQFDnhwluOma/\n1UzzWVCdGTi3KV4DCBVcgVTXMuuIf5lIYWHhdqOFuv+d6E4WtMMVN9K+g4il\nI97bXPjDeSqTVmI4uvxiFQUHzqZdppwzvh00H0Gn9UWEWHb95nwjPExv6oYY\nh2qy9hSc2ueLXfytyoDEuANS9bvOFmNBi7DFtZXVJTLKsHJCWXYriIpLya42\nDJg+1VWrWEM33JsDaVuBue45tvUn/JMQ0nQJfcEXnUJH3zPpMhCSVRNyjLZA\nGl2lQNgo2WIss/JQ7DwRutLBR5f76cRW2jxWeoGCHS5Yax9gMFG+IdPSnpyO\n5blIz7GApKToO6SZ7tFmDXrFVK508KYQM6QEcYGVMQe3I7DeWNtmdF7p9hsC\nbtzrshSwp7px4fbh+BZ5uJjTcYlm9dHXlms3hriAmUxKQQHwJr59EVSszDnK\n1oJI1s7m6KH2RxrdqwNZRj97sd2foypxg6Zvi9g1vYW10s/5YYZbvXohme2P\nFP8jjtiR9MWH06CBq77JP1OdgoPcdXOArGxEf2b4FNulE3n5RyjjRtgEeSq3\n8sGdli1vCIUlNxMMyKTIdKna8v+TbgY6UoKkK7VNegWXGExus1X4eTH2jfrZ\niArN\r\n=Gxgk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.7d4ee2996.0","@material/shape":"5.0.0-canary.7d4ee2996.0","@material/theme":"5.0.0-canary.7d4ee2996.0","@material/ripple":"5.0.0-canary.7d4ee2996.0","@material/animation":"5.0.0-canary.7d4ee2996.0","@material/elevation":"5.0.0-canary.7d4ee2996.0","@material/typography":"5.0.0-canary.7d4ee2996.0","@material/touch-target":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.7d4ee2996.0_1578679031058_0.6469870841121319","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/fab","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4fa672f8cf1732f1481790c2c03d03b431e585a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.981ec9b6f.0.tgz","fileCount":11,"integrity":"sha512-NnrkuhNxwTLdaIxEbQ+OxoAOovpR/RMQulxTkCd+2hCokJLxhvNNdaakRxWceSiC7LYLSzaMyeS6OpPDXbzA/Q==","signatures":[{"sig":"MEQCIH+0CX77ErwFO9WQYzvadQGXud93gTBLb0006LZQdZg3AiA0m1wUnILWAvwvCE4TmuMWz0v8sIz2k6ZninOIsqoPmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNAXCRA9TVsSAnZWagAAi7UP/1ib7hQQ1/omA4Cw8OJ9\nn8qrl4449c73L20wQ9eMebovGIn7BGHGnWzkjIE8CeBZqfEufxtVOLeaoJm+\nk5OggjeR1Y6zg9DSZBtH0df8KTB5LA21MHIVB9yZpLDS8P+Im7nObEOz6ue5\nM3urjXApccnVzP56l+xd2TWxqXzr7lLy63asAr4ctDzWMIfTj5QTGkTiQeo5\nZioLG6YHtgI8oaFr0G1QROmayUnPxOR6T0yJ7PTwOWps8fl4Sl7ANVwylqUr\nkuz8kgJZdNWJnMS9vZVqPR/V4PbQtY6M52Cg7kCOpFpVl8QgsFOkKLKlNxZq\nDQFcBz61v+WzJaIbBSEzdGObye4WhkZA8cDrE3xVTW9ZxiqgRM4lfnI9FBsC\nt2evjS3JtG9nf7mDV6EnRHytpwFFpWI0mt+oYiDd5EZJ0fDcSLT9Ru0shlQS\n+J/HFdI6M88KVuvTGgwsZNw3BHdOUXfn9z0zAV2zhTQ1V9WFUk5iRyUiNM/s\nggOduvvnq0rw8czYkufjbAWAaLOzZpAx3F34pOieVaIs2cSlMDkhF0DaEbJ3\n3xsIgO7uQE01qcII0QnzeBK52rzdX4mDmY/y3RNzVvnxa7mDHz8jTT9eB5hk\nSYRCkUEAln45SmFSs662JU/XKIxyIFS+RdrYp4xdLfzN6IJp7s+4uqsSiPwI\nXSzw\r\n=2xpN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.981ec9b6f.0","@material/shape":"5.0.0-canary.981ec9b6f.0","@material/theme":"5.0.0-canary.981ec9b6f.0","@material/ripple":"5.0.0-canary.981ec9b6f.0","@material/animation":"5.0.0-canary.981ec9b6f.0","@material/elevation":"5.0.0-canary.981ec9b6f.0","@material/typography":"5.0.0-canary.981ec9b6f.0","@material/touch-target":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.981ec9b6f.0_1578684438913_0.8977032687869289","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/fab","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.737da83fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dc668d60b50203e6ba60b0ffa1f7b0db3605e26","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.737da83fc.0.tgz","fileCount":11,"integrity":"sha512-H6MW1vOjwuC9BWDGa4YWjapNQzcf2Tr1vjpQ+B0qs/o0LaiV8awHeZXPIZEe/SjKar6KpwoCiwY9XbQrWzOauQ==","signatures":[{"sig":"MEUCIFJPBeqFRdOD+lI9JBHpZ/+Hrq9gsQYX+nXTjclLbesRAiEAtUhgWiWA1BWysxftPeGszXeH/WE4XwA27b2q9s3XdHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOpNCRA9TVsSAnZWagAA4ocQAJYC8T5KLHd17vA1I7sC\nnHEfsYnEmvZAbc57kkDOor+oRDN/fjIbn0+e1VdN3NDrV8xk7fdTtGRxs1BP\nVGG5rLMtti/wLmqfwMOcpkbmt0fKDwKboRNJi3P5R0R5go/a3v0kDqJ3Ye51\n3EQhnYYsUHwCTynpL3WPLTW5diMBU1ujUGzFmN6hBXkRtdPOCGDGZtKpM08X\nIxPNdlsZH8KG6KUiz9w//x51tnK8zaW2JkPlkXQhh5WUwC2ONPOPFl2pO0Db\nrykSiEopKBIG9lAgNCs7sjN3X+l6zrzYoDaqEXhGgtQtsab8trGo2n4PObBE\n3KmYygelDXlkZDzp3nKPVCL7bfQUt9HkJyC6auON9H1idOgVTTxyut76Z4vY\nIv85wuaVBPc/lAHJWRaIT5Py7JyGNAXol0ttiIjpMoulaMGg23t1sm6FOywE\nmqeUTotxl84HnICkZ+nxq6QUYppULnloFEl9lSQ7WEQYRDnkIX1Z6vM6qKyE\nCWJzocWGRNCbJ4TH4gI+6B21ZHWeGXFpd1kJN93Fxq2r7wBC+8rTP7NlDEEv\ng57I23CWPIup34XhOeiAquN1VCBLojn1ndR9prNCmzmVSJOjoTXh4E/K5kO7\n8RIr6iiYqLQ/4dOcTh5B/zfCGY5ElM8CpOEdcDE4R2HQvTOGZazEahwcmqQZ\nDQHu\r\n=9XzW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.737da83fc.0","@material/shape":"5.0.0-canary.737da83fc.0","@material/theme":"5.0.0-canary.737da83fc.0","@material/ripple":"5.0.0-canary.737da83fc.0","@material/animation":"5.0.0-canary.737da83fc.0","@material/elevation":"5.0.0-canary.737da83fc.0","@material/typography":"5.0.0-canary.737da83fc.0","@material/touch-target":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.737da83fc.0_1578691148793_0.6408364701931313","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/fab","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bd48df2c46afad268ca45c8fdc6a953a1f96b86","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.aca8e6c18.0.tgz","fileCount":11,"integrity":"sha512-snhxIfIQIfzz4cZ26BL2mVEPbEqNmcWo8UD5zMiQANNpCkPuuZIphtQChRmmkyxS8AaQXITBEFJ0SbwvJBClBA==","signatures":[{"sig":"MEUCIBunrZ69s98W36C/QFHq/l6lwkQ5YLAOl8PaZwCiP5aZAiEAsCrHt7cACjpkYGGnTs8ZCfnZPybs3B5MGFe/waxa9Aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMXeCRA9TVsSAnZWagAAclMP+gOLipkAyCtK4gJYNgzn\nepae9fnFyZGb3LjgUGVloEyN0eoowwodx8w7QhJAdTsa0iFw+2rY5GIocSs/\nRZ5FhhyFn5Vu3up40ZpkDcv4hIydt00jj5vO8ehTRFjpNu4k+Ifv7UAG1AEw\nHFx9Kgq5P6b/22NnFe1q+6oB+WteGkQqQd+1VmUQN7+qMXPOMzRCUUPqr09D\nAcN/xhtP732jt0wsQYFL8wKB+WVQvc7JoAVBzxPPYhRAsO80ch/7nfOGZSTM\nti9nQcr8EP2J1+DesB/9PpPZf1w+3n5rXoGJMssiaQQVI1b7dPy9pLzO13+p\nbNNvdpI52d2++SlUNrJmuStFxfMtOUIqGhO9VmyNOpD/1dKB+cqgebsQ8wg/\nHTJrItoaM6YN3YFlLSh6zDRJA2bImEz0WAELn961YgtcoWkXsbGpzU31JhMj\n3o2ikapJ9DI9eDz9DY+PrLpCj1C3UN64Ut26kpaNVXMaH1GDgMFH9+lsTrde\n88baF3zwDAO4c05XjYGbKA+6flAYgWXXDJoK2502hCHBcVM/F1xCPc17Y7W4\nBF7Ng2BwnT+UIp9A1HOeo9nOakKgajUWFgZgVRZzgHRn6vyQF0gUp+RbdB5Q\n9nYHHSDPgF4+iv9T3GbgQHS4P1E5znn2wz/nHsT5cm/yTLCnOpOKGTy27JcJ\nQyGC\r\n=awEI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.aca8e6c18.0","@material/shape":"5.0.0-canary.aca8e6c18.0","@material/theme":"5.0.0-canary.aca8e6c18.0","@material/ripple":"5.0.0-canary.aca8e6c18.0","@material/animation":"5.0.0-canary.aca8e6c18.0","@material/elevation":"5.0.0-canary.aca8e6c18.0","@material/typography":"5.0.0-canary.aca8e6c18.0","@material/touch-target":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.aca8e6c18.0_1578943965879_0.9898096602322706","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/fab","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"747e346c470d7221225cbad7536027bb35499bbc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.c38d84e21.0.tgz","fileCount":11,"integrity":"sha512-k2ExTsQxhmYqnGOHR16YC6XwxUpYjAR0p+dkn+yVb2JObKfSmwFsd1bCTThv8XuMbgY0bWxrzQSJitsTdVCvqw==","signatures":[{"sig":"MEUCIQD92GP/sOqHHOIoOST39k6cjp9TXiSHQ/GhpQ5jNS1l8AIgGZyOO368s+Jpi1xpQxtAddxN4+lvZo4mqo0mF+4L0WE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOujCRA9TVsSAnZWagAA7LUP+wT/CbKSC6olUYx3vXgo\nluAXYpReLCOZ1HxCWnHoWQqQIbzl7hA7f335Dbu4YAaJExXXlAsgc3FkuYxq\nETqXPsVlavqgjNXni0BB3F7rurAWSJ7cOxqGdF364VCYIESZJPVGY+N/8sQS\n3z6GGXIZ764EJTbPGpm6JUHrMZdRrQlBQvv5AzvE5FLYIQIaWcVQxC8UmEr+\nqdriLX/e+m9X/1elAbCgNkTmSucclij5kUGLOed/bqFElEoBP0wnLNsezy/F\nYe1OQK8Ww8sH1oq8qT5DJ3XR8fHXAlGpU1SJl1pBCiTHjvfW5P+J0H2dpSp2\nul73KXlGogNPnpa6H4rHHPcDUr1p5KV/pRs2wup5Ek7NNQ1QSyDXCo2tujLy\nXonaHCPGsR4O16S8+/7M+cfQ9/SIhiVKs/1N4XVJ87KfcM4vUwtX7I6m5UTv\naVBhYtIA2KYiD89pg9Oyoalfuhf3m11UJhE5jbQrblI1D+T0bLymQlgHLGsx\npfYjFKYkt5W59m++5rxeljd9QLx7/0phmMl89MVoDqLNghobIdjip4p7YWXp\nu3kqP62oMkh/HVNtqXrJu+2SNH3HZSewg9ICtoGNKw79glwYhmZy7FeWPtbU\ntxvRDByq2kGiNfwYE7h7xEyUNAn1sHWTDW5CpNd7LNG+Gf9Mqi/cde3yMOyV\nhjbk\r\n=Ub/b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.c38d84e21.0","@material/shape":"5.0.0-canary.c38d84e21.0","@material/theme":"5.0.0-canary.c38d84e21.0","@material/ripple":"5.0.0-canary.c38d84e21.0","@material/animation":"5.0.0-canary.c38d84e21.0","@material/elevation":"5.0.0-canary.c38d84e21.0","@material/typography":"5.0.0-canary.c38d84e21.0","@material/touch-target":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.c38d84e21.0_1578953634620_0.17962750127295468","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/fab","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa3e38686c57ba57ae68556ce797dbb9e67da1ff","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.a4db5fbad.0.tgz","fileCount":11,"integrity":"sha512-beQwHONTUJ91Oa0TuGiYuwTT8CQKfgcciF0qxvgjujEIPkdLEMwCT3k8u3/h+v1HqM9Wy86bv79oYGFrxPePyQ==","signatures":[{"sig":"MEQCIAZa0NcoOt0ymVu+T56tUeVXFaEmTGeqcNOf7JJ8391iAiAkns1X2PI33acuXCpKK5YwWSTX76WeS/w9pkQtJLwIWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRLCRA9TVsSAnZWagAAwBwQAKA3qcWHeuDcdm95cwXX\n4K5FrKtkztz4Dsf1ceTRIEKfYUqS4sJt5MOMgdJGtOU5qdwBhcjxR5IyInTJ\niihJ80tFwsc/LgabJksZ6yIVA/odZ/hQikJHixAFGceFXD3JbZUaLP/Wj/oq\nA9SwWzUa497HwStwiWb5FQKsb2pR3LA9AJJmIAwtKQFCWm4pPqGwjNIgNUoX\nUtqJo1UQD9tbkIdJlqQKb1z1kBfuL62IRMkC1iptq4W0pfwVCTcpBEgrTUMr\nrG5XUYY/PWIM1Mlo76BfhPFHha4DgWjSOdtCAhvU+e7Km5+1MIeBpocT/LWx\nfKSQ3OFcIRNesXLqZDwXd3bg+gyH47LRDjuskn8TjhMDdrNPKYFALRu5foZ6\nrxjdYWzXnzf43G87gSE8cHcmVSzacKAJYnMvoLFCoMpCiXNeR8taCCbeRTZM\n5FaKdXvQouSa9IdsNsnHaU3jbsOg/15k6UeLcN+CHW7AjXmiupMahWVNJZ5Y\nywdqGMaaxDNSeyiJ461H7k65SjgSK/K+xRbTr8z5Dwk9wi2x/eeu5/yWS5Vx\nPoaLanVVpYQeG/qy3IRHZGAO/zDDRg/EyC23WENdA3sXeUJIgxIIufXcln0V\nhsUL+4xQoKQyvwAs04Z6aURch+xC46JHzT42j1X3h8MNHYVWbw2BvS7cbh9R\nl7i2\r\n=Oh/9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.a4db5fbad.0","@material/shape":"5.0.0-canary.a4db5fbad.0","@material/theme":"5.0.0-canary.a4db5fbad.0","@material/ripple":"5.0.0-canary.a4db5fbad.0","@material/animation":"5.0.0-canary.a4db5fbad.0","@material/elevation":"5.0.0-canary.a4db5fbad.0","@material/typography":"5.0.0-canary.a4db5fbad.0","@material/touch-target":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.a4db5fbad.0_1578968139344_0.35173485494546575","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/fab","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.faa9af310.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4f82f671cc941a7febb890fcbb86db438b666f2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.faa9af310.0.tgz","fileCount":14,"integrity":"sha512-gEwYBGX9wP7RxLtn7vbwup7+mNBnjhthz4IHjG96QKEm39zUeFrVW/+IOyEx7+/nP5r6de9zwHcmJ3WCnwKgew==","signatures":[{"sig":"MEUCIQC1NsChSP10KL/YyPwF5BslwrVBWejYXjnL3jb/5vt0twIgBtiqnQEPt0cCfOnVuefufrw8EQXZ59o7nvCjjjzlDoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfH9CRA9TVsSAnZWagAAvQ8P/R4ilP4pUPhPgphO4ANk\nYz+NuM+HkYCHkVzTMG1rnUCbE5cNqHHIrT/j9kiT53841vNDK2OuGNBbqvb+\n9CTPhPdfJUAJt0XV56E2Le6Q3uZITqGcUng0QiEaFz6LpE+W35DZtzdXEtqq\n0QG22HXFKMRJtuhs8xecc1cZaXptlhHD7RKy4CwlnhNKnZaRSX+HD9OybPLa\nnFdsChAJnMxn6ehw7n225An1knmUYCjAQiR+rX2U/CqPJJMA0zBDfbjAQV+E\neE6r0q3cRNGQFQIjuS37G1dT+vq7bLSVKd7YsujWdlQaMyJKHIBQ7k73rZpq\nRo41vQfFm1shVYFYNFNvYdhrGu7q6a/VBE9nHENYwVG/YgZCXmz7vu2zUI+8\nzOkjJhFkgM8yQGflx6g+5QKaNEgQ3wxYZI7VzIZWogvJ3L6GOCNkVH8SEBON\nvHirP/qQzYiREbJhao0OsDeS2jyIWwLIbEDsSVkbb0a05U9SriklWyhlLzn/\nMx50chMVgLzGHEpqlxD1UtDmEmaP7n9mSYIy9ygsHE2ZhjxBMcuyjVLMrtAd\nEfJBD2e1ZyElsiP6ZxyOqkYyGGogSA0L83rLHrOb/xeQEg53KgKi7McNhVLZ\nVdkaH8fnanJhy+fIAjIVZ5La2qImydm9ogel+lkJmjdTFkU/LpX+bZFyapoi\n1Shd\r\n=vEiO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.faa9af310.0","@material/shape":"5.0.0-canary.faa9af310.0","@material/theme":"5.0.0-canary.faa9af310.0","@material/ripple":"5.0.0-canary.faa9af310.0","@material/animation":"5.0.0-canary.faa9af310.0","@material/elevation":"5.0.0-canary.faa9af310.0","@material/typography":"5.0.0-canary.faa9af310.0","@material/touch-target":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.faa9af310.0_1579020796835_0.45273380923834816","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/fab","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.60354c577.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc132e4cdcc42c13cd12c03c3b0911d378424817","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.60354c577.0.tgz","fileCount":14,"integrity":"sha512-hDuziUultZMjwjCY7B41JjD8PPctWrBJuQ1YJ7K18bZYQG++n21LAsMhW2XQ7H7qRExnEr7t16KXepwCD7CTbQ==","signatures":[{"sig":"MEUCIGefOjPWGhVCaHH8Qt1hkQb4rH1OZ7d6C85D2Dp4gr8qAiEAsOUkFqFfHuuKUlcHJRJ2pFoxbG0vJGa84pg7oGQpFOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkS1CRA9TVsSAnZWagAAKQkP/29B/U4xYNdUr+jto9ep\nrLlUa/4jPF251t4Eq7xo/2slRJ24jTUY5KGcNyuWnYgIJzmvIvgRxfHL3nRA\nXHDF76d3kg5Dye8syX40yxmCuW8WmAj0dGuuKusO2RP50DCxaUYdpHPJltr8\nfWjWyYZZvwNlipCPhJZLvGsMdFKUPkSncyi4y0Fvr05EAL/vDYJgusJKuRMF\nR9AmHkSJLZXi/fLdDcoKsNGd96/j2ic7++3ni97YtdQQSNV95zanC8vF8VH8\nT6uev3HhgW4aDgnRIyTiDdhBOPlyq/QLpBH1SZ9zGDuwP6dmsGUF1XjnYlcI\nhrqIXlPEZeh7JICIhOPZreMOv1yRxUoTNg00/Q5J9fhWK3uWOGuy4Q3UjYHg\npidfx8stt7B2ESWaWPliBUnQBJXQmeVlpll82RtillPfryuat7zQBoS2/66X\nD3tdWrQudcxGmGAoUtU3pKffbRbQzHAwIPZ3THvcDrLjU2Xxq7oZZi0Hg4zM\nf7A4ctsSkChHrAgW0bzM/ZqiJ9zOQux0tZCkE8Ls5BJrkwrV+Ln0CIlTpNfW\nIP7kiU92zVRPWTl+QeWbNKXCBlQkBXb8Ou8eFAFwxbp3hFT4AO/mGCdOvd0j\nU2s/h9M2dPH/oaoAcwOrpjYTMs5ShzC3zsZ0/FalDaOgDC0I/vSG8mV2HYFL\nmmpp\r\n=oX/m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.60354c577.0","@material/shape":"5.0.0-canary.60354c577.0","@material/theme":"5.0.0-canary.60354c577.0","@material/ripple":"5.0.0-canary.60354c577.0","@material/animation":"5.0.0-canary.60354c577.0","@material/elevation":"5.0.0-canary.60354c577.0","@material/typography":"5.0.0-canary.60354c577.0","@material/touch-target":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.60354c577.0_1579041972822_0.08332180242022824","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/fab","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efbbb260acd24915c173b27cefb33f8d05e67e86","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.d07c78daa.0.tgz","fileCount":14,"integrity":"sha512-sJ5R7BIAH3rYguw7ZGNj+SRKOtW0yEoHEDRKzL3eo3e0TdIqT5ningUWbQRFNmLuGYDeIxnYQMZcq2gbSFklbw==","signatures":[{"sig":"MEYCIQCR0L073futA8SZN4v+Lfq7MerUzTl/RHeMxo+3bG5ahQIhAK70uE+JWsr4qd1oAhVjxfKTiw27m45Fm2koL/qmTgH1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlEZCRA9TVsSAnZWagAAruAP/1maveteLpn/ILs4SHwY\nBqNhQwdYzOPzNzzQ3DbGttYcY1VuBHfhDJOVPZAifTUQRlWVMLcKJOsRaiLe\nT3dXHhCcm/brcNDvttQdqx+QUy7TNFJAZpi/EWMBrcTUJH6/P6SnNsHGib30\nhuwZPNu4l6khGAvbjfqJr51Ups9t9HorUY0GLQ1zJUJr/QprpSOwCbgdc/zI\ntUzWVGmx/6+93uu+sKEqQ93FuUdBSMhqtZNse60DVzxR7o11oakUBz5xFs4f\nsngvbzxUmQC7LBfYxrEo9ULNkMIXUjGA1kxp7rogwQhHF8Zd6DiSUsXvUTeE\n5kNNELgV3OPxZBiXTplTKx8vKRvzFTSrizm62WLLXquMz5SPk5vdozYC9bwm\nbYk3aiTIpDpmYJkSAUkSkfsF/Fzu3E2v0JWoG2IrsyySnkyUsThLuQhP4RfD\nVXHczz9R36XpVSqYqaevXszGfXr/a4nGYJ33/SW6b37OHY+oHoS4HeLJT7E7\nMKVBUOZ4zGMiCL4ZhBV3+acl/dSjn95cGsQaOWndn/AsO1BBfGsBiERJe4YI\ng7Vm4ZeuLbKAGRPFp35+hw2aDebZiGhbNp68+3e9uIADy0liw9+yseK9IEDd\nBTIHnn0Hk5GLeFh8XkXpp3/r/W+6u6lZwwv2YE+zU4aZ4RwqS69JRiuWHY9P\nNsnd\r\n=pU+c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.d07c78daa.0","@material/shape":"5.0.0-canary.d07c78daa.0","@material/theme":"5.0.0-canary.d07c78daa.0","@material/ripple":"5.0.0-canary.d07c78daa.0","@material/animation":"5.0.0-canary.d07c78daa.0","@material/elevation":"5.0.0-canary.d07c78daa.0","@material/typography":"5.0.0-canary.d07c78daa.0","@material/touch-target":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.d07c78daa.0_1579045144716_0.4421311539633035","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/fab","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42d8c26e3151a9546b0b95b10d59e4b42e1fb335","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":14,"integrity":"sha512-p1E8NhUWWd5TZQOUbRs5UON40vYEOYwvFbGXzoU9UxyK/+ENvmDdkMIX2ggo1N7lu7unhpfst8GnmuPdDA8FgA==","signatures":[{"sig":"MEQCIAxX7FO4ZedEshSrztX50QiyA/SBGLfmNtBlXzVV4jFZAiB/cIXtd/KE34kvemt/V8rVMl+mg3quJoroF0ojrEOTFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm44CRA9TVsSAnZWagAA9ckP/2ng7tc/9+gniL43KtZr\nrMOxD83u2FgucsTV33zrFIiQ7AdMuu+HVGMzMeGqEXFsi1bHvsuhFWnvJhl5\ne8DG5FYWdOlG+AP6Jh2Rj5USVRT63oEC2w0eMEpuZm01oZUK1mgsHvZJQASS\nWKiiVImXmEtQZcAFQBQcu+U0UXQhG8JM+QnI/EjWPFjsemfmwjHiPi4NiFMI\nU3UhAoX6btwtVua0KRaKUeYGmuzywMDSc+OIN2u446GX/8SKOjhio8clDoOv\nppWueXLonP+vBnQItE4tgIM9kaOeKKh9r1bRcP4qQmCzs31V0taerBkzGNx9\n9XH9oh1TV/KM2HjRf2RiqA7HWPPfnh75WWg53YdiunVSV+Un0/jseI6tB1dR\n1wr/+BZv7boPt54ciEVUflBjanzJCVwYCKy7B/x1aSR+NZDGSwxhodsZdXRy\nCAhmFr4Ad3GBt+sCKKI1hSzxFHb7jThYqLqv9Igs1rn0jC0v0mZHFYBKxLRi\nWRg4KkUl6ZMQm/4tApyvAGajSSWiyqr2GpN65zZC4wDPI3SITP7by59Z92xO\nnkyq3sy3LM4QQlR/NRCVth5HbwzT4/7GpF2z2EPTebrgCoQeUaSdVfbPjZS/\n2ePLU6z65FJNeUFFhjvqxqfJ1fUQB5tFe8tNTwZoa2XwaIsQEZwnveEkRKWn\nvBob\r\n=+yAa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.8ddd5c6dc.0","@material/shape":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"5.0.0-canary.8ddd5c6dc.0","@material/ripple":"5.0.0-canary.8ddd5c6dc.0","@material/animation":"5.0.0-canary.8ddd5c6dc.0","@material/elevation":"5.0.0-canary.8ddd5c6dc.0","@material/typography":"5.0.0-canary.8ddd5c6dc.0","@material/touch-target":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.8ddd5c6dc.0_1579052600150_0.7621452214485516","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/fab","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.a9511d870.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53633c7976c3081e3b32d7715eb254ea37dfc373","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.a9511d870.0.tgz","fileCount":14,"integrity":"sha512-+dFZyz7F3dZac33RPfCMOh1ODnXueNuPvhpp6o7B+3Ptg6u5dvo5IGq3IPwHfwd7X9STdfN5D/LHnolc4QZEfg==","signatures":[{"sig":"MEYCIQDPfSMPL8FpHgXuzYGP7EOsEa5lS6SuVn6ZlzgOVtHe1AIhAIF1vq27FIRS4fNozrAcPTaOY5FXa+VB3FzA4dCe7NBJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2OwCRA9TVsSAnZWagAACC4P/1zJo84I8L3jMRkIfl3H\nsv+baN2CS9agUV3f1k9jS+l+XaXtHnuacRTpejKRj6Id03TWpmJx1fzfGW+c\nTfoecRWbuPVuu10jwAQm0VuM5AIkq+URSM7e5KDBPkvc44jUg1UzKmBX9DxY\n83fIkLFRyFusVelXhJroZ6GW7rBCCqncRcbFv8PSjpbI00EN5kH+AlqMvVnD\nOC6cugFaJDeM4wNdbqZoFKriP3rXYBhF3mmZza4wBxCa/NGeaB4lkBDzenil\nXZD5QQkqly5hbIgnXINs9byK8Co3hpo+f8X71Lf5f/cnmHcYaTO8Kabwbkbd\n7lIoMzDcTI+RmbqajD8ijfuDA4EYTkdmvfbT12YcOzw5zxkb2I5R+bwftUpj\nzRsz6zFa+glKhaIja91GdbvzcgPJmXG0EeptU8uMLN5C4QU8D0ENqgMiUM6l\njkiAQJKdDM50M09MglZ1emZ4UeVxioKihrpcnDzNskM1NkQu3lmKUbZoNOpx\naq3RBJ57IftUQrDXp5L1AKtoXh3NihiZdiyN2TvCYxal3M7SOwcroRzIUusW\nz+44rK9CeMKZtLS4QP40pqh8eEJBsQbKSjM3CJgnvQBnVrs1UK3VulE0IxPt\nnQBhWNwVT0GVEPc0oZxkOD2OeXGOhv/9TZVdym6iedWbMAI8C1CRvd8PCZuY\nk2tm\r\n=E7Q/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.a9511d870.0","@material/shape":"5.0.0-canary.a9511d870.0","@material/theme":"5.0.0-canary.a9511d870.0","@material/ripple":"5.0.0-canary.a9511d870.0","@material/animation":"5.0.0-canary.a9511d870.0","@material/elevation":"5.0.0-canary.a9511d870.0","@material/typography":"5.0.0-canary.a9511d870.0","@material/touch-target":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.a9511d870.0_1579115439716_0.8297920151967131","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/fab","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77274aea531074184dae71f2d7b3d7c590f26993","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.7c8583c4c.0.tgz","fileCount":14,"integrity":"sha512-IufhUpT5WUL+vUMlKiOuFbmvZYQInNkhGkqllWZOe0ECnXNyk83IEuf2XU5xUrw+j6SDMFExUtlUB0Etz4uiPA==","signatures":[{"sig":"MEUCIHedZyFgL6xEyKY31carq7pIWTLlJpGo62MVc8baRXGlAiEAtwUMYJeZkZGE9g7Rse948cDV0OVACy2nBzIBmzjtCTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5azCRA9TVsSAnZWagAAp5QP/0mxif6FWYgUGSjdPJBG\naWhYt8r9UpFMp5ogYKdx4oluII0DSNPqWB7Kt6ZQw2r9opql07tTO0b++u57\nncIfnuw5XzRd2hEvlv4ILmYNg3UgcuEdBOMhiD4wxugoNTXbGOKoJ7TsLWF8\npoGH/lhC4fOmt11TsZTwysJymC7IjpTUemyxlr3Nfbh1HhcvLJdcew9Yrml7\n/GC5cF0asAVlpqCtEzb6LkIBQyk70QKFHMbG81Vclu687SavKaCxSY5D1enD\nAZoc/nuVJ2rKp8Ys9nBpu3UDLynOaptGPR0TJFweAYNLuXwwzKz9yWp/iv7a\nsLKRSh2aS2ltzNfwYzNPxk/9djp8xCkkRwFUVTMa5ohl/ymjheMnBbYGVj+R\nq7sDeNe2Ncp6Em622gvp3emG8076hxgnJguloXjXHH00KMCc9CGiNGInj/yI\nZQToLBg3/i1gUhUGqw4SuFnwmTxx4v6o5Mb+/XGw5S4hzau3uwk+jl0l0VVZ\nORCHpffz1vNCvK0NYg3VyrJDcM1oKYx9yekRAoxXdxPGg+jW3lobsG7fAhJT\n+7WKL6PwfC7glA8xUzSvKj7yoG/+Q3Tox7dQMnJKjNGlyb+VU6ygLqntC57D\nVTGDOqRJviSuIC10un6R4Qou8nTs24kOmevpcrJc6UVmwivc86eg5kpEEqL7\nfxg8\r\n=s15E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.7c8583c4c.0","@material/shape":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/ripple":"5.0.0-canary.7c8583c4c.0","@material/animation":"5.0.0-canary.7c8583c4c.0","@material/elevation":"5.0.0-canary.7c8583c4c.0","@material/typography":"5.0.0-canary.7c8583c4c.0","@material/touch-target":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.7c8583c4c.0_1579128498673_0.9262182046920686","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/fab","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7556557c0dd58861178c29b3686a68b5e8d280cd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.5d4b82bac.0.tgz","fileCount":14,"integrity":"sha512-puH7KNepbNHygokKEcoDTMaGmLn+7cRnQw6QFGdOg7PY0/qG3puvyjYJkBymuKhjg6I7bEX/+RslGoL9HDTO4w==","signatures":[{"sig":"MEUCIQCoy8XsKCi0YDpomAuPb3xcC8jUjN5KpjlL54zdoeKK4wIgLQTKYYBKTNIX7HbfhIhvuo7jSjXaa6/84c/8brmpPrQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bFCRA9TVsSAnZWagAACPcP+wV80/Un4WXO+bZWO1pg\n7OYQkdDRDj9G7/3MgFG7fXVyZQbuNOPZY+SxPQZKgIY73ERxiwv0W/oqC8Zc\nRPEXdafnWdTKte4DrbpqrqrAAjeYrLMC7ZRVc3HvZ19OQ9qdM1dXCfgdI2aw\n+UcyFiOGeT/UPg6WWUVvtqLhX+zgapXz6SzoGirk326OTJuX8AvQlkTRONwT\nTzUcNIBvFJMpg0bYNJ+zUXV3hOrCDsUhNshrJ7G4tFm+pbJPgoscYf/bDxl5\nVfhEbtywreABxO6F8bIKRWgxJKHwY6faKSDUqLypFfaEfDv1xdzMzaSuPUPG\nCFEKxbE3RmRZNt6DTbXtMUjsNmymziMX3Yoikq9vEfmqJRlIDf6ZuUiEO7gJ\nz0cpt6OnpJuH7WRJ5tyF1aTL4NcuKBaLurmuBeNNb85F/MVrP7Q9Twno2bkQ\nt94bz3Zwndzb9oNT5pGC/BEbxoX8s6XoeaOCI+5xB7OSGW8D36hhChuJKMgb\nwOzvnib0LBOMWxR8cOXzKrfYt17vQdQ2/4h+p1ykd19+BHWcDImTsAdJ/DWZ\n2vFv2V/wkcrnULllPRVSGgHTwQGVaYuU7j3DVdw0p+0/Xu1zMzlOIdyx2EaT\n9pnnJB8MGYhYdXcLg3QnjeBIf3DY4Autw7ngppoh3jBVbIC5wB/foddyB3q4\nvET8\r\n=W7ra\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.5d4b82bac.0","@material/shape":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/ripple":"5.0.0-canary.5d4b82bac.0","@material/animation":"5.0.0-canary.5d4b82bac.0","@material/elevation":"5.0.0-canary.5d4b82bac.0","@material/typography":"5.0.0-canary.5d4b82bac.0","@material/touch-target":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.5d4b82bac.0_1579128516661_0.2796657263133453","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/fab","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"979a984d078bc3b9944484b6282fd47986d1f237","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.57d0186e4.0.tgz","fileCount":14,"integrity":"sha512-PqUEtO/bbIOybb1B6kNTIylsY1xtheiWAPTeFgCSMU4RqdbwRDWxZUP0AZhmEq1YqgaT5NfQOxGHRpPWLfJgGw==","signatures":[{"sig":"MEYCIQDH4O+HRzhM9SxXw3sPZjR3bgzQm6rvpus2/LcnWsOuzwIhALCbidf1EaGSR02DcasHvLABw33kKKbdTJ3pxoEMJ0/T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjKCRA9TVsSAnZWagAATkcP/iNxRme/DgzBw6PXNRBp\nbauhwUZ6QVaWHOWj/27Zw02WltS4aJiGa7rMgjPTw+IEPIXdClHHIbmiyexE\nnSc32Z+3/gPOHyDU74ZI3zOQqHdMnAUqdj0FY0bnHVXMOlKVBNT46XSCxYgB\nVO2ykPm0tMwHqz6ozflFmxAvQxy9pTEHIv4YoqGsLDzzPTsCEtYnQTUvNSyD\nNPm0wMeOYgl47ion73c6SOwi0+2wOBq4bMh73VKa6ovQi7YDUlLL44PNFPE2\nG52Iq3ff70Dqhuz5kHisJ171EcKtsgJ3vnRIZUBdTS+ZyONZdocAwNEpPOoB\nsXC25vuJgd8f5ID2pk2VFy5QfnGxAPSoCrrDKYcNVvoeo+SdKjdsfA6+Oc+X\nZZ8nw+xVhW2GQqQxbRhFfYEaOvE/M57P7CN1EJwIaXseNqQTZSRMzOPxzimx\ng79qCAFlEvHdKLlsmoaYbD1wsp7edtYrYVN6P2LM1BkIbFzKUWCYM/ks+Nvo\n0gN4cOLGi5iWGTmK3in1qXTXcYm+XcYyGoY2mNONrAs8gmW9WKFxzNDFGM3D\nWwFvlspu/N8mxPEpx5vfm0FkxPrAXckhIXhDF+vgbk1QMakQauZHMEpHJXmt\npT7EE9a6eEbVOBGcWA5Zmvr1A9FTO44MMeiWKaOd8H4Eh/4KNOxKJIr0csRz\nooTo\r\n=xs3V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.57d0186e4.0","@material/shape":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/ripple":"5.0.0-canary.57d0186e4.0","@material/animation":"5.0.0-canary.57d0186e4.0","@material/elevation":"5.0.0-canary.57d0186e4.0","@material/typography":"5.0.0-canary.57d0186e4.0","@material/touch-target":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.57d0186e4.0_1579198665799_0.5937866414669921","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/fab","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7738828193033f321bd250ab611a4922ce8180f3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.071a6ab70.0.tgz","fileCount":14,"integrity":"sha512-IDUDYikO3aT5bLUQ5LRiu+StE0t1hv8Z4o8Jb8k/WPNK4bb7rNHSeUahg+4Mqpa6iCtZxeWtpk/CcNH4kFLGbw==","signatures":[{"sig":"MEUCIF2Y1GEL0B8o3LEohpF7jyjNWomUmQoaynPTRUJqpaNNAiEAlfciO7m+hszZPLiiKF0NTglgh/asZ2GNaLsG1IOU0Ys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKpJCRA9TVsSAnZWagAA1ngP/R9jQbcZN0GJw9Q7NZjj\nUl8EnTRfTMZL74g9uHzDyOpKR93SwlYobh33n8OVz7Lm4B+ExeSHaN9EqUCA\nLEcOXvo9a9hbKgK9oNghvM/dfUXbb6q4BD+tBgYK0ebnAUissupDDfZcPnZ0\n3A1bmCokjqSbKXwP/lDq75Al/At936d7vEydwhzKAyosURRLE7vSl/lSjB1O\n0ot9A253CmiHETCnTKNiKLDt8IVmbocXD5gHulGQ+UbMidVp+p6qnPHQDC7g\ny80mnXq/HQxKZ9JnpgiSUdfqV2ycdYKRAI6RKC/pLQJh61eBvz1jiQo3KOxn\noxTG9LwtXv2dIHc7T7yyzZ3hGxgylF9m54WvNSbIyFGdr4BU5uUYABDQVgCF\nH5R52A27dwa4A04LU+17Sh5gOv6u90GlxQ+rSZ9HhDn74JkGOpGbi3um0VsS\nPh380tuoLbxlfIX4sl0N1Eosn9Uzl+PSTUB2OHvmpCbUTv5UCQMy3SqPWZ6w\nkxer2Cq5xFSUAo/bRt32AGeby5yqdjVzh30VRSC4SVYOZxG8Rq/OaQE7n5Q4\n58gKZ4dBfnZlAancV6454lmsyzg3BORa8/BtK61cx1x/pT65HzHnjk5+jaEp\n50JlLCk4fKc+WwDr1wyMg9zzL9GSq9/4k2nuNjHQes3Dhb5UdvSV3SpnrcEl\n4MFA\r\n=z/2f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.071a6ab70.0","@material/shape":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/ripple":"5.0.0-canary.071a6ab70.0","@material/animation":"5.0.0-canary.071a6ab70.0","@material/elevation":"5.0.0-canary.071a6ab70.0","@material/typography":"5.0.0-canary.071a6ab70.0","@material/touch-target":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.071a6ab70.0_1579199049204_0.38744233588105303","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/fab","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"596c7d81e0393bb74f4552d27b4bdbda3932d3db","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.22e0cb618.0.tgz","fileCount":14,"integrity":"sha512-6Bv6QOC6zoGwr8eyx6ti0ZiDgIa9BFlsM6PxAm31B2ynUB54lvGGUh2f1hH66IMi1CDPURLseQJZtTCINJn4YA==","signatures":[{"sig":"MEQCIC4tQHspKLtEuGkJfnlG6XHF9Fbk7hQm3ZEuLeVStAF4AiAgacprn2ukwYAw8LRsGFD8Oh/ocM+nOyP/pDcPEOOdug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+zCRA9TVsSAnZWagAAQAAP/jIX9orgGNrKguBGgvUj\nkvgiQbR6Cw5DofMjgiK9238YIslHvbtmN9sZWHoc4X4teSXdf5OYS5ZrODTY\nr6KePZ+1kyPSNVUaKPEY68gSChD05ZhzDGdgULd/gXn2hJTOaZjftAH7urYL\nnupVqV027VnsnZKmohJLV5j2+VqGHLsg0qpgFOoBSRrHT363lWTLfceVAZDM\nlbedRXDupwBJgu4EWlaShbHukjt2ltQyv28fFVqzNud8MV2sJy3J1fXq91qi\nMqRU1U0wec1dDWA39gqvL3jWjSKoBEZWPa3EGJPwcuiVMhHg3tD2duZW8p9q\nhYVFUT8FQvpJNo3Z9Ee8NquN5I0xOrRpKDnLbyPu8E/YPA+C/U6CwyR6dG+9\nvqdc/2VJN2NX2cSaK6FdtCWSaw5ZDbDoFnFGH2Z9G1q0kwse8JFiO2oS9Phc\nmTuyGHUZDzCCSMnv/tgWQOPE177zjqrJueDXfMos4lSnYj10CfKY05Bl2zQe\nygvT0GuccWutOxTSrtROy7/6kqmrD3YgiMRjGQ5nUqhhB1cQc10E3QV7jPhC\n2aStN0q2vpwCCO2ldOfVue0akyYLq8ZjIA+1vDp792q3dTkzeMkbxypbGpZI\nS7zQQs9/EnsFLNlmmDvDPG6KMFyqYrB0f9rcoyLJpeVCkBMk+pV0tVJBxAQ4\nRiIP\r\n=w5YP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.22e0cb618.0","@material/shape":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/ripple":"5.0.0-canary.22e0cb618.0","@material/animation":"5.0.0-canary.22e0cb618.0","@material/elevation":"5.0.0-canary.22e0cb618.0","@material/typography":"5.0.0-canary.22e0cb618.0","@material/touch-target":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.22e0cb618.0_1579200434602_0.5873091058847146","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/fab","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"238b657a2d5768fb80336f5a62156bf078cf854a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.f16f15b8f.0.tgz","fileCount":14,"integrity":"sha512-6vaFWy3B8E+E7L7GzawE2JpbFcGTivlfzE5U7I8ZaXpr/kSBBnkpThVUWw0nX8Nf+Q3YctzIqsb7whSMSiSUew==","signatures":[{"sig":"MEYCIQDeQN1BoHbdARGboTUt+JdfoBymwBJ1HXUZUTIoMQYr7AIhAM4xmFE4o1igrjDnCFdlZAvzbey+2xPLAt7OmW3b4RqS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPq1CRA9TVsSAnZWagAASGIQAKDgSroAy97UChrBs5T/\nVR3mSvH529R0uWbLdZDX781QvD6zLtmkgugt5GQcNw8JNcGEo5NfPri9mk2W\neUL6TTbz/brQFRJQ2zn4MkSAQJr1bGFN0S5MkxSLlW0DB4pGoS8e8l2BN0EP\nt8q43SjR5MSGomLCnTLjJwyENZnGop81R9HVAHCdFBsoJUyEgbSAMDFSivzw\nHTZCD0H5fW7aCara7H7KPZjcnIYQbH7nrHWYDwgKShpNclfURUVExGvtM0GY\nappECEQUCe8lDm9MkvIeejoi0pfSoZTv26e93D4SxQuhMvLUxWdKuMuV81cN\ncdwxIUVagWuDb5jQTkjzYKsPVHyyBsYivnHzTuHawK/nEo/pJgFghwFZWgUh\nl8iIRc6QgGrKkgYIQ+TGITEQFUWJxin5T6AUzfhvIe5by6vZqNJ752ZnwVHQ\ny0olyXgZeOvRuNT3igN/9UMLvDJrDAb4YXCuXAD9INKh91TG9YzTH250TXNZ\nddKt9HILpxViSoaxxYy4xqE5Ad7tq0KlPJ6JGlJpinXAWBiVpYh4rSHpUPyV\ns5hys+6nqUcm98dD5YrBpIPlvNBjMKW6GQH1qL6NSTjbtWRGxdce01sqcCaP\nQU/y5rrOXP5TKRFVgso8VXe7e/jLzldihpG8FuPhpZGNstyVbbzQxwJa5wqC\nqzXO\r\n=cMqq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.f16f15b8f.0","@material/shape":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/ripple":"5.0.0-canary.f16f15b8f.0","@material/animation":"5.0.0-canary.f16f15b8f.0","@material/elevation":"5.0.0-canary.f16f15b8f.0","@material/typography":"5.0.0-canary.f16f15b8f.0","@material/touch-target":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.f16f15b8f.0_1579219636774_0.04285315298076631","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/fab","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52379d9e231bf741dba5add342c9cbb1e36dd214","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":14,"integrity":"sha512-s61vZRz0YJXYd4pYRZ7oQypp7firNP+QXhlXsFzhKdBCN9a/OvQYYbnM2m4mjeptUu7igGnKA/aAyGTDISeE/g==","signatures":[{"sig":"MEUCIQDCINbZ7/8J6p37FpHF7z8HOEoWMKFRkucTOT+VoL+iFAIgOQGz9n5fOjjhsyFRbphnVrZek/MJpC/QEskXLlgu/3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQGrCRA9TVsSAnZWagAABQYP/2xR1PmigA+va71eLvhQ\nE3xBI0+7+TAoGeOLlMNE3xTRVDVLJ+0oUJ9L40QN6Pc9sxo6asuolijlR9fz\nCPFs2e8Z97DGQZb7iwX704bB/bH5+5pG1cnruIZc1so1b7QtsBbUQ+EK4gLu\nMe59/kjbA/H3Daz+NVtuRUohlzHxSbXAzvzmsG7fp/I9W2ng6CZvvnJ0LCLw\nrf6UeUUywVsxbh2aAZa99+ABhnJoAbzjxoevirkdy+M4Knn53fg3rUE92p/I\nMw9RsRWZzhGy9yK2P+CWjL/hOt/IDqzB6IeQukC+aDDzu25l+FkYsbokBMq8\nYI6/6spvkjr1DiM5xgvDYpkwOsL13oQWrsOLVrSuBYlySlbkk52kh9AcdTBw\nTauBzQVOUZB0j3IrNPsYhHPp6hxYc3MsNcdQFCNAFung6T8naO+93uWp5tRJ\n6PyzSsw68IdH+dbAf/X4KEtEzQ8FreeVtjNkP9wnINXfy0hWkuAP96rv4StQ\nzvqcxFIM+SE8HE3mxfl/6y6Zef/3xnHB7DbJLq45PJfr5LKAZlCi3a/Soeqe\n2mBGyq0f9vXYSNw1l32f5/34P8Lpcg6IuEg9oCuMFDBrTmUK1l3GiyiL5SX8\nEOcGJCio510L1wG1nthT9C/aJYPkiP5XUwjU//ha+BXbEwtpJtQxi3hg69Wy\nrjJy\r\n=h2cB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.aa8e43e9a.0","@material/shape":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/ripple":"5.0.0-canary.aa8e43e9a.0","@material/animation":"5.0.0-canary.aa8e43e9a.0","@material/elevation":"5.0.0-canary.aa8e43e9a.0","@material/typography":"5.0.0-canary.aa8e43e9a.0","@material/touch-target":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.aa8e43e9a.0_1579221419655_0.6176212120142557","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/fab","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9d85e52448f83848711f665a9309d83683b95cf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":14,"integrity":"sha512-IvohJhcYV2x1J9J3w6z4oqRlKtkJ1zB3fJP866W3W1m0xKvRVDuWXcOLR0glYiyTuDN8WiO7RrmddUq5iBo9Sw==","signatures":[{"sig":"MEUCIQCATy5g/onEk0ils/hV7uDg02v3orJGinqjcaHLR3h8wwIgb/6AMgTpdbgHwD+iCn1iYunva136Pdb2YNGLTjpB2uE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQczCRA9TVsSAnZWagAA0YEP/Rq1oXBgVYuwxsQ6ShBC\noaZNAvSU8N7vGly8Vmh+Kq/fj89g4tE63ndG7F8+sk0uBf/H0LE4E52OpClN\n/CE38lajoY4ukH+u0Pc9qrkZeBRwMlmOuWjMqk2wz9+/WjaPyn+mRQoOpxXl\ngJh7XpL211MiepW9OQsIDPSR3dbJpf+B3vvamxcpdILZ5z0snL60j5DF9sFu\n92+xl0fOmC9SCvB1kqi2ufQI8dzHV5k/CFFBdFKoK4nuHTi/1bsODxA0i82y\ntfDf2biKDMhF8zAUVq/SKtKPb7BnNjRVLNcJ0rN4h53xU9wiELBjC2TKy5iy\nu5fgh877BmKDPdI2mlf17RtbCwJ9r9o1g3UhqkS8+RDf2YaMDw0lO0+QNj+0\nD+gBpd2EpwhDv9cDAhpJtgtCO+94t8aH4mXjU6YGIvoZyHLVWpIakreVzKQI\n8ETyw21o+BbTMRPCjQ0GfsaDsU1ni9YH/Z3753nMPDNnHZVMj1G4nGmij1jB\nySI6gMWa30FfHzWqC4AaO6xzUg5MSfs1jt1YHrmDD+4FvqNrL/DX/D12oOVE\nYEkM00Onv268oSVjNVIkOv85/gWW/DUXvznoLjNUDQ3WXLI7NRuhEVD5D0xV\nUNUPljygTytOaUNEODlE1EEAUMVcKxuFgvLtgVnzS7omcBP1IkfGmqKPajYw\n+uqB\r\n=z2xy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.fe1f3ca07.0","@material/shape":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/ripple":"5.0.0-canary.fe1f3ca07.0","@material/animation":"5.0.0-canary.fe1f3ca07.0","@material/elevation":"5.0.0-canary.fe1f3ca07.0","@material/typography":"5.0.0-canary.fe1f3ca07.0","@material/touch-target":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.fe1f3ca07.0_1579222835404_0.614933430181279","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/fab","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.d405af26b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2addbc7c19333003a19ab3fdaa2abdb8a40588f3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.d405af26b.0.tgz","fileCount":14,"integrity":"sha512-IXVGd0xRNh2+yTIdFtCBSA7XZP10cPcZozWs6AO0L8Kn/trb3QNuySJOLLhLrGBG7z++4NG0qA23bZ61T76l1Q==","signatures":[{"sig":"MEYCIQDONcIxSGGKO7BHbRtt6qVes4wJO/owMq6+jQfK/R6P4wIhANvlGtov8JyigqWNIFOA/xwG6xdrAx/KI8G3RBCrNZo7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfo7CRA9TVsSAnZWagAAbr8QAIbKipOb0vBddWwMjx+l\nZn7d1hNJEP0LPqddWdAiShRvtniDbUnaRoH8pTXfqPJOUaQ++PTh6vGnMIOd\nb6JlTzevTHeL4cSQ4o7vt9DUOnb5GCEzh7XMwbv/NM0HFHLL+xNpdEkeCxIv\n19YNCf0K8Sdy/vALrj0aU1nHSTYpVziOj/l96p3GV+ny6NQRcHJpMA+5DlCt\nHR5LgdyMowR76Tf9LWJSDa7QA+G+8Xqsen9vkWhhyzfztGICqNN4ddDuovYd\niFLkDLxNspvMIqFIgSfbwk/Efgu8Izw8pki0E7IWd8GoR/fEJPmiXc6Dtpeq\n2ennQg4HcVp7Pjan3wZnKuxs5N2OrrbQ8PpzMP8ba/5jWZq2q+R9M8+wfmyh\ntdgWjEy4x4Ueto6/efawTp87UtBUJFP6v8bNL1yJS2qf/UPggFG6AYflqGDd\naDgWHgk4StAL35xNwnQem5Tb39IYiwfetZWo8vG/+V6MiUjiACx7mkSViGdw\n3Bz+ch6rbiUtEAoE5Q50u19x159DBBMbPv3wEBfkiM2c+1kQ5Lmiy/n69/9n\njxqtrHcMsqUpaQJ6eS/wcfcG+CtQFzI1sqa/pQjoXsEV0DHtoVJ7z0ooT9bH\nh1MMuLEvvmtY3zCwPyOdhDNPvj6kU3lNkvuf8QiJF9geSq9i7T2EIr1buM7s\nfGAl\r\n=lhux\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.d405af26b.0","@material/shape":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/ripple":"5.0.0-canary.d405af26b.0","@material/animation":"5.0.0-canary.d405af26b.0","@material/elevation":"5.0.0-canary.d405af26b.0","@material/typography":"5.0.0-canary.d405af26b.0","@material/touch-target":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.d405af26b.0_1579285051372_0.1186715831387617","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/fab","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae5cedebeed1fd89e8a7b99b944b04a71f1497a8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.6e857aae2.0.tgz","fileCount":14,"integrity":"sha512-gEKLBkWdpYV3m71xo0MKgZOkbnEJUfQ6gK0fpaaxNl2l/+ZX5TNbe4IgpSbbGGDf4W0M5Hg+16HGjvWxQUaFqQ==","signatures":[{"sig":"MEUCIQCl1UlmEles78Fa01+Jsq6pfduujGNQysZGwOeZaBO8QQIgGt66ya/ZbPrAKsyYYGhr7omgaIfzKopwYDMRkTK30zI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfsOCRA9TVsSAnZWagAAdvAQAJqKwSgotaBSTNIWf8j6\nBexbgNY3DkYHVhLFrERhak7mJXr6WfKOwXl7cj0r7HjTmXg/DsUDxDZ1J4EP\nSVsGgJ83MNPqbNjj+lO8yysFIZUdCCupNP3/Q9ZD097UsAHdL2PYB43Bp6KF\nhOWerJ6jLOX5Ke+ytpqSkaEHaMpqzNoFNucdrys9p2hCfU2X2/Ba6s6gnoxV\n7B81eiMsn/Yk4/77VKKNyAKoth4DEhQM02KvK+ZGmGuwWeZ5enflD+1QYLYP\nNW81YNZmLyqjGbsDOwiz2FmVl6s6Gm/9rUd2T7F3xxs0YNP1hjtwNbnbpDmX\nEC/iwaV7TSKkjNrMIQ/xsXGoFqHxOUgLsyTT7X/eZoxIldYlkyUstKbem/YK\nQoKamJ4lGbAIL/Kw9kTSIox+u7Bfub5ztZj2fLsXy6Hr8StEC6jjakkxdLy4\nDPbq2MwjsZdabD4+1FKOhR+GPv2x3qGKTn9eZkndAGJXyO4hbhGKnthNs44F\nm8FHgeOBiYmIed17Jaq9fgTxejSaPoGiSwFWglRg56oYGY7SC6LaTNxjVDeQ\nUtZG4DocUWOvx2q+Lj1IEaJf7jssZ1G6DF2fTqk3w3mN4fs3x9JRSgzWdGad\nZhO7YAJSb5MjkQaq9rnnntWQ/eoap6X+d0G2/v7Y4J8+zSAjaULAmbTgHg5r\nQf6w\r\n=jJ1B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.6e857aae2.0","@material/shape":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/ripple":"5.0.0-canary.6e857aae2.0","@material/animation":"5.0.0-canary.6e857aae2.0","@material/elevation":"5.0.0-canary.6e857aae2.0","@material/typography":"5.0.0-canary.6e857aae2.0","@material/touch-target":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.6e857aae2.0_1579285261491_0.8931580057457211","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/fab","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d25d10542f58c4ced4b779962eb4c6ccd70df966","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.e2e764f7c.0.tgz","fileCount":14,"integrity":"sha512-XXdiMHxx7DkLriqvUyw2xLzSpEHA6rr6etcrVgeW/a98rb7gRvtNLN8OsCnV+c6RlxrmPm9f5pQmNZKVd/UW5g==","signatures":[{"sig":"MEYCIQDDKDPXrDtys50xH3Lyns6sGBDrqzaE8Q9msnMa1F5jUwIhAMdLyKiyrkP+LtBxtCQpClO8dSTFPpOakUaE9bK2sHLM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf6dCRA9TVsSAnZWagAAMPgP/3fGA/u0kbLgtXQd7ReN\nYA4/WyVtgqgBGDnn540WLCdPZwe5BMJI5WG4BcSh1Dp6LwaKAxzclpbbFqvt\n2Qh0YvEFI7fkISRbabYSrs2dn5qz67q9yjfYO0aIi6Rp3fe01LKzX4fP1AKx\nYcOs472KKXUEDAGwAK5Whj2PhZ3Gt3kOlWqtEtVXG8hLl0qt3x8BPKHMRrVu\n/HUGUo7q0qzswbpV9Pd0Tq0rajpOo70DTZhsQKCPCtoYwXgr4KfH5yL52z2M\nkxTzlYnh2A2rRdG4bpP2q5X7ozhPwx8TBOH+0xo9ePV7gVnUVDWuN045KQ5y\nkf/lv6reuQpGYW85VfwbVj8fxWyB/BR0xJ5FI0XeVpS0xuZD7nT5PcISTf0X\nI6Kye9kDiF8F9XQRCi3Vc0I6sZHC8fa/ilydpmCt+bxkbzygmYoUn+FrEZk0\nDgdigur9drSiOGvJ7zcvLF4QfGHEX4JpDWbq8S2ub8WmpBVgCEwynmntmSS5\nwfRXalF2MzrHdJtEAGjVi2NhXLX4zTgbgYcO5zo5kBb7WTVULBkEIBrW0TQe\nk/ZXTWGgw83CHNeJ8XgvPZ25aY3A2c6lowITUxwr1EiDPPsaZvRorH67lem0\nFHXinVojz5KLyp8/jnXLLLjtaBdK100lDUe0EpGRjbqJai4+CJNAsfJlX3iJ\ncay0\r\n=qY8I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.e2e764f7c.0","@material/shape":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/ripple":"5.0.0-canary.e2e764f7c.0","@material/animation":"5.0.0-canary.e2e764f7c.0","@material/elevation":"5.0.0-canary.e2e764f7c.0","@material/typography":"5.0.0-canary.e2e764f7c.0","@material/touch-target":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.e2e764f7c.0_1579286173065_0.18466581882737576","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/fab","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e046cce83687bb46cb0e89e20e99be306f3a082","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.7ef986a87.0.tgz","fileCount":14,"integrity":"sha512-Lw6Zut3b58d/CSqikg0LlV5RyoFK70dMGb7Ie5WhpKEOjEM1+1F1+YKepIXJMgwQLZIzf/xiiZVqsp+whkcyQg==","signatures":[{"sig":"MEUCIQCYWfTmvC6ZUemF+gP/rypQXw/Ud6owrCOQnCsbxTC/GQIgQ1blznzu0qm+DTmHxI/tT53+dkKQr2x4A7qgeNlr6Fo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgt4CRA9TVsSAnZWagAAk7wP/jWMzwAwOpXoNXI1r9gb\nqUnguVZyftcbGRDRSjzc50tHb/BzCPiqoAZu9MMXLSLN4BGJac8oQUnk4CUQ\nE0A66rz9kbF4Bjj7M0Lq6W7UUkYmz+lSaVniXo3F+HSS3Htg08J9b7vWxiGH\n37fHijk66PEO9RQ4zeBI0b1uPXtAP7fFQXmD7Z7gVTAsK9ZhuFp+KXGjhUay\nBTztr1Jw1eIC/uYAmBDe8+LI5ylheDNjh6RfB4SLYziy7QZKfI9UIgBJDliu\nDo4DVM5KnvnwulWoMmrJbl0PggX3HHta8BlCi4l/oWPScX8GquTerfl/TJii\n1AodgqJwRes5dN7maiohte95/DmJcJprBadwN8aStVwEy6frNHsPl5Za73r7\nPqVLQQVPf3eGhxcbkJcEcUXwrYmBWo+4+Dke0OuXVt7Idg7BMM8RlVhb++xn\nh7CMNG+q/MbS91p3poac77nmCrzh/Htx1xAUYRiWP//nCDSsbIqPPwcy8Lsg\nssu8u+xbD0mj5QqatR+43/FivII/SvnTmVuFCCAE5N56WY+6tTKvmhtXpvEh\ncGIRn8eOBExFQE7lN9AZnucITUvaqrVVAOrZsPQhCwetaAyKYzwAV6vQVyFq\n+5lfd655SQyord2vgu3SbWNdfMtHlo8iH6F3Pl4NEt1tdLh2G2sV131Y3Mvo\nCr/O\r\n=G+BP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.7ef986a87.0","@material/shape":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/ripple":"5.0.0-canary.7ef986a87.0","@material/animation":"5.0.0-canary.7ef986a87.0","@material/elevation":"5.0.0-canary.7ef986a87.0","@material/typography":"5.0.0-canary.7ef986a87.0","@material/touch-target":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.7ef986a87.0_1579289464025_0.5318244283893534","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/fab","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd2ad222e8931f57a213ce29c36ad03e06315852","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.29402e2d4.0.tgz","fileCount":14,"integrity":"sha512-EbPdYr0vpMPOqDrWxepCkzbVPTBFu8jqjamHMxNrErWnSCdKGv7xDxJV4nfQhiia6uP8cgTD4D0VBrKpEfzbJQ==","signatures":[{"sig":"MEYCIQDBXTQoDJ/o5QOxtMYPzpp8eWZD0Z89VdGAboMueMCzCgIhAOlW3w8ImwlXUadtoTfJfwKlnYyQ7UMhqjKecZi5GXE2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhujCRA9TVsSAnZWagAAG5kP/0OBea6UQD9S8JDU1N2K\nHFEhbM8wbsLkl9wz3wrgsxw8FLCsCwuh8M2jyiy8Mzf4jbIAsEJe+QptfE4D\nkbTHT246ZC94xFFXmzhkDlFuzXKCfqi7qr6LSXPhN+hdzs3NZL8MG1V6ZBEd\ngxZ9UxoMPlL0ZJr/9A3ygYyBcM759m4AKfjXlwM7yN1wO5GF/zWmgjqeAM4n\n2x11yQpbGEYnOr1U4XYfEFm7jxf3Pa5gYD9bPtOwqmkN6OIINJFPZmb9BGpN\n722gEZ0ZY1UyNrmVqrJFWAj4MPYSu5TdP0QJIPRm2ZC/N9mbtqaY7HFYJ84m\nH0ayJ0z2Bg28bsZUN5P39H4az+TC7w9FjoGRb6Y5EllDd6nvSR2vH2z8UBKY\n5ZBmZwSJb5ZWyGgGe2f1CqSZrZdhqa8pzT3LjJGkzJt+gzqOpesLSWc7SjCr\n8nDRznX02DuQxj4tYYO/+zZTwbJqk5OA6IadltU9sUxss5md4mQTXCBjUghh\nmPZ/qL5cL96WJisYYwfbQfLsAsoMfjffgZzigR0devGXgOroRYJX4uuP5GF6\nWB5k3/fgWSIM/u8FBuOqBM9neR2nfoxtD7ojagRVEZ1F1L7DuTK8tQxixnqD\nFVdER3sYPSaa+MFVo8wIwIKqa1UzDL7I3ZkvKwiBxgRSZ0wGt6H2Y0Ob9yqO\nh8v9\r\n=oN4K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.29402e2d4.0","@material/shape":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/ripple":"5.0.0-canary.29402e2d4.0","@material/animation":"5.0.0-canary.29402e2d4.0","@material/elevation":"5.0.0-canary.29402e2d4.0","@material/typography":"5.0.0-canary.29402e2d4.0","@material/touch-target":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.29402e2d4.0_1579293602637_0.731016343811512","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/fab","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88f26913493b44708d91903eeacc7bab0f6cae42","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.2b3ec563c.0.tgz","fileCount":14,"integrity":"sha512-fTlLOqdJI6zoulWlgPZpjODF7e9xu3lE/kGKZCPKRsEs8eNXaH9VGUMyai0xN5drNmoSSpTkGFeLDZ1B5pB9Iw==","signatures":[{"sig":"MEYCIQDuqYm0A9T+kUx4A6czfLehdqUKUI8T1XGuKTRHitG/KQIhAKKOzFsUvT9wvQCzLZW9tZnc6y93pvc3g2cXhs0tKf3n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj81CRA9TVsSAnZWagAA+8MP+gKawY8zDt5zppUVrG6y\nkUOpFS6UofH4SSYTFkJhCSZcUMJfnGtTXWQPUDM1xqj2CH7b87xdaHVIxQQR\nRL+M4ystqYqer+kgtOSJDfzYWz2/UVVArKU2O7SmLTWK4cQQ/kkGK9Qk8aBU\nALwzmrBAVYm1aefpS2Rv/OMWoVo1pabGLdI6bXtyLBKqtuJPpCjHV51397QV\nx6/n5d00PwIceBhUcnPXcnEggQSfyAqJjDmECSzfVBOqBJ1yhfusYVxN46hr\nMZePjWH7hbqjHwcMSrPNGXKBe1tXKj3qbhrdGBwlo0Tx0nmJ5mtxPTz6ZZRv\nAXzcdDAbiPk4RxcLIoDyHNTG8oLg80UER4/idFdputS+xVIl6/VWE0n3uT7i\n78jZ6F+4sUBQBKJam1PdBL/T1JI1K7kz6w5dlxoeFdNeaVT1/Qs7LtzZo4oX\nUAKqxumNOXt6J/Spw1KKAujbZH+Yca+SRqfeVTshmYS0xB3MZO9zypX+7WBP\nZ0rqOH+AbwUA98GzodxDkmjTL49cJRstOEakgH7CDZJNmOoSB418w9tIGM+Z\nAn4xAv/sonVMvfWVPr057pHRxbIofU2yr1x6nA7j2dcSeIk1NiuiNzJOQLmu\nYHknUqjvVdR1VVAUzt322e53Te8RH4fiizzRbPnIwwKegxUwjHog1PiR+hHp\nY1l/\r\n=5dy/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.2b3ec563c.0","@material/shape":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/ripple":"5.0.0-canary.2b3ec563c.0","@material/animation":"5.0.0-canary.2b3ec563c.0","@material/elevation":"5.0.0-canary.2b3ec563c.0","@material/typography":"5.0.0-canary.2b3ec563c.0","@material/touch-target":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.2b3ec563c.0_1579302709527_0.3545503631511857","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/fab","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.e8a993677.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d13a6cc64a79ab7bc21bcb232880e0b3d97b5082","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.e8a993677.0.tgz","fileCount":14,"integrity":"sha512-MNi/EPEwtGJL71dWxD9JNjmZUBzCJUsTSNjszQ5Gapz8EAwpWCa07Gnf88nnXvY8aSPuUYe6D6zTBRgH6/ZXDw==","signatures":[{"sig":"MEUCIAWBzzVr4YD1QI8tJv09aZDsdMTRWJv1mOcUzHjAP8vbAiEA8T5NslKb47kM9hRCmazXAfXnWvfhrQjfPK/Eo7lssK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyvPCRA9TVsSAnZWagAARBQP/2NWiyFRjerffqpXMJEA\n31nH3R/h9BXy63TDGJpYFYdSjsL7qWZ9b2ksvFDWc1EpM3kw6nSl2Dq097dp\n41UggqTE11aYWl5CfaemVMGZjXOGCvzQKUdodD/DQdfYbUrXX6unDxFPrXCh\n0KCDUbf7m1N0rPYK6TQTrQCxUXGGHNofpgSOO6QL6Otd8T/TXzOnnvPxZuOn\nwcR1tPSN5eznahEhKGVKrLHEEXfGKD+wGtQ7NXlk2EcR9OfEKqQy9/N01Fyw\ntULYOXBgIRxh2ScnMdtA4HsCsjpQ4EnqyvbEJjHOezcLcJM9u6EhGizjANTE\nYvNTCqxIAIkLT0f5lRPoDVJbQUXTC4vyWHIqyWFBGnnQlSnHlc490mM+Gpwf\nkcZZyN/SDZc7zu5f8DLNcdx87B7UwmJ2dN4Lsor1FhowuN8QruBJRW3oOiG6\nVo4E/SR6gs5kteejQ4v/7/0SOUtHQgOdEg3tEnhr/fJtsH+Z2pRNTbHbCLb+\nBVD4UmNrZMEA32hTGia0JN79hmQ8Vr37jzbSuW4ObXHo/0F8mPItirH/jJd7\nTSJrj1mDsRAigqxyMwGAYMXwRbS9Kkz2vi2vDAFcK3F//7DogwHJNF1oJ2Jm\nkg/bJLuLgARfGBEu7ICH5fz84KZlj7hi2EG7RfibGC3XwI8CFCNEb3nH5HSy\nS1dg\r\n=88qy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.e8a993677.0","@material/shape":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/ripple":"5.0.0-canary.e8a993677.0","@material/animation":"5.0.0-canary.e8a993677.0","@material/elevation":"5.0.0-canary.e8a993677.0","@material/typography":"5.0.0-canary.e8a993677.0","@material/touch-target":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.e8a993677.0_1579625422973_0.38547671808925044","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/fab","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.cd4903304.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8b60201cfefde64f025e648172c0e647e8fcf6f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.cd4903304.0.tgz","fileCount":14,"integrity":"sha512-ijbINgmbbVagiv71+ngZ5ukKRWhN9gFsl7h/dkuoGdD8Ox1Py2ERVdjdowpwtH9420+bHWipgjrYhn9Az4GWEw==","signatures":[{"sig":"MEUCIQD1h3Fhm4+1McqSnZumr47M3KE3Uh3B3WN1m8nNXiKJywIgEHaOnaWmGaNYZ3wU0w0OM5x9moZsp86TEDhGJCaWV3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28hCRA9TVsSAnZWagAA+v4P/3a+i2Z/dJT/Lv0NThjQ\n9bK+8k30VHUQgeZIuMktfuw19H9DqCBeRAptBREgxAvWIDi1vhke2bsTwm37\n4YxdJCtnzqsou180DS25Er/wznNyrsxGPRs//EYBeZKxY+le1PfpioXY5THD\nG1m4oJ7bmYOdihC/I7aJaMK0i/2j/ATZOplsukuKdsQIavKKeAy8+GHIFBKM\nMb+6cWA4rswTVWAa/0X/MQQaIdbYmLTF1rC6bniP3vOh2vyqs+FtrfbET3ba\np1DqjeQ81g42qFceWumpZqaH9w066VCzhaA3e/GyH9K3vlbshDfX29zrxfre\n9lpzC+pMOL57nN8X5gu56XI7XaqRReHvw383+G1oT79CG3aao6LTKyufr6Gf\nX6rUg/oqM5160chJiIry5ZB6WMIBC6H/x6HYECeqQZqZEtJxweXI+pnEs/Bu\nDHoExVXp/Taz9a9jshrZaURyzsHZQQJ/nEUFqxRNJq/dFYiQzicLppuQKIp+\nq4l0OYxlDfUPrTsSpb6F4dzR3GWzCw9dRv6to752tKNl8Ppq4dieUZM3nEtw\nJZYQJGD3ThN1XreSGvYgUXG9z+kW7uyL0/VTWOIzIu13a890En4wEgNIeIod\nqQP6Tk9gXOiAQWBATjyUr8HX1q1COni0waBEyJSQm7nTLHBZf01q2IFY0RM/\nAv63\r\n=D3d4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.cd4903304.0","@material/shape":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/ripple":"5.0.0-canary.cd4903304.0","@material/animation":"5.0.0-canary.cd4903304.0","@material/elevation":"5.0.0-canary.cd4903304.0","@material/typography":"5.0.0-canary.cd4903304.0","@material/touch-target":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.cd4903304.0_1579642657124_0.5135487230785825","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/fab","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c2ab62351bf148f877f14e5cd85173ccd80bab6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.7e4b04b25.0.tgz","fileCount":14,"integrity":"sha512-LBthSUPZhnfa1Gpi5AYUjshMPKot1qyEkqVthZ9ptBkAaVGx0wij6CTciZqwi3WGesIHvmJs+kpuVoIL2UgUwQ==","signatures":[{"sig":"MEUCIEaJCUkrIUs/O7+Qsk/V+XsQyjuiORQysH5k5sCrpC/yAiEA0EuBnovfvA9aUy0WFoD2PYnhSJGyzSKdU+hngAvLT6Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ39MCRA9TVsSAnZWagAAZEcP/RLoHMJFb4jtg240/TKU\n6EkOT5hsQlftnkyzH+FCdX1Diea/F5i9S2PHZ6ag21X+oo8y5oHGywcmcWdu\nrtRecmCFArEEIi3bS6BIxNwdMAeypk4Ba5B/bCRo2E4MCUhcWtoy5U5uu9jP\nFoMB+2dW+WLRNYPS6I3k0e68EHpQVtvRJR6ZcdcdCJQmzXjLtkNrToid0qN1\n0RwCJ10YhV/k4c4vX3bhmAfGKpuZAmjbLVQ3UwCOMbaHcQ7WDl143v/TAHyA\nGBu39UJ+QzoEE9U1Zx57DyZDtLBpVUeEPa751rKQ6db07BgDHAsYYLQE2yiL\nCQb4VnTqnycHp+OFkYCzI/9r7l54nww0Kpnryez1MvBdd9/SMOoDyFTBz/7R\nyl76dbNU9FnZiL1zDmcVGK1Ffsu2g+jDyYPOnVULr1pqQEUngqYbtHwyqAnT\nqWDfhniqjtEEKXaMl8WTjK/nC7fwxuGAevlRxCJ8z2+ADlgKvjg+5ocmAe+6\n8+cM9uXVsneDOFE0cLnqU+07lE0SteaiNOPMhIb4z6Keh4+yibRW2b2ge2qD\nkGwFCnu+lT76qe9rvYYaiHwwNux1meRg9rG5zDKID+SwDO3WAb3YNu0KxY21\nvpKOn6sUZ0R7kODoYWciE35m0a+Xc2R1ExjMgLfeP+JGjVgvHywA+CtdpvbT\nPKHs\r\n=jez7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.7e4b04b25.0","@material/shape":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/ripple":"5.0.0-canary.7e4b04b25.0","@material/animation":"5.0.0-canary.7e4b04b25.0","@material/elevation":"5.0.0-canary.7e4b04b25.0","@material/typography":"5.0.0-canary.7e4b04b25.0","@material/touch-target":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.7e4b04b25.0_1579646795861_0.4109457052677623","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/fab","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.ebc296937.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cc0825071e914e3892a330476dd655054e25244","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.ebc296937.0.tgz","fileCount":14,"integrity":"sha512-QnsU/HiabnbLNSNjC8PJAjOR/kVUkbONVcJR1YON6bheeoCc0lMhTzRBid2T/wDb8BLPIcl0rQ+H5Al2rdySfQ==","signatures":[{"sig":"MEUCIQCOdz6DaxdCB0nvHHNuY6qLH920EhFZC79v3t5QnUIbWQIgRY6NjovWJ1h3hCgB/jeTmxgrkDrF+UoRBK6YiqjMFKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40MCRA9TVsSAnZWagAAeWQQAJN9R8dDBUzSAlmiQ86m\nM9+/s4Y+qYjnsihpj7YIERKv0Sv+N1R1/YUm7CsTF8+sL6ptHERX+niKuNR1\nl0CLebEDfD1wNW5HLOhvRMnGsNdnOuuReQdBkx6Vkmm2b7EuKp8viwRlD0WT\nzq77ngbMcsgQibq1HymnYpCqYDmhLSZjKyTyW8ApCteyHuCQUB2LxC1EHbg3\nYYcunLbN5RzN9YNHoDhoYuWCUzVP4ZWkj5A+5+EXrITVPB6NtJolmljXTrU3\nMfzulifBbPNG4DUw+6V9zClfI+6YMMCkif9YcbVYpDdTwlOtzy4TS7rljIvv\nv6F5JK4uXD65stwuhjKFfZaTLsHDK7QXRR+5NdIqCJXjgqrU58zn25wNT6qQ\na2f9ArV314p0saEV8M0CZpxubfLrScHuhwW/xORpl/Agxd9hPaSaxqEfuP0m\nfRCrpto/Wv+MrxvvQEcXsU5zfULCQT3RQ1mgKXIgCEIZ6rJKV/rM0JJ0jZzz\nfvPSL4Xk7ZUH24Ge/clzNPoWyxtNYaM0u9jOqouIr6nURGppwsvCHYmf18Ff\nivxtZiHwOcAbbju/gVWNiOqCSt4fD1G6o5ryKbgCDD2s1Cd4YUZw4kE5LOf3\nZsuFbdK4rlbDTAHHrolgUb9BIo41PKJ8VUFXwXFe9qU8Gq3iM2BvTH0KkxV4\n3JVS\r\n=Ygf5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.ebc296937.0","@material/shape":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/ripple":"5.0.0-canary.ebc296937.0","@material/animation":"5.0.0-canary.ebc296937.0","@material/elevation":"5.0.0-canary.ebc296937.0","@material/typography":"5.0.0-canary.ebc296937.0","@material/touch-target":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.ebc296937.0_1579650315956_0.497094436717477","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/fab","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e7f58baae21c04a735cd26fe73fcfd5e376977c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.cf33f113d.0.tgz","fileCount":14,"integrity":"sha512-CDQvlkl5OLvr2A+dNDO4HJKotuvF3y4Ha2wG+cZvWvb2+d8ulnf2UsZ/Rg/xvOILpJSfFx8QsyR5e18wEoVp5Q==","signatures":[{"sig":"MEQCIFR/FGLiZb1FK92UBcFUrdR4VfVp+UZrZeqCTJK9Lc38AiBE405ZgX6M4tOvWeIpfvxhwR7oJ8GcIuzw6L9SI9jUHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6P0CRA9TVsSAnZWagAA9CAQAJeefK/yOYPLyrJUbv5F\nDcc2SYPqg8pu8oreXTVxsxKOTVZDa7hu1hpz9VXO8J97TI0/qs0JVHiGDzt4\nsE9YMToaUHiXLDsTRB4c6LtbcL4BjvmEIKJuNGCQ5xtMEoOvF01vInQzqYIm\nUi6yWHv3cXrjU8/eL6PjpW3jj72Rbwc0tOlh7k81J8wf/N2djumpsItQ50Ca\n+beSIQPmExSVe5SuIeqwEhfo0n2AX5rY4/KVTNlhhD9M9WGpVN/dixMGIoSY\nNzKT5AVDQ4tf1Q/IWjZ3ffpNj9NpLKGl/q8syqLLgGOwQgTnIrwT4eVcvFNe\n6viM1Vra1vzjaxc9/xj2Q7joMsoeb1pBrs62PIigP7epENOrSHJBfcTxvZDA\nJWd12U9M5yWJ20qlkFNbe+sVG3tKBrzV4fGoKaClw36FW1H+L/wEz0CgDDWg\niA1qZkZgcsYUznuHjvQd1HWjBWuuBUNOw8FQsgyF2emcru44wz2Z6gEz//Fh\nskHyjbv6QIplbK7R5TL7YLwqJrJ2Odt0JpYNg7l5qTU4Zi68ONj5iojX/bAB\nxqZX0l9ypSqLY3ZGTalg7nzBXtvXcql9v31QzI3iiisRevpb+rWhokSQjTpw\n/tq9Vh+YF71FGYnGny+YzHG1U1UCbdbKHerL5p6dao1Au22dsPl2g9X3pXI0\nUUp3\r\n=cEmf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.cf33f113d.0","@material/shape":"5.0.0-canary.cf33f113d.0","@material/theme":"5.0.0-canary.cf33f113d.0","@material/ripple":"5.0.0-canary.cf33f113d.0","@material/animation":"5.0.0-canary.cf33f113d.0","@material/elevation":"5.0.0-canary.cf33f113d.0","@material/typography":"5.0.0-canary.cf33f113d.0","@material/touch-target":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.cf33f113d.0_1579656179418_0.7803866043211556","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/fab","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90fbb23bcbe5732bb7f37d76e1fd83133f8aed61","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":17,"integrity":"sha512-EtuPqTnSd9cvKD5PA57IayeA2BJHSTramldhoJsXFPwAD95Bx7SKlGIS8C3HRGCnYpAl0QfzpSX/a1ODaNWbzw==","signatures":[{"sig":"MEUCIQCYlgY6Gs/EYxERFoVxaYGvhSUF3vkgCPYG7Pg6TjAfogIgDpw1qnSnToMtIFEv388y8eLa7UhqZAoWnw/RXJ5HMOk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH6VCRA9TVsSAnZWagAAt8oP/RsvDwMi9kGie3pwDMA8\nOPF9Ejt+5VEOXDPdOGAtcnSROk2GYRdIrKBT1n/AXHgbI5APqTbgvGO7PreQ\nH+iJJDTNcfLFmOLQH7EIQF6EBwo7RnMG6S7osYInahAeZ4F2feFLvIhJZyeu\nenP1minnZPpwU/R2U8byxgDjDfzC8c2kmtnrAf7XHq6iXMf/Qp/aBDyuv6EU\ndSrZ6qeFy9Az5NmQwZGv2saENcaFsKyS8J5UWM1AJ2e6Fxpr+eIPmiEtRdBy\n7CztQwuGsZXq0R/ssSLkRFvJaj7ubS4qa3JRZw77TqxdMH96GZIMARgYornY\nAt0BZdrQbwmosVSEJCz4rjTl8WQhH1pA4/Q5ha4FwC/eWk7JhCfRqutcHGND\nXL66nNu+6OBD+p3zyFYuVJd8L1Xw6YcLcDgWCwgI8aIPPLtDhzssaOie9R9n\nwWBFqBdLe+yX8WolJ7O3Bk9yOnsqtXkah/zx/TwwIE6rbPJU0lcEJTNTEDBm\nbETnN58bHe3dAYahYjXMEOlJiSzeUgFcYBG/c0Wrg5A0toZGOlnXZhrKNVS/\nd2AQsoueJp72LxEzKkEjcPZcEFP4Bga1KAOrYqSz7O5ntngDrmQ1+FsqCwnT\nb0FCnT64nohmzAATCGwFm8KBlKlGlfq00Aj6K5esT8K1GFMNCRjTTTBaaBtV\nAjIT\r\n=YHhb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.e1d5f1be5.0","@material/shape":"5.0.0-canary.e1d5f1be5.0","@material/theme":"5.0.0-canary.e1d5f1be5.0","@material/ripple":"5.0.0-canary.e1d5f1be5.0","@material/animation":"5.0.0-canary.e1d5f1be5.0","@material/elevation":"5.0.0-canary.e1d5f1be5.0","@material/typography":"5.0.0-canary.e1d5f1be5.0","@material/touch-target":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.e1d5f1be5.0_1579712148710_0.16560923946283213","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/fab","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"323c17c2a18abfac013dea5c9c3a8f01c14439ff","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":17,"integrity":"sha512-lC9iIoYQNgs4ipsJeQVZhpypgfn61+ha2tHqEMFnIjbezN+R5DT2+NYSJcphIvK4mxL1itccIujVevgkboMWJg==","signatures":[{"sig":"MEUCIQDSyfWAX60wS4HCh9xF1ugoO+webPbM9gnCbgeuU/m9UwIgEenaa5Jlz22d21ZS8KjyAandhR9yjNiFIaDqD3eVSQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI0kCRA9TVsSAnZWagAA6EoP/iflwauxrxewq5xym0kF\n7CVnGTdh9UI0ylbZ0JHsLOftljtnBieX6ZrDVekE/W4r3JwrscEm8VUfpEya\nyvc9fFD2EuKW6uw+5N3IC2/1PJZq0DY/pVRTCT7uAH97bn1ivpA9IppI7B9R\nlk2TizP1vdwP6vcdUUPHQLdHgM5roAVuNJMGvRtXH9np3pYQ+d+NtVHSChyn\nnJRqr+uik4FEZe0HViesjpFCLI2en1g2pQv39Trv9bqq8Ehnvb4QBujFyzZO\npbz2X1fJQobhuo24PJlzxycKzQ57IZMiqiuDqzdETX4pONx2oznsIZr+ZeIH\nsw1Lbj5+KJ/3Sb9S6E2w2KyR2LAT7xZa6BqIndmaCZZPYNrRa1RKEpuGM5we\nNIm/FjvMVi+MSQQmtEkYa8ytZeqcIEjwB5+D7WKFNYjZns9uPNNJLzwL4Msr\nJ31l1sk+KlpBEQz6fGkPNHrvzErfqiFzo+ROsHxPkJR7OhRnzaHrRjw+hOKb\nzMKIyCZb3STiJ2mpMp9RpbOccoSvw2cA61tHQral7St6n1ROuigNMh1/ChK5\nquptL52NmOmQLMPtebXg6v4eeqqOltUWwOUMc9Ns4LIA3oQzl66QeMzranug\n59CuyYfEE+q/+ZrVBU9STbQ+PkwVorx6F24JnJDdRLcHZwfsKxG3GHGmNPy1\nUAYi\r\n=bMip\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.6b6a4ff92.0","@material/shape":"5.0.0-canary.6b6a4ff92.0","@material/theme":"5.0.0-canary.6b6a4ff92.0","@material/ripple":"5.0.0-canary.6b6a4ff92.0","@material/animation":"5.0.0-canary.6b6a4ff92.0","@material/elevation":"5.0.0-canary.6b6a4ff92.0","@material/typography":"5.0.0-canary.6b6a4ff92.0","@material/touch-target":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.6b6a4ff92.0_1579715876549_0.08338353213096195","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/fab","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad9d1c9c9e95c9e8464d63ca70a413e7646ecce7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.6092f71ee.0.tgz","fileCount":16,"integrity":"sha512-qamtdbF6C7aJjSkwnrNFywZU9B3oJAyufVfxJf50jrI0CW9qNAh7UtPPmXMCJcKp6wPaGWbeqHT102rNulPB1g==","signatures":[{"sig":"MEYCIQC9lWM99z3w3ffECuxzRs1aUYoF8+XiceRKpNwShVjNfgIhAM5m4b+IxljqDOducpFsYI1ZSVn6LgeRqD21/9h/iK5s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLvcCRA9TVsSAnZWagAA60MP+QFgN4meQi3fHihOSwTg\nIxEe3T0r+6SrBKTjB18FeH5u6zvKdy5Yx+BVaHEKkIhp8GbGwkNYAKt0D7W3\nu2nS86ZscrWcJ2fJMd4NMcUAtu3d+Ja0zMAH/6SdH1yZHlYHBDj4Hzz3fBPj\n3La2pOg+Om1IIYmEItfEJmQ82RNyxp1tfUNZzlEp8k1NdWPa9OILUFVPv0zt\np1VMJA+lOq4/TtVsdqmeC/xHm9S4Q/weKSblkNt5j2z/MgLOgKS45oIGy9tD\ndapuEzGZmMSx9TG6Sl+5PtZ15TgBuX8pexSloxLZoBDdx+6EEb/+IMK54Og8\n54Fzn1ptcQB6NCsYWp7VzSKD7SZJTeaYI4gbecafjI5Slk5cLxufHjsJYo+e\nZfmVFngd+u6IMqQoAmQAwurec27bEi2zvBEmxe/p2GgUl60611D7Tyl5BVbP\na7pF7t2DBQvV2224SRVMq1TzK2P9qCif1E4CrmMB4MxwCMoJCworCRXMKbix\n2w3HadR12OMyNjeWiQbOZriwgZRgn703hSpXFPALM2d5DWRRyqhFkvMu3rNW\n8aB1Whni6DP+1nAxX9CXw6hQN45Q51v1wIJiTe1KMIzMguCo8eRno74bBIfj\nmU1bCfaW7M0QBMtkbDEaRxuZhEMCPbXO89LlFOynY53I+LUEMAQ7XIy1zynz\nF25w\r\n=dd9E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.6092f71ee.0","@material/shape":"5.0.0-canary.6092f71ee.0","@material/theme":"5.0.0-canary.6092f71ee.0","@material/ripple":"5.0.0-canary.6092f71ee.0","@material/animation":"5.0.0-canary.6092f71ee.0","@material/elevation":"5.0.0-canary.6092f71ee.0","@material/typography":"5.0.0-canary.6092f71ee.0","@material/touch-target":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.6092f71ee.0_1579727836259_0.7012031671107024","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/fab","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fce20d8f424eb1de113537c1d6e992022886d6e3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.d8d95020f.0.tgz","fileCount":16,"integrity":"sha512-NVp0XyywVid2g77JcJn4hcpC+9FLsvYr3Y4+b+cstOEDoTkB3Le5DyMDhxz4oSlL2GnPDvNK2OHpI+zZ/EnI+g==","signatures":[{"sig":"MEYCIQCg834irwMPST3XtDG/gREUmpwtQL6jveBAe7SkXuNy0gIhAOLn6EjJXbf08QbWrf1X+8P+BrT92+d+EGhXrt6jdPY2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNY3CRA9TVsSAnZWagAA138P/3J6bP3ZMhIeAd/zMQoS\ne7hVfl7zuOcTQ4w9Zz+L+bEBPVkhmkhBxvKg3ZaMQL0MdPcf1kxItumg7i6s\nd/XbKmQVJppQAil6Rp9NcWHLprnqk2WC1p4Zl9kydkPZbK2LakcM+5J4zLgC\np0bpNpqKI5y3nb06zPuIIdIPcL/mSAIgzSXxvYPFEXhQwBsBa/IyEkJyyhdB\noACV+f7q9FC7AzOtrHWlvqywpnS+zd38ZcFQfXwZeExAVJSrPPX9+Ung7+h+\nGo3NAHFBmaVhjyD/Xs6y/Sh9b6yyyOb8HzbeDejFt31Q5RmEPU0SWFeAycHa\nBixmkF8NH+2IRqlcg26w82FWQU9avKFnjd4Em8D6u5PEyBnt5uDnFBQ/ek97\nyzNXxKfylXmACjhkjTLN7fXXlzFB6OEQS+ntl1qcpC+ooIEesDzJkfHFw7lL\nsXrD8JuIt84yO1FON2yR299oTe59WoQ5A2VgapdlE1shlXeNZI5cLgCc4oPH\n7eRo4+rV9NL3nfQ4HXjxgkzTATOSyMDZayYbYubb7xPn/pDlgiA5lMQEvR22\ncDXjPUIi41IfKDHQx7I1X2aranrC7NZkpNcaMdzuT3Wzp5KFlucWWvmQmX/h\nfmBYLBmJibZ+mmibjEH/0x4ibbenhtVGMEvLw+NAk5XoxDiU8wJI4FI2s0G5\nH2bh\r\n=Vr/Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.d8d95020f.0","@material/shape":"5.0.0-canary.d8d95020f.0","@material/theme":"5.0.0-canary.d8d95020f.0","@material/ripple":"5.0.0-canary.d8d95020f.0","@material/animation":"5.0.0-canary.d8d95020f.0","@material/elevation":"5.0.0-canary.d8d95020f.0","@material/typography":"5.0.0-canary.d8d95020f.0","@material/touch-target":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.d8d95020f.0_1579734583036_0.272213819996735","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/fab","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.b7facc628.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c92248fd0144e35c292c8803da24bafdb8c72c71","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.b7facc628.0.tgz","fileCount":16,"integrity":"sha512-tOVRYQAk1cZmnIPpm5KYLCc3gRlRaVMc/00EVCK9EMIBuhcEhjgxG+DtVDsN6+kMjt3CcsXr+YJdC99YHFE/pQ==","signatures":[{"sig":"MEYCIQCJyclROWTmv1xLdVoDn8zL6ykKjSVVKIHiuDCtL8TqZQIhANRSBbXu0dYpnVIIf68HQDC5ZiKYrF83MmUx9yV1Od2U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeInCRA9TVsSAnZWagAA5M0P/15n8ElvNLtSoKOlduL3\nsLjCL/TJl6x7WP/R8LvvNMbjshw33lYotkzD6lmNyXI3jmiBcRA38lPSA5RM\nnWSN1/tHi7vMUtV8FAJ7JlyKYu7TH9a3s4XfTg2INNT+wp7NoTU5WIpowUoH\nrWwe6Khfbr3MdgiOuYaW9nBlE91OZwCJXRVDHkTojcqF3ihg5E4ij1sJ/UuX\nbWiGqnBFqWb45GrziJGMujyyoeUvoA54CD95LRJMK6E+SkOvRNL3xTVclRpP\nt18YC7bZohDG5P9DQ38wCWK6VT8cEVDLlEbbnZB6RoX+rMnMzmgrYHyeqsKE\nEJXukByz/chyvU+0cD956i232swacHx59BGgD9+J2AmtNd0fQjC/jVtB9U29\nTDr7aBA1EnYqRl1688euDCGf1JwvSRdpyFUC28F8ZfTkIA1j/NhY9tadteE+\nqvrqZyAZc+Yotzu17Ry+wEii4cVnpdafQryTdXJ29jDK/PoSHB6QRa1p5/My\nyDuysOzs6Fbc2ERg/OX3nHd9x+PhsZNYZecv0edPdtE0WuxCZGyM4CJipX6Y\nRtyae0R6SiSNw+f622cwmAGTC5px9S9CyXCi2ACbGyZ0QDnGhNbV+ONu3Ubx\n7BlxhnjUlIgMU473LdsfnPgz56uiGTEaafK5P2IFVyz6/d5vgQfCfmSxC0vH\nOhhc\r\n=04y1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.b7facc628.0","@material/shape":"5.0.0-canary.b7facc628.0","@material/theme":"5.0.0-canary.b7facc628.0","@material/ripple":"5.0.0-canary.b7facc628.0","@material/animation":"5.0.0-canary.b7facc628.0","@material/elevation":"5.0.0-canary.b7facc628.0","@material/typography":"5.0.0-canary.b7facc628.0","@material/touch-target":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.b7facc628.0_1579803174942_0.3259028335642611","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/fab","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d708f640e3de06aad625a6ac6d526c56c1c46e56","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.63f357dbf.0.tgz","fileCount":16,"integrity":"sha512-yNSz5ygLn3fSl9tjx7LLiNhGEoGGei/J8dyARdf/NsQHTpz1KQm0f3Ifqw2itzvl2wcnVXqQ6DbdHafrNhDARQ==","signatures":[{"sig":"MEUCICxRSrP+OO7NveDqGDZhFXLqa7Myx+O+6Zf9Sh58MTD1AiEA7+Y6fsxWa62VCNlQ9nhNOft0SWyZvprVSVfCil6yXes=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZSCRA9TVsSAnZWagAAnBsP/1FwPweW5BE2eLFs46Zc\nCzE3XxT3K8r1fkw5gD1msZ3ak5SYgw+pSorJk9cWtTHo+jjlsjruWia/80nj\nMmvU2lCbikbQhbyzi4gHu+A7xVku6EgzmlF+TGFKYQe3j60t8GdBZkqbdeNj\nSShGqbl8Sc41x6e6CjsiOUP31amRamd294MXY0UFrhKh7viNHYX1TL8zW4dG\niY2wPth1R1d4iA89DzK8V63YFm1txFECzuEv66K1AwR9/uKQhPqnYPsOf6ba\n8KJOQtWviVlJxIOV50OrzdE+OiLDImvqwjO3IA3Q66yyHldguZ7A6O72v+WM\nfw9oy64Vf135pFJeNmxjHegIWTwkkf6p9+vfAw6Al4rmxyj/lHkqA/BZSDte\nunOYngwq9qF2qvuFhDOb0d65itMnPLqzvqBPuPkx/USFIl5hJCjRNPnTqzCJ\nY/o9AyqscxCynTWSjPSwicUbZX4U5LBj3jU+EtO+709IRceJNhpBa6OQ8F/o\nGiBsl9jgUTMxgFcBYTtwt1mhXU0xVJfm0vJa/ZdTGjLg4EkKgXbomsK516Wc\n6xnh+wj4P4JF++n61caovrqqrVxaf2zMT5Zk0lmZbRn59lDK9aTnKMObBpOu\nJ1p5nb6KiV+qYkWmndoh13JxTwHObQhqWle/mHkG0cZnbNPuwLJTDPRtkZRQ\n2Qnk\r\n=S7AF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.63f357dbf.0","@material/shape":"5.0.0-canary.63f357dbf.0","@material/theme":"5.0.0-canary.63f357dbf.0","@material/ripple":"5.0.0-canary.63f357dbf.0","@material/animation":"5.0.0-canary.63f357dbf.0","@material/elevation":"5.0.0-canary.63f357dbf.0","@material/typography":"5.0.0-canary.63f357dbf.0","@material/touch-target":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.63f357dbf.0_1579816529532_0.4856438889853545","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/fab","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14d598de05570e6b8659918a13d4a3dec0a9f38a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.f2426d26e.0.tgz","fileCount":16,"integrity":"sha512-+eigDIILVyvkgIT7EaZsOHr8oMHGScq+ePPghHT8bkReXNu8oyVy8lb6UH4zdUpJ1tI/H+8eHgLfnCxjq6Kp0A==","signatures":[{"sig":"MEUCIQDXSfs7PwJseTRUr8vViqeGWZ3henr00YF7PNW5w1RLCwIgMn7o8cXKFxjIzJhzXMDYNdtnpffyXu+pEPMLxXIVA4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJuCRA9TVsSAnZWagAAPzYP/2DmrVhqH7A5Kd39/4/C\nIiPUpfoXRC7w6sPZgdfR4tPMU+Fn+RUltojXUdRh6iAQdZCzfFxqkSBRx/Sn\nVA5TnCOOVb1PD5TpiHp1WMHv3mb96KOfYDoM1gQ2DIbr3PYYB1mbg49gWjNm\nMUFKTJp9uw3rP3qS/nL7gRKCUoj9g8OBavz91FPjmGozQeEv3ojxLDwQgg3o\nE2Arebaoppk3nxsSdt/OvKyFjb/zUcnIl1H8YC28nLO9MZGB/vIHSxEA/j2J\ncEQoENB1KXrZll0A9tvZY+zVh7+TxbP6Bvm0vz0o8dV4gHRQLOD+mIA/hAeg\ndeGzumzUdoIxRZE6QsH+lIuB/+Oud+N2z07Wr47kYDE99fvJJfcquyaL0pQ0\nnOFjdoBqvRe7dAfsFHH+ESn1sls5zxB160Bfoj5KNnrMIC0XQjRIaV+KCbxE\n5Bfk3r76Hlke0fsh2wJ1V07n8QTWaKgdQHDEIUtbY1onezIYNxg1TWnsSVLZ\noPGqfGn0G8eISUPCNGZkfMi1Da/TeWSASoPWHsWKnSQkYe1/5RvvooIjv3e8\n+vWxl05S/RBPpNAbNIU2MglYSsP1T7GWEeluQYMqjkjfs81v1+ErnAvcMJj3\n6AMIKH0bLsxVWHvlg1Ptc9jRo2SG2Nnq6Ncoj0iAsKOEtD2ZlkngLUKAuLSn\nLxDj\r\n=bdzZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.f2426d26e.0","@material/shape":"5.0.0-canary.f2426d26e.0","@material/theme":"5.0.0-canary.f2426d26e.0","@material/ripple":"5.0.0-canary.f2426d26e.0","@material/animation":"5.0.0-canary.f2426d26e.0","@material/elevation":"5.0.0-canary.f2426d26e.0","@material/typography":"5.0.0-canary.f2426d26e.0","@material/touch-target":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.f2426d26e.0_1579823726219_0.3868204627037619","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/fab","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91862571182427765e414ffa5f1286cd88a8aac9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":16,"integrity":"sha512-w8AFO2aoyZJPx5K5FjGtBxyLdLDwnoeYo2FeIelUVygUKSGIcqLypspCOfqTfFnkTqcG8oSwGKxvCoR0CZl8Ew==","signatures":[{"sig":"MEQCIDlM3yvB5cMr1FwmbhKp8Cks3h6lwEyCXRAo3r2kgfOyAiBOxU+ZnSefhi9AFS5vbX3a0/cCW5SOkCiUl6lqfohG9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx+3CRA9TVsSAnZWagAAi9UP/0kS47dxd4H1Hd7cbZ4C\n0K1KkLxyg+JzdCWUMlyu+2wPql2bUxe6EcODoo1WOYS6pcdvT68jgLRMyI0L\nwHNApoH04nO9H/CfifkFEO12qfpJXGL9yeZ9FrWJ7Bwwio+2N00L1BKo0K5T\nVFYG10vff3Jfl4Twjxq+KziS9BDqKqaPZHgG3lRu0bHQYI1LKgDn+QaF+iQY\nVoE7EDPBD+9jH4RhlrvS3Wf4WZi+X5Sh3rkILcUzQ3dCqMxow9FLGv+MZqZU\nccBHo+qLD+vk2ukEjs5zxqVSRZqBMtTdVYUcCGL/7guMc+fPyyMt49s6oxrx\nJNCc1SHQD+DsPyNdzqFnUEagaaoiLz1L8Y+SSp9iX6RSsXMmEMn3Q9O69zBo\nQX+BPVg9cEMJB0tOjiOfDCiZRA4bZiSNnxc4vx7QyAZopBiLO1QiAxVELIsj\ntmdsHnxfsW34xuj+MQ1u+uHsXgOCH5cG9ZzhjsJo3CWunKqVprycbp98Wd67\nbskoGn6mbMIqhh4MVEaK1J+QWIggnBnQrqur6SiLdbcw+ZqWuw+SlKDWqxxE\nRxHPM/ARZsIk1swuT9Gyk0ZFKEnnBWc+3nmKUEpnI4NN62/1+QtLxTEmITco\nSdyj43f+qIBTon6bwx+0+QHB6ojkCydvyWQxHn1t9g0dFt+kM/k30qsvs+uY\n4Go7\r\n=Cav/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.7f5e0c23f.0","@material/shape":"5.0.0-canary.7f5e0c23f.0","@material/theme":"5.0.0-canary.7f5e0c23f.0","@material/ripple":"5.0.0-canary.7f5e0c23f.0","@material/animation":"5.0.0-canary.7f5e0c23f.0","@material/elevation":"5.0.0-canary.7f5e0c23f.0","@material/typography":"5.0.0-canary.7f5e0c23f.0","@material/touch-target":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.7f5e0c23f.0_1579884470702_0.6931206791868871","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/fab","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef47f3d52e27cf8bf04b031ebc3377b00a08f0fd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.3fc3ab520.0.tgz","fileCount":16,"integrity":"sha512-lkMUV3NTDCnyuG14UTV7EIm3ix63io2krSyQdo0iYGk1tatKcOYirVmeFwjozWVMytIBMNUU8j9aXiBiu55KQw==","signatures":[{"sig":"MEUCIQCyoEiVgc9s8D8Vbcq2zzk8aL6/jy1r3Wu2pcPEMUU94QIgQ2zGoFyGGa4KSWtaoqrjlnks+KLgnblPt/zUO96GNec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKyeDCRA9TVsSAnZWagAASzIQAJC40pfe/YezzeycLmXX\nwl/3i8XSkkzghT/DbTJsCPdDoTRer7wBT561tNE5haY4wq381WUl3V4Myts4\nmLsgimgxInBJvc/kajspBudHEFUlZJD1iUz4ccOg/MjD8Tgiw+h/IRO0g+Hp\nTB/O7TYV5CEc43eZrssIMsP9uuVVz5NdAaTGW4Q5roI1fiVqvYqhs07MpvAg\nDpnI9y+l6rpZBgAS7QkHtgeahEh9oM3BPnrF8EY1eytF5WkCSWejizXhHQps\naf+JTopbjShwJatrv7Wt3wXpFZl2DEiUM2efuK0ZZMRO2Ze2rFYXqDQKq0kT\nhD6D0LbwsQJsTSkr7KO1kZxXT4rnqzVK8YPGMlv4w9yRWZIsn0laBdV99pHx\n84QUxYtWU+v0/u13rOS+tWvJJK2IXRb78hz+zMtgrg6OzYXc91OtzNHMf+lC\nXba93mkvquaRP+EsyDR1fYucXdrUUIkMQADKnuBvz+NVNpS9/h7AE6eloHrA\nv1tX9QmqAqQoIziIPGfWGtDucIn6po8WMlMRMp4l9sRVMHGwB+3SLuLfI15s\nk/bSjSYaxfx7Ix+R+evt4T6qE2rY8jlgp6QYJmvumDjhYDmNi+HppX11r3ws\nXQjBEml3FJPnst6OMlLDfZqipl+765rD1anXfB6Rkg2dAm6sUsr27kBXeTXu\nc0XV\r\n=dNgF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.3fc3ab520.0","@material/shape":"5.0.0-canary.3fc3ab520.0","@material/theme":"5.0.0-canary.3fc3ab520.0","@material/ripple":"5.0.0-canary.3fc3ab520.0","@material/animation":"5.0.0-canary.3fc3ab520.0","@material/elevation":"5.0.0-canary.3fc3ab520.0","@material/typography":"5.0.0-canary.3fc3ab520.0","@material/touch-target":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.3fc3ab520.0_1579886466913_0.018401786391689212","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/fab","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d8d6da367bc3adc5aa78932cd1a6ca0a84b4ba7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.80a4d326f.0.tgz","fileCount":16,"integrity":"sha512-hJrKIRDz5Rk//sShi7yqyWv+zF8a0s/gUzCpbz/EvONS7bL6WU1/GVHdMEmlTzE2xLZDQ9Bjw2zjJorjdxkk7Q==","signatures":[{"sig":"MEUCIQDrBh/8+DBLt8cWCUDOfhM5jQyhSzYawmF24A3pFgiAvwIgfityqFnXXClllAEGnFx+fktB8aqH0BwGkztSgJNRk40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1eWCRA9TVsSAnZWagAAATcQAJ5JXsqlA6YdOSRww4/F\n7jUl0kAwJ22zqZbjf4yZelW4fkzpOS0r6snKi6dNIyDicq9maA4EMlpie5Dq\nP62WIzFenKUVWqbuxoyDcMRt1UEHYimiLekDoYBbX9wGzmHv8+tyMBJbPjNr\niLXEnNSJ1wjF/K2X8p6EQFAfu5TRjorQ9ASClt9Po785MevPusa757QGGMVd\n6OK2iI8mvXKJ4WjpM6kaC+UE/F6uT4rJlR4SMyL9TDKgmi6Ma3/Aoy7ZA6uy\nS5MyTfiHVuUvQIGTEXHkFJ2/2mwvjwRJ8sRbErzx8xBQuOipV1NJFOgH0c8R\nwrR/cl5PWKumMH2QElgAsnuq5XRLbWLZyUHzggQB9UvQiBxabRdsDHLeRG3o\n2Vx5qPgHsyGH3QH23en2QE2DNbuvv8tsROgDMgDwSLh4HbsTQvxCmhCMj740\ndE/409/T2oQ9yMBL08B2auo7Dh+XfyKKDPbjLwrFq1YhUKDsdyx9PwxBz5rY\nbnMYz+S0/CLBUQyvON1Aeb+lgD/mvREPyCJkuYldS2Yum6ELw1/z9Ygd3v7i\nArILIWZYz4AjfSON3o77ncNNR0RZAtltiEafW9QR3M51NInBHNyIz0x8AHUq\nVjWvCmtmvXOsDtuz9oSXcKFjzEzSEg1y9FhzVoY/YtQ4fY+T5qFWJzEVm268\nNkfd\r\n=EYo2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.80a4d326f.0","@material/shape":"5.0.0-canary.80a4d326f.0","@material/theme":"5.0.0-canary.80a4d326f.0","@material/ripple":"5.0.0-canary.80a4d326f.0","@material/animation":"5.0.0-canary.80a4d326f.0","@material/elevation":"5.0.0-canary.80a4d326f.0","@material/typography":"5.0.0-canary.80a4d326f.0","@material/touch-target":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.80a4d326f.0_1579898774455_0.5997375940082268","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/fab","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b89542637b87f78fa5899d1f45f5b283a6a7c5dc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.ef7de4def.0.tgz","fileCount":16,"integrity":"sha512-STl7mUhKuTJj+9bXvEpKoq5ikTlti3IUbauR7pzxZm2Raan45GqlKkidBhOq1Qa1MFfN6wEmKGkkKgjeecxHUA==","signatures":[{"sig":"MEUCIQD0H65UBPCFjBMCWyr5iFIYhTz7wHrljiUYqjgw8rcI4AIgIVSmdIM2FpVzDC/U1As0fDJFBENvQzjbG53mi+Mx5Qk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2J2CRA9TVsSAnZWagAAYMcP/RIl9uMVmLuFYZpuMyC0\ntm1ItvOsAP/z7rCv0+qdOEdy5ix83oF8M8ZjzMnax6/nPgd4cVaP1xmLUVMW\njwCHkM/YWdWqpap05YGSY5mYfTpsypjYwP52UiWjpuAuL1JBbKK4oNVlhDxU\nnQsIZXuzN8p/btnm7oQjLRQkh2KamnCsB60YSsH1HKvSl3jOFr5bRUfe54OK\nvs8D7wMwS4KeYBSvVMfbCqcG5OrD9F+MykAs8xg/Kmyq/TPG0c08zg7ayWt3\npoNwJp6I/urKG39qyIApyFOuLAs5N7hB2Q5xG0SPQRk88gZAG/677unhEzzK\n+3svVY13zg00QZvQvziDmofj9phtwV+3HQfV949r8a41a8zqwB90sGOTrZPh\nRccVFeZr7NuH0wr12p2UL/hPvmNJdte6MlCIcMod2DzbL3t6LlZdYkr8xpcg\nymhkY03N6o/Ycv5UAcqq+Jtv0fC8ak4TwLBiGb3bOo39KaSnPAr6ZZJ3pZ4t\nQ5OIpi/IK1/QYCfT+34ustrPut0/IunUFPGaxehfU73O2eDBR6vmpTM8jSEf\n0Sa9Br0MRvcODrYPmtyvWZFHgIGCvWrPOuKlXAbhwKRUlUGW8qtnmDhZ3JKM\n7vz9G5fhGAo2PU4Eia7CneZ51pToMv5g9ORNMwkSwU9G967sbNjI0NBIXv2P\nVMLJ\r\n=oLtO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.ef7de4def.0","@material/shape":"5.0.0-canary.ef7de4def.0","@material/theme":"5.0.0-canary.ef7de4def.0","@material/ripple":"5.0.0-canary.ef7de4def.0","@material/animation":"5.0.0-canary.ef7de4def.0","@material/elevation":"5.0.0-canary.ef7de4def.0","@material/typography":"5.0.0-canary.ef7de4def.0","@material/touch-target":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.ef7de4def.0_1579901557759_0.6227895189709192","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/fab","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25470317296601cd5608c75e607b193cd63b41ce","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.93e2288b6.0.tgz","fileCount":16,"integrity":"sha512-uH9n+3d1PB2dthkUCRSHSVhNGcixq9+Rm9ySDxtzoSmeWg2oJud9NLjlhuf0Ra9Vic/4JE/Oi3kFzZ8tof+UXw==","signatures":[{"sig":"MEUCIQCvosfUB/7mzl4uPy/1trW53GiM9g09dnHE2h32zhJsPAIgTj/WAGJ49VDFqHNahL+nM/pR1+eiQSU4xZTK2kBpIRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGeuCRA9TVsSAnZWagAA0ZIP/R6dSYoR0utp26eCs8Ya\n2nIkMazhRbSQDVMdhPDTyrOY9Nit6hNXGu5LgmTgAcYGgc6ftxv9k9DBtVOl\ncLBD+XjMlid4hPAjaW4TaFtnojxQf+/WEk6NkocQbTJp6enkKQ649tXPPSi/\nEmEiFzv/mzrjVc8o5KHf5mzPJeb0y+Xq69KNUayiePDzSOBvA6JnyBC1frYr\nI/Vw7C2WofH34Zo/QmgPfhSQRcJ2dwJJEh7B5oxw4xIOsKhj/0fLsEsnf2xg\nIQv7dQhKxrmVzGs6xmzaqh08i3LvWCecuGw1PaJeQe9MlRIu2KtaabjF8erI\n0ncdxJuPv748ifTNSu/Ymi8Cj1hjv0lQUreNEBq5WY+udwboBX+B28SnwEl0\nczwxAgloKJB8hP6Yu3X/nYSKmmoW6oFRQkdSbXIain5ESoHu9DzqjCsVgNEx\nBhBCz8YOKMyWwkiDaG2ui+jPIz9NfzirL79eTo49wrrPeZFsxUdlz8ggR/TZ\ndTL3KXTHoGo8ROnX650U7ni6kwKAj4hWs5deXCueIhqNAzTou/sK72SDcbwZ\nT218/k6/jew3GrvhGXbPdcZkxMdHjop3MmjA9+PCd4GgCLXOKrhyiCSSARz1\nGBWfJz469ws2U+HZGRi/EYTAMQXcNuvbTj1QiDYQAV9sah7vV/7+vETyIdKB\n5Vjp\r\n=ZArp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.93e2288b6.0","@material/shape":"5.0.0-canary.93e2288b6.0","@material/theme":"5.0.0-canary.93e2288b6.0","@material/ripple":"5.0.0-canary.93e2288b6.0","@material/animation":"5.0.0-canary.93e2288b6.0","@material/elevation":"5.0.0-canary.93e2288b6.0","@material/typography":"5.0.0-canary.93e2288b6.0","@material/touch-target":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.93e2288b6.0_1580230574142_0.9305822459201505","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/fab","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd7e244b948fc9175e625792e93d1f196e2329d6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.34ef15f67.0.tgz","fileCount":16,"integrity":"sha512-FHSKac3T5DAgQls2KapQV48wo0jlSHx2KDDfwgIcXKYg5B5QwNpMuIjVAmb7c14GMzaywUxBU2BaccMPElTuRw==","signatures":[{"sig":"MEQCIBV23/8gpw3cLbmPK3iVvMxPxfjoUcVjZIIfEmjE0ufEAiAk00NeQC9lPjT5f3OropKKmt5lRA/S3gPQmdXXT1R+vQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG5NCRA9TVsSAnZWagAAqegP/3STqn+PxrQlITOD5e1d\nrmIljz2g6WQmyaz0plpwwJU9sfBCt7JNDSqvPJeddf3RujoqqEZgq5xB9o6Y\nTgq8YnVCrs83FvzKyHEwd7E2cyX9WwllYBqDZWuDzjLQMqYnJeEVfHFVY4xH\nUMMTQ4Q1b0G6VK4TMM77f08307ktKtjV9Xe32P3r1BOF8z1xddAyZLPqkACJ\nsA6tgtKwOZ4XP/DSH88tiwEZsNu1tQiutd4deZmokZheaODoQ+gTRlhFM7m4\nxHedNGqqvJdWzCVVNeyFDuqoehJbBvsDJA6l0/UCz1VJsY2IYwNcjzESXyT2\nzSHloGZdxsUnxWoWKs67/X2EPxJP0KL2Y2SfH3pM5qlAx/JJSc/OXUrnUHhH\npBQu+8+tvJjd8cEjTvSgsQPRbfPI3wsHkj95Cs4L1u+nvPp2FDPnajAlP55d\npIp4PH/BKIeDheWdUQ9ZL1QVhezCXptnhxhSbLQEj3ftzJvKxW0UxZPbWj4G\nrnJm2YIPgZI8S321sAbDAm2+Itv236LplD/b7lXUmqx80NMZ4/ZZCXmr2wDz\nuEr0IDRjrzHSZLgbXXqUY0Hf3EI/Lncq2fBNs3ueZuipJvUsWNlXkyGgxbxp\nqSedLwZ+UbZ1CHrXecZT9y0QYwksknEfpqRbB7ORgY+ByXV0SzXj4pjyF3g8\npDgj\r\n=/6l4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.34ef15f67.0","@material/shape":"5.0.0-canary.34ef15f67.0","@material/theme":"5.0.0-canary.34ef15f67.0","@material/ripple":"5.0.0-canary.34ef15f67.0","@material/animation":"5.0.0-canary.34ef15f67.0","@material/elevation":"5.0.0-canary.34ef15f67.0","@material/typography":"5.0.0-canary.34ef15f67.0","@material/touch-target":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.34ef15f67.0_1580232269106_0.6046267649497181","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/fab","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ba0ef019bb93652bb5d2b5294ae8adcbd88b47d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.d3d176ba5.0.tgz","fileCount":16,"integrity":"sha512-etb5aEI9BqLDz+y5kYi4oqVm17ektFEJ6v8M1Mzj8yD2AqrJVfG2R1n5YgpGqRz+bKDKnyY+gU/VWz2QOBNFcQ==","signatures":[{"sig":"MEUCIQDVwvgFovAUBx0NwLFKGVYoNl+bJ/SiGNW4HEP1OZWFgQIgFK2YdR/0XTOvy1Qd4wSCDg0cgpJU8aGKhH3AQh7P7e0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG+CCRA9TVsSAnZWagAAhjoQAItwR34YK73TbmKAlUX4\nhpXEl/LreIFbfZfTm6oP6osAqrCoc/BFhnS+okOE04I/P5vBgiDxtuklNWc4\nGJkbSHWuLu2LPa4/sBmESLfDQcgn2n0PGNgZ/c0/4iLCRGyPDYmLfZ4VOZob\nILaK3ucyfR9YIe8xrZcWvyBMW0KW8HQsJ1ukENCBnG2tteEAwqtZYko6RGAx\ngA8EW8MPZGZ8mSaQiTVPCzK5mU3o8t/oV8fTJ595zeyoXGvLXdN9qx3UFgFo\niK2Zl62INR+25olY2Xg0aDdPKuS8jsWjv53MrxOEWjOH8ywlk6Qmf3vnxlPe\nuEgV3CvEcwj+dTDlgtWgiMb3wWqZEk30BvqpHem+r6CstonLe5syYugs1n3U\nJ5uXmK9CfSbZeMkfgozS9zqeg49GXAw5WsLG6PWSt2YKYWP1qBViyr/LrXwF\nARdlyxJkH6jzKKpZsZxfzMbxDEm3IYVUPbHOftVUgZFJeO6wN2S/3RlNK/Tp\nAYi6ddmXz+2XfyaNelhpHDv98CbjXwSgsKxFThkI+Duz0ZaN9+KX/MqmmPhs\nI+FD/HduADJ3q9WETmd9gYXz1eI+1Nv0yNQtUwcnIt0tV5dFS87V2G0LgY37\nhPUU01/3k2LEWkMJI5Gp+r94e5Fl3XCVZ9hN0Z8+WbiDBS9Z9mC1frO6+aZE\nLc7R\r\n=7pMd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.d3d176ba5.0","@material/shape":"5.0.0-canary.d3d176ba5.0","@material/theme":"5.0.0-canary.d3d176ba5.0","@material/ripple":"5.0.0-canary.d3d176ba5.0","@material/animation":"5.0.0-canary.d3d176ba5.0","@material/elevation":"5.0.0-canary.d3d176ba5.0","@material/typography":"5.0.0-canary.d3d176ba5.0","@material/touch-target":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.d3d176ba5.0_1580232577685_0.9897895635656739","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/fab","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.32c1df133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f35d301167891e2f56376f6df39b3d865e739d34","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.32c1df133.0.tgz","fileCount":16,"integrity":"sha512-N/a6Us1Sk5P794F52Nsx1xaWOoahAhvZsohLmPXB/h2WCV58pXYmPwLvCvBamb3ZRQKTrVeKauFsQdqHk6dE1w==","signatures":[{"sig":"MEQCIAoRCXvvKHGABJXrB3Hz0PIqinre4kgUT/JvN97gn7CIAiA46nAhn+m1JMyJ7vF7iJjxMMT8iTBvTW4Drr7Cik/X7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI7oCRA9TVsSAnZWagAAEewP/1QSEAlEcfHrQgyvJlze\nqUagEA9AUnakZxxQjKsOAenIzUmWeZwPOQH2Tj1gMjyO7yoqvxpecJRNzHt0\nte5ngxDCgfVdN01bC4SseqLW0G5xcJyFAONKh9zVS//Mz8bkz+i0y9Qrt9gb\nEK0+dovp5k/43AuYrNZ9xoRfn0oI61j7L855Ur98lu97ZdwrJ3Z3/4W5RUSy\n/xQnUBLdewHSy1tEGDfevtbUa/6YTgSQyGrVl+wcyXAJKq0FKqo5OS46FgqB\n+Q9VKLWJv1x5EpBjTv5h/QR5u2t8AhnE/YnJ3wClMRwh86lJv4uMSBn/WMaP\n5s7+1YraTEd6KMRS9nMrLe7yGXUM00TFIS3kQ123Z+FOUIiTv78zgIrFUax9\nPe5rvtbPe3R89TxsYPib24XnxztRdLd2OSovzkuFAmtiITz2NHJkiDGD3V+9\njD7oplAwqTuMWdjMY9ezUxgWwNpiEkNZOz4xscY6sKSXqFD43ZtfhMBqROf4\neK8lMKiFjw1sAJDqzOCt1O9ka7XG+NHcYDLHtjajfDGPw8203xx18Ji9ijf6\nVOOYUMn8mW4lJi5SRyLrws8llApJ9tUIcb76dKyjhGq5ONXrUwqgHKLxYbr/\nGlgY8DY1xSyhuc3hil5KeSOC0ol9dOyihfISqGy92BMFl1BuBcFgkfw1EqnZ\nJyE8\r\n=evVy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.32c1df133.0","@material/shape":"5.0.0-canary.32c1df133.0","@material/theme":"5.0.0-canary.32c1df133.0","@material/ripple":"5.0.0-canary.32c1df133.0","@material/animation":"5.0.0-canary.32c1df133.0","@material/elevation":"5.0.0-canary.32c1df133.0","@material/typography":"5.0.0-canary.32c1df133.0","@material/touch-target":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.32c1df133.0_1580240615589_0.024591633578401995","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/fab","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad539e2adb87c368b1e0f388171e3713d494b6bd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.f3adce86f.0.tgz","fileCount":16,"integrity":"sha512-CRoyKGR4bd+jvXafq0I9zY2ke7ojt3kke1aHS+uo3RjNp9qaVpiGkZJKbRIpAwykKa7VMkY1AyvMI1MzV8yihQ==","signatures":[{"sig":"MEUCIET22B1PU9sD3grE3zfdCjOYJs+1nsxmQkRksluek3RQAiEA+hsqtnmsTAQmLTMBo0aS3YLSoY8yIU+K6Bh2A2dq4XE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKxZCRA9TVsSAnZWagAAn6EP/R2YTT48uY2fDnoscDMX\nCr31v9EgeGGn+yYBLml0aAsPMWFioLj+zWDxZ7avZufAoPd4bUt0agMsIIq+\nanHgiQH/o3bUKAaBiVtGI1+/6sFmEREzD7k6EsNYjBUk3yaCe/ICEStVSHzs\nWUyNP77wFvkgKRZGMahA/h9oNJcgfokpnGTL/A8dzWV5qmPTdqQWzaTepQH7\nDz65tZ2h8WTucLNlkdtq5PesLkCMilCzdTbju/1baXh2n0IsAP/Pci6DCoDC\npb+1ZXFn7oQ7jj8dv1uA4j8uiKZDfU55XSv8i7gevwgWZhPcB8ERAgKl7noN\n3+/4sOZDIqk3LhYv3vEiF/s6HjIgUSa+gCSqIPNZStzEB0EMWaPCTrQuMq5t\npmw09oBPBZ2+WHXkLxiE3X9GeNOAz2CPBZvEND+P5NnZ38l4APlj1ISo3GX9\nNZOuQw2mpmDizBS7JKAW7IO22qZvOm3XjXksjI3In6ffKrYlJXCXOfYiqqpR\nwXEt8WA/6WnCGIuBe9pBSqhfBNuRRAbilRfh8CKFV3Y0s3ujBD/Kb9xjkqAm\nDm1j0E6glhmIwnF2hhd7lHgr48V5Uteg30vrvvT7qIfGETeOe5HOnjo5L/Gm\np9Tock1GmCURN+rLR6z/Vu6fjT2mTruQl48MlEv3NKjxFL3PG/YfZfg1Iqf1\ntPfh\r\n=IPjE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.f3adce86f.0","@material/shape":"5.0.0-canary.f3adce86f.0","@material/theme":"5.0.0-canary.f3adce86f.0","@material/ripple":"5.0.0-canary.f3adce86f.0","@material/animation":"5.0.0-canary.f3adce86f.0","@material/elevation":"5.0.0-canary.f3adce86f.0","@material/typography":"5.0.0-canary.f3adce86f.0","@material/touch-target":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.f3adce86f.0_1580248152670_0.6578078578027933","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/fab","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.a4423f890.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69f50f72702f6cead73f0638af8ae00f42f1e788","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.a4423f890.0.tgz","fileCount":16,"integrity":"sha512-N1J7DHpShvMnDyVSUfM7AsOsx/Hg3YPmOA//+ibEz74oMPy+ahZDU2g3KIu85zSnCAgj4gnOGoPAcvNlYUeEdQ==","signatures":[{"sig":"MEUCIQCeicHtKxe+H7t+GD9LcU7fNEL8toXtqHcfpvRX3owTigIgLJkBsHOfwYd2lFjuTR+Azeij0OHAOCOvHdyDTWVSFoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfSjCRA9TVsSAnZWagAA0+4P/R9Uz1uzaRXCQyPAVxn3\nhCEWoDzI3Bg1XlY/R6rPr8tHIpl5U101CAFns7Xd1lYNHM3+yPS4jVG93B52\n2Jn8jLf76CJKZuMsU+GG66hX6842NgsKwh2BHRSBRuBy43KGKgpRURheX0bR\n2VN6huUsOqtmejGZBIANG6i1AhR8umWyX1n3ZY6LpDT+9f4tx85mZCizNsp9\nDPr6D5dIz1ev722XUjBiP8LnYTjGQVKIytGasWYELZV04C/ZEobHvUKbOtmw\nxP+vwvdxXJGnxbRbUO7PIPjpAdZ7Vx4DvTBZah5R8Nb2d17ijydU1UTAiE0Y\nq9pUAVrGokL83Ycn+KCOTEU/FJAacFGkoUVudWcThvNoOhwUpG4femOz7RMG\neJaT+axpjKuBockDDS6lXuDwnt0zIBdQ/ahDoUks4QtelGLCiF5YBpYDgHBX\n/c49fMetbZyn193xelOcW6cnwaCgfawbCFbxKTrG/LxbfvpCR5dEbiVSc1hL\nfN397TZQ+O2aXHVa86EODYjGzrV/MVmh/6y6K/27ZbGaf+yzABwwZJ9qsElO\nbR0OW0Caj0arhtiFsgB87nmp1VdbPuM6d4Wa0ytA5385jGkaaqyPmA0VS4Sc\nfjgSlMJG/FTKpjGlxJ8PxeFatDLef4JxcYYsuZKpjHVqMDNfhZCcPJ8ck+gw\nyY+H\r\n=2Hqz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.a4423f890.0","@material/shape":"5.0.0-canary.a4423f890.0","@material/theme":"5.0.0-canary.a4423f890.0","@material/ripple":"5.0.0-canary.a4423f890.0","@material/animation":"5.0.0-canary.a4423f890.0","@material/elevation":"5.0.0-canary.a4423f890.0","@material/typography":"5.0.0-canary.a4423f890.0","@material/touch-target":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.a4423f890.0_1580332194498_0.8839638148520155","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/fab","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.9351f167d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db3887397ea2c3bee1fbfdecc2c88c87c8b01471","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.9351f167d.0.tgz","fileCount":16,"integrity":"sha512-ee3bw6lZqQwP3hyWzGAPCHEpIMOMX0yZhcXrgKpziqpOFMgZNPPf3XuxhicOcdXnhoGZo4plLPhSvUAr7OFhDw==","signatures":[{"sig":"MEQCIGA/wDCs82kSfpBhjHOa5H4zIzBPc+yADrkUodQ5ZZQaAiBZQahib0bu3njgkBAY4l40Pwe0hb2ZfbBuHYqtrt8JfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf9tCRA9TVsSAnZWagAAqjwP/iba8/whFb0CQqfUf90r\n61NCB9683IwcNus/sq0pC6nI6posvAz2NCnvFZ+Y7Z2KNOARVNfbPV6y+wP7\nCHLRg9Ay6SsbrE7v88PMJ8JRyRNcR7tv8U19g5sz1mQ4QgYOXxhIwAaLgRUA\nOK8/6koXmvRMtjn4nwRI/wdDecDjboXxDZXbkml9AkXk1oT5/N8wyC1EoZUk\nXjNZHi9FtUhmdGUx5GMn1FonNz6XPZmF5W3+vJ2SniBkFfRkJMgdZ5xm+aph\nu8tiCQBoEXurA6u9YjjnVU4FaY6i77ml10yt/2OzFA1syLOB4KCsskY+Izx2\nObGm+g8lcqCsHAR9q6wA1pii5ftBx0YWKaCDEOA92IFGfF6zTpDcfP10594/\nfwrSV2oKq7JpPz7+OQowHxjd9mdG5yCJM5206q//AR5pewUcP0A8fQcMajF0\nT3FHrF8AgAkAix0iSfiX3hBR1RJ9SqMOw5SeX6XOUdknpkmkT+dX15TZvSN4\nbwgq5jMiIKJQ4w4ox70Cq2ufiikgoz882HV6jXS4aNAzb9eqYpwaQmdKE+Wv\nVOB9I4R62MB9bND2iYSAcvDnE3BhH29QdFp1I+BjRjC6oOQ81E1fF/UTexOF\n03W97Wa43KOmipD+NPi8ioyeymqlsL6+bduvE1cjNTpML8jjnlZG77Nkg+LR\n2JEL\r\n=RkXp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.9351f167d.0","@material/shape":"5.0.0-canary.9351f167d.0","@material/theme":"5.0.0-canary.9351f167d.0","@material/ripple":"5.0.0-canary.9351f167d.0","@material/animation":"5.0.0-canary.9351f167d.0","@material/elevation":"5.0.0-canary.9351f167d.0","@material/typography":"5.0.0-canary.9351f167d.0","@material/touch-target":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.9351f167d.0_1580334957273_0.21303712170472866","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/fab","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"768fecbeb2f99767ba5d9fe10e685ecc6c898160","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.29b89dbc1.0.tgz","fileCount":16,"integrity":"sha512-lfD8PqG+040MOynSVAxcwvzi/AJ7eSgrDZ3reLoZMItvP6CUyZyVxIIbjDByciw6oj+IKt4r+MtR8DJCzff5uw==","signatures":[{"sig":"MEUCIQDPk5arQt0SMXzwHVXRfDL0EHiACKFNyHmlfK2Z5DkEmQIgZ9G6NFfusigT1CkkXwqXJwynsc/wRawe8I7u35wWm+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRWCRA9TVsSAnZWagAACloP/1AVg1BrmtVUSohdvMgW\nFjaaGygYnEbdHMYw/DSieyhcfbShbwu3OraDFcn5Uj19ey4PfAZLRikhCv4T\nWD7EhQtX7yYGduXpFPWQN/sJFsy+MjrSkcLE4+UWIhIkmX2tBgWa9EIMb//k\nRXqnHlp48a6JAeKmMDY+1vIexsugDxH0FKPePBt2mJNCrHIGC2REes+8qxvi\nJu70luUvpBmdiBPxj7keTZppoSOgu7jtb1fGWQRt2mDd113F8XHocKMb2KtP\nQ/W0/LX9JHJd7INxEuZEexIhy5xz4uvJ/wQrwxaq4gEkYVbmQ5C9n9sjsTf8\n6cKpd7jFce1MOjdgcz3IkrylGFL6NKiE5lYcFr5JHJsTmfpIXyc0/41jfj6o\nkxSENxKxEbhhI11Yt6TdosaRPnztxCtzOs8hdv3+fF1WDrK4T11J8rOxggLK\nUdZfyH4OpPK6ypNHtJ9bsHXA5mcSdSLhaJjv1RaZyxrE/WVRCOix+Oek6P+Y\nHR3AFRUGI/PW1CYu+lfq591m/nXh6GwvfHwg1UYVcYsw3eiApmackT0vPhoV\nTsWwRgdWmyG3KX1dJU67oavavOxeE2o1o0I4AS4KvtvzHwRPUgjLmM0ZrWps\n23ewbdeWM0DZ74RHLoJHJF2syRa1E3EXoJVaXYGvbOdHmcgMglWJzbrGgMZk\n8n7S\r\n=y8V+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"5.0.0-canary.29b89dbc1.0","@material/shape":"5.0.0-canary.29b89dbc1.0","@material/theme":"5.0.0-canary.29b89dbc1.0","@material/ripple":"5.0.0-canary.29b89dbc1.0","@material/animation":"5.0.0-canary.29b89dbc1.0","@material/elevation":"5.0.0-canary.29b89dbc1.0","@material/typography":"5.0.0-canary.29b89dbc1.0","@material/touch-target":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.29b89dbc1.0_1580336213915_0.7955678729894964","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/fab","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.45985457b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74d02782d180ae03172119a5a2cec8089734f9d2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.45985457b.0.tgz","fileCount":16,"integrity":"sha512-rmHKaZmGppmE2uCX8eJMMwfheFRxzdU77ph1Tx7qkDmaoGf6OQYkogsJSPKIBvNiBOKU6bVixYP/BRcE397EKg==","signatures":[{"sig":"MEUCIQCskKKjhzO6H0Uqpn61GV/JTdpwvToFKjIUr06ASW/D4QIgeUYfKO/J2IF/4wSNkKQtfyHh5GEpStuV6mxB1u7NqTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhY3CRA9TVsSAnZWagAASrQQAIyPVo5jhzxaJ2CQY/RX\nbuzB06yNcQsOsf31S4jCkderYiG1FX1YTKvErXfwPtmgtyO6DUVdea6tYL/W\nyPkiP96bdkeT7e4WM3g29Bp7ydvHPH85aGDODMBWyFR1d4kbU3Vy2B6wBZ0G\nhhO8ZSUfoeY18lorwiQ8/ImMOawFRRNbbTSTc3f/V3PM5kMiED2p7um/q+pD\nU+WUgje74CMQEa2cmTNuKdJBYRHRE70/7CH5SPVLjm7n92GVFo5KmEYyirtA\nxUDV/6fbfRqilh23mmgRuond3PLwwfW4T7OWuNcspRYi+BuHZA9TWw21Ea7a\ncemvMsXst6UtSAh8lS+td44dRDapcYb6d3IL7iOHDm5iuiYfwoOh3aqbzkby\npUVyA9ttZJHqwA2cZIFg2kpJb9nj8gLjrvm5S7BkkFF5JW/8/Wxv0Nm3jlLU\n3HaHJsitqQuOELHUj9ksWwqEIha8AIfgVasaz6wquR73+TeBSr3J8UrsW/C0\nnpITchyYeBeVXd3Uqk4nmLaxVkH/oKxvi6vky4BfgheJJNLRam0s2iMXH7P9\nQT6VCukWSBjiZpDs3U6MJ0VbJMzUaryF2gfwXQIliz7RdhmMtKYzmaI/tTpC\nLPEhfwZxcF8S0HD8YXjwn5tkSzwYTQx9iSS5FKJ5iBISzWomQhYsaXVHCenZ\n32HV\r\n=N2Xa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.45985457b.0","@material/shape":"5.0.0-canary.45985457b.0","@material/theme":"5.0.0-canary.45985457b.0","@material/ripple":"5.0.0-canary.45985457b.0","@material/animation":"5.0.0-canary.45985457b.0","@material/elevation":"5.0.0-canary.45985457b.0","@material/typography":"5.0.0-canary.45985457b.0","@material/touch-target":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.45985457b.0_1580340791116_0.6948957571039676","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/fab","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94c8f3ae9a8b2776e402031a77700207dceaa873","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":16,"integrity":"sha512-MqpBj5WMSNYlhXiF68FpD88bS0vRoxRDU5fvlrKII9mbOE5g1yFh3uN+PYjyZk5prYayVqqS3Vy8lEjwDAdX+A==","signatures":[{"sig":"MEUCIQCfX0EB0bUp3lAroCGh8WOb+oWXRDD+TQbVJk60l2TDwgIgFaffbQ5FM1sRzDaVQDwfAu25l4h0Ygd/HZGwrhnAahQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxRfCRA9TVsSAnZWagAArYMP/0LjNrAXDhoP5+USvl8B\n3kLOQL1m9bQTHdQtsVv6+cqbnOI6ybKVITD57juVse+NDe+X/4KIkFgceVcT\nZOseGpQpkuyqHg3wr8uXM+yZePfOjrjZF9812Af2CGAX+jbof2FiUkVN568y\n5hXwrGYhO4XOxKmUBVgsDxc1GzR0PqJwshox344uE1MU5EXX4pUr8uLa6RRW\nByI46Kg3PvlfeKNeyASTsAfZC1xRPiyGuSbYcmskr3RdcIWqeIyiCOMRBYds\nu123P75CYI4sYCJ101jX3LXkCV6v/Ut5tRasHld/5dBVor2cBvSYn+KOU8rI\nC9UcFnQMEhB/igJSYVKTX7dUOdJymRlHostiAHhMXLpJI7+REY4Ok0h1w7dx\nEGuce8uwHntUMqbH/vZdaeNyvGHOrewdL6bcdHQs1+eIMT957CQpKGAdO6q5\n67nOyf1UkqLaBTzUx5EBcTZNs04J4IiA6BpJvNfCS4XwoAKe020XEc8W8vgx\nM6F1NS0QK9EPvuRLD/QDcDd5o31OcjwUX7Z35ONdW0Yn65UT7XaWhG8yfba5\nHZGN4yi91OxkEaglgnhDCPXGqs8tlnUpf2J87+TphqWmgVgukVLW9/6X7Nih\nHgrIL4xdIaxV+rAknwdhPSZ7yXgLt84apTV29l5lWSTkqo+7iYB+rwWhMWzZ\nW+E5\r\n=sW6C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.a1a0deb3e.0","@material/shape":"5.0.0-canary.a1a0deb3e.0","@material/theme":"5.0.0-canary.a1a0deb3e.0","@material/ripple":"5.0.0-canary.a1a0deb3e.0","@material/animation":"5.0.0-canary.a1a0deb3e.0","@material/elevation":"5.0.0-canary.a1a0deb3e.0","@material/typography":"5.0.0-canary.a1a0deb3e.0","@material/touch-target":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.a1a0deb3e.0_1580405854702_0.31510149467506743","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/fab","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.181486643.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8e1f2a2b71c41c2ebac04ac9fd84473a75faf88","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.181486643.0.tgz","fileCount":17,"integrity":"sha512-GS6dmWyyXlms1ZkLu5RQMPuJiXm5eB1gu8/ghsCAMuWkhXqoz2N94riw8khr4jTCbJ05Phmwpnz62lMDUo3Vmw==","signatures":[{"sig":"MEQCIE5wAHzhf38ckkp4IXzJYBVetwtdp2oSXnRYVkFIGVegAiAS4SjRX947bD822wzJQ9M0VGrSkDoqMziA7qgaPgKRAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0L5CRA9TVsSAnZWagAAvN4P/3XslpEGHaNIHd0UzEMk\nG9aUWpEYHvCFqzR486DfhWYagxZNxcKIXHHN/2ILGjpMVjFcXPaWuVooszRz\noDkhb42XP/48ASDLYHrxAANUVqzTLsTnDl1xVcd9Bb/cEDZi5vJ6AEeTnAO+\nnhknjBNwu3W2X8qbBGaL7d7byL3Mcbu+GHm6EjQU4z13UgJvzkGHkjr3suq8\nO2iX8yAKfbpJaRvccRcC1USH5DqHk6Xuq0C5fR4rwa8nUsSTiVUa/meWSI+E\nwxIPAuov5h2pcqHFOGpwomSWRc2pBlpQ8p/o/zfK19fFHyD6A6H8CM5pbhZ1\nmAX6Mekjehw3vETrELYT1SWUWYgl5YH4LtPfHM2rt32xK3SqYcDKgCqqroTZ\nLhXvsKtVrKUJJn5JnBfTLGue27tDY/GxUpxuxmZ3j4zaNkyubq/jVsdqWpS2\nFjJZjq8nlGWvHeCwgDG4dgo5BrjF6TT+D4H+Lp9lca22MlJ81exchWOwLs20\nXJHK7F5V+XyXrTpPRZLKnxt6LRJ/5yut1UT197Q+HY8egYOzqRL2OSgQBLaQ\nG5ZuZEEmu4Mgs9v0Q8/EmtY8nRXBWAi2nKEtbZOHmKW+xl+8Zy4G3itINqHf\ntuDIuhqjl0vTN0FUEymMnRS6POVyozyE6ybVsvfjo5pVeoFVZAKwsLgREyNf\nhW+5\r\n=dIH7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.181486643.0","@material/shape":"5.0.0-canary.181486643.0","@material/theme":"5.0.0-canary.181486643.0","@material/ripple":"5.0.0-canary.181486643.0","@material/animation":"5.0.0-canary.181486643.0","@material/elevation":"5.0.0-canary.181486643.0","@material/typography":"5.0.0-canary.181486643.0","@material/touch-target":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.181486643.0_1580417785137_0.38103245543494624","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/fab","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3f50a25cdbbc8cc90be2bb83b5b2763432d113c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.3a85313ac.0.tgz","fileCount":17,"integrity":"sha512-iCghqZ5dWFYXV5MZJvHuUEQT6cJMi7UnB33PP0OHkWOnRhlm5hoo4jRpVq1HGRmPc1NgkhNua+jZuN+7k/Zv7w==","signatures":[{"sig":"MEQCIDJI2Huu19oP0cG6C/uBRpyADWYDFWdjidH7G996VLf0AiAGzr62qoz5ue/COd9M8woqR2tYgnjIhxofzXAZI+zcLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFR+CRA9TVsSAnZWagAAcacP/1BqxDsXRuSUo+M3d9qF\nDRtWk0MMRFvTkZ9cCiVmUYSzfrF5neK4ZgrG705FkES+ynx0/IqZMo0HD4De\n0EyRGFNj/4TP5dqXv11kOk+lyEmIgJJV5SjXnA8Pyc4etKR1nvbVnxRJWX2A\n9cZ6s4jQmltDVl3l/nmZpTYAFRzoowPKnZdqJtgEfu+Vl1tLAznI84vvBt0m\nPwlasGAG6mezGjoH1JV3qui7MTla5L1oiq49Zqu3kzQ/mqbIqystci1DQYfH\nN5vblZ7ZZnrOzrD42z2/FIUBRQU0rDZbhNri8L/YFhWlrta3xGJKTn7x46yw\nlK61uDM29ZPmSSM/BK9ttCkdozmoDkC1qxKovm1oBsbJWgE0SPUBN9ftdd0j\nRdgoIsojkmzqaLeTfb7kDuIGPkL+BBIFlX6MFM6j3+UZjuBW+2j/8YmurCEb\nn6YLzTH5yb/wCwOtyaP5sx5+Hy38lCaR2/Vb4VPXT3XUO80aj3ahzx9yekuS\ncNjfBrU0HIoBb+JkppvXDZvrDb7Pdgq6cBZq0M/woB6AcimeKCX5jdKjnjjh\nIj3eAzLO2auXwAUNJR4ROEbZ3YpYOB4LceI4BLTocyO+sdSb7lEL+5LcZhX/\nQnqLNTzQr3HAiMAQfA031890X1qcmEhRbTK06su8YYSvVl1RgIZROCt9yzpd\nfTdM\r\n=TUdk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.3a85313ac.0","@material/shape":"5.0.0-canary.3a85313ac.0","@material/theme":"5.0.0-canary.3a85313ac.0","@material/ripple":"5.0.0-canary.3a85313ac.0","@material/animation":"5.0.0-canary.3a85313ac.0","@material/elevation":"5.0.0-canary.3a85313ac.0","@material/typography":"5.0.0-canary.3a85313ac.0","@material/touch-target":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.3a85313ac.0_1580487806279_0.28701884840032443","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/fab","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"477c62985bc0103e1e711f4e6b7bcb8caab56a18","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.b6c7f624b.0.tgz","fileCount":17,"integrity":"sha512-lla5zwotliO+R/Kk9OnMY/iC7RVcJPGnxCulWvI5nGScUYdhIR2R5ym0elZLcd3VtN5M+O/cTy0HZ0sgvyJhig==","signatures":[{"sig":"MEYCIQD/LMjxltQd6YUPKVarheGZK1ENupl5KrSmGBVEm4XnigIhANh98RfUa+cX9FGzbBtTTCX9rSKOtg1UbtgjGrSyRmad","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF3UCRA9TVsSAnZWagAA8dQP/1DXrpkA0W+Bzfg2HlmC\n80N4pYBLpyG0UI+WC2hgy9EbLgjmITJvOwiO2LrPW2reZRbWuh4u5sujvKjV\nN8HvcWj5u+AYvsn2oDMBTkM2Vr17ni5661XwUtM9SmkLdNQg/iu3ueO+wa+r\nmd3lMgP5794E8W0was4Lvm2PEKvPSTb/4fSl6OoCnrXSHMzwXkRCfnTGlKDy\nv6UiGAKpzYbQS+KFQtWlXEU3MbPsDwNYvlYgR2oKrxwgMhyMn62FBjZ1THVb\n9xPTIDMKQBz8k9LpbJWZ0W3cJYejQgZf5BdCGyWdY8OlWnw+Ul880COjSm7/\nYXkMCRIQA/FY56U0uxd0aTfOL6yAHJEIXXJ8SSum5WeherED7I5Qt0G8gJGI\nZzjCCRaH35yBm2C2rHlthvKC11M4CWxULKTQQDnj8mNTAuz80LLL1a7Q3HEp\nMDqlDIw1ph1e3kYHkMO86J19oSa28g3c+4sbHMgCXcGRBAScifJEncSg92vb\nxIpSbLo2uyt0foqwGceoJRwLK2kB8OsYbcWFa/awcNJXFZECLl7u+eB3UVks\nkHuYtOR+Dj56s7ZL1XnDD//ly54nH3wthxg3ASeH9k5o7jctAHEsjNSSyYw1\naJyFLDu+UjJI2T7RZX8i2pLI03Ed4B13yiolk7Q+8RzHx0NubK5TZ0ouudTO\nNetS\r\n=NhO9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.b6c7f624b.0","@material/shape":"5.0.0-canary.b6c7f624b.0","@material/theme":"5.0.0-canary.b6c7f624b.0","@material/ripple":"5.0.0-canary.b6c7f624b.0","@material/animation":"5.0.0-canary.b6c7f624b.0","@material/elevation":"5.0.0-canary.b6c7f624b.0","@material/typography":"5.0.0-canary.b6c7f624b.0","@material/touch-target":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.b6c7f624b.0_1580490195538_0.1417684615416117","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/fab","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80e513b9de8f1067e93e74f92b1cf63c743611fc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.b3f70ebde.0.tgz","fileCount":17,"integrity":"sha512-GTcW+q4UGCSfqktM2XF0+ThElHRHWPG5mGyyjPxd2LN9jyTkv1+kS5gIbuMqOARZiJtvCkkg+rjrS8A0+1h0rw==","signatures":[{"sig":"MEUCIQC4w2GnDpc6Is3EeJp7xmM7GeIDN3516VUeUu1Unu916gIgRrJ+faTm5iQGOpYtUKcjsqSixL343/2RpvujTc9xL0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNIm0CRA9TVsSAnZWagAA2XgP/jYaojWenmgkaUFHRlc5\nTnpXn9L1sTEZw3IJUwSz0lhCp+lHXkbWx19Mzp3UEF1wrpMtRAUz65d/NAvt\nIApdCMNyLSpTM+XlbeHo7Hc7tYg73gUJwUWIs+WDIk0jYQbmsDfb8TJ2h/mO\nOHD9LNgGzsNP0V4RH36MNkVuC/zYsXzdIXJJMAJKu1/Xka3Dtm6LcAU/Bkq4\ng5oel7jS71Cgvh5CwJHV1o/j/L5xPlIwCIw6W7Sx6XOIoyvADv8PtgGn4l5D\nRWn5BeaxtO68t3meV6GBHFkStTQeS4uKbK12RaWmjc8YlsslBunBJ8HqjXnv\nkhc5rURUJHAEpwCnbHi/Tvaees2/qCl6qKAROTXNN1ecJzRsxOGVfo5+c5rt\nCnbha5CjSqvxX8XUd3J2wrM/s7QAiR0oVduLPjwNtgs3DVHYzW5g/OT7m6oe\n592sCjkni+BxhjnVCOmqiy9/kxidArzCKkThaSVwqSd3/JJ2udYo1kiPy8TK\ny6GfQhCAdQCx6/qmVjDFgeB7qbnJfBsgjzGbT24UqCJ0ktm3OrdiUb2Ao8N8\nP4QtJQHdj5IjqwfGSG9F5nG+5uwQi4wfcVmM3Q3Xfxew4Pt9kmdVEs0VBR7G\n9BGckMUVY04tPL63N7KZ9b7hZ845XYxLcxKqd8fAGAiSfkEQwHyrZO4h0XKI\nLV6t\r\n=vlxu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.b3f70ebde.0","@material/shape":"5.0.0-canary.b3f70ebde.0","@material/theme":"5.0.0-canary.b3f70ebde.0","@material/ripple":"5.0.0-canary.b3f70ebde.0","@material/animation":"5.0.0-canary.b3f70ebde.0","@material/elevation":"5.0.0-canary.b3f70ebde.0","@material/typography":"5.0.0-canary.b3f70ebde.0","@material/touch-target":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.b3f70ebde.0_1580501427877_0.6441024949640979","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/fab","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3844fede8486ae23edb6929b41a26a7abdb99366","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.3e782d8f8.0.tgz","fileCount":17,"integrity":"sha512-k8vGHoapQSztDBEDjLO0bvgT0sekSfKGFK3wijQNd8FxgWYJ7v9ptjp6FYNg30OIfa3lo/Gk+hpHakZHwFt9Vg==","signatures":[{"sig":"MEUCIQDPCW4FrhpItjbY8MixXszTfQLciUH8H/4iyKRV3ULCcwIgFBExgRV4NS1aPB9T2CLtMptj08pkJmt7w9bLoVwynCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiIUCRA9TVsSAnZWagAA2VIP/2tq9W0k7RfYgcyXG58W\nbyMhW9AbCHQseCCME4i36sk6Q+17WPKZjt6re0c/6lsegLD9v2infxf8pnvI\nr8ZRGCTxckC/8MsV0IAStdQKwUoiqjX7a0Vqb4xtqiF11kMdylyV8XVcdNOn\nxdMc+bK/16kfVhodzkZkejdWYyG0P4rx7R3SQb/AM0xwdNCAxE/ACS2VraEw\nfa3P6+GIH8ESAkSoCeET54wEXrBPWFDG4oP4QBb33hgO2qaHz3gePcChIJmg\naMsH6a44j28pcs5eo4XrCvNzYDHy1ALwtGFxQnp9MFq+mOYg/HSzQXLxwYbg\n/0c/4mfchl8/8w6KCZGNwnCyqLhU0FnhWGIPziv8pfkIzf+aAnoVUScNEEAg\nMfgg1A5hkMARMdDCAmwFjqE9CdTenSv3GSfGeqaCRS8NBWc32CaYG+sQyw+D\nJjWHGF8OeD4fsb/EQymBG3gQaD/hny7eJVbHbMyvMjYbmlmeCgnSbY2Xd7Rh\ngKz6OsB/IqqNPWrhjF2aHmYgvHxCyRuP10036KZ3UUS9UnQh61+x34WCbZl7\nWkKwMMzQ8d6eMhadlB9/pO8ZrLsUUzWKIb/OOyeFehnoLIzRqqNnTLQ8rb1F\nsQTLV2+PUlhmrtArGew/44kebClwTy6c+sjucHgvUB9IKgAQMHwH9aijTUms\nY8yo\r\n=8TgW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.3e782d8f8.0","@material/shape":"5.0.0-canary.3e782d8f8.0","@material/theme":"5.0.0-canary.3e782d8f8.0","@material/ripple":"5.0.0-canary.3e782d8f8.0","@material/animation":"5.0.0-canary.3e782d8f8.0","@material/elevation":"5.0.0-canary.3e782d8f8.0","@material/typography":"5.0.0-canary.3e782d8f8.0","@material/touch-target":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.3e782d8f8.0_1580605972070_0.13173864916515265","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/fab","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.535398572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb0660c76067fb429cdf912f9de5df0bdd027dda","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.535398572.0.tgz","fileCount":17,"integrity":"sha512-l4N9gYE+EPy4e4T0Q8iQDYDR8sCQnbwUCOnD4iuZXXPO4EX314yp53IJjEH7JhvI1N9l18MkZ+PsTWJQu0OnQQ==","signatures":[{"sig":"MEUCIHdPicgUGVJusz8E5h0pubzViXMLmO/bG085y7R4lGEqAiEAk0aKsXPg/mGhOM7oxIZ1VcXNRgKJ5xANY/2qwb6x1bk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGKjCRA9TVsSAnZWagAAdtMP/A13ub2+DrwTieDloMbV\nXQmSieh3YhG+d2o71yB6rXy5B6UUffAe1sords+zIZEJqryp9djrP/GYfB89\nzbejg+lwe0Qpo0WgruqMrJMN+TFb8b7B6Zl0t8GAvfXn6CzhZOoWJ2PPT+lP\nIhlrtI6Mvpu30ZPQSpc/6GGYfAUDdkkUsYdbc4IuHLbdYrWNNSqJqZK/CUmH\n/dMTmlrCheac+bZ7cCxFQKLVvrmi+nawoahXyacHvKv9RcsghacKV3Vi1SFz\nLI2/dGjr2gjK1+ThzajldkQFG85svY6SChBXqpIf2DFt98oMt3gjofd9AzSi\nfLA48if1tB4+1YhBAs4JHWFIQk8Bt0FNQKVNfqeKJOKOGVYEa8htgPP3Q/dy\nrlbK7s3qqE/Czksw4RFn2eQ4N2GSGVn3aO89FEhURiAZjImfJ/NGfdTkGndu\nNY1z1k+GFF5z22cxE92IAOBMTVrVFArPGUaf9WV/qhvIPAzpCIYwX90h9Fkg\nsse7h6whnWYJs6iCNg+ErtBQkKqBspgdTcoi3hb4bccJOjFFWQBAqBs4Rqf5\nkzloZERlhUKSZXefkU+WU2rE46gu3uAkF3OUfWiH0EifjH2wffQVA33d8nq9\nw8KF8AfrGxDclzNgkTbUcsMQOUFwAtnGV/lAMkDoZds02Ft9NJJblqkgmb+2\nXvRw\r\n=tN9D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.535398572.0","@material/shape":"5.0.0-canary.535398572.0","@material/theme":"5.0.0-canary.535398572.0","@material/ripple":"5.0.0-canary.535398572.0","@material/animation":"5.0.0-canary.535398572.0","@material/elevation":"5.0.0-canary.535398572.0","@material/typography":"5.0.0-canary.535398572.0","@material/touch-target":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.535398572.0_1580753570835_0.3070650299325002","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/fab","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2672965ba974f54542198144035b78ead9431fb9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.5ff33802c.0.tgz","fileCount":17,"integrity":"sha512-8PhDfXydkGrgq+9enaSvjX/AEFFhJLrnYIlZnIfA6XqIb5ANfMmV4/Lbd0VfmXIXlW7UBRKbpJcClYw+8FRKkQ==","signatures":[{"sig":"MEYCIQD9h+zXnbIhNx5BXhTB1lxO1++/9YLR/Fzb6dqYz0stMAIhANzVhKofAbwO9oD2YGJm4xMrBrMocUjTURZwQEH9u7LF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObIRCRA9TVsSAnZWagAAR1IQAI/wnpK/WUJJeuWN3FuJ\nXF8SY8sbbH04pI6pQ0ZLxVRsypvdfmShmFloh20EdX7YpVqbVRvKaksR/lVv\nG+SB6kTE1toJ9n1prz9u3UmD5jLKDY5BPOljhYbOcNHC+pPk9bdC50/v7i4S\nKilDP7owTVcCeRlBGHUl0VB8ehvB8emaHy6JzzA4IkFpcHitVcVKpic1j/Lp\n/IKPyEEEYBNH7HEO9aoyHQKD+xI+9g0XTgaArXL2wmLnCLtHWSJBegMm8s4y\nS4DtclcQ8rRsvIvQ5zaFJ92J0+v7gWsahFCYaB486zdozFWjk8BhAm58dm01\nm+rxxI4atoB+J3m2426nk6/TjspDKu9UuATDbTI2jp5Yeg/ipGPIFXhrieOI\n2qQJD/SO8ubPiKRRIuEUicw4qLhhX+Zn6DK2dqipVZKvo/bpgt9YWTCn53xH\nza5ggj3Coa9uwaOiU+M9KPmdhRfUF/lS8EBep56wB/t6FaMHNZlUR9yOM9kB\nJ1LZ1zVWEloLKVUdTe8M0M0SmeY+DXRNmLVV+p8kCQ6n/39uk0us32AstVa/\nSvk9c6esNn5hzzmLkXAu2IfeKiiSRJ2a6v8ei0WmXFuQBiSSCIETBHvjqVTK\n/Hz0ED7cgq0tC+NywVCoRkoq11ungHxnOmIpHw79pPYl4SDgSrD26KvqL1b/\nAdM0\r\n=cPO3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.5ff33802c.0","@material/shape":"5.0.0-canary.5ff33802c.0","@material/theme":"5.0.0-canary.5ff33802c.0","@material/ripple":"5.0.0-canary.5ff33802c.0","@material/animation":"5.0.0-canary.5ff33802c.0","@material/elevation":"5.0.0-canary.5ff33802c.0","@material/typography":"5.0.0-canary.5ff33802c.0","@material/touch-target":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.5ff33802c.0_1580839440853_0.16282835958460584","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/fab","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b7e148a79cf4c47bdaade5323e3bf253f48d722","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.1eb29491c.0.tgz","fileCount":17,"integrity":"sha512-EOP+QTkgvvmbZMfjfr89kfKohNpzjKwN08cQlc5WMxSz7KMVO1dKXJW2WtT4+Eq9xTBPYa93FiROjE9Mk2xuaQ==","signatures":[{"sig":"MEUCIQCBv2uPy4vfLaQvlppoCIhgjiRKXyZIT5AkLs2VLupHJgIgRsSktK2uphvfqILCDysAChGkJ3V6fIJzyIYfUs2PtdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOduCCRA9TVsSAnZWagAA6w4QAKBjpn0MT3srnS/YZzT4\n65DH+jdj6CTgUCcYTeHV3jqAqzPhTBlrpUFAL1ysdkc1+ViZsxsLYoqLB9LA\nRlemyJ2XydLm3C/WiZz00aiiFj2zP1Iw+jDyYynkE5vIn/m3r5dgd5pJM7bs\nLJQtWc6Z/eacFgUZoketk9nJezxvQuBgGniuhODEHXABKMAqnzN2BjP3MKfG\n6hMLMIB7FDcqH8bZKIzhUcY9PIIxSgSxFwvrqIgHu1baYX8tpgDab5PYnW/h\niZnMhbzXB8BdNrz75TVxlYkLyh28c+4HG0dcYbfOOGHjBuNN5DO6cFkMBuRD\nxVbOtelFbpT6JfUz/e7B5nBYIHO4AUj2xTyviCyZt5zmg2Sju80xCmdrl0Oz\nkdStNbpL9SSVsgeQ5AXKfQlw+OnIHRyZY+qXsWR27YRVfb4LNPGuUdoTZLX1\nM0T3iptbbx1byjzyuwmMx6RXu4T3MZroRWYTKdqPj3CHXTF46O9VrZ4zYwjj\neTvE4v9KM+zKxKf8IhEeLu+dG2rQKi7Dhv+aLl2Ck0R3JCzE7yEEFowMmc6p\nwsuyOudjHLS3DhS73pf7lm4waGDhoy42LlyvKTmf4uLgh8bLG4YcRygkVnpJ\n4SpfsTdmxIuXw1tvxnFaEpvlBGj0sq5M6XqNJJhjJd1j8KEpU9WJTL1Cki2n\nyI+z\r\n=bRid\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.1eb29491c.0","@material/shape":"5.0.0-canary.1eb29491c.0","@material/theme":"5.0.0-canary.1eb29491c.0","@material/ripple":"5.0.0-canary.1eb29491c.0","@material/animation":"5.0.0-canary.1eb29491c.0","@material/elevation":"5.0.0-canary.1eb29491c.0","@material/typography":"5.0.0-canary.1eb29491c.0","@material/touch-target":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.1eb29491c.0_1580850049820_0.6780872906013646","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/fab","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a245f1e6f936d9904932999b15a82ffdc27043c2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.4c7154b26.0.tgz","fileCount":17,"integrity":"sha512-j4AaZcKNO94OnW6oKmjYSWI6ihFDkeg4TPyo+10UzOrmxqwdaVGhx6FXyAGZzEDRzgZREH1rqVISQG2Agpv+Iw==","signatures":[{"sig":"MEUCIGcerRz8rf8YbYXW8Kf6+aGaxExvq2be+dixBudAbAtKAiEAv8U95xLKy28i3F9JiF8Y8BDySbQg3PbA+UerCvBCfmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOudlCRA9TVsSAnZWagAAKukP/3Fg4oKlx5UGarxUPnr9\nXs5Gfx1WMItGHYFbTehyirD5MFJ/vQDEldbRXhmZb4aqmjYYRhlB7vEpUMpk\nimlZl67zJHiMqWI7zb3hfaBucTBAixfLIFXDcfN57eV2zurvbhZj01k9YGXL\nVrlUUdLCxiMZKOmUbKVm1ZQW5xMfM6KNl5IXxsyPZ/N3ngxXSPwfe7vMTt4H\n3OP/gI8OOnedu7dREDaS/Cr/nbv8F2EeSQAqz1R6aaXx7/9j6ILJ6t0YI/ct\nzmZmOidXO1wotodK+O+5FMmalsV7V8xuOHBmBRyVXBqa1KK+STCLQys9pJRy\nwu4Xqlq4Upf5r5JI7LaTXyUAGrO1p69OYZ51uCboWPA74hzgnDwCiTGbreLE\nSMJE/EH6fxaKBnzRyMrpOM96ICjFYknh0EfS5mrDfciLU0hQ5WkfTOhp8hR8\ncx5+nPdXzKVL8W7abWz96zHaGGHMQqB2P0+nFogx2MszENwah5WwYO+GZiOY\nq+ucEJ2Je4sDASdXeyusSIDbcE8HxTKUDW95vXXUgsAhHbC6E9Fw62lcVjmx\nOFxz57mQ4FNAVKQuWgZfHnA/0JjrzrU/jGcY9pLZ+P3RMVFD5AViEtaNN/dE\nxdZn2E3D21T7k4su9ko+7/TC32fJvf4MNwSm3yXgrXZFssZBTbL2NxPQGMBY\nLFut\r\n=H1Q1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.4c7154b26.0","@material/shape":"5.0.0-canary.4c7154b26.0","@material/theme":"5.0.0-canary.4c7154b26.0","@material/ripple":"5.0.0-canary.4c7154b26.0","@material/animation":"5.0.0-canary.4c7154b26.0","@material/elevation":"5.0.0-canary.4c7154b26.0","@material/typography":"5.0.0-canary.4c7154b26.0","@material/touch-target":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.4c7154b26.0_1580918628851_0.7791513411109177","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/fab","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b9b9bab90133f3c8e4d8474f3657bce05a0f8f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":17,"integrity":"sha512-psvIIxPe9S3aAKiN4M/I37AK3ZEOsf+ywinn8NttWY4kOiiBew4oEDT1LGSzXAsBnOS6rmujOKiI4q8bXMzjpw==","signatures":[{"sig":"MEUCIQCspzJqGJkzMWL0wRfHnfAyKaFc3C0L2B7m9Kf2ZymJBgIgcEneVIND9GXL2TezbL2TG+PwRS4I/EZjP7flCmdjJhY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1DECRA9TVsSAnZWagAAIrMP/2p0yMtweZ+Pb8hd1awa\nI61e+PWA18pFmdhoYC48/60syAFRY/PuoIAFiC9H8p9i0d5mnXDp2Xw6n4R1\nviJDDctR/I7vTQtdDzFCypv9OrKarbkxAP/lPdgQXUz/DC3dg14rfdrIarJM\nWgw9IF5emcKnH5mPplRG7C58xt6hTUmkEaGrCH1DJhRTqe4GzFDHGy1rCOqt\nUhJQ0rSZOOHD3PoStIq9LwrdoRNJq2v6IJUXfuUoiholBKUOBDwFz+3hctQ7\n6rFeOch0+u4Q6wwo7Ek6xvY5Ak9LvZnl+KOLtE0xjjabAyd+5n7Adj3HpiY4\nb00uofwDz99wwdXP4slKLCSOLurtRxKeo0tiyjfkzX8PY5It9lSe1M0AWkgr\nvwSxdSbWkk4HZhPC38sPkx2STGxLERxy2IKrCajjuif6Gs1YcjzpbsNXJrW9\nkkMPg+utZzKiQ6owx854CPMcI+K99veZTWugOlN979t03S6wEH+hOhj2siSU\ncjyH0jMxrIjvBDYZzzHdzkpoowCllmo3kPoZQ1rILUNeMdDY1n84lvnkAw+m\nmSspYgR3vEw9kUaWCL84h2KShxA+S4PA3qihooV2EX7tR9AUo2z1HH8k0d6a\nzbjViOyPh5OVzpDAe8E5Cyt9d5kc1z3VdZPGT9NDBYeQktQmhJOjnjBeDAts\nho04\r\n=78sN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.ab5f49a2c.0","@material/shape":"5.0.0-canary.ab5f49a2c.0","@material/theme":"5.0.0-canary.ab5f49a2c.0","@material/ripple":"5.0.0-canary.ab5f49a2c.0","@material/animation":"5.0.0-canary.ab5f49a2c.0","@material/elevation":"5.0.0-canary.ab5f49a2c.0","@material/typography":"5.0.0-canary.ab5f49a2c.0","@material/touch-target":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.ab5f49a2c.0_1580945604322_0.37633812427952695","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/fab","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe637a298dd17156f49e8ce0b52bc8c9ce9d75a0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.c541ebe15.0.tgz","fileCount":17,"integrity":"sha512-bwbxfb5xG1Ls4sg6/c9tgkF97rjaIxszNkuK52Qi+TLcosEFwEAtZfucc8c6YSTIiZwnvT3NuxF3+lWyx6AjJg==","signatures":[{"sig":"MEUCICFpt6nKOqBm3qA6hnhjd28s6Q4lQOFJjLCw/7lKDhzgAiEA9XEpr/6bpCe6403lI6K2a/3fhzFZtz93xpUUC8bIHQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJNrCRA9TVsSAnZWagAAZbgP/0cxn+sb5xbCXShye/hG\n1ng21afV8yo+VLA7sbjg+UFIuu860jrcIArC2YK2vLTWqPYwG2eU+498JRqj\niJ/he6wG3LOet06cQfp1P9Jcnl/UOaqgdholUjZLhkGNfTVkvxCF7TBv/YaI\nQV6Pm6DVxEtReZ9qx1IPrASgiPeNR2E4JPfBEy44KO72RCXZxj4gBTYopnIe\nHrGjfAUL/AtuxHY1K2JXMFet8kM1ULvqS+dJVgqO3qxu0z8iZmpQPIb0JpWs\nlEkdyvDuBB7JB6JA6mHFsp/w2fsPSpuRIiNkJgqomnrafKde8YQSuTGuwCyb\nYivgqrj6m5q4kqFQx+FhSbMk858Y4F/yuwSk4CQ2y2nE692NUGtrJ+cv6YqY\nrG9a/WAz1fi0pjpB7wuxstmAM58XKisio9laoakcHuoc8LxJEHH8m55fJbiS\nYKCmGfvBsKBbRwBy87HpoyTw6G7/tpmAnOSVYR0ff9P8jV6X3RYiKYPC7ziK\nk++1tcaQ3w/hIn8TWdXKAUsIgXjTx/kjkOgrJTkUo1Ha3Eu3cpxsrmkxsfyr\nQjV4jAjOaDZy5SP87k7IIdCCeL7GPXiIKGx68uYDiUP3mErKADtqRy0Ca2BB\ntZaMJtRHOjT4qR46WrmBgUC1MxQ5lPHWMSn38yYJp02FGFVVBzE0o4C+GEwW\n2Kvr\r\n=sIqr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@import \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.c541ebe15.0","@material/shape":"5.0.0-canary.c541ebe15.0","@material/theme":"5.0.0-canary.c541ebe15.0","@material/ripple":"5.0.0-canary.c541ebe15.0","@material/animation":"5.0.0-canary.c541ebe15.0","@material/elevation":"5.0.0-canary.c541ebe15.0","@material/typography":"5.0.0-canary.c541ebe15.0","@material/touch-target":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.c541ebe15.0_1581028203361_0.025545624187536475","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/fab","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb32d0e966be9f4c25fd844aec692904a5645b98","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.98f7faa05.0.tgz","fileCount":17,"integrity":"sha512-er3twMNCUKZV2MWuOsq+t+iphWcXb2NKYK5032d5QEiUHbDaTpL3uUW0AxPYRztPdb9uxnrD/F+1ZH4sHO+yTg==","signatures":[{"sig":"MEUCIQC5XYfcVeQWeVcRtPtLzolJ67c1ctTq6Lyw5l3x39dlZAIgXEgr3VHKbxUTR3qUvaeVhDn1dECvG3RH5VxCBTvyXdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbi4CRA9TVsSAnZWagAAAcUP/2i29hpdAUNL/dzRd0ux\n3tE79EILqbW9pDzvZnOIbCJpXy2uyxfvtqwFFZL1GpF/Gjv+Im5OgpzbxJP0\nBrZKDRC435aIEqg3j/jvbrM8bUUK6pfAmas6elb+u7Be26LBMWQBOpbpkejy\nF+hV7m0pdE1iHY7/cOwuU6cz1DnKLKXPcsIsbdgVsdOdgLpPfGHK9oi8xTtk\njB4OvRrq84luEEDh/sL/gxlDPYqGT8DBzCaL/xIPMag2A7jpO/y4j+23OEVs\n6dVr0uGSX0wNRZY6iSN3S7H2GRpZZtA2qW6aS3B7hpNilKD8p0CDdPSIuS+A\nkSFve/F9FhvFxZJ0Ke49tiS8v/KvbB8Gr0YXb8azsvnAA9lohowonRZ0WhMA\n7bCz8rEjz0ZdtnDxVXEyk22a48R6SdCrO1+4FRZ1ryQM/qMYiY1fCRKEIWtQ\nMUB71VsCdFE0JsfzStBRZlX87fVmAJU+PaUAzQcpOhDiYrl94YiV43NJbISu\ndc1hsiAXgtU+MPygCvtjYGzVhnwUDhdKDClS+xL8wdC3n/0XADTLQ08sQNEV\nBAFlXfDF+oA718I0xPNdIbP235FhfRmAnWBOePfOcItIllwx46F9GSNMDhbL\nznIL99jYZKUBjXoxof5TOTUgSqcHiRyaQqaE3d84qRnVLT/zXGFeoay2k9dG\nH985\r\n=Vemx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.98f7faa05.0","@material/shape":"5.0.0-canary.98f7faa05.0","@material/theme":"5.0.0-canary.98f7faa05.0","@material/ripple":"5.0.0-canary.98f7faa05.0","@material/animation":"5.0.0-canary.98f7faa05.0","@material/elevation":"5.0.0-canary.98f7faa05.0","@material/typography":"5.0.0-canary.98f7faa05.0","@material/touch-target":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.98f7faa05.0_1581103288117_0.05651819131118363","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/fab","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcdf3dfda26b97a1f617b5fe5ca9515615861965","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.b4727e43a.0.tgz","fileCount":17,"integrity":"sha512-Tp5vClVq55g79WO6R2ZXXFqglOMcQ5RiqfJajFQ72qkpM++y5ms/8bpHClTzLHB5WTCcfPBBNEseyU9UAW96CQ==","signatures":[{"sig":"MEUCIEmFe0j/6RiKP1vYrNTH6j+f8d+7nEZH46nV7q601WHiAiEApPuvIEkPEbRNv/OCEajyPOJRgXAAzAcgbaiQxmBDWx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcC8CRA9TVsSAnZWagAAdigQAIr7/LrjMfqf0dmUUb+C\nwC5651lskGkIBb5KOPG244d9MdzR4Nf8Ii1rPwhOX4Si3uC6CLtpwhdnJSsm\n/TwYjF0m95J2tZ0nN67tUXrZNBuG2y6VxZbzKpp24euQ1aaf3h6cmoNrhOt4\nDXQ7LQF3Xrt8wrjJjnYCjIyeBHAAwhfZ8mgHFLGu9S21oTgyrqy6w4fbO1EE\n0QtEzrSdi6VF2S4Kb4vjQOwwYm5l8ZRO9Ju5yduZg4TvK3XWtnJ3VxDOG3I2\nJaU1JlX9E6dvv/x+koOcMZw8fiuODRgCvcq1tiDz3W0lm6MghxbZJaq+y+II\n7LPIIkhScfImdMx25rr2iq1Wxkvt9Z66MLFbXNEnf4eu0rlXH4YhsltcBfNF\nvY00ZX5m8AIiaJRsuCy3WwGbmmp/3h5D6YUmO7H5h+FxBJnolfPlWLMnYzid\nv8jrKHNkOTl0KXrHtyFObmw7P04RpkZd7ozZyaHzVLSIamhmHGAEY5yYayYn\nVlaVexl8MyQkL2O9kam6y6oowaPD4tX6F36LwuUf+nfwVVv7jJ2a2PAlZB+5\nLRYOKwDxPvN2ckLZd9qkSpRUyiK2toLroFDTPO2zZ84X/LKC2f536bbHCkK2\nEFghGX/dEYl9kwQkFbl2y7xFsVYY2NJzfWk0ylTFoD6Ny1P0ldDv2HRQK2Ca\n8qrM\r\n=9A5V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.b4727e43a.0","@material/shape":"5.0.0-canary.b4727e43a.0","@material/theme":"5.0.0-canary.b4727e43a.0","@material/ripple":"5.0.0-canary.b4727e43a.0","@material/animation":"5.0.0-canary.b4727e43a.0","@material/elevation":"5.0.0-canary.b4727e43a.0","@material/typography":"5.0.0-canary.b4727e43a.0","@material/touch-target":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.b4727e43a.0_1581105340113_0.23031673266225394","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/fab","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4e6821afa4c68702895cbe5214a01b0eb258d8d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.91d9d5a65.0.tgz","fileCount":17,"integrity":"sha512-l8QQszwNMLfiVY0KE5no6dzz3CokIdJ30alWgJ2n5ENaTZve9Pa4dTZu5Bm5yYipJO8qmEBwxIIRugY8nYRmjw==","signatures":[{"sig":"MEYCIQC8wX9BK15amwk3kMcAx34ymG9VWax1b95VFMGSCtXCAAIhAMBWxk4lywIYWYTkA6ieAcn9t6zTjbFYZIjirXGrfUCB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePevZCRA9TVsSAnZWagAAWYoP/1xcPXTMWjFDgKxspZ1k\nBQoxhNiN+lpOqxXtyEV5lfOcNmsqNEtN14rra2e2EtEDVj/F3G3NqUG1P0Ru\nz+EXNOLnhVlPQYqwxM77gorvJZAHMWcFePxEc27Q73ENG3Y52pW5qaVvTvHz\nFqvJAnM66bbk/5tBqT88aXEp9uuwJOhxZUFUBLruH5FdFOyR/msavA5TOyq6\nyC222EexVdi3JpkZ3jpQKZ335yj3La9mZ6ZdWJEhXAiY0VamfEqhxnJ5+8l8\ne2etB4RoC1hFC9Z/K0y7rLJMNxXDs0+4JwzrKRkpPik+cU2n8Il18QaO+Ql7\n+Rmv0pAokNDcueUiAGemRVlv3d+91Dam+KELKU9raWzTM6I/r8MnwJHcRWu2\nufflGBiglp9TAsIaHQrFr75PiMCDKPhS4Wr9t3Q32XHxm7m4bgrskdXe4LqW\nOR8XVsq6Vp9FeMlxt4heBhQd+hwRpI80io4O8n/KaEU4zb9XmnZTHBSBmm2Q\nnAN4loj6kOLS2vvMFv+yZT6ra1/GAEl4QLUGCsHYFio400D0cs6fpprDA79m\n9k8icHJJtFJb2ozJrndMGgci5wqQLOVWU4TUFpXYqlsgdHu5s1OuoPyY6qys\nzunUsoNOTeK8EvhRQhNkyN+C49fkM6H9Ba46zIkOYA9qvStFeGX183RwcCWO\nPS9u\r\n=XrsJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.91d9d5a65.0","@material/shape":"5.0.0-canary.91d9d5a65.0","@material/theme":"5.0.0-canary.91d9d5a65.0","@material/ripple":"5.0.0-canary.91d9d5a65.0","@material/animation":"5.0.0-canary.91d9d5a65.0","@material/elevation":"5.0.0-canary.91d9d5a65.0","@material/typography":"5.0.0-canary.91d9d5a65.0","@material/touch-target":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.91d9d5a65.0_1581116377067_0.6954466159011299","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/fab","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec77f7a991bb607c76afdf0594e3f54a580e6263","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.d5c006ed1.0.tgz","fileCount":17,"integrity":"sha512-/zmKhYeQ7JxQ1PCDwI6Lq/wceTYFIT0RIAa0vyibAEUFJ7l/JWcSOv/gdtx91Ebi7F+85OH41exEeOq8ePAVJQ==","signatures":[{"sig":"MEYCIQCU8KZfA4XksbdnPT2biKgNG9h0bx2KsvaeAV11ggtqMQIhAMP9sUib4bYUqtr2Heb+ZPHc9YF+gmOrTmIjeF8Q+f4E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYl6CRA9TVsSAnZWagAApVUP/1p+KSu/DpgKeJrb0iy2\nhWeub/uUWfNn4AxdZUqDGQPLLJfwLCdU2e5HHJqK5EqtR74N8iwtonJzbaPg\nFYgCba0S3XGT0xwdHE/BK9Wgs6EcCk1Yvc9Y6Aws+bFT3/1u0kwrv3p3HP2f\nF5hZpP8DQ4m7kbHj+NAqFpMI73y4v5sVBD+WF46gJR7l/A6oWT4AeXzJXfzo\nKRfUGxVDOpgEIw0J3pasFm4Cpd/QfFNprHeZJ7K9Z93coIf7sXjiQMDDbmIB\nb23KrORrQoK5uxaCmkESO4foZgmm5fDMxepy4mioxbI2EgDeRbGZnq2p7oY9\nNYAtlVwTwP4lMoDWVdfVQtwh9nB7HKstkmo0ywV9FrN07sN43CIEQkrFun9G\nhUPz70tImjPxAFq5lrFyP1CKv42LDfyFzwQ5Q4m7serTaSiYTny8lpd2gDz1\n5sBzVEx06imo1fd0j9KiU2gv+KMFxf+LHL/Xjbjlxn256BADPWKZg4rJBXd6\n0kx6j8k2dRypeqk+r4clyeho50az7P86nOxTSGCooT2xYOQ421pkm/7pXFYR\nnUHhhQC1xlJv1zUfr3L3ZBoWhv3uuKp2XdCTWa5wT9XuUhcvTMQ7jD+8n7hq\nRKpDYR1AF0ZrhfF9wzsXVXTQCtD+BgzojqXlYsWdHk4YZRDzUSmkNBgU5QLl\nehXx\r\n=vqcR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.d5c006ed1.0","@material/shape":"5.0.0-canary.d5c006ed1.0","@material/theme":"5.0.0-canary.d5c006ed1.0","@material/ripple":"5.0.0-canary.d5c006ed1.0","@material/animation":"5.0.0-canary.d5c006ed1.0","@material/elevation":"5.0.0-canary.d5c006ed1.0","@material/typography":"5.0.0-canary.d5c006ed1.0","@material/touch-target":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.d5c006ed1.0_1581353337599_0.6443661816524922","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/fab","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.559f1a570.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06b5dd66c768af04b3dd392141624df8505aa9a0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.559f1a570.0.tgz","fileCount":17,"integrity":"sha512-cKf0GbTHHaKiJCszGgB9UqKzP0KmhDAvgiTLSAK3zuOYGS+7wrdPz5IIEUUmyyDjr+RsiBVBICQGUdor9DHGnA==","signatures":[{"sig":"MEUCIAZ9ypV41DuBq8RLq44psMwrQ8R+HlZsWej43uvxZVXCAiEA6kUnbLtwKefvYqB2AT2JmmUFF9hgHgeXrXYxHgYSZYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZH7CRA9TVsSAnZWagAAmtYP/0RP1zqzA01us3e+fUkg\n2dJGwkiNwTw0v43/8V9i0o8/gf/L2OBBe9LHylxm+gehaEjqTZ4VqrDbfQZt\n8EBCFTLJP4AezJt3Wcbb9qj0wYW6tyB1+Vw6MqSCdaKhu6lnfF8vc9Z/Ou8d\nqIg9cXU7d3lg4ccXdfi3j9T2vKslQKjnOmUi5edoeqYvBkZ/a7XF0NeE1cV6\nEZ7eJZ/io4tEzQWHweaCGND3mPrqjoBWYbGrW0zEHWWLnYqXKhZMjuiXfpd7\nBV5bTsVVNYt9w4KraLPpP8oqPh65nnqP/24OlrL5ijKz2WOLxViOtyBlXhpA\nBL8DLRm/KGdGJWQgKbd3NDrGxQ/UxlzYvuqFisIGaNEJh2VHezkggUF8Bmik\n3swxU4Y6nAE3B0UC0nePwXCCeg8Xe8F0I7rtSNQ4y0A9/HI7yqAQ+due3ZVN\n3PNQeJxHBxg6FB3gx4r+2HtSUQA3jEJTbN0D+Kq4Z8ElAcjHYhD2/ImRKPAM\nJksHLBvfTPRkUcHPsY4+dEU/KtPmJVHIg2RxOuhOE7l6mIglgAu3iUjYuJmN\nHAIesK8NYg8pkd6BtXCOySbQ/arywsY46D4wlu+lsiUGNKACNQP1Xub8LYqk\nTJQjR6rv8VeMXP075R2rbZTpJw6PYN1t8qa2HnXu363jy4IghVWIZosS50mb\nEufZ\r\n=UEL1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.559f1a570.0","@material/shape":"5.0.0-canary.559f1a570.0","@material/theme":"5.0.0-canary.559f1a570.0","@material/ripple":"5.0.0-canary.559f1a570.0","@material/animation":"5.0.0-canary.559f1a570.0","@material/elevation":"5.0.0-canary.559f1a570.0","@material/typography":"5.0.0-canary.559f1a570.0","@material/touch-target":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.559f1a570.0_1581355514994_0.34815390303824234","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/fab","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9a1c4e5226b9a441b6fc8d55fe08921d2277e34","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.ad3bbf782.0.tgz","fileCount":17,"integrity":"sha512-JJv9sIXiyudw2zHRAePVJ34Djt8Y44CmQBBJRt+m18VGqEqdWv0cQCsrYDrGO91tOr3odbZ8KBkcy0aFEsxoGg==","signatures":[{"sig":"MEQCID5wu4m+5X+M6gBp0+/ICzGMVdffPoiltY45Tj8huQ31AiATMhfFWgZzRxoEs+lgqxcFy3TNuq1aMSTRosFf79xp5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQar1CRA9TVsSAnZWagAAaDgP/RSTYXu6d4goZsIWNxH7\nxrGCKFuvjcNIIAHqMiiWXr4voaXXanU+5FFQSiv0qUopUdCTcLcKZPyKwHs/\nxpYjjZABLu9ac6LnPIjntYDZCWE2tfwbsK1fuEd2GBDmhW3dqgL3SgKBedFZ\nr4gGpAvck1ZgR+MblaJMvseMZ39gHOsnk6P2nhr7wCwwPrdZYElGotBkGQUz\naqDL9WwA8JNkYbrayLTYYs/zBA5K3xGU+Dhtso27bLKf2TckUpg9c4ZGo/6J\nQgaMlsg8YwQdFeZxzq3jdGWNq+0K63sfV3ZYMxaeIdJ8CIobCc4cgTbiJ+PN\nguhjfhX/FpFMycXcmdXWbImWoWTd5GVaMG9llg1L9xQ2PgJEaNIxrtxXQmLy\nWrs6UfS6/AJgMt5364Q6cOHNSL6BefUair8Ns7n67WpF9L+EzZg2HsV2FICO\nrXE970FK0goc7iF8EUCvhHS1eGfpefk6g7yH2+tYYVyXSUUzQQGTbfrW5Pby\nQQPDO135QgKZrxzSvDZMvbyBTEss3u8mQmNlopC1F8ZkuRIbgdxOYpLfu1ha\nHLJrmghImAXrFSkBRNek+3IozPm52ludrdDtrJnhNRQnH1VMWC0QkwjmKd7O\nrG780GTv2BInGib8HJ6l25SgjQ0PBngReV5D+Laez3PYLxMQkeoAjtaPU1yA\nIoOZ\r\n=xno6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.ad3bbf782.0","@material/shape":"5.0.0-canary.ad3bbf782.0","@material/theme":"5.0.0-canary.ad3bbf782.0","@material/ripple":"5.0.0-canary.ad3bbf782.0","@material/animation":"5.0.0-canary.ad3bbf782.0","@material/elevation":"5.0.0-canary.ad3bbf782.0","@material/typography":"5.0.0-canary.ad3bbf782.0","@material/touch-target":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.ad3bbf782.0_1581361908787_0.629101449322178","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/fab","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbf71824b6b32277887ed069d8c4b7e158b4f11f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.570d8e49c.0.tgz","fileCount":17,"integrity":"sha512-wiSiAnvNljdmQ2DZrb3cR7OF753x0H7NY1JzxnF3kz8ZJ7d3lNo3JQaN15aBaY8VAryWg5TWs4nzVANeDYgkuQ==","signatures":[{"sig":"MEUCIHZMFkqR30d83q5xGNyi1wsSlf9sXsf0cM6XsSvOW+hYAiEA+Q94INLUhnxcw+rjAT/+VrFEw5U46ydeRgXRncoJCKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcB4CRA9TVsSAnZWagAAml8QAIEGnLwBmKBmRTO3zVN/\nOWKKsHkQHwgltmYfBhPukW6/4mLXlfAWW84xGI0C8Wg9MZzStFG3q1DkF+4d\nv7KN3CN3fXOWPg+/Q+0hcVxbuZnL/vrGHXzH274tYN5fbmaTtB5w/tHBcrI/\n3LuWVvrEqd+pEWJAjXq/xXJLBy5GP73n/LhKoj1xqNdvEG3FHcpedgmxiaI4\nMwpA9vO2SGVqX5SEYIJUI5yJ3ItMNurXviE3sHdA+AMgssDHF0BdkN6N12QI\nGhI8Hvv/qQ+JPHSJqXqNABcE2MLj1QkfZosp50LdLYb4f/6wXQr5M5uxgIDN\n9dgbXVTcR9SqiTB3pK1A+sdI06iiyUK3OfZyGuiqDGLPM/5I+iifACHQtwlQ\nwHINRZRPB5BBrVdn3QcA+zTCLTIO2gQtIE8jP2IS/cNEoj+CzyRQ5jF/cvnX\nrql3C7M1o2ZyIV3tmsj1MEpgIHegzR3a50sopW68qjtzOP2F4pWUznfqrEDO\nyb5do7b/k/EnUM7oSv97q03G79FpZEqRKPIz6dw6Km3ipHasO48PYRCX2EBE\nnsk8usDKHNPHKn98tA5zMGwWPf5yhlrFm/D1vEnclyJDZH+c+3OtFxfsOY7Q\nL9whlalw40itPVPfiCPfnuT0jzN9OKqzeImwBXh2oua8IAyeYf2yYxm52BwY\nSuJ3\r\n=Kc4m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.570d8e49c.0","@material/shape":"5.0.0-canary.570d8e49c.0","@material/theme":"5.0.0-canary.570d8e49c.0","@material/ripple":"5.0.0-canary.570d8e49c.0","@material/animation":"5.0.0-canary.570d8e49c.0","@material/elevation":"5.0.0-canary.570d8e49c.0","@material/typography":"5.0.0-canary.570d8e49c.0","@material/touch-target":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.570d8e49c.0_1581367416168_0.8491439340454354","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/fab","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4820a68f489547124d8a629fd8c1dcd595b212d5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.48b06b89a.0.tgz","fileCount":17,"integrity":"sha512-dGlrETCXyguHB6EGziLwWJKfUgBwtPu97w6lyRfKGpdf1Kv/6vsirJMakYBs9avGqHJCIWrGEzCd+C+heQSCmg==","signatures":[{"sig":"MEQCIHnTwZwqb72ZsgBg1BMP0pddzaBFm32XdWOTB0fHEKFaAiA+FnqOJ8dmNeBAx7p9lQkI+4NSK3KA99mOhQgi0HctxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvXLCRA9TVsSAnZWagAAkqYP/RSw/v9u4XvTh2dt5I8s\n8iGrP9jbrg+/8zhcHIEuG7gkL8cX53aVSdortCbiEfdInxoVuLIHfeox4wZz\n5R5Gl5TiDGCR2cGokNAuRgRGV2ccv5oU+7g89BGbGfODkmNoR/5NB7NlInlB\nuza2LIdHUewKHCW7l7S+M/4vg0RHCAAwyjjTdCKXqrL1VtPxqHsR2CkSyTgD\nGOZmBeeXyBUzpGhYGqYYrMyw1vpnDtEXzm4gFYWIPOxLpj9qriLyhQajaLn6\n0T5QcbvAojOKG2GXWv7jeCiazCs3zSFjUV5M8jsK8SJU0vCzC9dkIdkvNfYD\n4iZUoa+bSzYmfxwH1xUh6nLcOrMbMvAuv38vsYBi06tdALW+M8PP1/MMerG7\nHCiFazGDNvCDmDlsVMbGddGRJ1wPAbt5UGldx6w5AukgsHD8gTV2hPSibhVK\nLXUg3HZY/fxpZlxvmmERyYoVjBQqlr7jOPSkJ7OKpJkn3SN452TewIHN2MX5\n855FYDBixnLh6qaZmSgxRoR4WI46KH/hQhKBL6G1OfIWD3mWom9ZhFkwEz/S\nEiKilhoJJhXIxuTPCCzOyZSUmahfhbVv9m8gNXyJBCAwvbMW4H7uOV7vUsaJ\nxgnhIXC3pQUgGkMorzvPW0fENUozS7kHOee9yJ/3yurVpNtSenqi63a+9IyC\nHXgh\r\n=hlIp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.48b06b89a.0","@material/shape":"5.0.0-canary.48b06b89a.0","@material/theme":"5.0.0-canary.48b06b89a.0","@material/ripple":"5.0.0-canary.48b06b89a.0","@material/animation":"5.0.0-canary.48b06b89a.0","@material/elevation":"5.0.0-canary.48b06b89a.0","@material/typography":"5.0.0-canary.48b06b89a.0","@material/touch-target":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.48b06b89a.0_1581446603358_0.6329920918933254","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/fab","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14d7fd70a361284b89f07f0306bc71336ef3cc93","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":17,"integrity":"sha512-5O1hXZnumiaZgFledPLKRrqyO3L+mOclxKe3I7c7WCn3wuByBI9/KTQQ4k5EGFuubWv1Jr82spdCQwx+8r1dyQ==","signatures":[{"sig":"MEUCIQCeZPV0Aa5KinTZwOiWLPKfq2m9UkY4i7QoZ/jcqBo0kAIgORy7T+JwMO69kRLD0lv0Ylyj/Hx/h344DsMPHSK7o/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7ycCRA9TVsSAnZWagAAIyoQAJxB1bQq0cabMPMDmMK3\nw6g1m4RDwnqfp6tLAusok4pdUPBH8GvlChNIWgFkIJgH69WYEjuqWMW4Hakd\n/cj/Wmg+cM5+P05QhXwjwHzWBAUK7ajLnp19cq6vIydoduY/PfgZHq9yLpfA\nXf89K0pH9DzQH89jXFMxP0rzH/EAR4JGvc35D2zMEvm9e3x2e5PGMH90OG/Z\nARaFQKWw9UM2zRvavHSx9GxRKDPf8vbFQVx4h7jF/9RoqRTVRpS2WPNOiVjj\ndkq1CXltmB9EG2RfgaHM6k+hTg/BekwjXlbaQbj0cRKmyBtPEBxitVLrjoAh\nH+khem2GlUw3pqwE/fzrFRzshgWc6DPCNR9GDluj6lGGN5WX8g9CnQSRukvW\nBvnCwD51m1VHe9aGWnHJ6+Rowej3RHpKiYNO0cXFrCSchsELjPQKxZq5EbTI\nf0wBXgsyVML91L/DmZzwS/KciApC8AtJD6gNeIES4TDOCXghIF9/UmcRVj2J\nthP/YeTvYlXUktjkfcIJr5QqUmgZ2iMKPvfp/CuU3PqeBCcba7kdWVUth4q/\nDYaLVfcD2LD7HLI1sFS2Obkt7kqOvMmLkwRu7mZZx0VaqSRezshQ9pv30ANf\nOpM7ru6iIbTYvb9nhFeNdItuMgpsMpQaxE9t9Bc+9wUOLg4QqKqUL+nZY+CD\n58dM\r\n=+lg4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.8c11ea2a3.0","@material/shape":"5.0.0-canary.8c11ea2a3.0","@material/theme":"5.0.0-canary.8c11ea2a3.0","@material/ripple":"5.0.0-canary.8c11ea2a3.0","@material/animation":"5.0.0-canary.8c11ea2a3.0","@material/elevation":"5.0.0-canary.8c11ea2a3.0","@material/typography":"5.0.0-canary.8c11ea2a3.0","@material/touch-target":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.8c11ea2a3.0_1581497500447_0.41580166301825616","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/fab","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62221578e7208da49fbb2d5893dde48bba0a3a75","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.b2f3d311e.0.tgz","fileCount":17,"integrity":"sha512-Qb1ZJDC8mXSti14EU1Y38N1FtRCc8rWkLM7HH4i88AdYFq5/0WsMf0WFIyha1HGHzP6CWvqSWoWb7MvEovXNWQ==","signatures":[{"sig":"MEQCICRuFEN2ept39TV2qqlWpa2yuayftq59Dq9/CV7VPjSTAiA+cXC3OFE3lpjfjkU+aPBZwyKxDv+mqhR+mKQLTSUPUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcMwCRA9TVsSAnZWagAAnDQP/3nNvyxjInVPSeyhYQ8M\n4Fh3a6ilx24lHqZkk4Ch6lY47OQAkcrCsn7LIshQVM0r8mqv1OfJ/VyA/VSy\nTYa6O2iSVVNicA12do4r55/jU5V30DZPjtuP+20/TejX44VfxEnSHRYtnH4h\nA22SfkDMONH0dglZLQOddwO3BOJZXi311Lo1Emp1E+Ca+/cmdBlNfvfQlpcK\nF/VRh/ci25X6TVfBrsQTsmdAcL8lN771SkjZ71IznlqSYGCQV0plhN8N6Aqo\nrd9+OSkfkVeCPY//LwU+S2vwL6562Nl/Hsjob2fl7v3sQTbbdyBi4dsHxt3u\nHvYc+k6bqY4d/i8K5ID3FXj+kUpVOT16P66khLoFA1ESyAoI6QgXR4+8w0AO\nGQQIwRrSVHoZRsEtQZE0UltRmB9sJ0xM/Waj7pAgJVC6uulojXR+QTMCMtFT\nY9grKb/IQXC99qE32K3bR0eBdiasxjHt7LRkWHrvYj7hw7G8AiXCbBgR4eNU\n30PfWYL17oVzvWGY7PYUEJQzWX/KScVe4NcTKN5lP6+owbqj2K6FyPlD+8kQ\nx7s6xxrDord7ijs9ylpTl0O46tgdbs/iM7pwB+CSAT0HLgg4M9MD4JmiZw4n\n8oVQDtFlU9L6oGqY5sp6rRPZ4a3yFDH61v3+B6Pnki0u8ZfcFxO+GXM8E4NJ\niHC/\r\n=6NQA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.b2f3d311e.0","@material/shape":"5.0.0-canary.b2f3d311e.0","@material/theme":"5.0.0-canary.b2f3d311e.0","@material/ripple":"5.0.0-canary.b2f3d311e.0","@material/animation":"5.0.0-canary.b2f3d311e.0","@material/elevation":"5.0.0-canary.b2f3d311e.0","@material/typography":"5.0.0-canary.b2f3d311e.0","@material/touch-target":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.b2f3d311e.0_1581630256492_0.753239735813906","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/fab","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e3b162b07f3dc9e06b5866bb8c2ce245989b7e2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0-canary.4f488d0ee.0.tgz","fileCount":17,"integrity":"sha512-jzQceDgmA6I39H/xozXhMnicTkMmgdmBDCjeu5aCtIgzrznE19zdPrc5A+MpIPqWCpq4JxaaX7k2ZCfPSHizhw==","signatures":[{"sig":"MEUCIGjtBCFFqDk6+BDYfJLAaKd1sxtAIT+GQK0larPfu3ymAiEA6JumeGFSMSrd2xG+5n9rR2q1WIL/3I3MOQA8rz0EiFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdZwCRA9TVsSAnZWagAAuyMP/jjMR3qEZF/dSCWeEGpR\nhOEeP7INYF8oHFxpzW1ykImbgk5wppiieBKPi2EIfU2AgiB2jw6GqChZj7yb\nMeQeTM3Q7J601slY8cBtyqCzZ8ZRqGjjjMIvtP/34oCCYZ6bFduHh/+3XpKT\nXGxhkOpMy+pzWTjGloes4IlLG4orNlikn9hXJ8qFdcNZThELhYYJBG/vq2iw\nDR13hMfAvoKlnbyDJ8Eqx0kwAYwOBNaicWD0QIvfIvMbyIo0Uqgx6nEMGBhN\n4dsjWvRK2fHkeitQFjsJpdPlhJmMZSXSdOmKygFPHJFW/YxqMw+BOuJlEZ67\nnPCoLLrHocBUUQh9ApW5lx7YSJiQ7sezG6mRTmjwM6tIucEqswOK+0H1TqUl\nqxXN/ToW65oriMAMejkAZXoDqXHjJu+BWgsonj8B9MBP7iq7nITjQCdgnT3w\nZKjqCjVEj6qnfzBW+9/T7rtzKmR9haxjMbWpqrReeL69CAT2UJ8h3rHNl4kx\nC7SRrvu12j5/M0qwa1aWU605MGIB300ud6mh5YiAPnpChSXsotzN1PRgx6Qb\nzJDD1D4K5IYct5LhVK73gipmyjQ71E4GTVTOdZ2AGXgluLKgTjCww2ELE73b\n2FymmmJCONBrb43MB/4TMtgloPZpm0QNtVeiYHAopdbBnc5NdESMbsIQTf56\nNxYS\r\n=JhJC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.4f488d0ee.0","@material/shape":"5.0.0-canary.4f488d0ee.0","@material/theme":"5.0.0-canary.4f488d0ee.0","@material/ripple":"5.0.0-canary.4f488d0ee.0","@material/animation":"5.0.0-canary.4f488d0ee.0","@material/elevation":"5.0.0-canary.4f488d0ee.0","@material/typography":"5.0.0-canary.4f488d0ee.0","@material/touch-target":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0-canary.4f488d0ee.0_1581635183855_0.49214007810230753","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/fab","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a36ee44f153665d4986ed8a3807ac9c8144ca12","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.fe79de07d.0.tgz","fileCount":17,"integrity":"sha512-ZdULrKOzypycXEivHEqmBp8+C0HNA7swU0ckfdVicnGqvtkSLtP4OV9ZwZo61JNyTKTYHfWAOBjQko+/56zHgw==","signatures":[{"sig":"MEUCIBo7k29bJ5qKn00g5t8AD//WRVpU7woMmdQ6JQdIu0bvAiEAjZUz+aa8oVc7a/EZEJBqXspqkI4NuGAUGSBrk8LV3CQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdqHCRA9TVsSAnZWagAA0b4P/3zD22nWNbUVVxf7MUP9\nA7/b0W2P0mjvCiv6dWEWrvshNXZ/j4kHa6dcUplnLX0Uk9aRNy7GutNivSoL\n6o3sWPmXWPkZxqJb1PkbSU3QFOw0pkqOFaMrFjoCMoNjwdIPXIeHXHcNTwjn\nP5n+6Gg0eono3g+0Dzm4m9X6nBGKx0XBVihTmE5Ex53+hCeMQMJQdAqt1EVM\nw2Z0xIt85kQcu/bb7o/MqVkXcPuU9QEA93SDBOcpExKCEUpn4+kZmTLccq7t\nljqCLK7KOJmXoV2vv6AjNB5hGnl5eQt5H82SsLwnO4iXo0F9DiEmsqq8veI7\na9YuIhJ0ojCgNtcLfIEWTs/ys4HEa0sCddr26fLGKxtHHLsOgh7EMnLkGBpY\nix0MmEidGb/AOZuechv1FaZ/M8NgVDiaU/hl6Vn/Uety93xulDFhL3hVPgSl\nWz3FzyxnI47zJpRGDMj2w0WBK2ospDmryzkpUIlK7x4ud3TCt2vVHgNh/O0Q\nOaQVCeYvvZ917uzHQDbd1Ey6TV8ygpvgu+AIHiGnc8Qi35WtuiXpIXEv794x\ncCKzDnzZHiyEmk+/1frGhsUP0Iu5SWF3JNw7JabYWmoX/AuK1JPyerHWz+RL\nODrwtWc9z+Et1FqdHtPSpFYuFeOmV6rXr0mRi4dDJsfe1B4I3rHo8rp2JtgX\n59NX\r\n=izRR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.fe79de07d.0","@material/shape":"6.0.0-canary.fe79de07d.0","@material/theme":"6.0.0-canary.fe79de07d.0","@material/ripple":"6.0.0-canary.fe79de07d.0","@material/animation":"6.0.0-canary.fe79de07d.0","@material/elevation":"6.0.0-canary.fe79de07d.0","@material/typography":"6.0.0-canary.fe79de07d.0","@material/touch-target":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.fe79de07d.0_1581636231243_0.08342440555764563","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/fab","version":"5.0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b21801e07b5ec055a33a641d17786d8d468614b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.0.0.tgz","fileCount":16,"integrity":"sha512-4bRTTgYTRA1AINetsM6DPdTrOabA/MP1n0HgmyoNQ2koujVEZxpP5Aj/40tcJ0NdvsEAX8IlLZgfaeIpfxl0Lw==","signatures":[{"sig":"MEQCIEe9zQuisrjaPjgpKcU+WSdzZ06e+uuqxhhk/vUUoVxtAiAS50ukHS7F6l7kO6TJ9CdqPRf2AHAfGZSspDz995HBJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":195640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReUiCRA9TVsSAnZWagAAeOQP/RTiLDc9Zlz5RE/tB3pO\nHP64b9mXa5pp+vAuFcRYV0XSldOCcmHhfp41ylqZ7IFvxGlCf4GhhxipTMtq\nUNk++5m/fGb1oDr/tG/4oLz6IkHBsA9UnEnpXi2fl8n+vMC1hnPM/2zb9nVa\n23E8HsKjYfo2DOCvbmQNZNMHHbp/9+KI+sZwOsbkTMz9NNyDXLA9AjOcdhdX\nz9ZXeM+pcK67/fXgNwJL1NCy9HTFFDSbHSriQaexnvGZkCTJDARE5SsYxmpZ\nEn899+3UGFsRxsLRrTyAsFzmv3wTk2OT2kYdFrMNEHNR4oyJcw9Y1FhBSpk5\nmYeVeiVRRKLJCbR10lizp849WeKxSEdtRPdtcCRsaPTrPkZuPFz9feMyiV6M\n5kK9135AvkPtp5thqPb4+KByzWd145eibNMYWiWN+sc8rImEglcd5YQA9/hO\ncTqFuxzMWIl7RVSwH+mT7JxlKQq39Pz2+NwCUnoB8TAIMn93nlRklFLRrKsP\ngjvkhULZtUvg8RumDEQd+C4yhMVynR5uQhz6ooKo2A9B2UYPt+BraK+DP/Xj\nxRwRAHzOmCytCQfaY8yVK4B4cOx5iDdRKSgNWPc/+aZO0ipEaG8wt1GSAHfH\nNLhg+oEcTGTbXrUNFcC9dGW0MAShgVMlzh3hZCs98cZvQvIgCeLxm3FCKhC4\ns8pr\r\n=B9V1\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"^5.0.0","@material/shape":"^5.0.0","@material/theme":"^5.0.0","@material/ripple":"^5.0.0","@material/animation":"^5.0.0","@material/elevation":"^5.0.0","@material/typography":"^5.0.0","@material/touch-target":"^5.0.0","@material/feature-targeting":"^5.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_5.0.0_1581638946353_0.8391569253574345","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/fab","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8796154ecfa5094d62457322db81e0d769eea7a3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.5e313b1f2.0.tgz","fileCount":17,"integrity":"sha512-Wh0BvO0bt01xArRi/30o39gEx6f6vStqqMLTkGajbV0VxNb41ej/8oXHN4Lr5D1kWVw0kz8LXH/ijPNR+QF6GQ==","signatures":[{"sig":"MEYCIQDbZeeL4h9vAVt/hAYyNTgRsQPhsdaaHYeM81UUjHJWYAIhAKK4GF7QNspI+MzH/pOxgI6VQofGe12/8xAS+LMkKyCj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":196192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzHGCRA9TVsSAnZWagAAb24P/jpuN5pBMIGG/u7tRy4h\nIAGkY8pGgK2xvh2shNRM71m0D5xHPndhkk4BFGCI3TqbHjZc9ZF6fqND9bpF\noobK90JzTV7uXEfyxOmX6PGXUs5g89L8gtDLMYyA9OOUWDLnsaNIuxltDH+t\naB55sP1iQjsvjTH0RbgBQULNO9UW/RyrPraxZ1r5jU6BPw+JvzLL0kZI1jpG\nDJSRwfR+PDwRIqAmjGC3Uhy+d1WtsaA8j4QXqVD4TbAwa3VY0u9EE8En+L71\nSAjNdrg+GlofXejdomKdIh9bql4+8M1EcsVzqeozHk9ytuI4X68K6E/MP3+G\n5QB1X4KJGIwXo/JKAOSWZgIi+Y2zTp7KZhmhnxM2qTCgT5PPSiNtJA3du7NF\n9vpesuEXmGJwrYgUgT+75Cq8PrDRsLZWdHsBScf8GMWY0iDsQByWVSkL2OT5\ny5MWbl46lJyFEHmhTnnPhjh8+sVAQfz0MPDfVTIN/KMTcITsNqr5Jrcl75fN\nUft4ZJWMRkrgmGnAH3Z6qxGYFzHEECdGJJfhI7UBvwr7hO11xF5JDULP1g1N\nLQd/DrpL8Vziaid8BCI9mdl1dQoQuD5suCSqudIMZNbIGlLSdBpFZtnPzM1V\n5ds/WBMfrWZKe37GZOEWLhC/ze9V/inpN0zpP6qXGkBVsbA5y8TfTp1ECMUS\n0/PR\r\n=bDu7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.5e313b1f2.0","@material/shape":"6.0.0-canary.5e313b1f2.0","@material/theme":"6.0.0-canary.5e313b1f2.0","@material/ripple":"6.0.0-canary.5e313b1f2.0","@material/animation":"6.0.0-canary.5e313b1f2.0","@material/elevation":"6.0.0-canary.5e313b1f2.0","@material/typography":"6.0.0-canary.5e313b1f2.0","@material/touch-target":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.5e313b1f2.0_1581724102286_0.7613447905555455","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/fab","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78961f6f67d00688bcbeffbb1c58aaf5aa0c59c5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.6a56f387c.0.tgz","fileCount":17,"integrity":"sha512-vZkLtKE2ZP2QGbU52sGJAYgbDHbyAfI8vWtiS/ShaVD2QF30Q4cskKdHixn5K1hvdpF/CiEBO0pC6IDILqXxyw==","signatures":[{"sig":"MEUCIQCSKfPJtbCTKOSaj69p32j6FNB/6Yv9DEfhbfl7iw0CfwIgF9cU3K/A0fgO3U7KbSa9Cn7YMdgdDOF2f886MY4M1o0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD56CRA9TVsSAnZWagAAoRAP/AorIKX4N501jNiDffGj\nkjlqIy2o6SF0iuYMHIKNXQOtritESZErECa03afIt1yVceFuJbrrMxlXPrLZ\nOf1k1zRhNErvAjfeQPh0EJ7osbGRkyrAyElCknWpsWj9ne25ExqNmoxiHhYx\nDqF7C24b7x3BvXSZgKQXYGTWVRU9Xz7q+KL0cvhiL02WnvDNmUl+MGggGlnL\n/ealTW2G0WqUhwK0Lk7/qptDbrxCO4f+WQDouhfrv0vUAVLx4poBnrqqpbkc\nNCHoNViCIrFgohwrvrDtq/engyO1UaIayX4DyTexv+aOEMGc6cbz5uft6RKW\npjxs9VEeIJJMHagOImDaoqC0Pgi8W1JCxAcjudeSWnqeYpeEkt09rve+Arox\npuzFJ5DMysomAJQZizHGYBi7AODe4UP6+jOCswvA0t/AfqxweTTtnqK/ShM6\nKbzuonzuzabsnEH/y5CX84VzB0qJkHzsKVddBHUHsDOUCpor0OGxNDf3M+C3\n51ru699u/h+37ME+k3lPmleT6sJ+tM2moshzO9AeAjbEqjJdx8cPt9f6WUYT\n5m/eyamfpJ+x5+KQy/tpJOrwIweDR4o74JUi9ERQMZtgZ205OPxs4fmF3lbj\n5ByWQbPBEzCR8HY8InjQGa5EbZ0G4BKlZEOxuMNrjOBlHHfqO+WEc93bbevn\nbTVo\r\n=CDRQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.6a56f387c.0","@material/shape":"6.0.0-canary.6a56f387c.0","@material/theme":"6.0.0-canary.6a56f387c.0","@material/ripple":"6.0.0-canary.6a56f387c.0","@material/animation":"6.0.0-canary.6a56f387c.0","@material/elevation":"6.0.0-canary.6a56f387c.0","@material/typography":"6.0.0-canary.6a56f387c.0","@material/touch-target":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.6a56f387c.0_1582055033651_0.3693052871351159","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/fab","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37c85c4bce8f7cdc3ece238d693189000e996e42","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.bdfd52632.0.tgz","fileCount":17,"integrity":"sha512-RpCeI1ooRcyOqJI2a/axTr8ponKCxo9HbUrrl+ihU5ws+OrtkO+6WhEgK8Ukijjh2knnIcEtx/xzxUGPgdpWDw==","signatures":[{"sig":"MEUCIEaXZzPvgPpRy3a8D7vHrKZUzMpTTYD8suzKzFP3P1SaAiEAhrBJ/VRxpWODQ7rI4fX3/T4sfaBSBA5NasH8k+SMQPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZkVCRA9TVsSAnZWagAAAPEP/0pegmaNWNYcd09wC6ef\nbOVHGzL38h/0v6X8G9B8/V0SCzTmlbaMa5h514nFuHohwlg9EnUfT82od1x9\nYkWSWxZlk0rV5eQvs7NPmbhKZt4E2uzs6808H7ZtW5n22LDVBoSt2Fzlxa+B\ntqQGGNSbjETKSfDEvKYLOuZvUhMl76xGdvpBpuMh8I30xO6tb8noUcBNFwqd\noJAmriFM1pZcxWK2Ac2+JjPIpXoYDtV545t7h2JHZknsC22bzBgcPenP7nMM\nmsafKCKt342OBIDmvDm0jW0D7aFdNr6OVjXo4OWyqRNIWlM/66CxogFr/f1s\nbKL21dDTOWnYJ9eYppAw9x2U4GEJ3Ox/CkgHDzFQ6XMm87O47nxVl8mJSWL5\nN7Y5U7b1V2XwwF22KStuJhTCbA5U55SvJaj3ZUXFp7bGtFUB/bvvsKG91lAB\nq50uXYO4DreioXLQRFqD3HGnWrEri87Y7+lAbxBlOHUUlYXBLvE15g6OEvEc\n4eUHskM/pbrcu6ly3zYzILtV2e8J994Td4vYcv8+hR9fhJot3IBgK1niegJS\n1nJnXq/i4J4tnidYG9rms9Y6AzY8YA/0MJAgyrFPhV8cn4zCw8yrdhG7BxbJ\ncfW5nBu2y3+4ZRsmSxsi0lQis/a/yPtUHOemFAFcg+1gNncY+Yh3fsex46ic\n88Qm\r\n=PvjR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.bdfd52632.0","@material/shape":"6.0.0-canary.bdfd52632.0","@material/theme":"6.0.0-canary.bdfd52632.0","@material/ripple":"6.0.0-canary.bdfd52632.0","@material/animation":"6.0.0-canary.bdfd52632.0","@material/elevation":"6.0.0-canary.bdfd52632.0","@material/typography":"6.0.0-canary.bdfd52632.0","@material/touch-target":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.bdfd52632.0_1582143764899_0.18912835126074845","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/fab","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9297b09377e814187028115ed87491a010498c14","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.ad2e4376a.0.tgz","fileCount":17,"integrity":"sha512-dX4DJKw0BWZLWDDOn1qIdV1EHQO9XW0/fBZZJA4jcMfrlpKfc62KVEC7TQ284fQ65W/BwX0GOm7WPDYblsH0mQ==","signatures":[{"sig":"MEYCIQC8D59me9Nu+/gkJ9X8G1gvh+YD4ZYgGQcbufi/zvg+jQIhAIObPoJfJkWb81JM7608i8dMoVhLq9QcNaB8Ifjy0TB+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxNECRA9TVsSAnZWagAAlZIP/23uQudZmlQnELCHozVh\neUeG7xv9bi338LL/leytpzLWFHfF29SO/2pBGs8vYwXZS/MU28dHCu44pQ5f\nNo4kt1GWqXb6QwgGd4N5oR9L+r7LP+j2U+yZchqzfHQYqF6d706atSuZ5U24\nVmirg69NpR55ay7by1ZAZn7O66JGzWp5G3siLbq6kUbe1HTlvW1qAgS6zJpR\n04mVZocL63UiMSJe3KkZfSvWtj/X5k1nzaXXgTbRaaWupmvIaQO+yxiEUDDx\nAMNCqOY0OfyJg4nAprrJww8UxwNhJtAbKR+TMSAlZRaGgAKJr4TjUozUSgD5\nHYRuG9ra5p2NCqp4h24s5cFt1xOY9h43zAKF2jCSPcFf6xrL+Y2vSNLCLxzF\n9gxIyoOZekqpVZSDKKPHiZHlez+gloooRU1WqtJQj0pCyFsJ73kqhYP+3s0t\nBpEyalNj9+/tzqHv6HwWhLDioJ5zvS13ZcsUL288JBs0iT1pjAGNmKQ4YKgm\nxJ+VeHSIBiK9QYEyWznWQuB4x+wr5pWUs8GJHcpN11KeS7xVrdu28HLccvAr\ncLc0KAzTK3EyUDfxh3pr5qV7uhMJbn4SZekSRzGBadj+J3hB1JtiG2hFNYVZ\nNOZAmKIw61hK+aWufYt9upC2yXIQHv+6K9clEIbcO1A/KcA1jPDkMyCxMqUH\n6BC+\r\n=yys+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.ad2e4376a.0","@material/shape":"6.0.0-canary.ad2e4376a.0","@material/theme":"6.0.0-canary.ad2e4376a.0","@material/ripple":"6.0.0-canary.ad2e4376a.0","@material/animation":"6.0.0-canary.ad2e4376a.0","@material/elevation":"6.0.0-canary.ad2e4376a.0","@material/typography":"6.0.0-canary.ad2e4376a.0","@material/touch-target":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.ad2e4376a.0_1582240579523_0.36724236553111034","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/fab","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.765caef18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32fb328a7e5c20a1f0d58954d151cbc0ff3e59bb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.765caef18.0.tgz","fileCount":17,"integrity":"sha512-mjjIiZvGg6lXw3O47mLE3K5bdLMHQCdhLv/snyKV4IqTn+M4oiJLC30cNLuiMhGKoO+3OXcwzkd519VEYyZ/7w==","signatures":[{"sig":"MEUCIQCde25t0qiCESiuIBHtjND4PAwVR51AO9dSLsuAOJ5y9gIgMelms+hqDkc1piVAt7kilUZ8j7mYbnoRgmLwXNKd4YQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBRgCRA9TVsSAnZWagAAyLYP/3sPYTRPESmD7g03KtSO\nmr8h8+QkYkOdZp+uL2GJp+cI57jbTGBGhgkxvJ+LXRu4HhrNBmgH8LH1dYTq\nSyraXvZM1j8qXmGPB9lmB6Ubqhb1kQMD7c+fkcupztZLDc/kC8pqrhDDDx28\nNRllF3Ht/QgrxTPmTszZ7uWIecX0ZQBd3+sPmgS+Byi22DmeJVsnqRCwYNZc\nn6UKRKHEhohdQN9TUFFerqyYiLoAc5GZisP4HY1tfjPxBG5ZG77rdjGL3few\n7lEwkx934GWWHMZ2rpdUhFsQ27KKHAZzzKpfwwv3EV3m1zsH7z22xPcd103I\nRH0N5vhsdd5b6aTNolkgbAN2u5r+TZNtEUCZ5VbciWz9JQ8FRis0CChwIrkv\nQ/u/Pb78PvpGCOBn4DWCo1OMyIMPBi04tVw94u7htU9+KC4AkH+Wu7OykO3o\ntpmZi0mq/xyLqjZsUQ4fkeNG2GlIr2ilcpY9zEzW/vKvy8b/AV8+KRI/k715\nUBI8SoKB4/DrbWU6gIhA/zcNUP5TzCF8vOPXS4HaybdmLuN3GqyTiMwfm1i8\niGbqfTt/nK5D2WgIwKzNmGVl9ZJrZcLguTWYekoeYk6Nda0ar09A6rxJmOoc\nxIpSnh/5bMDO6IRaDkuONALxKELHoLqJoH/zsS9X084ZmZ/bl4KTTx1+mBqb\nsvrj\r\n=A0Ck\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.765caef18.0","@material/shape":"6.0.0-canary.765caef18.0","@material/theme":"6.0.0-canary.765caef18.0","@material/ripple":"6.0.0-canary.765caef18.0","@material/animation":"6.0.0-canary.765caef18.0","@material/elevation":"6.0.0-canary.765caef18.0","@material/typography":"6.0.0-canary.765caef18.0","@material/touch-target":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.765caef18.0_1582306399616_0.02751245333858021","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/fab","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.949562303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16b8cfbe17d2438e09810ca892d6f874a7494018","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.949562303.0.tgz","fileCount":17,"integrity":"sha512-xHcU+1DsjNAXxoiQejPt/yXid6UJR4h+/1zTSze05IzFnOqi0cRb8Qik/4ZWzlhZCcKkUzPiiH61kxdhrdtu1Q==","signatures":[{"sig":"MEQCIFwUsSATIaTA4trwR7FUfKIvEdYszLH5G2qvo38lgxJEAiBQ4xyJvws1UafzqXZzzZJF4mQt/Znslw3sDmzFs3tBaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD+jCRA9TVsSAnZWagAAV4IP/2caX3NsTCtqqIDKeO4U\nQV99FbJl/R/iZodi+RMbDffncG2VE06V8avWvDM6jqM/zVWfCZ0sy975wauG\nuJpuXbg0bWFmuP/98tOL1FpyKd89p4YK7O2GA//iPADfJK3Q3Uzkwed62jy0\nmhI6I5tcMH/lFY8MaXtuU5R3bZSheDBLf79Aic9mzEg3JCQrtIeTusPbn9DY\nBqpJ+o3Uks9XdfzqxW6buf0TNooerTAWKx6FANa6ugpu42+RQh847IzkHYy5\nbEWh+nF943o5B66OScHQXW7CHju8dFq+Ab606cB9yNfMmyC4JxyM5PWuOMHo\nAYuMd0HEMbCPMydLfkK/bARp3dO0l4aM9UW2d1y17CEKagj0IbmfOHyFIExF\nugqL0xyadqEHXvRsrOwMGiCnDEbWKshYSdoVmQY3ZuRnNNA9hhO53ERkH27W\nzEml/NJvTYinnamDTTb31AHG50PD5FnDB0auay1STtMzYbQbZDVQ4b92FtEX\naWwyPAC6gGkS6cPNk0qQqf64+7bhfBbAQiRvtIgRvEM2Y0lH/nL//6Uiihjs\nGJtYQrSQZVOA6D64AYR1Y5eJDzwCLDTD7OlawUg95SEnzYUombq16fVTE/zk\n3hR61V9IjK+FrwZAqR3GfJzJecwKBGbcmGZRmElVrWl4ONlHcWpFHpUnch7r\nAs2V\r\n=iZIz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.949562303.0","@material/shape":"6.0.0-canary.949562303.0","@material/theme":"6.0.0-canary.949562303.0","@material/ripple":"6.0.0-canary.949562303.0","@material/animation":"6.0.0-canary.949562303.0","@material/elevation":"6.0.0-canary.949562303.0","@material/typography":"6.0.0-canary.949562303.0","@material/touch-target":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.949562303.0_1582317474870_0.3662737582793505","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/fab","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"472a63349e51a846f97fd3247f9c99211c5c5c44","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.7ec96974e.0.tgz","fileCount":17,"integrity":"sha512-Isaa2RjAZk95WD0s/pF+DPX4AE6Y5w1mv0xEIbdHKxItWY2mpRIeUR8H+oRNDV05H7ty2jxTMXCl6IDN2nS//Q==","signatures":[{"sig":"MEUCIGF2HLnDKJe6e56QUhXnu/hqqNio3yLmBBjp6jPq7pVPAiEAroPXtEc76tKhpOSWsFGk8p4+4WX2uucfZHI/6mNspJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBzGCRA9TVsSAnZWagAAXzoP/2mUaCIPAQIESOXl4GBb\naBnSq0PDarwEdDJpZA6A+v2F6ZOYK5UnPzY5Imb1yqxOB6S0SNSdMg4BCJ1M\nNcr2eLO1zTt01cxURY8sjCXI6kj/5tY9ThOt3k4rx9BNvHaivTudLRj0wc1L\nUOJ2wfJo33UTImeg1pQEvi3lIzd+tW3+l9D3FVPOaXBEdGyDju1sbqCE/hht\nxGYyHINrcnllJpnS5jcDf6YCLnlOZ2LqNL6g4ib8WOOwGuvtvaKqlkq1jnLA\nOX28yqgodjT42uF52yL6N67MJUnAaIu4kOXpj/P5SAInvDbkXbeOYHAe/COH\nSsg1nrQ0wvLKlxpu1mGQpAhYFyfhNnzaru1mB5mqtXw+IR5wkfEzwEJp5QWn\nt3efto7+Sfmn/HVzsDEK88R/q/7j1LuooDLmKLy5/u8AOSGaUQXDN4g0U59r\nzCpG9UYITT1uCb1GgQu+idMEQL4QjUwG+HO6j+daOh6reIzBzqF71cNaXFmy\nzeatq8WhTZbjHqoQVBsT0KjXXBK8cPFaLefg1fDRizsOC+A99fcL4CM9ovJS\ne+HuCePm8uC4qykXwS3xq7Hyev999ppA68/74+LEf3ZLs/cO6fa0TIsc28wz\nH+uUe1qpQQfLIv4x3bS6ZZXOayns1sUEtK1JBOOTVu4x2uyvaY5O4BPxgbT6\n7cSd\r\n=3h8j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.7ec96974e.0","@material/shape":"6.0.0-canary.7ec96974e.0","@material/theme":"6.0.0-canary.7ec96974e.0","@material/ripple":"6.0.0-canary.7ec96974e.0","@material/animation":"6.0.0-canary.7ec96974e.0","@material/elevation":"6.0.0-canary.7ec96974e.0","@material/typography":"6.0.0-canary.7ec96974e.0","@material/touch-target":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.7ec96974e.0_1582570693772_0.6398887307955345","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/fab","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6e67d20485f9ad9f6c65f2f692184ca93d1449e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.265ecbad5.0.tgz","fileCount":17,"integrity":"sha512-kQoGWN0RqgD9sy1yA7xTbRbpHcJ4YYKvbnzG59edsCRxFXOt/dWLjMYPCP85CDzUcXnC0p3vV183m+5xx+oheQ==","signatures":[{"sig":"MEYCIQCt+VE6fkwsl4Vyj40M/6zPa/wGzXEwi6FFGJ4fiG7AnAIhAObt9h+we9ruI8vlA1NHDIIZQrosHEtNpZNeCNltZCV2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYsGCRA9TVsSAnZWagAAi0cQAJuTEGwln1nZB76u+Ljk\nBjnzIwywHSlu2Vwln+zgPrRl0QtdREuzq6pSeJgiWxCF1AbhzuYEAj3SrF8b\ndn4YkX/LrLFdtPT9pt8Tk9aOfdJ4toWJAYGcH+DrI53YVgaPoKrxkDLZaNUT\nU8ago36E4jMrvmsVWqgkBnDNN4Se1f0yP/a04No9O5Sczk//W4Jul5qkfWos\n5+tT8O2aE985YbDOJJlJjP4DU7OKdMtoMtmAZpZpLJJmKiLFxGTT/gSGYwup\nqgfPb8VWSKCjsPoEcPG0jbwQ2XqTCr9FtRuN05xaj7ydL3G07ZNFAsAjyL9F\nxBkdbDbjPBPDDB8leJMFTnTLfS+ImQYgi+L5FakR2drakineBDhh0KX9fFCy\nemuZIlp8jE4F2Usz3nuKRJy4Vh2/+B2w/Ll7KeZ6TwpeltpW6hJkAtm3nD8I\nNX1jAtL19bchEDWlvsVNqSMDndMGdwhvvtcq7lEckDbONtdVuzMWgO5n5Ecb\nq0QkpWDwgTOYOLj6zHC1/AKFjQiPk86SfGIUFC3XX44YyX3wE6GPtoDBl1YW\nHxJmJ9eXYJ3uCYqsH9Dhow+YBE3bdHdQ5ht5UXLlenRwKxrDF6qXBRVDL8ap\nYR31ayLkvQCsAPXCMrohuuGBH/XXF98hKuZaskFMhwIeull3dW0r6r8Opq6E\nB48e\r\n=nfCM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.265ecbad5.0","@material/shape":"6.0.0-canary.265ecbad5.0","@material/theme":"6.0.0-canary.265ecbad5.0","@material/ripple":"6.0.0-canary.265ecbad5.0","@material/animation":"6.0.0-canary.265ecbad5.0","@material/elevation":"6.0.0-canary.265ecbad5.0","@material/typography":"6.0.0-canary.265ecbad5.0","@material/touch-target":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.265ecbad5.0_1582664454341_0.8236823778067508","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/fab","version":"5.1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@5.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a38fd4d7579f5b7aea6c8d2b60cb3ded77945d3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-5.1.0.tgz","fileCount":16,"integrity":"sha512-mq9I0l4hnsMS+Ko/W7e5A8epElIp3H0UFGJzMlZX5VJBWBpfnykj7fLYnVWtyJ+zFgdLv6rpO/307Kto7gi5Pg==","signatures":[{"sig":"MEUCIQDQAXg8reQxRwBpM1Xg+A9exumi7z4fjGXlzIesyuXFTwIgPcU8js/lWK/FhqdQhcT76yya9Fnv8M/ufsVPOOrdwMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPKCRA9TVsSAnZWagAA3wUQAIsy918Y0WFWUSg9Xld5\nijwDHN4VUPgafnag6kWI1ktWFujdKOuQMJvtwg1/26I8KhEwiSVoCxaRUF70\npPIOp95rmyph84uFrJCotmHjDeIEak9wL3DbnTjnu24KGxKwJ+letuzfQt5V\nPens6fKefzWvUNbkcf67XGkoBThtNdyx8NleAJBAgcmqpgUJnFNVHb6gZ/4J\nBDsMzs2pN/7lpvlVTewTqZeQdGPvThJpNkcsGiE9+cXew6emTAsOT7X7ESHq\nnmnDJxSpYvlBJZwyywgMCtG7U/C1kCzCPLWUCez/OnYugX8Q9yw/ts65BJN5\nl/daBJYdKt24LTG24p1MQ8hI9RFk4Ip7UdiStRD74rQAIddJdRpUvPa3T1WB\noy+zIIHpc7LY6GywDlmCD0ny+P1i9Rtz+avqcTb3fIViwzIadLOKUyjQ8s8O\noyRzLppJ6FTjzr/P5L3k1w6+8j03Uqs+3mGk/ypejDuxBuN3oipUy5XclDBD\nRG8MydJcoE4sxQbzBpoCI/Cx4TmqXMU7nMv5pBVjLE9ITkNWXbp/O3d+7QrB\nuga+T1gtGFygpIDne8ayp++nrydlKihkX7gZHHWeNU1RLFhZauRdqUoOv+9I\nU7TFadzlWclB/4aHeuqiWxWRlqCc80rcxIFvOreTwSP4uGIS8oP+4sU2OzcE\n3KvP\r\n=rNlI\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"^5.1.0","@material/shape":"^5.1.0","@material/theme":"^5.1.0","@material/ripple":"^5.1.0","@material/animation":"^5.1.0","@material/elevation":"^5.1.0","@material/typography":"^5.1.0","@material/touch-target":"^5.1.0","@material/feature-targeting":"^5.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_5.1.0_1582666698060_0.8840172888721838","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/fab","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9470883d464844f8edbea7d9148fe31d8d41b516","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.2cf87456f.0.tgz","fileCount":17,"integrity":"sha512-jKK+XcTQz6bJNKGL96874BCIvepuH6i03A5SFoP7SZbJbsZspNXfQ1/Z+UDL5f13FVVN+J4li3WcWUi01IGL6g==","signatures":[{"sig":"MEUCIFAUa51Fx01pNjRqCdQ430LvI+vwjUqsOOm/mYRYUKVnAiEA/PNnoRq8Ra3D41JTqXKFP6TRlN6PGTdJcUEeJR692sA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPwCRA9TVsSAnZWagAA3H4QAJwi7pifoQzmbj+cB9xY\nAyFH2g5kUO1vZkX3S2OVRp4pf+rW/xr6iRwjC9bHFUP3fhm+StSTRs+A2bH5\nCIERyhVAJCQP5ZPoANZbIEnHomY5ECflURNMqbSihybJvY0DHWFA/gmuEURP\nQpsy/vzPR6nj8iiEb9MT8IwA5jiko3St/SpxaX7i7TdRv4AM2B+wGv2q+cBt\no8fPnuKSl/AIwU7/g+O2UdtMRrZPKVFnb8kakUzgsOys6fuP5IFCUPUG88Ix\nfsYiWNGU1R4qILYKTOcxRwHAk190JLM7fj6+/lD04NL1qkMgqUGO1PF7FHSJ\nVCr6uQUy94fMJqYMlW/RjuhxBBa1wcYzWecF1zz04ZM/IB5QYphe5B5fZReL\nDRl/CJl/U0f88XxFrZd5MHRkzoFqiTppaPKMK1iZdUKZSuvIdVEjYcwsRvaT\nQlu2jw/jU95a0B/QxQoiVVyBziEVEl3I1I9JczJUguQLv82IHZsK447K9YPs\nPbTuQV90ptH/0K3hogAuaHBqLvSh5CWpvGZYnEBLkwZ2g/3lqJyMsKV1XGC+\nLPfctI1RAJyhBMxpI1TWR5dp+btcNSclsGUmdbK21bPQER+ZMM821fiZApC1\nID+onbwXrbnsXVy78/i+iSUGy9mw1HApcRzcq7r3juoXYFvKAA4RRM/F0DgE\nZ7uK\r\n=00di\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.2cf87456f.0","@material/shape":"6.0.0-canary.2cf87456f.0","@material/theme":"6.0.0-canary.2cf87456f.0","@material/ripple":"6.0.0-canary.2cf87456f.0","@material/animation":"6.0.0-canary.2cf87456f.0","@material/elevation":"6.0.0-canary.2cf87456f.0","@material/typography":"6.0.0-canary.2cf87456f.0","@material/touch-target":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.2cf87456f.0_1582666736527_0.23461380071187055","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/fab","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.781434a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f26ec3eb8c33a3d95e758780ad846528062bb310","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.781434a92.0.tgz","fileCount":17,"integrity":"sha512-s5Cv0dcdpkOspS+1hhMcmJmUxwTxh7+DUIKDXXLNNSyEbv+L5dVZqn9uELXTzZzcMvanGw+s+QsNyZ/0/QWkwg==","signatures":[{"sig":"MEUCIQCg9SBj+BmVjg3EBO33zp5xzHCPXLvO1CqhrMy09a3pcgIgLvAAISRTGltuKrPGjYQGuVDZTmXe0EJJBZ4beIi+2ZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa2VCRA9TVsSAnZWagAA3S0QAJqQtEXQqAsm/kOe/wTm\neTdOPsF5T3Dpyd9xyioIGtqpd65r9fL3zZGyYY5YDCt+aaO5pp89i3ZX43SE\nBL6fcVKCTsqWT4mmTF0/kidKYQ/Kwp+IWxvxwLxnmUaxoJ9bQkZVuGNlGo35\nRQe5X3uKUgKClrH1a6mlSidRqXhyxzNEPjJjjtnikr9nfOCOkSjrCzRmht9z\nqZB5upOvG3gBPItRiuCeBnH4VoWvv0O4jISG3tZi3FU+Q2IzangfrSgO3enB\ni5YjOZe1NBPIlht7k9v9AepHm0qBuiTbSRMwt/g+6CEy1brX8Vg0lL0hEUDO\n4wmBAd2WYBvADo9p9MFn/vpftwHognUtU18C+NtAlogdUDYFmzs3I2ZKnjmJ\nh2Fiv+IzbZ5IPIqm17JkVjSZZk9qw0hm4TXh7kw7+iToKKiWsn9TYHTXzCcv\nrsF/Hzv/ijvgptiWyVF/nDeelFSPcWay9Yo2JyS9F5O/zzYd0mathvqmpSwu\nzPIzGC/SriDbC4zxPPG7QzNs3E0hIVKPsekq9AlMRL4zD3wlq/XDIg6BVb/f\n7+uNL6BAfdrKsgpTjm0+FzmZULbjiWqey21RShMDx+GFZnHGUwtF5pKJ5hNf\nzBzxxRVAHjUJDVhKmlM3ZNYLh3fC6wR8c7KFwOU7JkPCHXy4ZkeK+2ia8JuV\nXUez\r\n=LlTu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.781434a92.0","@material/shape":"6.0.0-canary.781434a92.0","@material/theme":"6.0.0-canary.781434a92.0","@material/ripple":"6.0.0-canary.781434a92.0","@material/animation":"6.0.0-canary.781434a92.0","@material/elevation":"6.0.0-canary.781434a92.0","@material/typography":"6.0.0-canary.781434a92.0","@material/touch-target":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.781434a92.0_1582673301339_0.3251287305691011","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/fab","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d08d4aca7d8cfee819c4469ab99b3612b7f2e904","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.d6f60c98b.0.tgz","fileCount":17,"integrity":"sha512-+y4DQuDJlBhYa6Ycm5EBOe1VTla//4Lv0MBry3gFWYzmBD4MSooOC7Blml4H4GDuRkyHcYmHs68574ffZIM2eQ==","signatures":[{"sig":"MEQCIBRHh0Y14enHG4Wm0PhDAz3ahRSkvjHfFmJQ8rIQPi9DAiAaVGi7ZrNmRtrsgkvYBPLUwK8FmsxGCLMb/fJ7rjA95w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY4/CRA9TVsSAnZWagAAPmIQAJR1KP1ZVWu4sF0TZpjp\nUcADSsu8q/2souk1w4M5Zg5ycmjUXz/kZfnGa7ebug3FWWLtvhvBde5KMQFZ\nA//M8bP/rqZ6t4lDUeqAqk6BupcKWJGMWb4/nF7eyQWJ08nFDJYZ5s9yyzmf\nRDJA2G8+1Lm8BIS9ELkDfYnsS7UsTTCl3Yrv3lg3nN0u02r9Fm1dzI4D0a/8\nGmSNaAlkqqlYnrP0M8Y4DOVXbdYMSF1VHqEXLeeE4QCCYE/9al5pOV5Gn4fQ\nOo0tpNH/hKEGW5oKWH/CWn3bplHbQE+QZMAIKW2Z+d05K5C5eEdoMMQc8s2t\n0B99Ug67WbGyjgNMwOH8g+JyHnqhWIkCGvmBM4D5SK/EtsRo31dO/p0bpK7B\nN3Pqd/8BTdtZpI5JvvJ9iRNQQ7W7Ynsj5Zpb2Un8ozCnF1eEeNIjO1RkkNtD\nW5VyPjB682u7gc/I78w6RrO6Q/OgnLYJPXz4YT+JW8qnOUMnO6BQELSg5l98\nqL4BNoZpqQOhvkJPwsDIbLbvICzFqMGWtarHWKkigTB3ZAWMlAbsVP4+oP27\nPmjlD3JMeRhh7PxbArAbj3QixPwX05iGr+jYBMft9bqBZs2RcqzYocaNtJ3A\nRXYBVbQHEvZSanxgqmAuHVPqd9NPSUdGXwiSaH0wXgRUJDPwSpweeP8a5PkP\n0qvs\r\n=P8kg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.d6f60c98b.0","@material/shape":"6.0.0-canary.d6f60c98b.0","@material/theme":"6.0.0-canary.d6f60c98b.0","@material/ripple":"6.0.0-canary.d6f60c98b.0","@material/animation":"6.0.0-canary.d6f60c98b.0","@material/elevation":"6.0.0-canary.d6f60c98b.0","@material/typography":"6.0.0-canary.d6f60c98b.0","@material/touch-target":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.d6f60c98b.0_1582927422608_0.780704412754605","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/fab","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e9325825bf4d514edfdd0e0f6bd2ef243c55353","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.69edc6e28.0.tgz","fileCount":17,"integrity":"sha512-cd3SGDEfnTipfXGviWCxhnfq6ZBiKb2fWb+Yy1b7BIyqTzqPPvdY4saE/CsnTe16v2s3KK/o90EUt/0J6WsMWg==","signatures":[{"sig":"MEQCIFU69QVO5R7zvmyAqAKUfKTmeikWnFkjpXVc946E+IkTAiByOhk7IvDgWiUST4deylXnwsoDxpdY4ATBL7F/u5grQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZBFCRA9TVsSAnZWagAAqscQAJ9b/InHwmqZi3iTsJjY\nsX9o4eUeMr+RY+qRUAP8fn6u3kfBTyA9aermKVgF7OtdgoL4WQCwGAvJtSA5\nMhGaMBOBHBgumaXr/buTowjd7RC35qrW0bF92NLRbTbkSIYQyQJcY2x08r2p\n0U9+wBJ4GheI2phY05r5J5ukDfLqo0+YmlThK2MuMq0fENSypmE/6ndvfwEP\nxHLh8bzuPW0UKvi0O40d7H8v4QAyWzne31Q7mX4H4hS9HBozfuSR9q5BtvCj\n1c2yESEaFbqTiEMqW7W1R5VsnC4ELMdrcFBhFWg6cRnNGoAw/6MvGkhlJ37P\nkDr0Q3DC26dtb1rLXY28SCDiug7Q0XmDf+mnVrRZbHrHLSi/ofi6wceG7G1O\n3S6I3K9pc42tkTh+TXxeJbBu9lGZ8PHaGmS2/rCnj9rd1EvkNuUJMsGkMlUK\ndZw0KG4KuHY+DAiDKCon7CtPLW9SXeeBeuDoalE0e6ZwbT7iXOpfGnaylVzn\nKPBhN0csCb6aGk9c7oC4lQZrcarodcf/RIg9nFi+GAbM+/sfC/f6mhOewzJ4\np+WEN23ORgrVeDyczV/BDYbsbdsb8Pj8LfyTrGEd1Z4CKgMes9zsQWqybaF4\nZsQgHhuddusId8SE4YfRXzOf9645i1sBDaayQPAM+BO4LOAxYbnHwsIWA7Zy\nInCu\r\n=NYof\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.69edc6e28.0","@material/shape":"6.0.0-canary.69edc6e28.0","@material/theme":"6.0.0-canary.69edc6e28.0","@material/ripple":"6.0.0-canary.69edc6e28.0","@material/animation":"6.0.0-canary.69edc6e28.0","@material/elevation":"6.0.0-canary.69edc6e28.0","@material/typography":"6.0.0-canary.69edc6e28.0","@material/touch-target":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.69edc6e28.0_1582927940621_0.35637477348290014","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/fab","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.9372e4939.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dbde3a171d11bdddbcaa7e396e0d967ea868044","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.9372e4939.0.tgz","fileCount":17,"integrity":"sha512-VzywM3pkrAp4zAUOD8OJp4cq+iHTOCE+HUaZbjDF8NqbkUVeEjv4gKzCkDxM5l3Ju6NXjtd0tCfnbNG+WQcdCg==","signatures":[{"sig":"MEUCIG0M5Q5fBhML6ZAER/NEbjSCz5gmeoQ/hg6U/g9aOUdJAiEAqL5yhING+qjR5nIT/5WIf30ZnfaVNjsr8EYwbAXYIgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqu6CRA9TVsSAnZWagAAr3wP/0h1fOCxjO/yskChPPKj\nMG3KyS3Cd2lkPb0XY4ZOMQz/aCL6uLtQIkhHQtqmYd74mJbXJ18i+ZDwEiBi\nIh/584UU5SXwWFrhBkjexHUmpXkzd0HDiHu+lkuXrVbZ7wSpxsqqe6cFS7MT\nF2DbeLwdNh1TQKJa/aFHb1lh5bZ5RG8/Iv6uDfIvP1J/nZ5Et2MaYLL+211u\nVgs0TPcJi9t/nGC1jIr443RfpEp2D1JGNH/R+W1OupsNfG+HVTNy6AXuilEQ\nC+YKOjdeXxNOYerL1qOgc9fOEWAxeHAG1/lhW5Os9vl5bjsfe80Vuy25QuKv\nYET1hM1WeoDguMZ5+X60fbeZpywoDrbAKyqNDAMSk1j/Rp+fNN67u88YFK1u\nb85UTEZ6r2Ufdpy/Vw0YA8RIFTu5eKgL3DIIf+lirpgy14y9g852c1OpXaPy\nrhnWls58zDjXRv3IO7SNBc+tIGMWOw87ktu8WjLY1uOoQKzPs8073Pp2X6fO\n1ldNjd5ez+/+6kaUS9Af5kcOt/WSCIznm6FiGd067Z+YUgHk1KJT8bUbBEMA\nut1eKlv85vVW0zMaX+v3Q71VuB24J5gl9aazJWLNETsBn18YrhThE5yfQ+UA\nkTdax3D2QMQl281lzagKNQf+vJrL3sQZqOLr33V/MRgdP2qUoe8tHs9uk5Lf\naqqR\r\n=UNhj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.9372e4939.0","@material/shape":"6.0.0-canary.9372e4939.0","@material/theme":"6.0.0-canary.9372e4939.0","@material/ripple":"6.0.0-canary.9372e4939.0","@material/animation":"6.0.0-canary.9372e4939.0","@material/elevation":"6.0.0-canary.9372e4939.0","@material/typography":"6.0.0-canary.9372e4939.0","@material/touch-target":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.9372e4939.0_1583262649716_0.16992118257394617","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/fab","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f77e33486e2c37934c7de90053e3e91c28f21495","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.9cf5e9842.0.tgz","fileCount":17,"integrity":"sha512-d8uG25+qewAbrDK+/akkm0/zLcGxxoXQss5yQ34SZ5h8+3kVI/XonSVG90NvCrlT3DWWYxe+c7c6rI2kvSsKiQ==","signatures":[{"sig":"MEUCIEHlSbwPGlFLIIQIUrUMZ1dKzP1re33zZJ6EkWaFzugsAiEAxDWBoOGYKTO8yAHNGi5Zi1o27qIK5IOZhIOFmfBAhI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXueECRA9TVsSAnZWagAAG0EP/3yxQfjyaQizloAGKZVX\nJZI9bXPRlQpumkrSJf89ZHK1JG6w9FHXx+raSMlNp6bLTCJfUXc67qn6Ysts\nQXsj9Ex0G/vngPCl9fnK27hXFhJGTpCt3FMNl/N2QFP8yZgpsoaspbQgB4M0\nvQNymdafdlvisaH3NADs07qg5JpHOB0pPkhrPVoZmz4sG+PQ8ZG8fwXOXG0r\nE6O4M/9lEE4/T04F5NBtaiXi2k+cHkArnRM0xitR+nO83nzuwjCQdKj5OLcE\n28LXDMMMNAC4yEC0w31DBfncK70LK+43beIzLzjNYgHryQ5UAPliAx/yBHu+\nstV7r/b64WL9iVttE/YnFygPhuFlM6zScuNWV2VzSWhMSnE+eReduq+R7bVL\nZo/kk6fseTw+2ZJ4dY/giXX+CGiAqenUuT1ZNx4Z2FPerLL1BELE4reIRnx5\n/EDP8jnbp/u7t/KaS95UlFZvGM46ACRqd/N+Eg+CQz8tny1WKTF7xm3zxUmC\n4d73MsrGZXeCflozj6olaTNFHh/VyweM0Z/4vjmoZT6IAZEDnPfcAnN+NzCI\nWFSW/7nCbYmoq1bspvNH49wgJ1N2nKkD7GrZvJnQ44nA45CN9FDVqg3xTr26\nNkZ0IPu/FdKSZIIGnL+nkW/fKs/+3I/q5VpcLKsx1igJq25MmLsU8/7mIjCl\nk5bM\r\n=V2GH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.9cf5e9842.0","@material/shape":"6.0.0-canary.9cf5e9842.0","@material/theme":"6.0.0-canary.9cf5e9842.0","@material/ripple":"6.0.0-canary.9cf5e9842.0","@material/animation":"6.0.0-canary.9cf5e9842.0","@material/elevation":"6.0.0-canary.9cf5e9842.0","@material/typography":"6.0.0-canary.9cf5e9842.0","@material/touch-target":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.9cf5e9842.0_1583277955195_0.0957634005581478","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/fab","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.3657f8863.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b810ce21b1011c78bf89a21aba42a9c9b6eb40d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.3657f8863.0.tgz","fileCount":17,"integrity":"sha512-Lb95amt78BD3b61ZArEk5QVlBu5fBq8x7ZKGz6z5mhzLy2veNS3hkRCbK1LmN52YhlIk11anHEiRE5/guSjPWQ==","signatures":[{"sig":"MEYCIQCwjEVu4B+mNd8egiVbH07nXQBxMrB3+yvkvd3qk0LC3QIhAK+k3qfmnQld7ukuqPoLGMlJwoboQcYMPU5FBu1MsvYY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+jzCRA9TVsSAnZWagAAjQIP/257jnnWpnETXXyyt391\ni75PQ6O/MTJ+ctMxZhLo2zYKPZ1bZMZPSre4M2ccdU3qFSCkTSOSPrMmkrrD\n7Z9kN43HrWqnHjsFAilD0U2F8k2dur95Q07uvVwtLn1T5cidQqbhUZGqgpi/\neVmgewuWXKxbRDY0G4dVXza/YC8xVKGa+nXo3L8SPmvtuq83HHT7FsLZfH6p\n0R5ZNHQXbzN6eyx2cKy7YDlaCHxpW3ujCJ1mGXOJO9uwYwpx5E1wUlaj8j+l\nsdY/R8HuxOQ8ZVokjTng8c37hRBG5wV8LRYOfySpMEN/inm4QF7wEqR3QAOC\nC3iSOVLKzRgc38YlhtdkTSr9WWhZx50ewXALDaxV89eh5TRdK7BqmKvKh5EV\nBINMDin64khOP2PgQXwh8EBibjvowuvuh1XS+Vvqq03CSTed5dZZ8MxQPTvu\nlq7t4m7A+3KeNZw0dv3stZu7Ewxp9qOsgSSW5+PVfXplFhYPz9mS7KE4DOUh\nYw9AzauszPfD3WnNQ/5nHQTiJXq/YQLpqogPwMPSHLjm97+/KYZrigixXfvY\nCEUK6mtfPR5A3OTXFqQggCttiIeI7HJiUO1VJIS5q1SruwTf2l2+4tNuLfmR\n1lvuqGmaAVqZPJAWA+1+rqLO4GxTMFsoxcqS8t2s2nMdMaEejeg2krtfwdFq\neQgT\r\n=gCuU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.3657f8863.0","@material/shape":"6.0.0-canary.3657f8863.0","@material/theme":"6.0.0-canary.3657f8863.0","@material/ripple":"6.0.0-canary.3657f8863.0","@material/animation":"6.0.0-canary.3657f8863.0","@material/elevation":"6.0.0-canary.3657f8863.0","@material/typography":"6.0.0-canary.3657f8863.0","@material/touch-target":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.3657f8863.0_1583343858428_0.7926254138114399","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/fab","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.98b843417.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e748e5b8bc46768cdb0bbf0435590bed42d35ac9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.98b843417.0.tgz","fileCount":17,"integrity":"sha512-V039cECI2g4CaZy4TKdsho0FABnZ0SkbnTSwG/C6l+IBIdgfrCd9o3KqpIDjUxtnSelBrYLh5Q0aRnFLE0+2lA==","signatures":[{"sig":"MEUCIQD5M5lskQiJYyKam7BV/qHSRMLnxe4D11kz/EhO1NZgdgIgPHNXuh4zXink07+BPU2u8kBQmjdW8CCrIxo1CgsW2dc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUVxCRA9TVsSAnZWagAASCEP/1uOoHCSKxfOtx6OK3Qr\neaLwE4vR7y5I9wYn0icBa1GOhAWmnG+4BWQUmFEBwqyG585l5XsWB6ndY9rZ\n1ZfWZpt+KVXhmpllA8fVA3G54cbhIfSCUrNPnoPpESaFVAoTe5zR18qxwQR3\nvGe/12VWPgxdqN4La7DilaBa6QQM9TkbWPRgbEOeNOmRZps9RrlG4pX3/jkr\n3ZRB4M+bTPATMkjof1Bu3+Ve2AZtuPYHPMpvLa/3kSuEKc1xbhVHOcKmxM00\n6KMlK8nrGwZO/Mhji4wOs6j8mbrfkdS+ZvlrZagcy3L9TGdlfqShOrK8XhXZ\nTTeWS6vFvPGUKQ3M8587N7ifpFzQL+BAGDRJo90IFXsfgzmjigtrx+g60isR\nyF2oEwYQVsqR4HsuVhHQTzTZEFmROmelPIEWWX4l17YKRFwMzeVtesiAId7Y\nF/3M02IXW9Lbcr2O2E6ITp+Qp8AJNBnd/mUkL0pISKwrPWhuNsrLEpEDaxCn\n6WWkYW48IeFdgeKHD5OhdM0YA0o1g/QWE8hG0vRUvvrdXo8HuHdanm8zXC8b\nnkMXnveytx31wqnqWzBVA+Df/DMh4IP2PFpbquKCujIZxI43leCdIL7TUv5l\nAjFwKsAp3ZpUBMyPEaPemy3YSPdloj9PLvDv/coozkHrGghxm6iTz4MHsiK0\nt9tt\r\n=go4S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.98b843417.0","@material/shape":"6.0.0-canary.98b843417.0","@material/theme":"6.0.0-canary.98b843417.0","@material/ripple":"6.0.0-canary.98b843417.0","@material/animation":"6.0.0-canary.98b843417.0","@material/elevation":"6.0.0-canary.98b843417.0","@material/typography":"6.0.0-canary.98b843417.0","@material/touch-target":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.98b843417.0_1583433073052_0.3494803983586965","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/fab","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2d3f8ff81cafea02551959a08633d74fe17bd3c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.17b9699c4.0.tgz","fileCount":17,"integrity":"sha512-LOoVR3tklyiDtWsAySJBDXsSlPdofi9ItOjnpBoKCxnAFe6I0Ui9bg9otsGeumAgYsVR1qqjvLFA+bhmLV1p3Q==","signatures":[{"sig":"MEQCIDqBiF1e3DjY7ucX4khfBKfPwL4CJ/kwIaAPMW8NuvFyAiAorjtHKbaByi2m0P0b7wJmj1AG+Llk4zRMusPFssd7Nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVFzCRA9TVsSAnZWagAAfX4P/2GXR3mfFz7A1DGQ8T6N\nXpilMxN/G9ncOrUni8zM4C90il7Qym5L/URMEMSfsqkclht/8qJfO3CNAkpg\nauM/wOzNZrZlK23SQgAgw+DFgJhYa4nVzv9Is0/dZV/IhQuks7WWFjRXaOh5\ntjCFcgNHVUxkUKadYjiMwhry/cjmif+CL4TlqPJaxZCjIrb5esKPHwdsRW6A\nHia9Qg2rphY1ztE1jt8L/DHSTxttVNrpx4np/9MgWZiJoJOM7sAuDNvc0TPt\nvAYUJkdJtoWBXS6INbgxcmpDJ7pfwXI0hImBlQJRsbnpHzTvsAkOpuhEz8ud\nv1bQ5Nu5TFMnsMhTMisW6W2lxSwxszbGn3YwycbXvxJkW75MewCA/a4Gv9Jv\n6JNRZMudzZIlO/8dbafj6ymwRoE8mxKpVMtn2j9No0bORAaRLARpxj88ObEs\n9BYylEm+FJpO9S8ieGZvpCXf5Hhue1RDdPeGI5QXazIziBs6zeTH6WBpntsO\nlaarvL9dNwVxft/NRkBOlZBBvDIQcomWtcyYQ6sF/LVDxj+FDjW45LwDksJp\nNB//MI+JE38RaOXcd6hjIB8jlBGqv88wIkdPJtXeIg1y7Y9ALpO37OlA7ZK3\ngoOrv5VDDD2pOvKQOqaLw6xBc5NSZm3uEBIQ4ea9lyNhRlC55ECevzrTMsGT\n6jd+\r\n=w15B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.17b9699c4.0","@material/shape":"6.0.0-canary.17b9699c4.0","@material/theme":"6.0.0-canary.17b9699c4.0","@material/ripple":"6.0.0-canary.17b9699c4.0","@material/animation":"6.0.0-canary.17b9699c4.0","@material/elevation":"6.0.0-canary.17b9699c4.0","@material/typography":"6.0.0-canary.17b9699c4.0","@material/touch-target":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.17b9699c4.0_1583436147241_0.9917484110861401","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/fab","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.6ee035572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f188ae2cfcf567be3094db5009aab3f04909e59d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.6ee035572.0.tgz","fileCount":17,"integrity":"sha512-6uHdVP0bdkou8vy+tRRUaiterhbyj6HW5wuqHl/WI2OuFD0kcDr2q0ZfYoHA3W3Zbhu9CTfDOSxYul9f6EjAyw==","signatures":[{"sig":"MEYCIQDd77OHQ7P6WMtaY75etAZYB22hNZehCt0UuS7JTclrxgIhAKjq2p46NXNro/xPdlQytXDBkkQiXMv1/gZ/t0vgExfV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnMGCRA9TVsSAnZWagAA1dIP/j7BsoKlEH27saqUs59L\ntTQhRQPZUCiq79k5gcWQ/OdB5t+EUvAkd0OrmJO8N1Im3ZreeXQis3obE9Sg\nEwIUs+uAPrpKIEQgkJaqCvJKIrQNMxAzRznO3WBmxtmPxK5VEnbcaIsTKnVj\nmTg6/BKxlmcX1S8i8lFNKjMxmU4EbnEcL3U8I1Yl6c0bDrvSKg0bHadASUPS\nGSkqaiOLwjXiknUTBQVLo6u+dQa+81PH5uhlBxajB5s7pJOmPpOS6kVa6Gn/\nBuP/kAPjKA2jcSlWQkw5xdaz7ClkzGsUiLfyyKOLpMgMGZvQIffzFOcOBEPb\nXdupaCKBZV8IXXzcRDxo3cbGDn1KnsWfuUZpW4UteyiVd34Jom3biJ5P+v0x\nH4KzcSrRCierdaWktCsXMcKWh81Bj7bN548l5Z+YDhd9KNQE3R8nya/RTzHe\nEmiAYyVgIplWoDjZ8sT6jbXIEgg76E03zCDCBpdrA5enlhgog8JfdPuFNhKG\njARh2GFO0uhbtPrjbuQKwDo1BF7VfIzCtMxLAdGG1hjsMB20KrRUF903XePm\ntnooPgRsZTGDV2eo/z8zpV4R6D7rWZGjljXgcU4xsdtqLGfFxs9DR6H95+0w\noPhTWOT/kBNLJ954P6VUNFhe/s30shGIKmUcvQUZbpLuQw+4zk/QE/shKG/4\nW0pj\r\n=ZWWC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.6ee035572.0","@material/shape":"6.0.0-canary.6ee035572.0","@material/theme":"6.0.0-canary.6ee035572.0","@material/ripple":"6.0.0-canary.6ee035572.0","@material/animation":"6.0.0-canary.6ee035572.0","@material/elevation":"6.0.0-canary.6ee035572.0","@material/typography":"6.0.0-canary.6ee035572.0","@material/touch-target":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.6ee035572.0_1583772422313_0.24218596796683278","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/fab","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4e3637dc0fdc75a2553765510e2384cae7245f9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.bd33cb56b.0.tgz","fileCount":17,"integrity":"sha512-avYuchkOZX2THgZ9i4S5uuMNHsjxw9XLdG5L77K0jlHX84CJJ20XxWet/JqQB9SCM6jGDPtZIYmCbqCld67r1Q==","signatures":[{"sig":"MEUCIQDrWG8Pbj198TznDhHu7hMaL4mJlrg1yhiUuxG3UxsJFAIgXQmniREwgluPSAHE6dyrCLRZr3Oh/8ed9f6UGiXiTJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZntKCRA9TVsSAnZWagAA0TMP/1A1ukGnxJYgpl0Ah0tW\n3szsJFRttiEsvdrvo1SElhSfIA1xBHtSDTRb7OgcRAGzF45mPyULP2Rldy/a\nMTTDRkLxxxav61NHsE1QBn3vg0MuNNLY/NVrNFuPkoFqQV5WENWViRTKXjjM\nTU0u6Ts2XUlJx3mG8sadGJAJI9WWPFgJCAu2PiN+wzfgHgmdd4zMpVgt/sSW\nbUygevukZK7QzUoKB2nOPrmZou/Njadde/G/dEtJ1K3IAkn8R/Q0LNQizmSn\n9t8UM5Co9aYbgzRSXkT5I5POhtQZzGu8WXsNpLPDovGeDhDsodwycWIBCLZk\nKrAhHzbcBESm0l65tEuH9pQUSbwH4r6rsyUXT7+jiOM3negRTasXvpH8RhWl\nu0uIpQf13slW+JNRcu0ZY9uspB1WI3dpp0BqcVKlbn8YXjP3HPioBIgAY+Xs\nGHdRXYWjV+pMWL3aE2ktGxwk8OE7nGiyYLGVNzoKjXBUZGFhDrDsVOgKwcZs\nHaWu8i6Jxk8V5RquBL3oT9cWZ6VrPUzJZ3fJjSmCYR6Wz6pX9SUXtAI6nGs2\no/Zj88O297UAxy5FGMAzpsnr3NNolT2wwctOcafeOxtO83AdkJGiZpmJjjY9\n1+SVDGo/xbykAfIfydppbPkqaWqXXKSvHcx9xGzJi2oCwTGs5No0z0cs9pgN\nXSRg\r\n=Hiyo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.bd33cb56b.0","@material/shape":"6.0.0-canary.bd33cb56b.0","@material/theme":"6.0.0-canary.bd33cb56b.0","@material/ripple":"6.0.0-canary.bd33cb56b.0","@material/animation":"6.0.0-canary.bd33cb56b.0","@material/elevation":"6.0.0-canary.bd33cb56b.0","@material/typography":"6.0.0-canary.bd33cb56b.0","@material/touch-target":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.bd33cb56b.0_1583774538047_0.5078311762270462","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/fab","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.26c049afa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05bddd93e93c7a779bfc9d3b300af69073f8f37d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.26c049afa.0.tgz","fileCount":17,"integrity":"sha512-oCIgjTvz5kVD4lhwSwO8ks6JDXiNTEUtdu+WpfU0ujO9JsNaA8UzSympYN2iduUI/v7ZEzJB7hXh0mFsUeedvw==","signatures":[{"sig":"MEUCIFv+CuNIBRb0IIxmDaWp4rea96Ga75fY+4ri2JmIM/thAiEA7kxxzyqOOZ6noGXecAgnK344kbke6k2Zjc3ngrBDre4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8gqCRA9TVsSAnZWagAAKbgP/2RIvYqDoZMAkqN79Cvm\nZckt3gFmDo89M+zqp7H/NXCa+ZGQLzbjP7dY1quTMltt+u5xf1XasNfRCZVa\nU+ZMMmfJAj13EnQYzpxnWFATUkRsDVPhkOISdpg9sO6xuf67JsNOwLDgLayl\nPrPBtKCFEPNzWiMNdRo1VeuzvPi4bJfYD0klQJlHbXoxlbikh3YHqYbjXIk+\nAUdzOeZjWUd31xn9UTGD/ibSGfHFy6adWwRg5YTp9liCmm0OBxrzFLtLlABn\n6mSSJsvmID33vknJX9Gka57KtZMsuGASBNGfChLbKTBKKCgP0IfohEdghFCt\n9f45NDnCNFMh8YFtW2kXoTmrkKgA2BXYjlmjekAq0AmmtQj6ZV1jKHdUyjgr\nlXEL6u/L06QLcGYGkwjNBinIkSeTAgYAgwYKzisi6De3OxjCvFQkpApPcIsF\nhF57L/qKrcxYbIhwcealmlVLxpPl8enmg9sj1j7unvX2tNs9+1/Qrgn7dcMl\niUbbClONz/IakaiH8mUCeIAhfYvJfUZEkHTqyTFCtCXlOYlIMKdIlFoG8BV/\n2Prw0pD5mWuddwYibJTobtMYePeRRXgdk8SD5qn6dzUu4+1pyh7YNJekh42N\nnIul2/IFNHCJg3gIO//98x2/nYy82WLrZhVNRjKhTWlAcypFFJW5YB0GJILs\nT88Z\r\n=tbpu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.26c049afa.0","@material/shape":"6.0.0-canary.26c049afa.0","@material/theme":"6.0.0-canary.26c049afa.0","@material/ripple":"6.0.0-canary.26c049afa.0","@material/animation":"6.0.0-canary.26c049afa.0","@material/elevation":"6.0.0-canary.26c049afa.0","@material/typography":"6.0.0-canary.26c049afa.0","@material/touch-target":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.26c049afa.0_1583859754520_0.434361383404559","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/fab","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b52766f5778127bc88d60ec291af2b6c4e8e3242","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":17,"integrity":"sha512-z58Q7HECVC1VDA0kz6mE5+9kpKMHlus96RyaP99W2YWQvx67suNxWt/m2yDbaL95vpo99nbXMjfeYYJb0NQ1sQ==","signatures":[{"sig":"MEUCICRR3iAeuxzUGHiJz3kVXNHfj82jC47IiRGN47IW3IPkAiEAvpSYCk3DzSm5qjijTTh/7R9Jb3FBPIqtYUkfHHVvuB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/qACRA9TVsSAnZWagAA4oEP+wQf7koLXoLaSrFlxJAe\n+YywHJCXmKawMKc9mN2eSs+sM6FIqVfcz7a0zNXutE+Ljz0haQG/TriQmiV5\nRHnNw85z4ruBlVzflNaUUMgVWOqBfKQw2fsDlBYFJ2kQDk41reRlV7+ouD3s\nJmuzxhMWlQENUkaZVxezvuYZPsrrdGy5/ahknwa+a7DmUmCYLhJAwt5q4riz\nSp1pJaCRUUMHGMTgcghTIgXxtycZOhBoHlW6iXxUg1SMOBTUqche4t8gtAxJ\nGkIz3GjDFEgrwB0mF5ZaZElx55qstiLiTT3HNvFlV3H1qzZTCOJ7IG+tF+h5\nxLNp+LZ5LH3qa73MOUjgxnEu9rPjdb7qEtmIluljKm+I4KHNhOgUQGKInHdy\nqFSX2ASnkbB8mhQ2j68oNoEE7LSnx7YueMWASbD6nseQkF/BXwTvaGN7CtXD\nfeSg4sjmLFsGOddC9ucuWGHUhdpHYaHjP+3n0qMgai/NIPGyy7G/TWKT/qUV\ng/b5KR7VByTumQxztrKJ/Y7tSKtpdQZZlrujNuO+/bAAX/z3MRmxaTvsNBl7\nKg751dUUdDbe61jRHhHFiVyPwHoJn1gnJk2GwRplwjGrMQcx06iXgER0/9wy\np7g4/zBHujLqJ6agL1thx48Ivv9W81CpTNJ6IxUTfOFkKAuuZpJUf/cwv7WF\nk108\r\n=5N+5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.1db5c9fc8.0","@material/shape":"6.0.0-canary.1db5c9fc8.0","@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/ripple":"6.0.0-canary.1db5c9fc8.0","@material/animation":"6.0.0-canary.1db5c9fc8.0","@material/elevation":"6.0.0-canary.1db5c9fc8.0","@material/typography":"6.0.0-canary.1db5c9fc8.0","@material/touch-target":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.1db5c9fc8.0_1583872639858_0.3474066597112262","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/fab","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.4971637f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1daeb65d80aefecd98323097e689a9356b42225","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.4971637f4.0.tgz","fileCount":17,"integrity":"sha512-e2AkwjYaCauR6vF1GzUQBTrz62PiEPYr7hC+Yb4TqribrTzAeX6THGTZXGZ/VcC4t6veSQkQ/le08DhwqB1fLQ==","signatures":[{"sig":"MEQCIBOM9VumzcDs55vFCDRr+tMhO+8HmTjCn7LBqbmneqArAiB5Nfm3K6Dm6xT0VH40uRw5xxhEMzXpTaZbb3p+gaYy7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBuYCRA9TVsSAnZWagAA03AP/itxjHj1xpMPd1ECNc6s\nFHL7/P65AeNeVjbecpElHhL+9PcIJmTeZBL1yMMNDYjsEAuIxBbeB+FzUjqx\nFITTcVbLyk9FVv3L2sXmckEXli/jL8dOjeskCPTGObMcWrQWM5K/rtmlmhEb\nx5ldXpaNp4227OsJZ8AwuDqLHj9nrgEzah+91b4IfR4865kg1ryiC/9R0ypq\nL0hUvCGiOO4cttc64bPIMZOzGuIdtGJWH/RvQk1QVFY27Iia4jGI/S2wSpJt\nRRzhCJ2FeBT+Rl9SYkRmrK45/DF9Q/y1fWPwK844NrwQ/onazlbasUOF0dZp\n+tnZDcP/9ei7Am0JqVnI3S0XKGz7xqV/OL+pIWbgcs914BJFG6Ha9FV//4Cp\nyngfQ0D2FoPcFEaoMStTuh8KAiv3Bffxp6r0zwZ183RsopH7oANM20ZNV5zO\ngfM38XkjceuCWoSQHlxcOa2RgKYOpLqLsVAkORmWjxXcZoMmi9vp0OIrB0Jl\nP3UyFK2QpxOjDcQVGG8itU0EubAixeb54i/jniF+ce9zD2rd1F7MXM367ppu\nPM+VIm7dOcYhC7qo013oNx88g4rpZ3ot3DKaOiVVAY+mK6J1TvPVdycNzlru\n7mupB/ViltJgmbsEQIF55JKT7yiJAnP8ZPa0bkNokSj48wLbD0Qjavxj0eAt\ntvYU\r\n=5EYo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.4971637f4.0","@material/shape":"6.0.0-canary.4971637f4.0","@material/theme":"6.0.0-canary.4971637f4.0","@material/ripple":"6.0.0-canary.4971637f4.0","@material/animation":"6.0.0-canary.4971637f4.0","@material/elevation":"6.0.0-canary.4971637f4.0","@material/typography":"6.0.0-canary.4971637f4.0","@material/touch-target":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.4971637f4.0_1583881111719_0.1546511650818556","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/fab","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9a46c5cc8411cf856b5f75c86b433738d730b86","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.1ae8130ce.0.tgz","fileCount":17,"integrity":"sha512-lTzDgcRcvCi9hmi9EyWQ/cWyb5WhCW/5x7kN6oZHxJcdG1ehrSYGgxTseCewhOYYq4aUNZD72vGCE5kK7JSHKw==","signatures":[{"sig":"MEUCIHkzThbTtdnugtdI27wbTqcNuqYwJDGb5y1GoW1yQqitAiEAqEKj0QSc2GFurb9MbriYFLBnKYUSj3Gp3uEAmP3EezI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB1CCRA9TVsSAnZWagAAwJYP/0nfhdjze9vK4zyebCkh\nXvBqi0utY7WFdLq1Kcppv/1L0bQXuGPybJY7IDCkt89pt+6x9PuwJkkwJxcv\nSxcqJQjOM/pmy5H0LuA+RTwhR9Ts0uU2TlmgzeOjyzvTT7JIxf87hfp10Opy\nGcnrIhUxxQxu+JbSBIr344BwTP+ZprEFYRLDf936zEfBLO9kkdImHWfrWRn9\n9GRlkGk8oG5IZYUGZINIRht9YGQihRyDTeE5V+a1YrYEIGxYt4fDEVdjxRpB\nIybxeMUMWA0MPLHBVVWb5z+KR2ZRLnTbyoHqAvrW4RLAfGvBmpg0UOrx+k96\nXIAluIxelkuE1WLmdexDzZXQasjfzaLOay/BdED+w0NUEtyjpj+ySHYUsm8e\n+ZoAFCijbb6MbnGAqnCGvGgJO7Kx2nxF2ek0YwnPbs20LyEjCWNDT+fO7RZv\n0C6rxrZGW+YgTXaIdBkmQw1LBwW94YlN/WlR4Taka1HMaOpWtL+ob+68nwOJ\nCKAuZ1NplH2i5pTEsQlLqgHVCrVg9kRKuiSUP0zOebuvSmymep5EXzfOYF1e\nGXTpSgn6SAqcVrbY6vmdrHwMdBmqAXHz9AT643dg3lQAyDI/n1cAUuGY5Sme\n+SYqf2L4gYOIZAaoe2zHaEPAZxgCuVGgIx2eylIoMAKnZBV34rEp+EchIxMR\n5pO3\r\n=xmTk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.1ae8130ce.0","@material/shape":"6.0.0-canary.1ae8130ce.0","@material/theme":"6.0.0-canary.1ae8130ce.0","@material/ripple":"6.0.0-canary.1ae8130ce.0","@material/animation":"6.0.0-canary.1ae8130ce.0","@material/elevation":"6.0.0-canary.1ae8130ce.0","@material/typography":"6.0.0-canary.1ae8130ce.0","@material/touch-target":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.1ae8130ce.0_1583881537827_0.6273491650013365","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/fab","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.8639c2690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9244e5490141aab9b2ed603d1f2b65abd40c37d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.8639c2690.0.tgz","fileCount":17,"integrity":"sha512-lcA1piusTaYYXECos/S27SQBLRrb38vA8QVpm90XgwR1ov8jk3ZJgSAW9MdxxbK0X2Q3f7yaks6Rs/MHkctf6w==","signatures":[{"sig":"MEUCIA3sOxdVxxdJ9oRyflQIMTQB9WhQdyzeP0dVxmuutbtIAiEAkPhQoGz+OYSweLdwbY8A7bvvobS4Krb9ZzIFy98a4J4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIY5CRA9TVsSAnZWagAA+1oQAJXTJYLRO/dz70i9+Q2+\nPGFc0KcV/UZFVkAYa5T0oqz+v/oonNXKgxB00MXxmVMBAFt++JrxZL1n22cN\neoWfjjl9J4Yd+KFwAA2Lb+FHuH3VJ0EjqRdlyvBTlTOYySTbKAASs4JX5m+m\nqzyVuyHF/RaZVcY1neTitGOQUFMLK90zdGKPQqUEIFfl9fDhAG/M8GSiwZQA\nZN0GrZ2/h/e2CNv7Hn0O3o6mtatDzNB2r3/y/ZkRVJfbNWzXEu3YobBXNKtg\nN1jM5PtlNV4FA1bEoFjythKuDUwYxau17uj/4lU4n8YXKxpg6s9IPzNkeKAw\nqHDqReMJAkJ7ObzZUHo8X//iyW4xq6tSQLzmju6HxTW3vOOWxBMncHtTaW6x\nMqAPwDuK2dV8sYT+SazY1tntEJHG87OWEFSYxiUTs6bt7oBXRD6S2wnJ86Q4\nLsdtDSdG33FoIBVYfFoar7uo0iGCmIPMyNL1gjhheacPJdc93vhuMZBwn0Ny\nE4LQ50ih9NMIhyM0a1R4m2iLz5D7Sbxb01bKWMomoaKpXWy4LB0HVAxhj1N+\n8vzPkePZxzYsGYMJISMdaFu+CuMNQi1xkC3ckh4CSduI5C39HcpeE6ngmlKb\nE8lt56QNMrjOsDtqx3KvbzAlGxQ0E7Yf96iDeerRWVQ5magdHpPkj+8q7Rp3\n4Wih\r\n=fx4j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.8639c2690.0","@material/shape":"6.0.0-canary.8639c2690.0","@material/theme":"6.0.0-canary.8639c2690.0","@material/ripple":"6.0.0-canary.8639c2690.0","@material/animation":"6.0.0-canary.8639c2690.0","@material/elevation":"6.0.0-canary.8639c2690.0","@material/typography":"6.0.0-canary.8639c2690.0","@material/touch-target":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.8639c2690.0_1583908408527_0.37754717631560153","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/fab","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.d5808057f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d4ecadf8b08f01b08867f7a631d26c41c06ba00","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.d5808057f.0.tgz","fileCount":17,"integrity":"sha512-IvRX77TVm43tXHjeXEq6Sx+dYnayjrqU6xeSTTwqXv0OqUDhfxSo0fx7kOLkKX8/EbBbKajCsPUwcD4ueQvB+g==","signatures":[{"sig":"MEUCIBtNbMhoXMaM07WvqQLKRYKOTsHYRJfGbdlTJf8RbEGXAiEAwzTJVTR7MtM9361LuUF1c8AXWJHZIMjabzEVjezZs7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaREECRA9TVsSAnZWagAAOYwP/2XF23zjevOqqw+1LMVX\nSkCPU0xXdUzabgtqZBlbvVWm57ud6Fi/HpC8RZp9kUrPUJLc58L7y6WyJ9qW\nnAYPBS00TKYL3407Oa+6tUQRifLkaR+nw0+ZioaZIr20JD25Ik8aBScyWxt6\nO1nESm6UBEy0p67lipEBhJS9XANLRQZhZwBc7m0CGDF97ETbu+J4UIg+nBQr\nlvOe7Jcxobj8h0V2yLT/kpuApNCuSP8tKGY5GjDh6hOMq+sdz/RW8UDj1NYR\nx+D3kcQNTEDQY5ZwDONurqL8lv6Fu/j7OP4bdQZalOVRWh1NcrGmWtkVj1MS\nk/zVunMgUj4TQip3TaPjkp/rBYXvhD8OG9h6B0UzId6xUSvAR5ZnmX7+ymYc\nN88Gob4zVEGFu0CJGTeylxx0KO1jsbBKSjjVivGOPFlwQU8juWHG/PbZBuAa\n1uoYNCllm7vGgXWxl44guIxHgJmy1IIx7TncjVO9KtZQi0pLP8oAEpMcO1LX\nB3igUg71OFuN2QxOPihXcF5axZqAOHDwX82T8LH6qiirmcAA0GJUab5Nw8I+\nR9D/widOVMX1Ya8ci+iRZewR1GIyPG2tjYfDHAZGQZd/pJfrSLypW65qE4Sx\nkGTKxoxqfqnGo0KUodBVYOEy4gHcUtK4LpPb9JZ7ehIJXQQFL9okCSiRokxR\n4AFt\r\n=Ase/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.d5808057f.0","@material/shape":"6.0.0-canary.d5808057f.0","@material/theme":"6.0.0-canary.d5808057f.0","@material/ripple":"6.0.0-canary.d5808057f.0","@material/animation":"6.0.0-canary.d5808057f.0","@material/elevation":"6.0.0-canary.d5808057f.0","@material/typography":"6.0.0-canary.d5808057f.0","@material/touch-target":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.d5808057f.0_1583943940066_0.7150255611556846","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/fab","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e92b4580c6290243ab18d345db89bf8ff34b007","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.b3f58203d.0.tgz","fileCount":17,"integrity":"sha512-Xifiz3eKErc8BSagrV6LVYS2s2TJ+iy8W2q1Q1j3zDYoVXM02jJSCrN5NoERe7k+PMnuO3qykcZJXQncJxSPZQ==","signatures":[{"sig":"MEUCIHilY9U1y6PHC0fHdFvTIdxQUxltLrfiW1f1ScgFh/LcAiEA2aTYsJqjSibJTxWQp1rGUtdcU1AXx+x4vQfQEESKamQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT4lCRA9TVsSAnZWagAA9g4QAI1XtP7IpwXRzBYyaqRK\nc6XNrPKPrdAudZxIubomWr84qrV/KHwhgQki3UgIkHiuY2JjpyxQ8CQVY4Ty\nkNBy7Q9nU/Tuh2wt/wEDsZATTkcPCMfnNkMeCoBILIYH2NkHXfq3Sl6LTGn2\n6PO3J2NNraKX7VmKREPFP90itEKvvbnwcj79cZenOEXixLU1kpDLV/mD6jua\nmWrcNIWqDuum3bMAoXDdqycqXMTlkCyexYTvlaMrRdeBQLOUOsIVAoSGjefF\ncgAoolbpZtj95WaRZ1q9naBps/jROwo1lzgTj1hi61tTo+9lD5Z7VPbuh2Dj\nRPW6p0oCbaLvHvHMSXfTorSbM45jrY3UEMsGGsO4GUChrOR5OGpMdkFI8wN/\n9ize2JkA5naA+WHzim4/OkMrY1906A8jeSero6z4ZSnMooECXrZXK+Urlf69\nGnDnXPdtUB40v3+orSsN38mRfB3uBEAbI5HhNTE6Pca8FuOVL+0vk9jI9PZY\nbkkPx7S7pka2mL5D197u6LQBzFRQNBYKZzzAiVFxIrPeDMBMsKh08tXpF61B\nY+J/B8hu+QlH39n/MBcuVfjpMZVYmxq90HKk379iTniyN5qOTuo/rRDKP9Az\nq1XDB4B/DrBYZORXgJGA4H/MWaKWxadjZ9qqU4NMgLCRJxu02qn98scUb4rQ\n5dJ8\r\n=PS0B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.b3f58203d.0","@material/shape":"6.0.0-canary.b3f58203d.0","@material/theme":"6.0.0-canary.b3f58203d.0","@material/ripple":"6.0.0-canary.b3f58203d.0","@material/animation":"6.0.0-canary.b3f58203d.0","@material/elevation":"6.0.0-canary.b3f58203d.0","@material/typography":"6.0.0-canary.b3f58203d.0","@material/touch-target":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.b3f58203d.0_1583955493047_0.476546138550237","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/fab","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.bec065920.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e85b0339744962d1e609dd2dadee432586f6fbf1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.bec065920.0.tgz","fileCount":17,"integrity":"sha512-h7qBpqaxFdNdJLRL8e7oBTZZwUVKHvCVg6LEKNolbqmXBs6VGYSMaGHhz3cfxrP7OlyYgHI4pywEX6r1bcGBew==","signatures":[{"sig":"MEQCIBHw/E63VUyctNUZxGPhQQBqDJ2/GixJ1VRFi5weEU52AiAqicjh+yT2mTlU2uHxJrHc/9gIlQomaTY3vUgeug4VAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapmZCRA9TVsSAnZWagAAqc8P/0k4Owy4msnyWO6P7AWZ\nnQz8HmoLO1QCzb7KBbHSQ+y5maQqMpyd+0XLhxkNvFEIo2/ho3xxMZhSJka8\njMKzmjO/U7H3ZPpi1WFebCYDSSCxmDV7G6DvRhmx4VrMJod5z9aNyVorYU+W\nQbJHAIMRTAijw8WkHlBPRll4Ue/TMe4S/kdAUvVIvnmBeYE6S+0F1okKc59b\nypIJa9luEFQOsu286NizAvDy0BDFRAJOCxPjrHhVrT26w9VQIsZi2HosDdEH\nR1ZYTUVDiJg04xT5OmuFXwCk/mvPrs7OXCJ6xGeZ9sOxOkKsHEyXpZy8/Njh\nTUbkj1NrQ1iCtovB+VE+M6k7WkM6LBavbVRzpamZWVaM4JDc5zDqGXuMqXLN\nr4LukXT/3EXxBQIEZvff4rtEW1RR+o72jQLXUfTpnF4HJh/ceYUq5BeuiFh4\nhTQVUUmTxqiZEd9+jhfZ6lBY+LKd4F13AfZ06+7cQFooNEn0x1XYrwFLZpo7\nqsBOTnj9RdZfnUCQXtRrsmoFZgxzNg0hM0hS4AX2SrQfEjBE+Sv1QALmjuxL\nVGwhITwLWZOy92Bm/QjDPgNYiL947J+GrFB7eDTqaFxcJh640l07sge7MPlx\nLZK7sM2yS3GtQSBUURPo02n5Da8r1ZNQAtTF60YJ23ZIRKUyoFlqQ1hXoZCW\nG9Ik\r\n=nn80\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.bec065920.0","@material/shape":"6.0.0-canary.bec065920.0","@material/theme":"6.0.0-canary.bec065920.0","@material/ripple":"6.0.0-canary.bec065920.0","@material/animation":"6.0.0-canary.bec065920.0","@material/elevation":"6.0.0-canary.bec065920.0","@material/typography":"6.0.0-canary.bec065920.0","@material/touch-target":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.bec065920.0_1584044440607_0.47983338763079253","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/fab","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.776291ef0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e384866d115081d6de9fffadacd685eb0ac031bb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.776291ef0.0.tgz","fileCount":17,"integrity":"sha512-mWDIO1YUTcn8lOe8cBN6t6WGUNsnA6r9cYenLZVcuaNdeFfmocBvu53Ci24GqCe5eAE/RAnGB41KcnWO+zTi4g==","signatures":[{"sig":"MEUCIEDRVxyXWU71qazILPfCLf2uDysU9kq7QgAePynhgBVdAiEA5/y4g7Gdfvh13l7VI2KjGUB+kjpZPqMc34XgkPjRzjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSMfCRA9TVsSAnZWagAAuPgP/j8ZUCdzjiOeG5ttZSJY\noODuB0sW1e6HbGT3pnlBPiqiMOpuWrw4NOFWnnbcuIvTVWdgWdX0C61turlC\n4OYfopcMku8sk3FKU27j8epq/QG0JwaswTOoNrehyvBGJ5uWPKRcUj51HFFC\naTajBa+pBEyGE3y1fzynjiMHxstR7nE8niKR0ZXG0ioi0o7iquYxiDoV2peg\nkPsw8oDWvibOJlARTpDwRV/VSp2mwEJpS7pZ/HEUBSMI4Cm1dzVd/1K3/DZD\nJUtdap7vXTi4eNaDJ2XRKQg2w00AOkOqDeARNc1oCmTjf7uzkJchcsNRDVdZ\nuSEV6WGOwChCpwp31k0qhFW30VUCecZb24umMAwzL46y00wv+87ZuYlZIbTg\nGWL22p2kZ7eSnjYO3D4Sm75EA8CUsS8ZzxY2HFr7NXLmle5LT5nbdapkpXWB\nZl/uCFAbkyeWx2D7frvXqqZ9wS2CBey7ZCF0t3EJvSUjPX4v6mkR4uDaEBuY\nMhVnpP4AZ1ldyFjA8UeobEirMc+rgB2pqT8hqQBGy++FdvdQRmbuA55cjZ7D\nnLMmFSHLq9yXt5hQ1OXhP5JyuNghw3MQwRjS8w7rmD7w8NSb05AGAHMNufFI\nVhsDkCmmG17PtdJsOT6LgvyrbQ/Cxx/55bDiJ7jQLpaISm9vOQX2BS8jNJkD\nY9s9\r\n=4XXc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.776291ef0.0","@material/shape":"6.0.0-canary.776291ef0.0","@material/theme":"6.0.0-canary.776291ef0.0","@material/ripple":"6.0.0-canary.776291ef0.0","@material/animation":"6.0.0-canary.776291ef0.0","@material/elevation":"6.0.0-canary.776291ef0.0","@material/typography":"6.0.0-canary.776291ef0.0","@material/touch-target":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.776291ef0.0_1584472862684_0.21016241376510325","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/fab","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e858264eaef0cfd6e9ad26017e8eaa039c1d057","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.ece19f3dd.0.tgz","fileCount":17,"integrity":"sha512-6I/XuXPlcgJb7doYw4CU/xMSrX76dptW3l09TaCCU6Q0nb+UHh3LNtcpUf+ypfakwwi4nGeK3CFEvsx/eiIWSw==","signatures":[{"sig":"MEUCIQDZWq5spvd0lXwFl2/xSJHxGHMmffs0ab8j+ToaZ1R+CAIge5BeexrhCrKSf6kTenucG4NZZDU49p+U0OoZtJnWN4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUi1CRA9TVsSAnZWagAAmI0P/juyfYYVtv0x23Ojsahs\nZqJzrgxrDmgKObnc/VibXcjOLpH9LFD5JFwRsSSTx+aFdNLlXdCO1bNru9+5\n9Ts8A0E0Y/Xl+EEXTJRx/dUqVcwgTtNZgKStO/AMxK63IDbcAVOy03P3KENT\ngqs/YHbY191E1MzgyWdffanE6vZtglgcf7UNBsDD6gXlkT3QF40Ts1XcSoHR\neKTeTYVa0es6EO5vjEOzgsA1cK3NHFImlguehQUfTQXBQ3nDgNfbcB+pjLJQ\nU4qiceb+Fde6dL8gjRPXdLKLMkAOrF/toAMroYpz6iawGpQtRk5ROtpswfRs\n8eUi//8qZabkA6JjQMVrY7bXyjqXiKiwWNyknDrPe8Cs170b2i8BTuPDaBNX\nSwaDKhXJThr+c0nk6h25T4GfF6lKrplmo/SDISEKSIcx//9fl+Jk9CktUSA2\n2yKZvCvaX2znu2cN9kKOiCxplPSCRkVPrxg6QxW6f1/RXtY9LfL3M5EM99Ei\nEPln2DHp4Nm2Wc1p53BiIprKfnGBNAaxDy73h+TGlpN1Fj9nJwELrEycKSGF\nLm/NxpUz4dDYE68Dfpjh1D4WWOq6O1SYCL5qWP7IbYgtIQaYdCH9lUfm4aTT\nOOZuNXG4HAhP025OxC+68PzeFdCnBu5DcM2eZHQ47DG4RPhogEnMjk2E0BWm\nWIGw\r\n=q8bN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.ece19f3dd.0","@material/shape":"6.0.0-canary.ece19f3dd.0","@material/theme":"6.0.0-canary.ece19f3dd.0","@material/ripple":"6.0.0-canary.ece19f3dd.0","@material/animation":"6.0.0-canary.ece19f3dd.0","@material/elevation":"6.0.0-canary.ece19f3dd.0","@material/typography":"6.0.0-canary.ece19f3dd.0","@material/touch-target":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.ece19f3dd.0_1584482484808_0.8529276261623959","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/fab","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7934f74ba11b3c9ffa5b9553de84984d85b1c842","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.4dc45af6c.0.tgz","fileCount":17,"integrity":"sha512-Kk4KvxMUNhgEPTII4aqLo7lTd49i414iv+1SyzE9gC1ZrbwiTILyCVk7prS41gujXKdnfJg1vpYzEfO4OhO0uA==","signatures":[{"sig":"MEUCIGTXIcI/qwn0ZNowO5DF9KLpcg5cbO77bGmKolHbYZadAiEA2DKma5DSjsMVbn2WDFH28k/uKFjqD3bH/sZ0oF2bN+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX3ZCRA9TVsSAnZWagAAn8sQAJNY+H9syvJlz061RtNO\nJuPO1Y1yQTsRFJRqcTcCRY2r5VRKqj6ZFT8HLXlH/2OotagEkqYEXR/c+VG2\nnC1XHvie7L7LFl/bPwQnw146bILLpsP8QpR0clRNHhqvsW9CX3G2fzmaW56S\n3vRxmZZsi1JSGOp1Sw91ULrJOZpIdIUSDb/ieH9RrD5Am5pskkLkqDPhiDFz\nXY+Ghoo1lKz6ep1dWh1quVzYMQkqKqGMqrOf/wAONE+r9sAH8wxClGT2icdM\nr45HR7NQ4yVgkjGi4BWeGTV31STkwdkrMHDq5lmlgLDzTIcTZFWAO5O/+0rz\nplpkVYDtwP+pCSopgaMokBN0zEdsDzOYYZiphE1StmPePWfL8QuikePaFUlH\nT0lIxEPzCMUVimqty9F0HIWfhInBCEqcts7DPR6oaOXm8ALAdP79F24u8Buz\nJK+WYxStzfO483U8Wgapay7f8823TLWYpGkGi6ngZxnBIOOFLhq4+cQjApAH\nzdZ+P23DDSpydJvaIy2VO5nTOteB6bAGcko2q2XmE6Mh47cRzymUm9Jb/zN3\nnt6eOth6xeBz1zc8agz61bbCMEkf1O2j09TJX2mH60LS8A8rQH8GiY4n1f/L\nERvBZG4LQb6EQztpshA+gsIMlKx6yscLKvO9mLX2bpSxD/rMWfkqxOF1iZHE\njFCk\r\n=Xg9d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.4dc45af6c.0","@material/shape":"6.0.0-canary.4dc45af6c.0","@material/theme":"6.0.0-canary.4dc45af6c.0","@material/ripple":"6.0.0-canary.4dc45af6c.0","@material/animation":"6.0.0-canary.4dc45af6c.0","@material/elevation":"6.0.0-canary.4dc45af6c.0","@material/typography":"6.0.0-canary.4dc45af6c.0","@material/touch-target":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.4dc45af6c.0_1584496088497_0.5771355022095837","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/fab","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40e7a5b3deb00aa372daab6bea6813552ffd53e4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.6b48781bf.0.tgz","fileCount":17,"integrity":"sha512-pnWWIE2r03JwQIoVl2Oz6uxmAhyOSGwbo8vgCmcUWAN0XcBsPHE1x+/e7/SteBZOeL102IPKLO1wkAxBJaFUSQ==","signatures":[{"sig":"MEUCIQDqSPD6X7Xh96HRzU12qskfsFdrWYN6tBcl0GnOGzL9zQIgAdVPRPROj0ABwTl+rTtO2hoNth6ES+DMPcfYyuZ3P+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj+gCRA9TVsSAnZWagAA29QP/ig2LTpgoVZxD9aIHmLX\nn9Iun/Cxo0W0BB5QRpnuSL6CvCAuVmjT7KF4wjuwb8v/cGCVw0OAcN+22pn5\njxyeVRSl5dZ+SEa+zO1mfkyoTuAnW/PPzw6OIwTUg+EoVRI9Ih+D88cQZrjt\nBSATUqQvMmuQ9Y9452i+MbuWme3W+euH5IlaNyGNGi1shSK//GFijCbyGS7l\nD1JBGn2L+10qaJc+/R8L9n2qs8Bz5Si5lmliWIVwBP3nxtKZbG73dHNSGe5G\nK31p/pZwTfwovdP59D+8Dk6g4mqZJSLFbxv3E79yA+9LQtTGsTZ7C4uv6tFE\n9Uq70wVafiJ8K/Q3T7O8Im2PGlRYPX9qLtoQtw+/WHUEzJoulu7ro8ZmNXMV\ng0+ex2cwuXLHHM86WS/i4XVt5V1CIdaQrG5+8PWAGPMCnz4Dk3Y61sR9GW/q\nYeR51tpvYf8Zd17gwyqCUcSxtR54XojcMCuL0MllFvDcZysXgXetQeuY3Ic1\nKKdU/ujHlBBg3CMV/D41Fh3gnZ5YhlYyMPvOwkqw6VxphehKg/GMhso4ItvB\nkOKqRspa7wbAffYn3ls3hmMIas0aQ4ofd6qm5dQqbUJjLtj+N9C7PhXV6ky3\nmFeYfP73aHfel+IP/w+nhqsG8kvEaDQxwBrbvOIzzJvrHVetUrEFTeFRF4Oz\nKeU7\r\n=x2mr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.6b48781bf.0","@material/shape":"6.0.0-canary.6b48781bf.0","@material/theme":"6.0.0-canary.6b48781bf.0","@material/ripple":"6.0.0-canary.6b48781bf.0","@material/animation":"6.0.0-canary.6b48781bf.0","@material/elevation":"6.0.0-canary.6b48781bf.0","@material/typography":"6.0.0-canary.6b48781bf.0","@material/touch-target":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.6b48781bf.0_1584545696333_0.39534509341602475","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/fab","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d71cda60752ac8cb4e494ea2dd07b8688d36a878","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":17,"integrity":"sha512-NIckBPnoLSZ4BkSU5Tfi3m3ch1coS/IRwD13g7KMvUz5JB+58nQVG6/j4P6E8YBifIjj5JDqvW/nMMuc7C/nbA==","signatures":[{"sig":"MEYCIQCPgpmY9MboCacF22fK0aNdg/0QEhfStlIlLHVhAKU/5wIhAINjcY7VVSxKo6PhHcyiDTr2WJ+p7tXr6DL+DcqAL6bi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec62FCRA9TVsSAnZWagAA5RUP/jdjSpF+I2401ilJcLlV\n5Hb2+7ZJzoduV/GF5e/456TGZ2RYk2cfTw09b7UGEUQa0pGblTvgPRTZnMl0\nmKlgkEm9GfNQUcF6VyM+C4O7KBXWQJEMmlXmmR8KCf7mONvvSnOZKrL8cNj/\nPgfs3mfW6oObTFXCxHdHGQluKWjijmajlhtYmWjpsoarAKMTCAICiVshJp7Y\nIZe7N4J/SEo1BK3P0dSCcYsnQzek85jA7aLNK0fJp7yPflhKQN7PQXpOOwTS\nSScp/Gy2+6y+TWP6l0qyHFsoA+UA2UBO5qmKJXtG74m7EwV+IsC2Gal9gGQ0\nkOF7sNNyDMBNkQEBEwJdPZxO9uGBsGQ7TIM1PYsQzLgthJhU5fBNK84QGYXm\nP/NmuaImx+Uiv8AxusTZYgkfQENkwhxvtpVwDcAdUxXrjOmZ9zWrfM8dm1xK\nneeYef9J6C2NHpXPANIPbzvJX5B5FgTMcvT33kphscrekEk6Dk1gubq8O8/7\nHnc/XlNbjdY4dKouy0a4g36T7cD3xkw2YMHbgRsPnFz1L5AiRo6NvcoszWF8\n0karBlpyefRBKU6aPxYgVvNLuYIfEATJYYFWQEGnpZbX7Q6xUiMhiK5jv2rT\nL/+cR/lYu+7sUNvXuAlGFPwHcONk6HI6d3zQnQK/kF6PRWsq9iXLm4YZN2zT\nLCgP\r\n=tZ4i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.a88c8e4dc.0","@material/shape":"6.0.0-canary.a88c8e4dc.0","@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/ripple":"6.0.0-canary.a88c8e4dc.0","@material/animation":"6.0.0-canary.a88c8e4dc.0","@material/elevation":"6.0.0-canary.a88c8e4dc.0","@material/typography":"6.0.0-canary.a88c8e4dc.0","@material/touch-target":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.a88c8e4dc.0_1584639364669_0.9434969641077808","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/fab","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.cafe18860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38afec2caaaa1ba23c7ad5913a0a6f0960110472","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.cafe18860.0.tgz","fileCount":17,"integrity":"sha512-GC5YbJoixipuacPXp0wZ6PlssJ6S/vE8odxfux12arVrporlDyNlDEM2lBu3OuG4j+B7H2T/PnxfUifGLf699w==","signatures":[{"sig":"MEUCIGZ83Wvn4XvXK6LO4FqMGnPUd7m1bdfZ0+OuE4Wa/J+OAiEAuCgdpR3P3ay3FDr9fjV6YhjctCIDXhRaA1uk39Xg0hg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNj0CRA9TVsSAnZWagAA7xAP/Aj4+whyBl+TFwj6JUXa\n9jRwa5IGnq6TcSFWSML8TylwRXnt+aZ/obUmgcrjbOLHObGGv02rQaHzqWmE\nc8egDaUCvtVfZlJDoTsZ8eSqVsZrfVuXIM1jdbF0thgW4ZGzn0JZOCwYqpP1\nWyjbvkQ9EesaS2mwcJgc8lZZal08TIYGr40GdRdr09V/H12IJctM9JTpUFow\nrOX8jjtGz50QPE6fFU3p2A9D+wA6yxvGOcwbUsAFwOYMoNYgBi+z4PdVX9Ic\nEaiVhh7xrttfNHRF/mSlvhl9U31BkCnU5klCz0eC397WyVe0MqC/CvBg7cpD\nLtCvTlXbj2sy3uR6rthNfb9azZ7gjpTUigL2bBhQqowX/ufHKUY1mzsUpoWV\nbVJSkqm8+sLpWCsPAKLbSZZXB8S/ngOkllX7JuVswGDOt9goSqKqdLnIgTCk\nnaSW+9lBvxd07/5jygvzgEwNZrFyFA+oW+D0zf/sQ/JZsfcYaepwecnRTb3n\nh62goHws/+lnK8np0+lUnZrfw36bHZxcX+NshMyVuTaV/uH5g5CC2nq1YXmH\nwXt8/R8GmcMRXkRli1PitnzjjeyBQHieI61uYZxIH8NoaPbrfOyiE/30s2tB\nYgZq0lUMF9gWoGVVCfJiqryC512yKtTCllyJi1DpPFAooEkotHQvYUp/PoT3\nJ6jf\r\n=IG0u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.cafe18860.0","@material/shape":"6.0.0-canary.cafe18860.0","@material/theme":"6.0.0-canary.cafe18860.0","@material/ripple":"6.0.0-canary.cafe18860.0","@material/animation":"6.0.0-canary.cafe18860.0","@material/elevation":"6.0.0-canary.cafe18860.0","@material/typography":"6.0.0-canary.cafe18860.0","@material/touch-target":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.cafe18860.0_1584716020096_0.884634565649004","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/fab","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1e3fe9c447243e3e7d995913676d4449f412772","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.35a32aaea.0.tgz","fileCount":17,"integrity":"sha512-dY/wTgRmotwweHWSUmSd3/0ufpWVRFPvB4cG0U9rUgUhoZrUG+ot3FwfkLqSAOLRDLOeTe8k+Q14Y5FRq52rtw==","signatures":[{"sig":"MEUCIQCkqYOc36Zon8UtsHIR5hl11PXZizhys+iZeeK5oGyJ5QIgd4ItqmJmuhovBrodF9SajjYht3Irrg4xkwTwWPIaXPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSCcCRA9TVsSAnZWagAASfsP/0H+w3sF19wd9hRMm/Yu\nE06ulZmGORAdymA6ffvmZ05w6p+xPNql6bcAbZw4dAWhIJcnWaBlZUPHf4iL\n9wGiPsKwmgnZKkjfSSx29C5uHCD5uFi0UvsfTVR7p1ZoPwxurfQ57es8SWKY\nVmXBJcfQmRDGqeCt821S7owD4aAta4fXJI7FDyOruNX7YwZs1X1np9a4KY6j\n1ss0tzmeWmG0tQEJBEjflc4kYAf51lIsJPTME8pDqqN9eX3uB7CsWFKaN1C5\nuOGPW3sKBxQp6JqZ7RPd4C/4irOTMzIQyeBQjWu7WACtSxfpfeWG+Onzleh8\nbZE7TbaPasRyog+3BA/SId1Ho6k9JE7JUFOMEWsS1iteUmnqw/1U8x6hVw9h\nBN8p+wYoy5D7XPiY4ZVczEwjl3GAElMTIncXopeUNQot/2Fhqk2zh3J7ZbwS\n4VX89YYLlWCVmj13xeQhudt77FsvX1GyOGK6IKJTrM3ioLcx95WFSYzBGTQy\naII11hUxOzg0bWDv4Jdf7nuSotfP70Lbw8bIjKxWFuk3pFu52lNMExadDgTT\nZW/LG+V+kqh0AC0CadSImzP8LV0NesMkLtIfxmm2SAcVuwOHclwobi8errZV\n4KHUwTENvN/2I9Q/4F0mxuO2RG9k0FDydSbeQyqp0w3+6WTiVVcVp6LDXxH7\np+GS\r\n=sLJu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.35a32aaea.0","@material/shape":"6.0.0-canary.35a32aaea.0","@material/theme":"6.0.0-canary.35a32aaea.0","@material/ripple":"6.0.0-canary.35a32aaea.0","@material/animation":"6.0.0-canary.35a32aaea.0","@material/elevation":"6.0.0-canary.35a32aaea.0","@material/typography":"6.0.0-canary.35a32aaea.0","@material/touch-target":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.35a32aaea.0_1584734364268_0.08293692467355762","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/fab","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.e75deb854.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f88add3c1d21742d219626a5094ccac0af74a62","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.e75deb854.0.tgz","fileCount":17,"integrity":"sha512-6wcdSLbqWlIeJ41y+W3JzOHG/yUEsW9h9c67nbu9IzlNfsEmYeGvnetFjhz0pWpsvh7Bx9zvbPQhKye9YKcrbQ==","signatures":[{"sig":"MEUCIQDqg3VxGJcIWow9BhL/xi9ePcL2jhH0yQzWgBxNFoTVzAIgWbC7CC/DW76V/kDw5sP1rNpICdT6rpom9kLHGHjErEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUB+CRA9TVsSAnZWagAAIgsP/jNXcFMcnodz2LKk1d/o\nFAGMZXT4Bpdky8xB3563x6ed7oaNOrwV9PoAuqXPO3Y/1QrLoebAV72I9ckl\njVojUT+iLvGV0ppHUdMzSK/BxghVRUmZG5QGYGtqE4cZ5tmUP65YVX0wfkVG\nVp1iJfqWTVdOXClxYcNfWN9BSKJCC0SBTjygg51EGiKpFSqrRQD1W00yHEMz\n5trIjy3ykZLEsCQR1dHxJaI3SKYEwU5DklDg+ducrXQcRs3oxD2uzjowukRt\nmz/6Lf4nyFv3vzIv0D0TuPQ6CK5Fyr93wkv8RkCHc4CChtbq0icPTAwd4Yxf\nwbO0GxlqBkkbh1PQNTl8GUcW3e1PdgrsmscaSwnd2XDPYFtvAyfCy7OZK/EH\nZfFIJzQgap8rVre8bqWflEBUGEGn7vi7CwbLa3pJfYII+j83GqIqUQsmkW8v\noeClX8bJMtZw6FYHkbWPL4JdYgd9oGMYnIKB/3Ol/+QBT8Xqvfa5r5s8n5Qy\nsEKhtVf5XjaU6Sk0yZC23QuigTQ9Em2RsPSnlwk4nuL3qKcd7JIjD1Wr0h6s\ncrO2p809Gi7vpfjvycDvGuI/K3ZNobdb366cPsWaHdqIpfguiY64MM5+y3J+\n/9lcmQ+POCvlUzyCUcp2LvjBQLv9y1tH8IU23LrFnsR2geWdWu+mR2nOkQ0y\nWUg8\r\n=ZiWb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.e75deb854.0","@material/shape":"6.0.0-canary.e75deb854.0","@material/theme":"6.0.0-canary.e75deb854.0","@material/ripple":"6.0.0-canary.e75deb854.0","@material/animation":"6.0.0-canary.e75deb854.0","@material/elevation":"6.0.0-canary.e75deb854.0","@material/typography":"6.0.0-canary.e75deb854.0","@material/touch-target":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.e75deb854.0_1584742525723_0.5728283104968277","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/fab","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c1efba6cb923d0909a116f6980c8af0bbbc8de6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.2cc6966f6.0.tgz","fileCount":17,"integrity":"sha512-OD/BDYw6iMbpf1b2bch/HMcBl9LV2lBJqsFeL20LQnXREJxPUhuC69g6OC9I0R/KjV3jG2V+gvmKK7JGxhF1AQ==","signatures":[{"sig":"MEUCIQCYetAtWdFUZdvV57kMa6zg4GYsoXBPXEJ8wZdn6EBK5gIgEduX0mDIfwNUNX9pgmc5t3ti6iOPs9Tu1k26lA04Faw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelTeCRA9TVsSAnZWagAAzAMP/j3DhVASl6QIPd2ObhYW\ne7k6ZWu7Sj21Lzp+0/lKYu8/7w+txjJOiuqRKH+MeAJRVrhVN7o/3CfhXke6\nCrJqYJno2HdyYw2m828Pa+UnA+QA1WLJdFKVF2MYfGFwXIVwlILjthTZePg8\nzWwg2rZDOJSQsYGoJ4IwbLXskKyxScSWwfsl1XCy5ytAe1AZEziPCK4bjpSi\nEOT83xvth9ofdBN99/llVkBz7eZAXYapYtbxwdePKvc5uWZEyE0HgMqg/yom\ni/FtLh3PKyoHbwsfOdt9RM37Sv83f+32eUWLczm8LN8QK8EjavbKl81CWAHW\nz9eG/woAhTnxfPTe31EuRFAavciaWez654hJI3H52Eeb8OGsweGLHHKQKcGQ\ndmXHMndIEd/PW2NF1rvybwYtWVXqY4OxS+56yzZkp/PceEF5ZSa/ygPVxvsh\n07gt6VIJ5Iptp7bveGXIOLg+Zbm8wa/60Tndw3/FCmFWKR+LAUUL1kFC06Hk\nHvKEj65s8RFV5OKk67F8CRIUNGS3w3YHE4lp0Htq7/iKDh7X0+vFNPvgRDlk\nCWsW1HV1bWiiVDfWtvAGAfTgrwktS8j8KjyRjhJ8yS3S0XYeAN5Ize1fH4MU\nIfxIr8ybEWWae/YFC5fByj0TD6UR6SqRp6yS3uBwqoO1tgFY0qJna+g6BxzN\n5vC5\r\n=Ex5P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.2cc6966f6.0","@material/shape":"6.0.0-canary.2cc6966f6.0","@material/theme":"6.0.0-canary.2cc6966f6.0","@material/ripple":"6.0.0-canary.2cc6966f6.0","@material/animation":"6.0.0-canary.2cc6966f6.0","@material/elevation":"6.0.0-canary.2cc6966f6.0","@material/typography":"6.0.0-canary.2cc6966f6.0","@material/touch-target":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.2cc6966f6.0_1585075421409_0.3682967683950007","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/fab","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.8707953b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03331eef3157425c165e5164fe4517db8117c2f0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.8707953b6.0.tgz","fileCount":17,"integrity":"sha512-4vbwvBg6kagNGWrTKcGZa/IvRGZIRmhUYVQKAe8loKJj0wqTfhZU5k2CH/iYuEORDQRplSMNbjc+WI0N15fLHw==","signatures":[{"sig":"MEYCIQDxna0W6RmPbxi/eqzL/0XqM9W1y2j42fRdNkBJpg/rvQIhAPqaectiCt2oWejoSQoLClx/m/bW98f6qy+2P39alI9A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelW5CRA9TVsSAnZWagAArsMP/1pRGh+HoMgeBoopXI4m\niLJ0SxXeVfgeR7wBhX65FCqZWTbjqL1IfJ+OmDW4Nt/rIpdKEyHEijVaJ5Ur\n8dN7odWb4Me8rFVA3Mu1aFr3rbiU9817yw7w3+4rVi9u2TXzgFu2WGGDI3mX\nVhIw1aHhqYLNy+goSvLAvSAE8SK7u+cd+PcuCYGTiBVcNxwmHSlCHZuSH7Xy\nNJVq3dTMU3iUHnbGbpC6yMy9fNGPLCu6v6rFbbdKR12eIrlmT3jVHS6KJ//K\nbRyonH7BRWlIe5CEhMCdwnp88nvk4XplgfHPwy9GLUDGMt5+QrnVnH8nNoVh\n46JlM9Sg3kIERdrr4ciHp+Yx0uSTjDmhL1cJxxC3qlKDW87SpadiYjWB4Pn6\nd/JZeLIOUaa8dUokGDt3gFhHdaVYerjE16Sp1viSwsAOrXLaWovO0duJ033D\nHN/jlGcR6G/onc1AaTrxpdI+o1OW3BPJjPp0WpjxNn8k4ld/F5Fq31+jAjC7\nSbwTOtnLm1bYJK/OB8uyJ87Vye+8DNMZu6nXgKK8cuAN6+MNjPhPJ9vLb74p\nk2YlWj7pu3UMuvVHFV2iKpBj7sHSGD7W8nd184ajp+jq3doG1qWsvVQrb2d7\n+sGLMslNwD3YdhcswD0IC60oTb0joWa6AgMIY+9Vcrv9aheiyts5xvOtWmNB\n47iA\r\n=HGcy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.8707953b6.0","@material/shape":"6.0.0-canary.8707953b6.0","@material/theme":"6.0.0-canary.8707953b6.0","@material/ripple":"6.0.0-canary.8707953b6.0","@material/animation":"6.0.0-canary.8707953b6.0","@material/elevation":"6.0.0-canary.8707953b6.0","@material/typography":"6.0.0-canary.8707953b6.0","@material/touch-target":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.8707953b6.0_1585075640928_0.852924576100704","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/fab","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa506ed97293af3239a14d2bae8370bc5799663c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.10af6cf39.0.tgz","fileCount":17,"integrity":"sha512-Lw18M+oo+fq1T1zRFTvcu9vTNzcoiFN3+kLk8Ks4oE1b8Be28lbOIY9eIb2BCKEdn349HWzu5bemszdu9fZsvw==","signatures":[{"sig":"MEYCIQCq0ueeGnU9YSJvWkSgr2twgIhkh1u5YtghGWUjw67L1wIhAN585M63+569TuvD9/BjtKTRPIr/UQAqyZ0GqJ36Zxxj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6B6CRA9TVsSAnZWagAAwuMP/3WOh1NfDZgADRAm6JUq\n1yqRd4NAIQL52YfKX8bACSIJz1eMIezHv5ebYSufYo713x0aVhekufa8ivs4\nEJmFJ/wUgV2cfvkmUgms8CBRQ9brhX4rIWx9iizaXqHeWG+YJPA8bP/BStbt\nfVw519covmkFp+LEPg/QpQFt+ks5DaswxxovanZgZJwI5g5gWOq5a9jSCIFa\nOhjzogqDbrIsLds9tvHYcx++2IaT0qGOIzbstbLv3qD5dm7lHMQ/kjvLlIaf\nSqxJQL3JAdMRyUdoJoFf36qNAngr75i//MgDR4NIdVb6qFGJnUxYP1q0eVte\nMIMqYaWwWIM8LINQjeBfW1u94QxE4GUMkyEPGJNiBMPPGouqpg/NqE2l47fy\nowcEemca2/I76r8VXj9ZOjBwARLHtS5y791Qe397trI5t3FLwt75+p6ZD3Gq\nlu/cGuEoCVn8eZulv4yFu2QwzopvGfyw7JNeWLiSgFiZpMAF/7y5WJIO+kO0\noNnsmHSSqF/7KcnJF5eYp9pwSlc9q3xji0/yYD/yFFrz3HYvMaJMkDNMveLl\n3fMZL2ofxAqa93JWD0T/A0mG1t1SOFib16HeRywzb01WAi2tiSYZqPA3Vs1T\nUEbXumzz8x9S8RFPWhR4gG3TQP6dVgRKbXuFhkMO8ZkH1cNVPfLeoo0Bmd89\nQsSs\r\n=phK2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.10af6cf39.0","@material/shape":"6.0.0-canary.10af6cf39.0","@material/theme":"6.0.0-canary.10af6cf39.0","@material/ripple":"6.0.0-canary.10af6cf39.0","@material/animation":"6.0.0-canary.10af6cf39.0","@material/elevation":"6.0.0-canary.10af6cf39.0","@material/typography":"6.0.0-canary.10af6cf39.0","@material/touch-target":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.10af6cf39.0_1585160314116_0.723221535799899","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/fab","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78c10a3d7e8e4a17d4dbfc05f1081b35bde7cb68","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":17,"integrity":"sha512-1Z+B/irkpwkvi05elSxvLLWEF9PtB+Q/ZkpK0qUA8WoGkwgo9k2OfDvlzmxnZK6v1kyWg/phPrhEhnTXZ9Q23g==","signatures":[{"sig":"MEUCIQDv9tHDZS2VoN6m5JwVWkm+y8s7BBEPSIwaN26x3e2RbQIgbjDz8iqk16B9rZYgJEPzY2whYCsp3eYnuHBU221aq8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkBVCRA9TVsSAnZWagAAV9YP/jG39gw1STav+gDOmvw5\n/OFdvclki5i6kBO+EujgW/Kuv2P7aDzes3R/MUTkZTuP4sq6aPtZ1UHlfSCI\nsQGXgK0dPzBw2rUr6pmFfObKvu9m9281S1EZuTEOG2MEcuobPiZyIsMesphr\nA7kaQjyengEAQPxgfTRiX0CIAS9cQZizHgvLmn7yJzWEBCAlAyes/MAVV9al\neWedNBdHiKVV35cqeIAJBnE51Q0j5W4jEEFD4QloqP1Pz7wzowdNVDyLjNvv\npZsiYQmIUzbhkAi484/SKRNwqIFxm+CL+B5xtezFidEx76f0ETrmFChjkCsm\nqOVXf1CN1WDtjzIw5tB3hR+jbpNHWx8ss7vC1DZ7YckysRjgS/trfNKfN8RD\nvYlJhUD8DnDg0ekOuf0Ow8XYrOuOV8GYpIYJxxxMP6nUkbQWREf0B1ykG+CC\nlM5NL93BsAgCj4zcytGjzV2mVNgUJ6ouW205yNqCvH6rw8asOdMvNqnua0gj\nl4QNdCRoRXyh/2ytsnX88zKhFl/68w9Jfb/I24qFNbmjZl7eUgKR9x0BSeC5\nTuVfYmsVnlFXeEClpX0UbWaQeemzSiskhQP8oGIG7iw6XaLXDLD6GcZeASVu\nfEb4qw7O8HrCxZ7Z5UpKxZL1c0UKoVBQSAnEqKBJ7I8HH2ZQ1wXbN7Fw+ht7\nN1KB\r\n=ynBG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.7d8f9c8d7.0","@material/shape":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/ripple":"6.0.0-canary.7d8f9c8d7.0","@material/animation":"6.0.0-canary.7d8f9c8d7.0","@material/elevation":"6.0.0-canary.7d8f9c8d7.0","@material/typography":"6.0.0-canary.7d8f9c8d7.0","@material/touch-target":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.7d8f9c8d7.0_1585332308743_0.7020147582556742","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/fab","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bfc4630e7750293a4b543edccf021f7ef6c1790","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.d6315efe2.0.tgz","fileCount":17,"integrity":"sha512-8KMQ0RJlf8gjRr5Q61yxyTSzbpKnMsFlDELZHWgI2TmemCJOi1ZZnIvwxltL4aJB2qMUYQVDT9pGOhs/Q2Fltw==","signatures":[{"sig":"MEYCIQCmY6GOPz8v0Z61GJczBsvtcSmdYWB4Hhgu9VL9pZXJlQIhAKck919usjgWySH8MIW2SEyqYGm2P0CMw8Hyx/VpmESo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflp4CRA9TVsSAnZWagAAj3IP/3w9R+kmxxulUCYeB03l\nxwiZZ5mRxanwvUz5DGdzkyEvSk9ec9iHGRawYygvXB5FoXwFFjqIl4FdXbnj\nVUv4A0g9T9/OMdAJ/Hj3PmhkIFsO49qGbBbY6I9Q15gPr2nBnnbcM88mRT+J\nnriBqwwWO0ZvpgybjYgse4hHLuDxinYbNf0JdjxOB4VVrtTCs+fDEPpymmg3\neuAlnrVj6nL0i0LHKCpy6CX4lQc0Z3WorQdNX86sUgYLG/5vaxl2sok49Sg/\nrG4ao3FKGFxKtzmvzrp2NYpC7r9thdZQvzGJ6veQL++M0l3bVtylD9hGCspe\n1gxjk2Js/n7zQs81So7ZOBe+CTtKG3qBv0/oAMdZpun2mSjfau7pC4WVbTBl\nvPdGH4EYw2y5hxVGOv6xk9YxvTINEoVdtPGLiqK1CXkaXCCuHnp8BdoLCoH7\np55+HySvjUIr8B2GrINL5DdNF5JA1aWh4lK9gVHE2zo+lM5zunZNlUUhw2vL\nXJ5LxUvH6j5HO/SpBwVNGarN/5CVss/icY4Vg81GRPtASLLtLh1hQP1Pn2ko\n/zrLSwd4/56vSHYZGjLoHUj7+zlfVSfakehuWutoBKzNKoUII4qPoUpe0IPf\n3BKVEih1AIdaEZe/70EyKWFbqJ2LvE3/tVcSwSaQ3lip9ltevmB+vXsfIdUw\n3Y9m\r\n=Mahf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.d6315efe2.0","@material/shape":"6.0.0-canary.d6315efe2.0","@material/theme":"6.0.0-canary.d6315efe2.0","@material/ripple":"6.0.0-canary.d6315efe2.0","@material/animation":"6.0.0-canary.d6315efe2.0","@material/elevation":"6.0.0-canary.d6315efe2.0","@material/typography":"6.0.0-canary.d6315efe2.0","@material/touch-target":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.d6315efe2.0_1585339000061_0.08447686542452781","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/fab","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.a3016368d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc00f3bc79053544c8344b4443ba2de957c8fc14","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.a3016368d.0.tgz","fileCount":17,"integrity":"sha512-w4KNUgBFAEI4C4CeqAnYa2WLghI9xmM/qJm7ET4maGghhZYkQ/iG2awfxOpY2nbzU0OjZb7l6cxS3+ZF8cF4fQ==","signatures":[{"sig":"MEUCIDs+3l0DUrR8MmxQgLcyaX5wz0DQbtZg3S6vri0YGWW0AiEA9oMiEDkLR9vMo6LI+6p1NDn31qaAbPEss86HbRtX+8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm3xCRA9TVsSAnZWagAAM+EP/0dO8Jn6eABWPTXN8g96\nBJuF4QWm3fZvuLDxw4NCA48Tnmh6nQEXf3k8dJnbjkHJdnfBsxSn3/T8e1fr\nQZx6KXPQMGmYEVOEIAddfvcwohk10satLeM5NpxrEszqS9D1CLIixuizbjp+\nMjlolVTPMn5gqPVvneT9W2lm1v7gXjYSSwaEZGwnlM4KRPQ/Tdy1nMZ8MaHt\nGeJyZzL4m3EDm9Q4Mfm5XvnbF5r3gDURw3YayaFvQIFIP9nWOUpQ9i9gCTel\nESLK6wO4YU+1afFWoBBI03xPxqp0ONZyPN8t1ezK7NzVAXwgE5FDwLCWZlQC\nAPoxo0JL1apz2GeqGXzF9WCpHzdsD8vNKVDlbH2rvEjFLnf7mMOFoxXOdYoX\nEoHl45u0b5x8CqnXC7+UqAqMvA4a9l2jCv4nXLGqr0qSjp1bg3oyk1+8bnDb\nELq5TD/AWzq6onzF09aGtVmUVO8BEK79RPgvUFuPbSoYLw6uGomGU9h6PTl5\nCJxog+dfImw7FsFOTI/BoBkO+mU+HcQ6lLJQtWgEZsjTfKeJl2+B2WnhbgC3\nAXvGUPIccbzRflb+6kIdNgV1f3xuIzZ4iB5EQLnF+AFcnJHuV673vJKq+vxi\nXpP9lvuzq9eZ0awiMDS3su2wQebtg17Bq+/8GDi/ve2Fy2WQHeFbOZfvcKiU\nMoJ0\r\n=ZEss\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.a3016368d.0","@material/shape":"6.0.0-canary.a3016368d.0","@material/theme":"6.0.0-canary.a3016368d.0","@material/ripple":"6.0.0-canary.a3016368d.0","@material/animation":"6.0.0-canary.a3016368d.0","@material/elevation":"6.0.0-canary.a3016368d.0","@material/typography":"6.0.0-canary.a3016368d.0","@material/touch-target":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.a3016368d.0_1585343985468_0.1960133199485512","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/fab","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3031f02fcffa7b1454dd61b02feea60ef81d3cb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.4b45b6620.0.tgz","fileCount":17,"integrity":"sha512-tYB84SwqbGjveVSoZV8drdFJ9DCRJcJ2VMTw7/YK3i7nCGrMwcerKXZnzORu9HwWUyFL3WFcR9/qcezJoP+fAA==","signatures":[{"sig":"MEUCIQD+3iH3TMTS6/qC0ljOIL34fBE/GWBaSzKH7qI0ICaMTAIgTelFvtijsdYL7LrXTM0kNZPIXp86kKlsXHNHErndU30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2gwCRA9TVsSAnZWagAAOisP/RILZI1ui7SApGOU6mwf\n2p10Qwe8bZ5KSIioAUn2L9uhOV19b6JRzuViK72noxsEZv5dtdj729Q4CNV5\nrYG7s1D0YeYGfDVSsLWtCK5HnwgJ+V3U0qG/WPeqKYzVJEnGEgRwP7a8QSd2\nKXugRgk1mCFUsCpK5bq0NVwQZ2y27h0eu8CByVOKom3f5WZlqtbZkTGL4dfd\nw/IaxFnxc+4ZwL9Qx2/36iyL2cPcN2QMC5cDesYjeXMoEy7uSndD6AXJkxh9\njtCGAvMyh1Hi4eqDDdJ09YnTweVWyH3bDRgwijf7Yx2Ypu6QPAbkkBQ+KUwP\ndJ1gTjSrjgX+HOwKPYAdXmuFDaQoC/RvxOLWwfPr+PjomzK+t9ASzG0I6ge5\nRjyitWUa0ocFw1jFjdDaDkA/GySZYFZJmMtBytkTy6gx7KUKVdMrMdgjA4VE\nbMePDFIBHnHMat1Qh/wb4KO4GdtpZs1wPFfcHfDyd/zUafZma73xrBRkQgZz\n0JlQazuZgmQicUf2gNs51uIcyfIlZmEQyrvZSnGsOpnpXIiQlVkmiIN4oFP2\n+EtyHDdTM371/kLHrIvy8vBL+uGK5ZK2Cvs/77hVtaAVh5IRhK+66ZrvDvx5\npl0CU43MfnqtHdCu5lpPXTfIioC3kyo7/d0cxTyPG59flVhgx7voWUNwaIUy\n/Niw\r\n=lS9O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.4b45b6620.0","@material/shape":"6.0.0-canary.4b45b6620.0","@material/theme":"6.0.0-canary.4b45b6620.0","@material/ripple":"6.0.0-canary.4b45b6620.0","@material/animation":"6.0.0-canary.4b45b6620.0","@material/elevation":"6.0.0-canary.4b45b6620.0","@material/typography":"6.0.0-canary.4b45b6620.0","@material/touch-target":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.4b45b6620.0_1585670191892_0.5282847606095262","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/fab","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d87fa4765c57c0b1cde9dc5f6628734ae6f980f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.e84b9c8.0.tgz","fileCount":17,"integrity":"sha512-J8nh8Nv7E2FGWrSSSSOJNKtU07ABjEYMwKfv9MNxHOUw/M6cKSOJSVv7UgsGq20DzXyddRu87vRqROLZlL06KQ==","signatures":[{"sig":"MEUCIQDe10GxVTlG72N7jCys8b6kDivlGPP+hxzfftL8uwleRQIgCESQmdwuTxxlexVT32ngLP+ndnYiYoMtHn9epeEMfVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMeoCRA9TVsSAnZWagAA5AcP/jFMT58ECzG0ygS6plEt\ndL5s3AnFw0LQMUQxE+BcubmNrKQk8GGMjlZEaHoB9ER5KRND4HNmHuL2nHQs\nPScAfK3sBj4Z77MFul9vjjrOVa/tSHkbqcfuXAfyvPqwH+d0W+49kXyI/+Q5\nZyfjamyO3HSoWFJrR4WPAlHr6QZQZBqm+NI8avF0KrW5zZDHyY+A6zWqVX9L\n0DLNfA4IWYGYhhQdxhxu9BMwyUx9XNVbZuERYHiU4LS5Au68Idb8ZsM5ZL2F\nakAs+ugYkLYRLYq2ciQJykMFfFA/ajMv3vhDF7wvP+ggL/2oS5VSchW2Ai9q\nxrPl448JkG3YbdzagzPbMJvUl1zwV9eWezqf15fkzg/wRmzZTALi+22Q1viS\n1h0fIA09QH0c8CE7R6jcP/aqDI133VwlQhpQsv+1AwaxTWb8YzySZ4zNrHmH\nn7YCjocuB/w7rumrNsQtCDobRnILylABgOJEl8w6jBH8rflt9QEQEwB3lriK\nJ0tsUfsKfoKwLoAkPbiEZPm+Um7yyO2r+amgGoW5kaJg61/1vYmyxaJD87Jn\ncI5L4xCz8OWQ47zlfbOadKoqDIn8b9geGEIckZ5ttx/uTFtuMJ5RO1JTL0om\nrDYq3k1+7Bv/lkEE31ZA51IkR6mXe0fsPBHi3ZLkQSP7nEvZKuU4QZZf8eMB\nhwPR\r\n=0n8H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.e84b9c8.0","@material/shape":"6.0.0-canary.e84b9c8.0","@material/theme":"6.0.0-canary.e84b9c8.0","@material/ripple":"6.0.0-canary.e84b9c8.0","@material/animation":"6.0.0-canary.e84b9c8.0","@material/elevation":"6.0.0-canary.e84b9c8.0","@material/typography":"6.0.0-canary.e84b9c8.0","@material/touch-target":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.e84b9c8.0_1585760168272_0.686299879278488","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/fab","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.e33c49e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e9774b45780fe7e44880ba2f054cde734544961","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.e33c49e.0.tgz","fileCount":17,"integrity":"sha512-3IjcJEzd3OOFSuA3AJMPmSXpSur9dhqlAp6ztmzvRqJtbw5IKFuTtErgw5rZAAPYUpOWCCcy8qJS14vLxNavYw==","signatures":[{"sig":"MEUCIQCyR+tFjTVlYDG8qPBCgz1ZBOpzzGi1jwmuOqiaeOrv4QIgR6v06+uYb+1kata3GCysabktjpyaQTht/FutfnP7ryc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS1KCRA9TVsSAnZWagAA0wIP+gPt8AypkyR14WSxwOqH\n03OLdBOjSwsOFn56L+odobBnTqdiMUgI0V0V0nIgPTIoePqnKSHRP2Ziislk\nwlqWx+Mu5bafv9t8OMl6ms27WhxiwdO9tX+/Yi6pC9Kmh8y9UQjPteuGr2uI\nlkvKLZd4mWOzFfDk29rvb5399PX5/9FuLB8S170Gi1a6dFiUVIK05Q5OuYvR\nuzQkyKl/sbxOtDup0bNXzVpd0XEMDOB+imE5+qTyIiGxbrRtmLflEuspN8O6\n7f5DRZBlo+IPJEZrSHnpdLA/xv5PsNRL+EW212PHuBiekrMarWkRwBkt5sGo\nALwgvioGti6kAe3+cKU30hQzpvEf6aBf5lU/OGlR6pUCjAxvdmmErsl8vbC6\nyV56ERWaoQa7nYKkVgJxP9zFwpPCBM6axnqJkkieZFqPko2IjefYimEv0TAE\nSijDNGV5A4g2mII0DLhOTFxPbCuKFYO5uF8GM+t75DWArYg+FW0+rVDcpsm0\nZS+w+f3j4YCPaMCHZSGy7CFSgLiJSo8ytcByfMabZ0TVusglpfs7gcjWfzws\nCwFIcXktvfm+nXNkqExFFS9tOnOTkeG7fm1Ot7IRUpHkQauHCKJUtbjmfDeO\nDIIHt3smsEMkmEVI0LUpKGlyPtKDVjQAfEaCgxW172+dXU3jw3y97GuWC/eC\nGf3i\r\n=K8MJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.e33c49e.0","@material/shape":"6.0.0-canary.e33c49e.0","@material/theme":"6.0.0-canary.e33c49e.0","@material/ripple":"6.0.0-canary.e33c49e.0","@material/animation":"6.0.0-canary.e33c49e.0","@material/elevation":"6.0.0-canary.e33c49e.0","@material/typography":"6.0.0-canary.e33c49e.0","@material/touch-target":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.e33c49e.0_1585786186203_0.8336744503092388","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/fab","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa632e4a34872e76247f75ec4a3fcda6f43dd2da","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.f1f8e60.0.tgz","fileCount":17,"integrity":"sha512-QCpozSksJKtW9iwr9mnvlfxnpr9VY+sdvbnP2eYyBYPdIFMXPMktOkIOG0VBG4gQuGw7p3pbBgga+HMi666KDA==","signatures":[{"sig":"MEUCIG51XQqNyrBx94E7dPCkyXoZyppSSn3s0Kwo6XREXdUOAiEA76vdt7Mpyjhp4kst7bvzMObAZzOjUHtLleOwi8RSC6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":206877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjmECRA9TVsSAnZWagAAvgsP/RibzGlTsdvyeZ84njAo\nEmEyRIt7Ec2FZD6iIZ6XCYDX91ugf9dLKtjemaig3duLO9StriKofuhapdiG\npkV89gnB4SRmDh7Kz1uoQDgO1bcBxSHAPSNZnA5sLXxXN5xE7h1kVM2elyU4\n0AeLq2Vuh9oH/GufADaHajGnoeTHXXvG9pC5sjjqtZbterO1kwUxgsCwwfqB\nuVEKH33pIyI9TuGFdwIKD23Cu5cbA7bZCQu0MMYt4ErPK0zq+yOJAiq3XPBz\nJiAy1IjbwMcSK7/qeJMaSuiX5uzxY2uIs94fUJF1GvEvBnXgxp6KrByQL8aj\nwRXPTbgHqvbz2Da0vA3e1LzOQ8dctTc+wIB5Dy6NGRkOXTn/pb49lmExPbZp\nrSUKsIjtaM+ExGQ+zx3msAummFItMISfX+HJfB3SSXMpezQQmOMzvtyJoXxX\nxZ7haGTm4xpkrR0bB3TYLYkVyxgLJ+BIiMN5PBs55TVZzp2VDyekmfRPZu/f\nsBhSsfWcpRZsbzc7QUqu6Sg2vRBAolSXNDV0sVKWIaZQJ4l9PZpzzzSjAfoP\n1qnBjKapC9sWU21g6v58OFieoD+9f/g4d9MscgRhs2d3kF9Gq7+T3MOd+5Wd\nnJVuWmhYqvkoFYSLieuWmEmgnqUVKLgOluNG+Gx4G1aNULhHPdwhOU37VApt\n0n54\r\n=pyeZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.f1f8e60.0","@material/shape":"6.0.0-canary.f1f8e60.0","@material/theme":"6.0.0-canary.f1f8e60.0","@material/ripple":"6.0.0-canary.f1f8e60.0","@material/animation":"6.0.0-canary.f1f8e60.0","@material/elevation":"6.0.0-canary.f1f8e60.0","@material/typography":"6.0.0-canary.f1f8e60.0","@material/touch-target":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.f1f8e60.0_1585854851592_0.1698688405711659","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/fab","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4eb34332c18aa2bb034cc26a9d25cb94106c376","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.1e17c49b3.0.tgz","fileCount":17,"integrity":"sha512-aispRs0qyijOroHKs24xuKvRctBgrCTraDGutLSBpJFWjVfroK0DEU/4Pr95wBmYconnKEz5BpT5E5q9qL5ipw==","signatures":[{"sig":"MEYCIQC1+0a4Tk2hCCBMCl9pRIBXvE89T9iJbrIvq3QqkTHc4QIhAI9pirB/w9+VaMqP0fI/l9FME3Za6Az6g7Pe8DBQnCBI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3qhCRA9TVsSAnZWagAAqtIQAJMWZpOxs21h85tD+wy2\n27EEqUnDtB7ABrO26x470lsb5N45MPztZ4JuN13u3LYmrs+rv6gP+EEPScsU\nRR6R99LS9u+WonDVgn0J3hM0w7lemFvGdaPJyUStp7WBqlNSPm2w+/s81Jkj\nBcxcOWUvgiLaZSUlKK4MGNkEqZ7VWWAcjdtWBHbh5Px+VIn7HPAX2610qnTN\nMrnOAbBkkw9eT1cCCl+UvESEyka8wWKGlUxv3++l4rNjwdRLmCpNmOjl7oo8\n8An/7MRA6Qt57VHPLqsxV2TkRs6rrSXR6WUbv/7pwajNh2HPu0Z8DF0FCstb\nPcYPnjOLXYRP1K2455cOWDqzj3O/2zM6HUl2/Beq8x2jwLGyYJdvxQ4s+W5F\nE+38fDR9nXuVV8l3xfri8MjbLKEj4TuUec4jL0ympcKUSMtXLdAwQMnrXjSk\ns85XkrGGL30d+B6f8f+qUY79JTnX/+InoP1zHXD7qLg7G92mT/Q4kqk5H9K7\nEa6GiSH3fqPndDUGyAdGkAxJdrduEh4oMqGZy3eOeRQdKarNOJ5aWE/w90sc\nSwUVrtn/LI97kffoYYPdFwatvgWNI6+loU+WSQJdgA0H6URDlGsciq7ZiLMc\nYmdAid0rQdxPk0o9Z6OY+JFx/woYCHSPRj/p77Hada/Nmf2Jl1pHmOL5BW+J\nL6j6\r\n=Z0L2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.1e17c49b3.0","@material/shape":"6.0.0-canary.1e17c49b3.0","@material/theme":"6.0.0-canary.1e17c49b3.0","@material/ripple":"6.0.0-canary.1e17c49b3.0","@material/animation":"6.0.0-canary.1e17c49b3.0","@material/elevation":"6.0.0-canary.1e17c49b3.0","@material/typography":"6.0.0-canary.1e17c49b3.0","@material/touch-target":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.1e17c49b3.0_1585937056608_0.909030051887183","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/fab","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62999166dcad88c78c4bf6c896b00c25569f017f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.6a40ef217.0.tgz","fileCount":17,"integrity":"sha512-hnztFSCufy2DGqh4sanMfKI1LL2YOtCSEWrAD52qtSvp8TOgOj6pBFPi24FnIodrruGvuaaRhEZ3S3Hm/U00Pg==","signatures":[{"sig":"MEUCIQDNLW9Ilv2jAzBOBQursX3C3Yvguep0TFJMx4QYay3J7QIgPC50SgE901rALILUj3RF/Kj5E6NmgtFrUewlm9En28U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh42HCRA9TVsSAnZWagAAEEgP/RS/ebsajsPs/7QNyajk\nGa3fxIMO0v2WDMtiP8qVmzE/b05WlLRxF0EFSi9iBqSvShcBnE7gUV4hS/q/\nfqtGIvC/CP894td8eIdB6V23XNTH61v7KO1oYGFAt8iZ/dj/6cQfEDIMaAkM\nmzpU2hSzKURbW56PUPOx2fTnm+BqQ+BhspXsPyyI0BNbkP9hhwc2VFy31Fs6\nQhF+aCAzY4TW0ZHMXfpzOrtfZi+JxjRDXlvMxqnV/5g1DYY5uHes0paI/tTs\nzJHX3foXat5dTDyaqoqyIeRp1CxrQXJa+MYsDhfsSEzghvBIaOPQFfZHQmb9\nmmg/JIBdz+bn1OE5K6HZ4HcYevDHq56ONUSIJgzTSSDy28E6JmA1FWB6H47+\nQADljWMa+qlisfOQyscRo3Z5G+Fvu+F7sig1srgsvWowQivApz4wjYDCHuc0\nwmaARXcf94oAUgVD7CEQlC0H1DhwauY7BESfdQLmTFGhCTqMLZuD0i3PKaX4\nQXjQ0c5d/v7tt4ybSCtLvN+KslDMMw0mEzlJEPHyPdALditYrbAVcD2p7vaK\nNWNLgrntAJmfpbMjz7UG6VCFtpYlptPWgnI/IYaXRercugt1kAcU4I1Nme8a\nNa8fbf3XV7vdHtPN3AV4C9m6nLYSL8CCIGyIvfUBZOliEysKL64Mrw6n4Ln8\nF+t/\r\n=w+ht\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.6a40ef217.0","@material/shape":"6.0.0-canary.6a40ef217.0","@material/theme":"6.0.0-canary.6a40ef217.0","@material/ripple":"6.0.0-canary.6a40ef217.0","@material/animation":"6.0.0-canary.6a40ef217.0","@material/elevation":"6.0.0-canary.6a40ef217.0","@material/typography":"6.0.0-canary.6a40ef217.0","@material/touch-target":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.6a40ef217.0_1585941894715_0.4064209512801955","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/fab","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acf1d16c07fa4a4ecd825098c2b0748437a1ae9f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.5f24faacb.0.tgz","fileCount":17,"integrity":"sha512-60BJXLPl+k2ZWCCJDYF+h4hG0j1//zsB9VNzVzJ5yLVwMoJSn4ICWZzuqnlGnfXLbOfQYRxb4xwuL97BQWUEEA==","signatures":[{"sig":"MEUCIQD/4zyRIsYpL6LRzd+qZgVHQqDPSkE6+jFOOZmWYk5CAQIgfzSItUHDO2HvSvhAAOI4l/vC6BVGfPc8/AiRvsmTYUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje+PCRA9TVsSAnZWagAAAKQP/AyIHm1zLKNIDapUIENE\nO3IaGPWNyrSMRAPuqq959Qar39SJIr106Skj/QajAdww2qs3Lu93Zn0qJfAb\njamL3Pw/9cBgvRuv45EVLkuelJwYUGxZiWbh8rmT2TJkfICXk7sQH3KiBAFV\nXprN9j1vJ+4+PD4WgROrwfyPYTsxE+EBWl3VJ2imncjNXJ5JHkIh86cTWXrK\nM+hpYfQyc10ksPRZ5XfduUf0dm2Ge4Gck6FbTrtEt6lksq+ihlAJp6KyLUVH\nZKLjGyGjW3DYk1ZnndTNmsWt3l147yZn41XEvWx6MMHxagnrHbODo6f14hSf\nEP8g+N9bH3+jn1x6WAyEfqWO8t2XU5JzMBSQfz+nB6CQFLnqQ7a7eUdckmjq\nOJDG/LsSxpGiO4S3HSdyy5ZJg0uEZbNowQgMxd4K+rmbVhoXn0WlKxSN4ytc\nigw43HMS12zfET6wsKyXdo3Wha4mG/sMGCvBg4FyQSxOU6q2wcLzzkRH+vif\nF8H976YsJFCtiMANA40T1zDvV5z+qPJtKS4I+aRkmfO9Y31DOPjkQyESFUjz\nsWwAJw6bgl7gHQJu8mKigb+RgobEvzdnAvBWFmA7HQeurz7V0LiBpo5PzRA3\npBCPHtfS9PJQQDMK+S75HrYkzc9k3RIvUrFJETHF0zu03ttdOZKLM54p5Tr4\ndHmJ\r\n=+8ei\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.5f24faacb.0","@material/shape":"6.0.0-canary.5f24faacb.0","@material/theme":"6.0.0-canary.5f24faacb.0","@material/ripple":"6.0.0-canary.5f24faacb.0","@material/animation":"6.0.0-canary.5f24faacb.0","@material/elevation":"6.0.0-canary.5f24faacb.0","@material/typography":"6.0.0-canary.5f24faacb.0","@material/touch-target":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.5f24faacb.0_1586360206733_0.18981558647480345","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/fab","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"837c518b7a69c1d6b0a3060e5202a763fb7c5220","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.82fa986b9.0.tgz","fileCount":17,"integrity":"sha512-UJ9Z5T5QpnJUald6EXz79wEqwqdmGf2b54wRaXXH4h1oRvdRAHPdNc3pHpNslQQc5Y0cY6bJKrcsPKDbxfJ5Gg==","signatures":[{"sig":"MEUCICHpr9jTwWceEngiRTfXZ2G7fg3J4ppSPL98Z5JO/IXhAiEAph07xav//GQ3ZzX6zciCfRJQuzOAmYKCI61VN+wcHBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfDFCRA9TVsSAnZWagAAz3QQAIh7ekWV+jnhOFjFujJb\nUlMeh61D9n18oUS9PXMDeV3Oh1Zt6BNNZwbcZIUCwAfbh/7yGIcxVBKnX1zd\ntpmGHAFXM/rmANjEGudnHZWEhHa7/flCvaIujkZq6EuUzChhpbybk0xoBtE5\nyg4sTAZBLsX3xZV8X1FZNExMOF3et+a+5GVOt8qvf2rceBlk/NPZUlO1DxKA\nldQ9Pm4c7OjSvmSXvG+hQzHIuZZUY1X9+fDff58H6kf38v5gxR+c0dieijko\n2vpDekf+trTnnjtnaygUULgNPyxyP2KvMrv62VjRQMfpm6UrHT4pXMtWtH0r\nlWLc2KXdzDGq2rZmvhjD/Bgx6rorV/9lWcm1sAEtUMCuZG6mf1IfP10fGMp6\nkZKk2u6o0Eqjn5meW8przp4Jh0367as7HH6+6rTUVcM32xaRPkChyMIVwenj\ndp6qH8UusopPPVUQuU3UH0t227sMUa4y0i5dVVff7hBpWqqmdCT+CcZ/1WJl\nSEW8XO0JqYzn0/uJPJftVAzhoBlKkeMIU2Fw+CjBxXswnGD8EBZe4BKDQrII\nWFv9cKb7VMBNfC1D8bR+UcHDBjnipIeacyz6FGJepqan3JW4dJkYZUf7ltIb\ndbHyWa/j+FYO0/PwFrsV4a3UXitaKANY+mWWEV5uzhU+edrs8qo3zWAhIgYb\nRrW1\r\n=oj3Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.82fa986b9.0","@material/shape":"6.0.0-canary.82fa986b9.0","@material/theme":"6.0.0-canary.82fa986b9.0","@material/ripple":"6.0.0-canary.82fa986b9.0","@material/animation":"6.0.0-canary.82fa986b9.0","@material/elevation":"6.0.0-canary.82fa986b9.0","@material/typography":"6.0.0-canary.82fa986b9.0","@material/touch-target":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.82fa986b9.0_1586360517322_0.7336326264731561","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/fab","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3417ea01e9452970604a940b7244a74a362f85e9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.9930d9cc5.0.tgz","fileCount":17,"integrity":"sha512-f6ZuwyMt+6XwZDkvjHo+KP1nhNISA/EBgqzfcEA2BKFejfHVhJF2DaIjMBEUZF7vHWeba4vbYAzM8qjvVO0Wpg==","signatures":[{"sig":"MEUCIQD/ZMJOCMrBqoehQ0vuvmdJl8V7h9oKZhPFbEbP9bQaiwIgMnKCTzMmwJsb3GTyBdjt087l/nxjs/drLM+deEatswQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejibcCRA9TVsSAnZWagAA0D4P/A52vMsndyZCvQiow41O\nj0R2cbTWf3ZMSEGzZSjCnf1bzAXARkwzTrC6FW4JJjgER6CV7RNMJax7asY0\nikW0ReKJabjqaJTVin3Kg+WSyVEXgjl37+zxxTMGD4K/pJDXKmyfyAWEhTQO\nce9IW46T3W1mjm6qHh8lR+dUSVNkZV08+Aq01T/QwN+L7JcIAiL17AWdOfiV\nflpYe1VxYRaFV/lAst2UWeaWbjh8Hi9WaNLL+0oir7d8r4R1J9RJ5NLUbq8T\nPk3ZNAIXgIwH25l66yrduUnC625DiO8e+bJ3nOZrkNL699FW9yCGv4y0j4iP\nUEJy14kPeN/6NSHQPH9fNVptei9yL1GnWZc5ymA6Q7uE72BW834JxLzaryxk\nhiy4iFjOyUkEGh7FF467im0jnwvQjREGWZogjS0uesQF3lQcDSVe3AKdErJv\nMfhEKU6CkYV9ufbW1qLUawvXSkU6ptyTYwkpxXPvDs/kPyz1SKfSbjH1XT/i\nF5e6vVFJueG/70ZsTp8kRbWKoZTCEqkShLAljUqeqPB2LnApJOkBPor1fuw0\nnTIO9lp5r9vqR/+W4WgIjMHaT8ysSKVoXHIhU8uECJcaixObq1f0JD6CMby9\nLe/JxeEXklr7XtKdFBFitAmL6+/FJYOS0mgyjU2xWxEWrTR0LGaQTsyY3CXa\nv7L7\r\n=L3G/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.9930d9cc5.0","@material/shape":"6.0.0-canary.9930d9cc5.0","@material/theme":"6.0.0-canary.9930d9cc5.0","@material/ripple":"6.0.0-canary.9930d9cc5.0","@material/animation":"6.0.0-canary.9930d9cc5.0","@material/elevation":"6.0.0-canary.9930d9cc5.0","@material/typography":"6.0.0-canary.9930d9cc5.0","@material/touch-target":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.9930d9cc5.0_1586374363887_0.9854498151430267","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/fab","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.6601d24af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f52aa226b11ee0ef0a1ae4ca26116b319ef62e20","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.6601d24af.0.tgz","fileCount":17,"integrity":"sha512-bDDkyGzGpBKmtNy9txvSQUHphtVGxvVQnDZhdoktm/rpmvhKB98lXO/2J0QS/DgcqoUPm1Ubw9KAZEmbKkHq1g==","signatures":[{"sig":"MEYCIQDeGB5NHIxXgX2UYeMQ5AaFKDzs335MJNYzEH5lSvl13AIhAIdROlaVY4Q3fSL6LoBtQcck0q8VMGl5FvGXerH572a/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmyRCRA9TVsSAnZWagAAK+QP/j9DrHX2SbfbtP8NfGD7\nnrL5pmJm5ptdwnfqKaMG22fRExVDg3SyRz35POvuehpKfkDKUdHYt3FjbxUf\ncTuPJJbtxTaP82Mex0KZGGl2PKropR2vuT5iuMkCHJoNtnYvTWYaLxRleFMp\n/wqunGmCMBOgeYt4mIUyl1YAwz4QXr1yLQ6n5jYGQfSyhLu8ucVSmiVAJnXu\nhwUSI/XkDi3NW0lfF/htJK5W0/bFEPbHCzuszxCrv0cm/e0ODvUqTCZ1snKF\nw/3q9eGZ1i2tC4Gc0PUdgsRyvmsXIIcybLIpHgzO7B3hHukIN15zjtsjXbsf\nbJ/7lyRD+2k/AzzcACDL6RGCagnW3MZVLbBbaWFgvJdxtvtIN5uNrlcaXmBn\nOsTzrw4qLKyxqfkCrz/V5tlNaiZYVG5rcEKrDeDB7pMruM/8d5x8dqpYSjrd\nZUbnAdVKLNE0fRYVTuofM7OUi15InPgbtAZxyhwLfIG/laatC7DfF7aPZ0LO\neXj/hFf6ytqQifmIlA8EIbB7wUztFdx5bPJ2RBzQw/STVRKUOwFulMQoQOSV\n3wLI0Oid2gPFXrHW5ADB2blB8GdJvKKVekxzVFzIlu8cNeN3kPpOPTrqoo+7\nXXu8EcYzNbZJ88VmEKm1KaLcVjQOZ5Rs9kvg/x5tln+GKSi70XFF2d3OS6o5\nA3US\r\n=4bVu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.6601d24af.0","@material/shape":"6.0.0-canary.6601d24af.0","@material/theme":"6.0.0-canary.6601d24af.0","@material/ripple":"6.0.0-canary.6601d24af.0","@material/animation":"6.0.0-canary.6601d24af.0","@material/elevation":"6.0.0-canary.6601d24af.0","@material/typography":"6.0.0-canary.6601d24af.0","@material/touch-target":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.6601d24af.0_1586392208376_0.19204619186894334","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/fab","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9286c7dce67034886df577bd55adb5ce16e0854","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.05f5e1583.0.tgz","fileCount":17,"integrity":"sha512-zrqRP1oBATCWeBOlCu9LMdYBL54lLkiA29hPlZvA3vT+LUQ231HDkfBeZoGM8y5AiEbdf1WNDpnGblqeey8aZQ==","signatures":[{"sig":"MEUCIFw+7NIE57EvV9+ttHUnBpkKbKsuXxG1Q2GiVVBxL555AiEAtYexUiJFBpJJyzu5QcgMYKvc8e1AqVi8qQrIWh3J8pk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnClCRA9TVsSAnZWagAAZhIP/jd0Ckdojz/mM73CZ/48\nHPvt9kYzdrkTEdRHpfB40e+yZZkqQyUNKISEFQu4ZOt3fxumqHCJT28dTg6b\nU//kGlofQnBX+wRrC4SvONgemNIDHoMfxnO/3pI7BK81JBLaHmfjusILSV4i\nS8yeoGxKJ5Kf4QZ7dkLVZuNaWwTQxkRFEw/T3RkLcEQyDYdsOnoJXHnD0dxz\nOvWj3Nu0mpxgJnP9PZdx4MmRCRH5aWUNZDthxk0s30mv1e4qiJx1ua8+KN1b\nWqK6oFSDD38dZn8IbidszZNt37IZT+MPpxxQEIna03CpFo7wCPxom3yDKf82\nbCrlPixMVrunqdNjvolHDBcZUlDCMT90wDp0O99OeNcmi1Elcz/OrO6U4RSJ\nOM2AwNHBfxjwt+4XCmFmOc7qpughMdtfq67Jr/M+11x2F4d7n6w7TQ9M4NO1\n8EzBZ6AGI2+d62o8DXssa4v4DaX2FhgrJ4p5vhmUia/EVJCWH784kuUFVR2W\nuBmwMmyuNktDyBGM9cXnVCBzHxMcp6d3o0AD7FWpjuWC9k9t/1n0T/h4LWBE\ny6kMOwDSO/O8MEK2YE8HSyFBgwsgf+x6xEf26MS6LpTba88rzDJiabAd3Cdn\nCj7K+DWlPLjQ70q5jcpYbLGwMCeP/EbWdGnSgF8XKh8lSa8PhR2IAz5Yqi77\n5e6I\r\n=CZsx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.05f5e1583.0","@material/shape":"6.0.0-canary.05f5e1583.0","@material/theme":"6.0.0-canary.05f5e1583.0","@material/ripple":"6.0.0-canary.05f5e1583.0","@material/animation":"6.0.0-canary.05f5e1583.0","@material/elevation":"6.0.0-canary.05f5e1583.0","@material/typography":"6.0.0-canary.05f5e1583.0","@material/touch-target":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.05f5e1583.0_1586393252977_0.23564973921009913","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/fab","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.bce00e186.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ffc5404251299d7d541d27c017b9e036fb78bad","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.bce00e186.0.tgz","fileCount":17,"integrity":"sha512-Ox3vgmJs7o9Q/jbpAgl6KB0cuQWfVqT67cQtrqu/xxlVksPT+h9Nio5uO7AAu6XQc3+NsE3xHfuETzTLbPap9Q==","signatures":[{"sig":"MEUCIQC8MqpjWzcITtYQR9jcN2zG+R+DqPRDXuvtQNuixS3mqQIgEfSOFPPpSbR3WVy7d1mlFOujAY3x9ifhmFPNyiDE32k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz3ZCRA9TVsSAnZWagAA/AsP/1TxpHmcO9k4bIDTHuXB\nJAeQ9s2cHiYl6iJBHizVmvv256SL5VdfbJ2oaff9hDQc/tA72nT/q33TTj6S\nkkmg9VMsSc/uNdQnepA5FMLOnwOcCUWmoVjt94KGwyrlMSAkfN+YYlQ1/VKv\nZn2vYLaYVwVeARLLmxhhCJsyLsSF0HB4orPXR77l/OGHADUGUIwrDVJZ9FnX\nV2GAunentxmq1KjDGEhvTnAJyaFaE2i129UXlIArDbYfhtl9THA81xE3n61g\ncHYN1uXV2MVcaQ1THwhkxQliavnixXc/Qaz942dKBxP6hw+Lw2mrgwRu2ioh\nLKc8orBMbLYLEYtgGTsvQp4nVybmuZWjAQhibTbzb09+dRi70dn3XCs9EqX2\n3EgVRSO3tZnAvPgxB8UVxwaD+Y52I7rlMK5blrjh/VeJGQimayzzxQBoozKQ\nx9XDef+3/X2g2xxT05+QJbJwmKEmJ2J2BWrUJaADS8gXasCVtPU9L2op7J1s\n4N47CK7y4/W7JfUpyslf5BF+8HXYCJzj/qv2ZAnXlWdTrYqWWZWb7HKVZN9i\nBkOC3sR5VsDI3glrID+idpJTqc4fq8qvOm3nrpbhkrIUakruXhqQd+DALdzb\nLlV3Nh0TN+23ShoQ8X1KyQfTL4urADiaG/8z8YWe2PGLzmxxcGEdeaJKrpsm\n6dfl\r\n=Tq1K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.bce00e186.0","@material/shape":"6.0.0-canary.bce00e186.0","@material/theme":"6.0.0-canary.bce00e186.0","@material/ripple":"6.0.0-canary.bce00e186.0","@material/animation":"6.0.0-canary.bce00e186.0","@material/elevation":"6.0.0-canary.bce00e186.0","@material/typography":"6.0.0-canary.bce00e186.0","@material/touch-target":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.bce00e186.0_1586445784844_0.9504624590095838","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/fab","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.927fa902c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11ee66bc18d0bda27e2e676546dd2ecdeec009a1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.927fa902c.0.tgz","fileCount":17,"integrity":"sha512-zRu1TxCIG3/1ShUrGJtFuM6Rv7L78qXH2cxXX0c2oECV4YFsznqCutWCMVh/soGf1eD77tPhlbgfD3ce+DT9sQ==","signatures":[{"sig":"MEYCIQDniUZPN69iaDZQ8l+bYnkLb2O2Zr6YCR7EJ6FRMDBOdQIhALFWrdyOIDMVt4rDX3/d9YEOWWUBZTHedfpY/A7X5ryA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej22UCRA9TVsSAnZWagAA+TsQAI+qLu0D9HUONpX8AU7A\nNDl46xksBtU/qLTK1ndUQ1sSKBrJHTY1NE4fgS/YsvO8LlykN/w8fAINJdEp\nVA0eVWVbCQ3o+z/k70AdYPaSHB+NnNqFSZaF0v0X5Qpr2uU+cWWVVaSxGl5K\nqsHUVRefI3yD4SarWuVO2syF7WXZY6ndrH8xvIULEeDLu+M9eWHjdeOXeWn2\nCYb/TwRQmEZEnP8n0A16qtXq/uxGjckIGLJnYYrrXXSgafVJMz/N6dul2NKq\nytqNMcg90aYscsSJSBoWOO2LmvOVOLwZgcV3S7aYZMFiRsj6qOGaOV5nhOCe\nAKambe84CMpM24Vs7QolTbCBvpjGbhrKhvnVnUlzidVu9F6JuEVjk645ftNk\nrV/BHAbz7x1OOo9H1Yf5D6OeOHIf8X31myTm2rd6CqR2gPfnZ7m+AEHFXmZ0\n0/O9gsLTZQrXCy86eOMkkqEUnzZE826pmJgjX0CW1j9FBAz7s2NlxWviH65L\nkD/SUseTVaQxS+CZOSMTZGDtjRNZUPKzvbNxfCutyy6meQQupPOWE2T1b9is\nUtSDJjxBgQ8SYeu2JynYi7SZp0+FesTF1bQpHs5eNkdWGeryQsNv+5Kw6I4d\nqW7MdBmhCuzippiFLv2/FiA37dzZ+GSsYu9t6ZRK4WwqNK/5L75+ebgzbtox\nKYEq\r\n=AOtj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.927fa902c.0","@material/shape":"6.0.0-canary.927fa902c.0","@material/theme":"6.0.0-canary.927fa902c.0","@material/ripple":"6.0.0-canary.927fa902c.0","@material/animation":"6.0.0-canary.927fa902c.0","@material/elevation":"6.0.0-canary.927fa902c.0","@material/typography":"6.0.0-canary.927fa902c.0","@material/touch-target":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.927fa902c.0_1586458003743_0.8555531357262054","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/fab","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a3ba01fe15bddd18b7979d56ed2b35773aacb44","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":17,"integrity":"sha512-xH1ytTRQha9LvW9cxHog8YIFSjGl0IGv//NhaAt21GmfkCV5TPWi1LXnozrSYUb7wozfRyit0l8dbnYpN5MtUw==","signatures":[{"sig":"MEUCIAigfS3vyIspTnv+oKwNpvv6L6Q4ARKS6OIlxLajki1QAiEAgae3bF4Sr1vmSMZUj1M0navpJFISi3nKduLt82zYL+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMmFCRA9TVsSAnZWagAACb4QAKBsuFMJ1yRwJL+EKY5I\n2GyEHW7KcXdRS0U0ONEy+XMLhu/2LbwaSLZNMmL+I4+vdt1szGKkc3WfDeSf\nAD1RxR+x0L0VjT0JsgcJYorEt0NcSXvcmLwlefmNUiMeFmGIpuJ1rQYM814J\nq2o+QjF9isAjKMphUyXus3tX5DtxMX6oq737jEC7LlNl6fj20Yk9j6Kb0qDn\nhP3AGesQLo8z+tv2PQDGJ9nsDYm8D0wgsw0mpI1ck/o+zwfR2ZqmV34edZ7e\nywpxFG1UeR0GH9lNlFEh+K0YlrHI4LwJj6Uvmd0Ksjh/bSc4CAKnuYlCRtcT\nP0O+AN3nyy1k67SdjfRRytJaPGQMJ/CHxk8Txqj0fTXAf55BC8z9wC1Czvrn\nMUUWEwUJJ0ClFEX7V6wCr2NgGxoicxyi1tTbBOx6e9JMXdHRMjEz2xT3h3Xd\nRZkyQVmiT/lvjPHkjdmvweQdf1WEQq4vTz/zMxeQY1CKZb6M7Cob2i8dGExd\nUX3jTqBb6QpLEVXrNDJEoi2uPo/oRvYSEF03sz/vvzjD52p+GYYWa3VBHJ0F\nSp3DeQbAxFZcdr4SlOmGVMLeqM2+y9Fn1gUAhvOd2+VUMBDP8v8vvVcw8CZw\nn5FwhzmNRs0BJa6pVx2VQcKKZqM6Umcf6XWLtjV1+s2jfmarTAeC43P12x8U\n7+gj\r\n=YkGl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.eb28b6ecc.0","@material/shape":"6.0.0-canary.eb28b6ecc.0","@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/ripple":"6.0.0-canary.eb28b6ecc.0","@material/animation":"6.0.0-canary.eb28b6ecc.0","@material/elevation":"6.0.0-canary.eb28b6ecc.0","@material/typography":"6.0.0-canary.eb28b6ecc.0","@material/touch-target":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.eb28b6ecc.0_1586547076496_0.8146635517382654","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/fab","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.816a43b42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0708023f9ae498449abf52d7419b13951554a9cc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.816a43b42.0.tgz","fileCount":17,"integrity":"sha512-iVOpdWGA8/DdKVkp1SEIvK/oY/FlKNY6BV72xeSizBzxqcM+WRAVMl8nXVUbkoB7Wd0T1fl1MLUcZx+f1TJSkQ==","signatures":[{"sig":"MEUCIQDnM0YxAruuYWyOz7xmupr56o4/1vbhtzW/oCxhsfvZawIgKPhtCUvYJoncFzO+tDmciVCpjpwyNexMbn0OtwHNsDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNypCRA9TVsSAnZWagAAZhgP/0CHi5oFTQOlZ/9a4Mz9\nR+iDAMgcYYnwVOG+QUHZ3b7OV/WGZmW7DMUSq809VWBffRnfrtlEzDM8ubYl\nNURhGER7zyrcTQDTtmsvEcD1V3atij2GdKxpq7Hvqr7laXGuvc2lHhHw0t16\nIz2IsdI5rhULepaZFd7zcaPdNUdRoZ8NnWSRll/IApGM4HJAS28TGJZHlPHx\nIZFBGgjGKzYQWmCNurCbyV+i/Xi8QNq58wNbkYyVR86SnZjwSXlJtSzS6KQk\nS7Whvmg0e4Rkkywial4/lXBZA/DVc1KSQFqGghXHsTmSBbIvgWxpZseOGqY2\nNy3x6x9zsObdiElPDjlar7DD4I+k5WrfzLFGEdeja5MRc9jyzZ774w8XnXwu\n1XRi81sq/W4VfY/ziXZm2s0jzqm1GFT/UXAD2pSYcjCotdqyOlpttlTPZwGD\n9lX8O1bGeJsUw2DW6+tqwENApiIAJbUiYPsr1Tvb4yzf5180pHTO45tukVcI\nHa5h3SuEKjH9FEADNZkSItb5xQjx5M7uV0HdoevcD2na3obInNp/PwHPg+lF\nPEU5L03V4fQ3qQ4aU351a3vD4Pa7Q36npFUKxogzAkz90MgtE7H7YuSfJhea\ne/GXNHUkc7xouQnE2CmmbIvObPAs8DrRiPR2wYGcJ8o9YLEKhuVO3cGFpKM8\n6CT8\r\n=qojN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.816a43b42.0","@material/shape":"6.0.0-canary.816a43b42.0","@material/theme":"6.0.0-canary.816a43b42.0","@material/ripple":"6.0.0-canary.816a43b42.0","@material/animation":"6.0.0-canary.816a43b42.0","@material/elevation":"6.0.0-canary.816a43b42.0","@material/typography":"6.0.0-canary.816a43b42.0","@material/touch-target":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.816a43b42.0_1586551977157_0.25094370124508303","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/fab","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.008c4d319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"876fdf9df159d1b51a111887c50fc1115e8bf171","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.008c4d319.0.tgz","fileCount":17,"integrity":"sha512-H0JpGtJ14rhLydwt6tG9+dn5UIKG3C7ovO5HXvqkmi2WCRx9FxTHVWCnqTbjQQRdW7CuIBUNK2uLQSsdn7tzkQ==","signatures":[{"sig":"MEYCIQDiBw/sWWbpBhqacsrAkekl7DvkrquGkcQlo5QRNXu7rwIhAIq+3oZLvLQhEczWyTZWHdmJ+JoutgoapcDZCXiNOk/z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJSGCRA9TVsSAnZWagAACFAP/1i8kLweckccVSObtYvf\nzK4+UCj08OaFvDV9Yqmi76cU4opePwa1dUH/misK1UaRxKoE+XQwduEtYUz9\nuyCNn1eJ3CCYk2zg2LHjd6J66d8p67Yx9SbXmmBM7TNtIpONgLImboQseIRN\nTpdlFuRalUGyWJT6ZVLt6fmeDqiwUfE5fA1omQ5IYlHDwsxVKj8WQcugR91n\nCUEdMa3JyOL51HGE+YxwfHoNDtJ9JiQUjnyNOVVoqqfGyY5TEtr4h2iq4Zxc\nW5rsvERkNZ8HtyOcP1glD+fZZJ8kzwS4g0n3RAX0Y8Mh7mv/1pgF6Fe1+uUd\nnK7JXNfRxiOtXY5w/uGr2Jm8BJpU5iZb+SfwrfmbXVlqcQI2ioy0uoog3h6r\nwc2Q/mi5t/X0MF/B4/Aga78jhGTvueJVx+Y16Em2XC56kvSe9ueY7eYkQhLZ\nQ1RBiiv76gLzhjjPWacIWZthX7W/hwwscSsxHrakkC27rrGaOOJ+W6n0LEi3\n1imzxPwTwvfT3EXuRyGktHJMCiVxqbSGEB2yV6rIaylRLu6l3IDxuNh5dSrO\nVSuo5UvfhPoFpTeF0B5q5PU1kxAPrAgMGTjX9B4Tht9OAhDfxHchmapSAkow\n+neGpjcH/D5YeQy2l2LF/oRu8a0MGzHhvgEKa7QdcWTCPvrp5jpbLa3w5/7c\nnyXX\r\n=Fhuy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.008c4d319.0","@material/shape":"6.0.0-canary.008c4d319.0","@material/theme":"6.0.0-canary.008c4d319.0","@material/ripple":"6.0.0-canary.008c4d319.0","@material/animation":"6.0.0-canary.008c4d319.0","@material/elevation":"6.0.0-canary.008c4d319.0","@material/typography":"6.0.0-canary.008c4d319.0","@material/touch-target":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.008c4d319.0_1586795653366_0.8631985920062197","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/fab","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c677af82212450bcbe78fcfe6ba13e98ec9bdb2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":17,"integrity":"sha512-/5yQWT0PGFrrdycTC/+UF0+B1/WMchJ0C5mp8tuiDBxSql4r5rINMGRAzsN+yKBGIju8PQhivikziX7/rTbqeA==","signatures":[{"sig":"MEUCIQCQ8lSGI9/WvE+p+6R+/lenOeR+RkVZHMfMd+KTkToE6AIgKFBoPuzHFCUJboYa1RwsJtgIr4OFNF2dFLnuJJJQFC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUTHCRA9TVsSAnZWagAAGyAP/jfCscTNRIGnQ3PKBR36\n9hDV5CaxW+bjGAeFyFnbJ53qjD1KHyXcDdv40QY1hqV4agnSJfD2W6XX5Hpu\nIxU48NYgW1TuAx9JZ0MgaQjJbDqSetDSD9M+jHOp4xxeNUEZO3S0RDTxQzfS\nVtoiGWqK2DxZ9WZtGyvv5MRTZYwMIc+65mubRFo/fijfBuERdTA3/m+d+Kbv\n4YUoDlr3dhTjxeoYovRiMP+k/Ow1e4Oym3ULzsE1sKlwd1XnNiLiKq9T3VZu\nT/oTtEGsbfnbh7H4IHdNCJTyrM6HyJ+Y3Ad89+cDTmMBQLFBgXyTorDAYJ/O\nkCyQr6F7RwZm0F3DLp9Bi0f8gQhGFR3Gm14dlPChihkOXwp0FpGeHmUhAbCI\nY3FPHSs7/I3WHCVnkpLtBH/oxVhjGVjAoUScuvysddUaJy/ZJavDQOpm2zM6\nSXsiGpjWDro6/d1eJFq8yE8BGs/VxWdUXzIwS863bXz4uN4uX8JWKIWvx6/2\nIit/6S5tisVNxSbt1PPnCv7njtP/9Q96EF2YNhvP2CL4uxUounjyPtRFz1SM\nr/N0mTOSw6cRMD4oxYaSJ36hFt2s4WI8bdEehp0CCqcimwtICjBqj6JNCOEG\niBeOBydDMLAorSLkBvxUG5HvH2Bta57OdT6WNBUwAxt5+nl9mNtkjUiyj1GX\nd09H\r\n=4nHW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.cbb3f28ca.0","@material/shape":"6.0.0-canary.cbb3f28ca.0","@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/ripple":"6.0.0-canary.cbb3f28ca.0","@material/animation":"6.0.0-canary.cbb3f28ca.0","@material/elevation":"6.0.0-canary.cbb3f28ca.0","@material/typography":"6.0.0-canary.cbb3f28ca.0","@material/touch-target":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.cbb3f28ca.0_1586840774688_0.060012661541615664","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/fab","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0dd7cbdae592bc017bae006c2b91c58f19bbf68a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.f172b0f90.0.tgz","fileCount":17,"integrity":"sha512-Bpx3WivChjS+nJotgHtKc88MPOKiH3vOkPwgoa5lyEy9JizMpQoMWJhFwl2wosnPUV8JKAoTZUBfpRl+QEQ/Qg==","signatures":[{"sig":"MEUCIQCIE3QwaZ/bDZ3krY/0x/x6eALyTF3rQew83ZBSJEBbkwIgCkqbh948DKAPZJDBEahd6j7B9zT+nkMIiLPka/Rt7Ug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkLtCRA9TVsSAnZWagAAQ8IP/1kdam3CS3d1BTC+ZpOm\nwersla4Ym2QmZtYUu48qAOxux7ZML9DvSkMLHXh2gbc76mkHNPuUEZ5AXCni\niwRZdJ2B00pZzwCZ5ENAGtwYqMJ6swb1GzB1mFUuTRY6g7H7Xn5azHnF4Np8\nFyM3AtgHV87lITeGSXz8EreHr/bm0TQqzrDdaonBgLTtIdtrQfoYW1V/gWMp\nOQ48FzXA0ZjO9DEMh7F37HDjTPL8soG+8wsZ5WSFSuxMvgOXazSMfdNlkVr9\ngvXfxLQ3XmZbFveyl7Ps6oiByz4sFLxDTOFSemBfFHDL6fxKYVdEMYqJhARX\nNnA78XHaoZ9q6PmW+rWyOMbunm2KMxbkDDdUTf962ta4s+YOENhmdfoMtsx6\nV+BzahfVYN2t5qYEYCOe+fBI1ZakFX851DiPrqKtfx3oEl1cZefMHw2yW7Ak\nYP2bZnCpVjO3YvAfSRh6+4GmOhG5BFCFd/ZCeYwMi3wSGs6YK4WpSX3cctsN\naw+9OKeLc+/md8FsMU5hhzRkWTtfz7iJVH2Pht6cdiheahAnh6I+mFJfm6po\nkjhqYq6evnJQ8scM3iW/KhJNumnBSC4XiVqKQBVH/1/zlZc1eIoR7nTLkoJG\nW05Tmrq6DxpX46fJlDlmzQsto36fyd1m14Vx3h3P/dQc8kwNIJHjzFivkqis\n1oO2\r\n=03On\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.f172b0f90.0","@material/shape":"6.0.0-canary.f172b0f90.0","@material/theme":"6.0.0-canary.f172b0f90.0","@material/ripple":"6.0.0-canary.f172b0f90.0","@material/animation":"6.0.0-canary.f172b0f90.0","@material/elevation":"6.0.0-canary.f172b0f90.0","@material/typography":"6.0.0-canary.f172b0f90.0","@material/touch-target":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.f172b0f90.0_1586905837349_0.41280019536459545","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/fab","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.c02642273.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9648bf5a9391a98a14b1612d20f8aae38c686400","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.c02642273.0.tgz","fileCount":17,"integrity":"sha512-jkTwFKFQ/8u4HJtBYQMxIKWu1Nar4qzAa85DuyOt4ruZR16dclVbEv7dg22C0qg7JTFRgAh4lVfvroVR8wk2ww==","signatures":[{"sig":"MEUCIFP//3ppadr39FoSgOof1ClZmRvLT9bYYdxXsVJm63NtAiEAu3bjZUGpVjEbwtd8A1ohLJWMLi7IEJ2yCA1+RFhSU6Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzOmCRA9TVsSAnZWagAAWLQP/2fc1gCym5BGWjzbGASb\nDmKVZlJfdvntB8T/28RrDGTdCOBDgyE4GfC1OMP5iDCooQSWPCZALOzADB+h\n0iL/HMimwnraWf+h/TjWPgMYut4PMdau5EUJTqIScimX+SYpCndsKWc0f7ds\n7l46K/QlDOpEYlTmBF2WrJWz/xZs7z77OxawcbVqwY3/cxooQQPdLWnhU4hc\njoPVjRcgT9YhRSR7S56CFEgBIMNwaL7wAArmeNiwKELmM280v8uc5qFpto7K\nOrcyNOPDFYsIf9ftQI2X1/ZqAL1DmDLgdBMJPPNZQGVea3gxxklyYBBNQohz\nDP2Ig4ijNyhAQJ1wRjPqrC4bOa/A59rP2FARNjra5He86YtrmhhK6Leq8Uqk\nCqcGAAdXRj1o4mLxYCPU2Ac0YXqKK0Ky2UcuO8Y8aCM9fXtF53ci5GOMxCeb\n5U14u5CTHzylhKCoyxxO+bcWMmwcmJwCs0jOQrekT8q3oFWpqWk2auNYZuZL\ncSDjuhfZeD/CSrdV+8U7GyRqGeMcZoOTlEVTZtKGbSSufgtoGVKVbFc2uQ95\npw/Qof6kNEY/P6Ny7kJVR4Lro1Alf6E1IkLpSXEPxdIBEIZxCv2b8+gNM9eX\nT6n48LInAkHTAt8C6tSlL9ZefzT4kD+6baD38GN3YSY1e+v3N7dW5YXU9MyF\niC79\r\n=kj/b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.c02642273.0","@material/shape":"6.0.0-canary.c02642273.0","@material/theme":"6.0.0-canary.c02642273.0","@material/ripple":"6.0.0-canary.c02642273.0","@material/animation":"6.0.0-canary.c02642273.0","@material/elevation":"6.0.0-canary.c02642273.0","@material/typography":"6.0.0-canary.c02642273.0","@material/touch-target":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.c02642273.0_1586967462336_0.8256815763557859","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/fab","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.8a299b568.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18685d71accb18e983b147e406df655676249cb6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.8a299b568.0.tgz","fileCount":17,"integrity":"sha512-YG2iEfGN0X+PCXTs+SQ6UIYxfkb9XoYvW/hGr3zlefabI4hZkX/bw7QTxrjwRiNYbMUYE6HjlpubApmlgctJeQ==","signatures":[{"sig":"MEUCIEX5xVetfxgCJuUiM7S59laqiiQN1KtNaTUK81eaCe3NAiEA1ImWsV2zI84sN6+II1WdkPbGzcwj06puoahsFSGBI9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44WCRA9TVsSAnZWagAA5LoQAI+uFu++3uHdK5bc3wUb\nyGrAor07lQIXV+1k/hVYvX3hakdjlLDLb0wv/+/i5o8zaKsJfnpTvn2giHDi\n+P0Zomfws5wetUAnWfBccgp9uDW2p+Yfqg4cy4lEArVOOBIYYKHX4eQ3jdl5\n2KFSGEvOuFR+uYQsyk8wdWbj4rFjJtcx6x8U+ThQyYqwv7jmjIrYpshz+7mJ\nn1dFWaCzZLbCB68mlqM+rmyDEkGFFADQAdty6MY3gr/ltQrHwhs5Whr8lp5Y\n6vYOy5NCWISuJ6t5jEnp53eBn+yNHXvpzjsHSl5zaKM+RYZF7Dd9UPCLWLTH\nqYYnArMVE0l2YrdjBUR4LOXc9mfjabqi2bRCnhWffYJj4sgIZdnhtRdEWBz6\nmukqBwWE5dwWmG5lk2+my7vEz3iq09u45NIBYpzvtTp2nKqQ4/qyHPZK2fjZ\nrRc9Tbk5lRDrWzWuouieySgJE859Dsyzd+DMroYiX2WODe6boGcRSltmR+Cu\n5gUdLqK7EGQclmslpjdU7HaSjDuElLmPivjUZ47O14xrNOZUM+3yYr3NhUy5\nLh08dLQcSm5loc7AJXpiHX8Fvb9qnemUglfZl8++Ev2WWSVJVZYOWoIsLPa2\n1n05L73Ns5vDKsM8cwY2cn3eZ3m0xf4bHC1fHuUHP7i1zAlBEK5Xl+sReHRP\nvk+y\r\n=hRIo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.8a299b568.0","@material/shape":"6.0.0-canary.8a299b568.0","@material/theme":"6.0.0-canary.8a299b568.0","@material/ripple":"6.0.0-canary.8a299b568.0","@material/animation":"6.0.0-canary.8a299b568.0","@material/elevation":"6.0.0-canary.8a299b568.0","@material/typography":"6.0.0-canary.8a299b568.0","@material/touch-target":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.8a299b568.0_1586990614196_0.4747189030470915","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/fab","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c75a588c8e120d67188c2cb275c2bb7e59e4c00","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.490fbdc09.0.tgz","fileCount":17,"integrity":"sha512-qnk2dW1ch6kTQrQ+XeM57ejVKykDuTRq8BAdGS3JWJD41+qrTRxTgDfNJputJltPPO2Mmnx41Vw+Pqjh6nWsaQ==","signatures":[{"sig":"MEQCIDbH3W0iWtXWcgxLhwfqG6VKurTJV/fQOT2KJIKUSRc0AiA4hfGwzY2gLdnEkNR59QePww+EwDP3viiXWYs4ZVya9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/RgCRA9TVsSAnZWagAAOmYP/1LDWvrI+gXu44haTYQ1\nsGb1KgDZ56+38wLWq1xE9DaHpskulFpGcRtxw/fCws9jRoO4w3iBrckEhzk/\nlGv3HdUJkIrDjmTnEFtO2d3i1obUrgt/l1vA1pYdARu+9ER5oMltqhot3kxF\nZwSXGGoBFFd+UeLiWkIz2QEhekbSJ9ttLTE8dbhQdrF6RdFNbQ2esA57R1hY\nX16xyxVjISanwZ801wCF+w4f/fHidDRirHivfzMjXJloVl3XGN+5C+UN6o9n\nlSEHn/AG3kOpsijjumcd7aDrOBHyLkY/WOZmMVeq+RpqaBzg2Qa9xrASjXIa\na6mEdeIp4MtrphtHb3VVQ/JT3AuzJs5wAFDrDcYvn5pRb8vrkl9FB1F8K7lS\nLh3C1dw7ZbcALcfAmgbBrXWQZmkOQiww1PpSTkvDkbDZAU9vS6FKMSxCUVaE\nrTC5lRXtne1OyNnhSVWcfatE9p8Ea38lkq7IWZ7ktxOYBE/wN00q6SLJs5XH\nOsdtRmbL318ZerqSsIM8/PJFB4A3L6EFx0N4xsLSUl4S3vL6pwjQ5uL9F9nO\nXYotm/EHLONtLWelNVzsDG9ELjLYhylHVrtNVzwyhGMshGANl3ueJbP/YpsW\npM31UpZb8VqGQh8xSafEiUsX+K2m/Umf8UfwL7j1HyT9axXbcDNvXNdOZ0Bp\nCXp0\r\n=t8Z3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.490fbdc09.0","@material/shape":"6.0.0-canary.490fbdc09.0","@material/theme":"6.0.0-canary.490fbdc09.0","@material/ripple":"6.0.0-canary.490fbdc09.0","@material/animation":"6.0.0-canary.490fbdc09.0","@material/elevation":"6.0.0-canary.490fbdc09.0","@material/typography":"6.0.0-canary.490fbdc09.0","@material/touch-target":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.490fbdc09.0_1587016800119_0.6817354867946366","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/fab","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49a888a6242ce0e2f4a9a3dacf13a2e1d847e79d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.f838c6e55.0.tgz","fileCount":17,"integrity":"sha512-aNHqiibODG2g7CimK15c6vdrRJ3SGZ9H4stm6K2dQeNHrtwM7YkajejyTTm+dTIogBr+qnclWqou3cNC3HVfcw==","signatures":[{"sig":"MEQCID75Qbk9dtn/nitu3+qqSta613UMX2PuoGUVsGe3+rILAiAT2DCH+mVPiTLxsiKeUwzKqwP3VAys0JgFpXnTxObIIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGsxCRA9TVsSAnZWagAAqzsP/3JpJMcDnMd40TssqmsI\nWWXDFUU7vVyTEvnYzh+HmvmDCMlFVYNfckZHMAnZOiN9Sv82zqnsd1rjBq9v\neC9q2/c3dt+M+ktP0kenFvzSLAUSLlefvJtATuDKAO3Axwi2WffxljqlkzzA\nHta84UTMG8J7uIOXtRGj7jZvu7TnUq4rekAqCkwUZOCxSRYYbL/Urgc5asaR\nJj8LepkS9RYDW7qlto9TvisJW4i3NADZJLAckzbNC4KO7Yf3TIxpMC1tKSKC\nbJsgzYfY5XQjSDEJL9+mi3mxniw0RpafcAs/ix+lWZInGqaI8uT7cSKZfFWu\nrF47dd+H594WN2vnJrAyrPdI7Vh2QAtM8ZJmmP1tRhs7IAMfek+SzN9QUc12\n4diMn3v2oEFjn390ekiyzqw+mVm/NXGfzxwaxv6RBIxJj817DRa9hIUz5iFb\nhWlfWTXbVM80OTXBH1Ocfe9hCP+SBzq9eqsiwG1Uf0r1LY+9HdkwlzgZnBSE\n3a6aIy9nYH1bP2ZEIlOO/Nn6n3Z1p5wp7nvrJYwGaxmKIuK/whQhTjyrDCmW\n+oplqDcMs0uyaLBRwUIx0/LadOH6FPKxbHb1gb+VEsr2EhzUK+0189L5nzeI\nO/VRED4KYlgoN9dwLzLnLLWsumSuEdBkcqS7bANfRfWyEcM1UKDqFSguxpHw\nQJBn\r\n=eGHH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.f838c6e55.0","@material/shape":"6.0.0-canary.f838c6e55.0","@material/theme":"6.0.0-canary.f838c6e55.0","@material/ripple":"6.0.0-canary.f838c6e55.0","@material/animation":"6.0.0-canary.f838c6e55.0","@material/elevation":"6.0.0-canary.f838c6e55.0","@material/typography":"6.0.0-canary.f838c6e55.0","@material/touch-target":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.f838c6e55.0_1587047217414_0.4133600384169589","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/fab","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6bb282ece2c4bc0de70de0b712357c52a3ff0f4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.ce6cb7024.0.tgz","fileCount":17,"integrity":"sha512-witA2pGnH2Ij/8GZzBLsFvGISgBh9WZR6f20Rsxoi0flpx29I7sz02PcPk0WG9o2Oy2k17dAsPerxviX4nXk7Q==","signatures":[{"sig":"MEUCIAErGYA2Y1GhIvC7jZbo9QlVkBa6xTl2SmCwcjSk+N2zAiEAroUcxaqjBmdw4EM5HSVSYlbOR/U/T6oznTpBc0aWY2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJOgCRA9TVsSAnZWagAAu/gQAI/XJ6JIKhRaV4ft+aAJ\ngx+OehxnBezOwxVPSx4C9RSNCmmYsuwOk1wYa5HQAIRBOuWokn46L2nh0x7d\nEtaC+W/QsnpaN5endA/Uhq/gJldSytPOI76mmazDSuCtDCFfc95NAjpYYG7D\neJpmjtiGoI/TXf6OWOOp4bNdZvhVMDalhRSuACKAmJhGkNRUeZJPxNaYW1yn\nVg2nukwPIL8oCmUO413ZeBCk8lGS2ckyCDY1IeCQhxXwYbrAZWnu6uJXB/bt\nuDGb1uOZCxyAlAcN3IWAuayHGdsKQoDEyaJ2D14QQaFrmUH41cZsu6Ig2Z/5\nbfr7kqAqXyRx3BZbW1y4i9AEYMkaAfzupMnHTfgdAUt5GoOgXwTtzou8YOrw\nvnZK7+fLo68Rpj0rmKIapA78suExq/biUL7TuI530tn0FzVO7JT0UulN8CJA\nTWgXgc68Bv13MsjsSJ7drkFsRINHhEhHVC0LQRwL36NtZB0XgkZc4OSYmxlo\nXp/8eAfJCuiQGHUQSyjJbqmt56t2s98MIo3HodHrLhdy6pt4MnZYI3I0e3N7\nexSlcTun1nAUpdA+Gte6YqwsnMiPgeytgX1xiI+gDosVte2L2Lk5iEcxFK2E\nmDuEq3r65wlhVJpFpUgRwH0v4UzNwUyBxXHwHn/o9UvPuUr94hsyok+NO7yv\nI3CO\r\n=BJCi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.ce6cb7024.0","@material/shape":"6.0.0-canary.ce6cb7024.0","@material/theme":"6.0.0-canary.ce6cb7024.0","@material/ripple":"6.0.0-canary.ce6cb7024.0","@material/animation":"6.0.0-canary.ce6cb7024.0","@material/elevation":"6.0.0-canary.ce6cb7024.0","@material/typography":"6.0.0-canary.ce6cb7024.0","@material/touch-target":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.ce6cb7024.0_1587057567754_0.5622813981354342","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/fab","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"117543584482e478aa9824a0c3a6e76137bbed7a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.0ab62a65b.0.tgz","fileCount":17,"integrity":"sha512-pxDWHEZxLZSfcYSaHWDSAPwKA0+X1aNUEk3/htkEbq5Y1W7aRDRRof+Ht11IRGTmeBDG0YBrMfXjFvrdqapfwA==","signatures":[{"sig":"MEYCIQDF0S2zAO1DK7wZTdJ3vAAGs0IG2uoE+YhGdeMFzWbMgAIhANtj4jaqDvU0pBqjW6H8kPgPW36RxhBsLLaqmqnT4qMo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKnzCRA9TVsSAnZWagAAaVgP/RAjgk49rU4jmfxnsptW\nVvbpLXBrq7TCoFaQtHO3wls8nx7lu9RB85MbF8GuDMH5pSXHGYywqqCE1j28\nJ1I8jiJmLCJBDmD38/fzb8Os5VHZ9RoYwMRMJk6YSBzzrm+aa2mbWz5G7xxO\nyFE24CPKTzVFbDzqbjjVFeGEyIdi+s9kRLTcwDPC3bVjeCSvqmWLNn+sAV+K\n6ou7irOLKdv8ioo3WJOUivn4wGs/s1Iq67c0JXAEkMlpt5IXexzQaBbjqG64\nAXftAEsSZveQuUQYQoXbFyz6yZzqDaNovyjrwQQ+VrRz8TGx+uuk2zK43N+h\n+oGuiL2G6Cgd/EZVrfeIaYg2W46Ty4bRC9yEFPMwk6/zEDUodWPA7fjBYqcq\n3WVyZ8hg3CNd4eeLXevVo4ZKsRXM9p1mmZPVNVFFlqK9n7pIoQXNi0TnPBH7\nSeXmfZmxIM5IWBS7f6mQYmaArx2/roxQO8EusXrY7+2e8e0Qs/3NJUh2qQdh\nkIVisp2ZavnXrcW4llDJL0hj1e5Qvijw6rxeVwB42s7qFUQ8qEzm+o83XE4J\n5KjxWSSF5HmJVGmi0bXGBwzI+vdYC7TPC8wETtSut0S/JA6EBR+DXCX60J/S\nOdu40PpQIS4RxGeUWhMFP7JqNYsww75Dej0323zJRsYs4FcjVgnND/FRjAW5\n9Aej\r\n=BBpq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.0ab62a65b.0","@material/shape":"6.0.0-canary.0ab62a65b.0","@material/theme":"6.0.0-canary.0ab62a65b.0","@material/ripple":"6.0.0-canary.0ab62a65b.0","@material/animation":"6.0.0-canary.0ab62a65b.0","@material/elevation":"6.0.0-canary.0ab62a65b.0","@material/typography":"6.0.0-canary.0ab62a65b.0","@material/touch-target":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.0ab62a65b.0_1587063282906_0.7899923607319277","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/fab","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82260fd37f4b37908078ad975eed274d1a4edb6a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.ca61b656f.0.tgz","fileCount":17,"integrity":"sha512-xqt86wAv85OfgZPqzaGmzQU9KoBT+YaigGssf2ZXvwTbLCG43LpXA4+xvh7x1fel1tCTJyUw30gdxyrSlsGUYA==","signatures":[{"sig":"MEQCIEo7doByliQ6wrSmcUoVFWDNHHZmyhCRanufVPONY4XbAiAi65qb+2jiY5hlE+gPvT0eOCu2vPmCyUeznVJcSGFZDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLlSCRA9TVsSAnZWagAAxxIP/1Asr4dHic0G6zOMpYvb\nIMxluUyhOwbALMZJ2i3W4Ur5vC9SzTKUrZeev5wHM8/Q+ZQsjOsLzi5LZAvv\nwtb4zzYPHKp+S2hwEqNrSueM6WXgaQe1JZVqTsbWm4Xb14zWTPB1/HCr/djt\n11p1dfofVH9duz8oF7a76qDNe0wHdSDDidxhhuzoYqquQrlNdEyocHPPIkwz\nMi+wFRU+VpLJ1wlUkDN060CFCrU0pdiunvtcW3mVYNDX4mPnM6FKivGV9xRx\nmq3fz08hYooDV1VMcwFAK+cPY2A7WiwpPjt91Nm1OYsp7SJyp+VqK3JVdX5w\niOkVXe2NqoFvuTQZarfkDKYPe8RvDtHEKPFg5KyrIBbcHdpGr+ogTtIe5f6H\ntTbSXprES3RLwC67umm+a4bWnkNW77oEeTRnPOH8HauMrYabmplx1qDMdgYH\nxScNzd67BF2Y72DRZGTcOGmbCtUUG3Jxo6zrgXJf13MCRl4yoOvvmAmgWMEo\nBEjmVXN1uiYExEZYaBxJe+Zk97yH1JuN77g0uCvHpJBwtZdMDLgPpKnuM010\nCysw9B23rra27197aWEvvdJ2GwaKzfdmtQSoykz+I97O+g4z2pHdboehIvs5\nfnwS56gltqFIftYMQhjiBcfeWGWr/7beaW2HUZceHBhLQkbNxbe4Mb8E9CQv\ngerp\r\n=Si74\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.ca61b656f.0","@material/shape":"6.0.0-canary.ca61b656f.0","@material/theme":"6.0.0-canary.ca61b656f.0","@material/ripple":"6.0.0-canary.ca61b656f.0","@material/animation":"6.0.0-canary.ca61b656f.0","@material/elevation":"6.0.0-canary.ca61b656f.0","@material/typography":"6.0.0-canary.ca61b656f.0","@material/touch-target":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.ca61b656f.0_1587067217960_0.1518428783459853","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/fab","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8fc776e37365e8e9ba566801608e1b7d68d5a45","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.45a6615e3.0.tgz","fileCount":17,"integrity":"sha512-sym0CnRD0uSgkwVjvBkM9bbkYPS4ynUrdICY+s/KXH6skyZhjqzyxF5+iIHEt35RUDmaoBxzHdqPNBOweRQ4gQ==","signatures":[{"sig":"MEQCIHiioGRkBRY81fCvszrdoStW4vPLoCwm9l7wwvdgvKHxAiAcFab/CR6iwEWanOmWOguEuw5sDwxjJ0hdz6Gedkd0Ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMEHCRA9TVsSAnZWagAAkYUP/3FHzxxg7Z7oM1y7l/+i\nvArkZbWWjiysSi7MOUkyC5P57Px4sPnDpwIozFfKUSepaV5/PivunAHWv8Yn\nsNBrTeOAJpJRxaCTLJef8vs4pVU/jAGwqrA1KRvT432pLdh9OXbRliFskogX\nsE1eeg2MXF4mTGg9XdlUIRtJr9XqSTzj6lsniJXMmFxBz/ueiA0Gn+dMysom\nKxYaMbngYGzjscTTNfFLfuePMDVvuguVblLnBivZ+hT47r/oIKIf1SU0TKWs\ne7FiEhDRUqmdYQPhRPhTJ0I/Szb6GK11D9Sbndcj98+XcuR4ruaRq8lbHl+Y\nljIuIlXFBogH+yj5KCQcxUKwc6prFLmm0B5NDouWa4St8Mb7QASzvVcdbHzK\ny7GY2a0PXeM9ZOglXiQGCv9eU1q+BJHwN1l/voQkvEe9Dr3cz7ipMRzfd2EJ\nA4jLjC2lXDfx7bBrEJ4OKrUV8WUQ7LDEVXJJ1HmTPz6mbuKuIIttK1S9mYhe\nAHY6qRaL0XypX3BU4avPhfetEwv9yPb7XfiJNZFNLPZCI+Rxt+fZ15U4U6Sf\npkEM0Mt4sjR/+4e4CqmrhzNlpp7uqlc4/MY77BpFBACFVG38t6Bf+pQ3z0E4\n3M2JnHBcXLCgXJX76tOnK39SR8RZSBUecIo8/eGTF8QGeHgvNfD8U7LTYVDU\nNuGR\r\n=gJD1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.45a6615e3.0","@material/shape":"6.0.0-canary.45a6615e3.0","@material/theme":"6.0.0-canary.45a6615e3.0","@material/ripple":"6.0.0-canary.45a6615e3.0","@material/animation":"6.0.0-canary.45a6615e3.0","@material/elevation":"6.0.0-canary.45a6615e3.0","@material/typography":"6.0.0-canary.45a6615e3.0","@material/touch-target":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.45a6615e3.0_1587069191314_0.04311930995155966","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/fab","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7379c737257c4689852b4d8a964fa45375907d9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":17,"integrity":"sha512-K1hW89RbkBO2HuYvL3Hn6Fhhbghj2p+e6siTuYRO97Z17H+jwyBrxHJ8EsY722cuZF75R5Dcs8qAd4TRi847LQ==","signatures":[{"sig":"MEQCIB8TimALn3X2mHtyqg+XzgbzfPr0DxX3XJBdyaQ88eA1AiA4lYSBSRWwk4MPhcYeUXELMWxTzqmG8PSN5+4cFI1xkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemepDCRA9TVsSAnZWagAArvgP/2QDXPGumydmR20WBnhi\nJcxUaNWr/H68y/gdSGdCLL62QmL48Eq7QcB8OzzmBcNu5TuvnMtmq7jhir1s\nrrld+cmjN1ZOWg++9eLozmNeZQd35dyjTLoMX+DSE/Y1rwW20tBQ6HvSLVSX\nbN0jp1qd1CxUOEICgouFSyVL0wp1p4IQU2mCBbcym4dJhTjv5l12ZWkL8IaA\nmaVZw/FW5V5jL3kFYl0FKgLEfTN2E6IaxV55RtkY69CStYB484nk1x004HGx\nkH78arrxg77aIL04P5WoVPLH4W3ols25VHgJz/RTrSGGHr4lSGNuEC4ZFfGp\nUwcTEsdFf7v8Mm42BN31Pxet+CdH92XmAFawRjMPBZbjBnu2rvbBreHKi47O\nHV/A6kZY8KtzQCH6QvrYINoJif3iu7b+Wty6gSFTuNvQ72yuohQntqD9sbPE\nkaAT9B64PESaPCJnqZqvTc7UaTDZcGKmZjbOdI2QujyXL/n5pdFBW3jSeMsE\nn5/6SSifckgmsbzMOjaj/huEh8nIANArtD0SGiXR0qmLFPsi4IcmNX5ZzFEY\n1yjTIEB9YtYn/DIb9NiXiywCyJMZQ8clvhclk3B8EOG4hhrPpYL52QapV3d2\nOuoLxAdZOF9KNYH42G54X9NBORzAAyTTh1YZTaG/Rt+/OY38KMSaF3iXP0Ni\nR9ZE\r\n=2vlk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.4b04cdb0f.0","@material/shape":"6.0.0-canary.4b04cdb0f.0","@material/theme":"6.0.0-canary.4b04cdb0f.0","@material/ripple":"6.0.0-canary.4b04cdb0f.0","@material/animation":"6.0.0-canary.4b04cdb0f.0","@material/elevation":"6.0.0-canary.4b04cdb0f.0","@material/typography":"6.0.0-canary.4b04cdb0f.0","@material/touch-target":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.4b04cdb0f.0_1587145283331_0.5600430666716125","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/fab","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.b273afa93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c52ff3ed679b6a64da9fe3ac1058cf9c23d3125","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.b273afa93.0.tgz","fileCount":17,"integrity":"sha512-/8pxy8a2T7YmO0FZPiYFT6H8Lem1J4irhil/JfsV9hcPMlUzCQP2JIKyq02mRcrh0rcblL6ddUkq0Ku3rJHI7g==","signatures":[{"sig":"MEUCIFVq3pwBg0lZ9B/NVW6byXl36t+3dr7OyFNoSlYoQYNXAiEAuBKik+ZNCJNww3PZ+Yjj/mRhy6SdCL6phUqyVWnDIAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjWwCRA9TVsSAnZWagAAeowP/3xVCAeayEfMFwFj45j0\nJ5Jp7Gt7TwdH3ZBp+5d/hrIOXAfa999F8WHgLfrtQDn93gdA2s30EPMbGnJ3\nKUnnMm17wLsTZqYWFliSwBvS5Jcf4L+GMqmTPW5M++4bAEGevMqHRH6nZOuj\nxZVi6YYOJJxcYUB3vpYTs425zT8h9m1BxMmxBG5b1ILsDIL+HPbg3hBXCKLQ\n9umJzjMMqqk+myWLtjPYOJUJ5NkpS1EDuUKXcFf8h+v8Deez4VAtIuFlbSRc\n8zAUkDzJ/hNIRUnE5nlcfFvYiGPO5m5TPrZ84b5ANXrIwkSlEAaZcxh+40+n\nqZsj9Xu7mjsdwlyGwLvyKykXbHArDd2TG+bBtAk+TJGrWNQaOHw+Qb4KB6Rn\nCyHy3IvMh2fCOxsGHyAA+AU1lZI4x55gPDRmUg16d4RBFnlFqJRe/cA7avYa\nLzsJjrxa8AUlHJT6mdbaxXNHaA/abek4PKiUqozJw5E+XtIZmWXd3PYNC6OE\nlrISxQh2J1MvGoFLNwBeGGZt1sbTvSWTeaXRLSUdbWFRiRdUnCqe7p6b0Ok+\nxpNzLAjn4o+REgKgcODcWhUD+ifOedNvb6EFHbXDh/Q4WXnwt+vHYPZuKSRH\nOmkqi6XOZBUadGAYXsuTXt4eK9wO0AwkH8ghwi6nwf31N37MDkRoG6gqH/rQ\n5/o3\r\n=tEyh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.b273afa93.0","@material/shape":"6.0.0-canary.b273afa93.0","@material/theme":"6.0.0-canary.b273afa93.0","@material/ripple":"6.0.0-canary.b273afa93.0","@material/animation":"6.0.0-canary.b273afa93.0","@material/elevation":"6.0.0-canary.b273afa93.0","@material/typography":"6.0.0-canary.b273afa93.0","@material/touch-target":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.b273afa93.0_1587164592220_0.6623112821453183","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/fab","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d52b43f3cf906443807fd8326cfeb72e9b024e6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.b70bc601e.0.tgz","fileCount":17,"integrity":"sha512-CqQN70iQMH9/K9AEY1RkuvkRTRTRvgvMwNa448WwKDxyTLIBanNMeElwg9B+Er+pt6nIX3RuW+zmlwt/AV1JMw==","signatures":[{"sig":"MEUCIQCMyHg3w0J/iqxf0weeD+UntlQ5ZL2WnIJo6p6Hl561tgIgTrA1/S0xvR+MGKtX6iWu107nud+4BFXd9RsueD+hrGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjoKCRA9TVsSAnZWagAAX5IP/1McFCO5N5dkEjXczCsO\nTvlCi0qI1oguxHPvUyP3LtsS02xULjOsf67Ky+F0CEe4s1Bip8oL8F/iL1dN\n15T6X5nbq3A7gLqkfzkye0iaD1mU3IycnLWdY8ApoeUuP56yU7rwhiQMRzKy\nCkDPap0Hlbs1K3W3Z+q5tcau611HjgN3P0TOX58pqIBlCKEixZH33ru/29qL\n3EulwDWg/pRJJ/+fzUbXXnDTXlM04e+/miHX2gsAcUFsJuQLbCGmsAWRbMod\nqgBoVPmLSdjHbBqjo7XTS8EDZha6tL1z85Ks9S9YsQ8LyJJO8qUxvSQOG/f7\nO3Hd1aXXdhEd6NpZjWcR57Q5ghIDvcc76gOi6RoG3HTqfYEvpqv3VH9vtm8v\nWmBBKXWA0tvz1iJWW8uPwMqk/gADaxXVWTVub1nWGZSvU0w6wHkGq7s2RHla\nlN+cVL1frEPzaa/7Ld6OSSj0w18ySSp4bVwunDsczr/Qo6DNIh3TSIVh3UzK\nSqjS5p4KIHZ/RB4cKp8lBpOySL88v/NsG8zClqM2+aoxtaxCE0WX3Tjn+lXi\ny+i2GtO0Hv3QBk1QqyVYjMrYH3xUo4guf5/kKKc0kYMKXeRQ7gtBRGQXVILW\n48g2U5yBpJub3u9HUsjOSMkbGpoHp5Kt1jmMnYtTfS1m2+rxA1PgH2AppqXn\nvbZi\r\n=1PSx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.b70bc601e.0","@material/shape":"6.0.0-canary.b70bc601e.0","@material/theme":"6.0.0-canary.b70bc601e.0","@material/ripple":"6.0.0-canary.b70bc601e.0","@material/animation":"6.0.0-canary.b70bc601e.0","@material/elevation":"6.0.0-canary.b70bc601e.0","@material/typography":"6.0.0-canary.b70bc601e.0","@material/touch-target":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.b70bc601e.0_1587165706277_0.38181482119029964","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/fab","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"371fb30f4b45220f4ffaddf6a3ea218388539ca6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.c4b4bba96.0.tgz","fileCount":17,"integrity":"sha512-DEN5BC07e6P0bGd/c3TTpJztO4AENKUGfy72OEFb9esATqDLZ9UGAAQ9AhAJsIG5ZG/dP3VYfQ/DpJrVkp+5rw==","signatures":[{"sig":"MEQCIHGm8P3xJKXx/vNtRvO3seczhmIctH7liHwe4jrIa56oAiBul05mKuA5NnrclCP8KA3noU3k/xrIFw10ugNocti4Tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkdGCRA9TVsSAnZWagAAp50P/R/9lo4LMiv9VauYuwUV\nH7GGex+UIQloJMZUkl8M5IMcks5bnx/0++sy+OR6+U2dddPOOZD0nCdUoPji\nPc+2W7DS4RsZUM3UOGVvOOhttLqaSItkOTMjkbqpH2g3k1gyuz8uGdMMXYZO\nzmpZsGBV4L6qECCqPb/Y2fwv22a1jwff3GVX+v+8/sM8jaoMI7d7KZa0BmPv\nJR9FcQuXxX2lzuYiyLp+JR/46k+vkMMsYwu9KJ+KyjfMYd4yLCuwjhWvN8XF\nvzyzncc6iBwjodD3qnIXVUN86+R+PX74lExjuobj9kSU4TJ8YjhxYSMIoPR0\nguZnzyuL7NtObZTKa4jhr9ZqVp5TROjPXpdf0Rr6q5CJdTS02bFlJ9uKts2c\nU+lbaM+J5TfETyuRBbrcR7DVfb9XhaZrQBIYv1PJXs6diri5nrV8CZ9JJuKs\nJUi63rPKf8+G7rzLbBQmIYfeiUQjeBkPgwJugadoPkgbRAQ49oG1XiW0NqXm\njzvgdjtwI4SRHdmcicxeIcXDm5/MXQqE0X3p6E2HQYEwZcuk72CjoZzuhgCt\ndC2xTi1JfLN5GyWLzO8Vc+OmUv639yfWx7fRLxJ/h/RhoDjd6mQm8+mjR9Xz\nJE51MpJbFO98rVGdOCbRYzNqNIsjXaJRiJ1NqKW+/OaeY9sjVD5uwNaxCRYy\nbLF/\r\n=xHAU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.c4b4bba96.0","@material/shape":"6.0.0-canary.c4b4bba96.0","@material/theme":"6.0.0-canary.c4b4bba96.0","@material/ripple":"6.0.0-canary.c4b4bba96.0","@material/animation":"6.0.0-canary.c4b4bba96.0","@material/elevation":"6.0.0-canary.c4b4bba96.0","@material/typography":"6.0.0-canary.c4b4bba96.0","@material/touch-target":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.c4b4bba96.0_1587169094451_0.7250659851645465","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/fab","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57b3ea1898004eb39ea7c5192cac8ccd77479a96","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.6c1ebc721.0.tgz","fileCount":17,"integrity":"sha512-gSoj1/Sr8JOmFAmN2Z+OAysD1i1x45psVVmxY1yTLrwpmW3EbiU5cF+1OWJrBDSRrJ2jCqajWGdWrWEKgRJtDg==","signatures":[{"sig":"MEUCIHsHIGTWDuvPHquYH8RPKEkhBvA2JmhNggMKa7nPgyloAiEA4Q+zCjJfIP/MnT/EQWIVeoQDCRy3Li3vOcpNMiXu85Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf7vCRA9TVsSAnZWagAAXloP/R0m6uXst4rSVyw0bK1P\njXJCXJA63ZcEXtRVw93+TrJ80RMXyQhN2jLTisSdmer14gA4/ql+/OQ8zypo\nRm13bpgyKUbBPKEUAa/8FbBG+vq2fiAAaLw+hpfKX8cACj6DyRoARBk+AMoq\nyLlPNSOz8pAjHZSqt/qS3ELWspHNZbGkbOcR5jmvdda7EgvrtKguhuevUkaJ\nlcY0UG4fSXGVL7wlTJLtvYRY0DitMlxkgiFKXcRX053XWMmD0w3o0A8ffEUO\n6TeAtfcUGr6FcPeA8+BzSiKTepzTaiN+t6/2Z4sWurgBccY6aNNORwssxO04\nnRzzqV1iaJ5y1sd5OZaIGMgaNaPGijDYovos0V+HjWyzPqHbQwEbmHQtpHsw\n7wQG8yF2JsKBDCGezYR/Tq5+QoOHEVF5zqE9tfhn9lraMgbDbna/SpVKhlL5\n6cMd394XoSzKFLaF/AzZdYUn1sJreEUtEUIgJUJ+2qTdQmXxU6uGwarg4T6b\nmnvOAwYe90oKjRXaBvku/nZHh6InTwOqU6eIaZ63NzfWDWOwhdzxXO5k/Kh9\nEf0UYZorlOCbeeJ0kCfKboOh22WZIcMiwkO+ZxZRAMebWd9+cGL8oYVCMSFH\nWzgQmVyMgfKu2NjrW/OBlMl4VO7cwPfkdLtsMV7naOt8QTDhAszoGRifk75l\ndNPC\r\n=OlLr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.6c1ebc721.0","@material/shape":"6.0.0-canary.6c1ebc721.0","@material/theme":"6.0.0-canary.6c1ebc721.0","@material/ripple":"6.0.0-canary.6c1ebc721.0","@material/animation":"6.0.0-canary.6c1ebc721.0","@material/elevation":"6.0.0-canary.6c1ebc721.0","@material/typography":"6.0.0-canary.6c1ebc721.0","@material/touch-target":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.6c1ebc721.0_1587412718562_0.66760614177236","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/fab","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a504882a1148bef719dbcf54bb11a12dff9580ad","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.9cff4318f.0.tgz","fileCount":17,"integrity":"sha512-AcK/VG6OfFQAVbiz+dl/2pHNbGV38fUw3R97gV/74gi9H/Zu9+hhjoeCBw+AKNOQfINUHpKomQsXpKS/Lx9iag==","signatures":[{"sig":"MEUCIQC9dAA+iP5xyLRvbGCbAIRBmw4LyYaUGzeMnVifDVuZTwIgSnBUej8fGnRjceONb/DlWAkPgSW5+TP/iZ2UiGnf2Zc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengx0CRA9TVsSAnZWagAA/2oQAJpVCK2QhJOaYJup9rRz\nycrQM5N9P1J7Fv52rbJCB7o4QRqO3CGa2YwPXb6gvVOM+TfMOi8p4RIrTJet\nB3B0cvlFViBThM49ZSSbBbYYnkTp2HGL88m4nXIiGBPCAy4rGLKg94VS4wzM\n9LP5g7s3yd+Sa2IedpWCPWdUgK8LpawpnbuZpYIy6LtNCOtLA91/sDQT0l0v\nZEc2BCg3xstVsVhXCVrNkYJYQVPOA8fh4relkNRuEjp7phKaY/KDWoTI/bXq\n8BoR0Me6y76/DXbhGu5ZK4f77cASuMm/A+VRr5rd4K8D3XEQbBBU7cODTtu6\nUtaJ6Uxgn13Mmp3kmB6q380ifnuDDM6N5qowNl7se/LyJZDLJcHBTbjgdh2q\nAYDUKVckKEDBJzBTCisz50pH7IxAMsKyV3Nt07oEiDjg2BKU/9EbHpYygQ81\nsBsqUwHs2dtaNzwENxak3AjACrKIUO582CJe/OHrjXQEzu4u6Hkp6hgIMZ/R\n3ZH40hqVp9SYf5wxhlcfoZ2BeticYEJnED2LtSTXlJiTEuAYbNBywQtsMvkY\ngBw8cr1eZTGwjBLeuoUEnwoarHNlv+2k8NukGoCRAX3WMsns5Ljo6EDEgRhE\nGMTY3PQ/Sex5IdCQjc2OLKxa3DE9dPmD+LHmWCdj/90ulaQfB/6/yXcST8n+\nbgst\r\n=su+/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.9cff4318f.0","@material/shape":"6.0.0-canary.9cff4318f.0","@material/theme":"6.0.0-canary.9cff4318f.0","@material/ripple":"6.0.0-canary.9cff4318f.0","@material/animation":"6.0.0-canary.9cff4318f.0","@material/elevation":"6.0.0-canary.9cff4318f.0","@material/typography":"6.0.0-canary.9cff4318f.0","@material/touch-target":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.9cff4318f.0_1587416180047_0.0920399473258986","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/fab","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.7b4482402.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a658548d2a59072f954e76a1bcf6175f470f4125","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.7b4482402.0.tgz","fileCount":17,"integrity":"sha512-Lx5DepKI3DZsV45vo6M5kgYmpp8gveziQgM2IYRpA9w8no5imvVt/X2jTTQ9GE54I20pjsl3eOfQCerfomL6nA==","signatures":[{"sig":"MEYCIQD54e3coDSRqZpLIdywnGaOzQNa4GGfUJg2Ecs7Qv2aPwIhAO6qBgJPQYHMAFHlvmaQZw1E8hHDAAgwcWpQoeOh2TO6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniA0CRA9TVsSAnZWagAAN/gP/1fz2Z6I2YrZxWhwFetZ\nFGDJI7U5y46cayAZNABcK/z25vRSXIZ8SKB+y6g8/FhVZbn+tvCr+CAKLpLy\nncPMkxYr6600M7wnduDIj6eSBOrzn8FNHZN2UoU7HB8xak+Ct2wOAVe/CN+X\nJUwkp3fn3W2R7m0evQxzL2+kUwOiOF4VBLsdeoLes4QiEDjAjTtdKqZgckrv\nWZHwBn0jfuF/BPr89cns2DlviWsMnU9y+6CEKYMZ4O2CqzbSmsHlFXPLBMhQ\n96AmcV24YQm0Oemr8emTV4vjIn7duLvDqk6J1Yds/8uvKN+sZXCPQVe2W5gK\nGB+pWRKVgjAK8KtvB+rOe7/mW8HoSA/kJuKFNIQEVPk0QYCxOoqrA23l6V4o\nos+S8kZoubVgq1r4ZV5syQltLHanJATodAzG06xJrlIeqoNQ+b3veSBOMlVr\nK2IaLIfpOzXE7g/hnZ0Tt2RwZRiE/sUXJLEmjXsCndC6AXz8fN2rQyLwaccH\nWRuaaP3bFu7KXRmhzIoqA7UeEmXD+H3zK3lN8Vp+j/f9RZ4MwNuVvdRz739Y\nf7EuxQH1ZBB2vqIuZRmn3BEse+tAQaI/qL/lAEvypq/o04D2D3cAzPFX6LBP\nc9JFXxvIBOwYasWMD7J73Q46klXelU7RH6TBMlYnK0QOBzFsP1MF7un11S+k\n9cpn\r\n=whcX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.7b4482402.0","@material/shape":"6.0.0-canary.7b4482402.0","@material/theme":"6.0.0-canary.7b4482402.0","@material/ripple":"6.0.0-canary.7b4482402.0","@material/animation":"6.0.0-canary.7b4482402.0","@material/elevation":"6.0.0-canary.7b4482402.0","@material/typography":"6.0.0-canary.7b4482402.0","@material/touch-target":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.7b4482402.0_1587421236161_0.22881880165509294","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/fab","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b3b4d9d0f1611c34af9ab0fd8a90358db734889","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.deda86d8c.0.tgz","fileCount":17,"integrity":"sha512-lsfCf9/miaIb2nZKcQ8u4BrIjejp0/lUBYFIRrur5TiBDqV85SftM7WQ03+EsZEZIxJEh5H3x/GU4N5ssC4hyQ==","signatures":[{"sig":"MEUCIERkNpXYpDPE/4HrVDPAe2Dobdfs/wGB8dRyztvHp+j2AiEAr9AiwRfBrJ8jH9itINpFhhGin3vfmPfctE3tWa7s+/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkkfCRA9TVsSAnZWagAANAcP/1oNGl8TqP5IY6LtJejn\nUOhVC/N0bQ7Uf0GgpRPcQD/ybjEpUY6pEaBWxuER0YvZiG8oWm6v+ezc4GJF\n7dzRPqOUe4aFM37sbbUwFsr66HtOc1bDkOz1MqUowUg0icL9QOv6uO86VPlQ\np0WA6DPSz1yva4INA74GR7bNKN2jEjw/4vBFhmFOk/fwQsBf/69axkLgrryz\ni4bRKlZoukrroeVL/R0Ft8UcC9gibiLQmoQ4XxXMA7QcV9msm9RpN5mOa8KR\n+h7OWVwMBNZgst/fLEM2grFWviiWp3bvRj1afu8whv2Bv9Ye1UZHP/lxLbv+\nMjytf6M0Id8hevzL1e7PaJc32zgVlj2XgHzZHEnUsU7OXoGslSnnBbLS3rQL\nyMyi1U+qix3BiHCB4CDxFWZ8n8R9cQ1hnpi8yWi/HROxoc6grg10iMFx91eg\nuUW5Fwu4X84CC+MT5dIxGmz4gnza1wmXLJ/KtS5ozCCI26nP19ATlu5W98l0\nNIC7a6fkVyEG2Hx0FRfk3GAVZGR7c3U6Biy+04VxVTa5XjgOWAeowkOtszcn\nYuoNCKtmxRHJEHz5NnCGsPoAyt/CR4GG4yf4VJ/XBs1Qx7XfRUyZOONReS2h\nhjD0bSJGuSObEYE7M/46WrWi4lhUu+7dS3UqqJtLxgzjqUHiYUKus6xUyKlW\nTfUK\r\n=nv8Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"6.0.0-canary.deda86d8c.0","@material/rtl":"6.0.0-canary.deda86d8c.0","@material/shape":"6.0.0-canary.deda86d8c.0","@material/theme":"6.0.0-canary.deda86d8c.0","@material/ripple":"6.0.0-canary.deda86d8c.0","@material/animation":"6.0.0-canary.deda86d8c.0","@material/elevation":"6.0.0-canary.deda86d8c.0","@material/typography":"6.0.0-canary.deda86d8c.0","@material/touch-target":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.deda86d8c.0_1587431711120_0.8326654451455291","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/fab","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fb37599faf396f1222b3676b945e67febb00853","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.d10412cb2.0.tgz","fileCount":17,"integrity":"sha512-pA8c+0W3bsOqTw/3ydNjjzAFKwxMPxLy5AgQrioHBbZTXrtcHB9LcoVbL8MJCvULDuw8QhipEgkB2qwGsfMPug==","signatures":[{"sig":"MEUCIQCJWMtCba+/8H0o4aw1W4JepT8lRROK0vxXkfi82UJfGgIgNtRQFUv7DgMqOhnDWbsPOKezEsKHL3mS4wG1GPPDBvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzkFCRA9TVsSAnZWagAAFskP/iUHeBeMZ8b6O10byd3+\nzMv24A6v6uaathr+3wB65ZWLGn/Qlj9HfNyekaGEM7e1Mk8wg0fhrX/yE6yK\nNFC95bhRkgU+EbMlCpl0kUZn32EZ6Yyiab0cOpEZbAVzho9XdXu0iw9hgiMt\nRRyNM00iAs0tmGHRXHqkK0HRK1/0ISJumXc4PZ9hrYVesrISRO+2n3wCPudG\nlUNbrvACO5mEcUOcxl6+G3ediFG27oClu9VPlWp05UH2252DheZIOJyuZreE\ncGyuke1VJAGYtzYUsNG1ncglzIwQrMVnfJGwJdfkR/RhCgpbK4gW1hnqjGfU\nw25muQORQt5g1FPO8o68KvhiBbSoDzwrGQjIY6jc7AM1LzgZvlxY+zdQvUmE\nIr/qTrYlWcZI+IoenwxFHPamVSRhrAuVa5+VY8Ea9+kO/UcyKbzPqDS9C2mh\nYolkeprNoktAcA49gkifFO2wUkLSUS3s060qIhOpGetRrHPQripI7YItjbqt\nOQq1GA3Igms/VsHCi4gClluxrvojgOgj5V3GDDfPt++E8HoiqtjIeJw0I4ZK\nY9p7GRZLgb3UTo4coWxLPOTr2SQvzporyqZqwRZYMTRYmqUMSt3LZDzyWt6D\nlxgjDas7RkYhTxwJHYvkYqyM51bnDnGdWYddWGcuux8G/hM2dwkCmxaiZvEQ\nc2sx\r\n=gmP+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"6.0.0-canary.d10412cb2.0","@material/rtl":"6.0.0-canary.d10412cb2.0","@material/shape":"6.0.0-canary.d10412cb2.0","@material/theme":"6.0.0-canary.d10412cb2.0","@material/ripple":"6.0.0-canary.d10412cb2.0","@material/animation":"6.0.0-canary.d10412cb2.0","@material/elevation":"6.0.0-canary.d10412cb2.0","@material/typography":"6.0.0-canary.d10412cb2.0","@material/touch-target":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.d10412cb2.0_1587493124849_0.42242070798301157","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/fab","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.c141801d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b08a10086e2cdea9b0f4e16b8879b6a2bd10439","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.c141801d5.0.tgz","fileCount":17,"integrity":"sha512-Am+R3IOuf9czCkHeXlCzumBThMr9ql0OGAQ8/LIQcqk9lTovo+3e6Vgt2C+uvJboBbdM1YlSlttTQYgaXkQbUQ==","signatures":[{"sig":"MEUCIFroY1lWL+uA4CJK0a3N6NO8kY2hJKNSPltooNHXpzTaAiEAhfIPmgTLkpdNVMdPAv7C/guEepnEkLvwxXNGstYSXAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0yYCRA9TVsSAnZWagAA1rwP+wc27H7Wg9QFhoXwdjiV\n3y9MLB0+PmWJWQKAK1zJJG14H8WF2JXFhpCbXRLfF/DcY8Okippxsk6/W7OJ\nNuYmAjOSw0drdqDPKnsl7635V21ugGl16vY4mjnfe8qL7Zq8MriCX/y31Id4\nco9UqTZtcpp6RkOVkMTlw1Z08ApQ93uev/kwuiI+7CSKPhohX3TDvs1mNRm6\ngc2ZQGeEuTlW2A3KvJSlkNISC3RAr9pyW22mw9Ft1ozZ0b1rclxWlpv7dZvM\ngIP5YjOwTmttoaOVuCxasUkA3IjpimMJm09oKHie+8xj85h52+kLegsG9Bmd\n2FTn3bGfASCp9hb2nNHuKU5pjJHl/A8Uzq+izM4hVDDIcrWjACnqmZ3B9ZcS\n6VqYiIwe61qrdzK5habng41f776IW/UgJ62eH1yPGSlqqQLmLGJ5iqOantPW\ntjz6Wu61iyCpgWhqvrf5W1TBCp00fIQjssE2zZlH4q2Wdboj/jyW+KIv9uvB\n+33xPbFnP6h+OLCXDODwg4nbkvNHZp+FPOOLAS0/S6Wtb99kr4bR0JAFA6t4\nj9/n3hAVGqLqVmh3NUizTnNSql+C8Wu0eIhwJV/9jw2RFh4MeE6qaVpPFioY\ntiNPqabbxtP1Pw+oV0PRzPVMwLgbkptl7cc2Hh5QmiDfG19zyq7iYQdJH+hr\nRoIB\r\n=WYZF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"6.0.0-canary.c141801d5.0","@material/rtl":"6.0.0-canary.c141801d5.0","@material/shape":"6.0.0-canary.c141801d5.0","@material/theme":"6.0.0-canary.c141801d5.0","@material/ripple":"6.0.0-canary.c141801d5.0","@material/animation":"6.0.0-canary.c141801d5.0","@material/elevation":"6.0.0-canary.c141801d5.0","@material/typography":"6.0.0-canary.c141801d5.0","@material/touch-target":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.c141801d5.0_1587498136285_0.3877998994742644","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/fab","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2fb10dd6b3d748b5c14dd6bde733d2b4a1e0de5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0-canary.28d10a96e.0.tgz","fileCount":17,"integrity":"sha512-GIGslWpqQAEOUKqOFXSrPSkTRkOrXggpqCT0G8yxgAl1z9TPn404ofbxQnG2oKcrEi3RW4NljdnEtYjEIkPwFw==","signatures":[{"sig":"MEQCIC8PifI92t3jT8UBd5XbOARVdiymq9fMxhaG15LqLsv4AiAsQg9+Yd3YRwQxK3qQEjwrfVLVHY6y169mYHTMM7YKFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMAlCRA9TVsSAnZWagAAYzUP/RYfT13WptuLwMo8Z7Nu\n6hKEKudanLIoQ7pm/mSqHUnvH7ecX//9I4zrcTZkpH/HRmjoB7Td/suD670Q\nBOpw7u5XExcFTPde/aTXDWpTbOS/3BYahN5X5It6P0zaigL7WgdqpCNO4a1K\naqjAaIz27gNv3JALifP0B1aMcRRwwqc6JaMqmiYWgTc/76/TdHZ7tnpqrulW\nPj8j6ce5hc0lsKR13vaAGSBl+mkacoxsEnToepmdjn69TyVYtfrHeleGidTi\nCFrpU96XFvzBQk2o85Qrput+07TBaZpwah68owots0h+ype0N5A6mqVGPZqc\nh8aAegdeHuM6WNs3IcgKP0Yvzb5gmKQk+Iw00/avi6J4q5uxS9y8gfqwgUwR\nkDoFC2PICGtrmPD0ePGP9b5+hTYJ7M9lFN9znwcW2yT9Rt57U67qZKM331TZ\n3ngQD1aPsPRtSm7PpjB+v92LGzlX/dxDLLyQGx6ImMcc7P+ICxh87t4vJ9Ei\n2BJBh5TtCbbYtrikjU7VazgGEGjQK7e9jV2uaJPm6lknkc39kwtsMMJr4yIV\nTqXi+6Wr5+e7EuXQjOcAU0igr7Z7KCtZCTmzafCeZt8pLGF5fdTMIpIIblvo\nut+YNnnluVmfG44J6UDDt7CZhoczBWaXdAt3cpIdKdjR5Oz7C+k/nmA/gKDd\nYcRv\r\n=YEvK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"6.0.0-canary.28d10a96e.0","@material/rtl":"6.0.0-canary.28d10a96e.0","@material/shape":"6.0.0-canary.28d10a96e.0","@material/theme":"6.0.0-canary.28d10a96e.0","@material/ripple":"6.0.0-canary.28d10a96e.0","@material/animation":"6.0.0-canary.28d10a96e.0","@material/elevation":"6.0.0-canary.28d10a96e.0","@material/typography":"6.0.0-canary.28d10a96e.0","@material/touch-target":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0-canary.28d10a96e.0_1587593252943_0.9693509082300353","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/fab","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.8540808be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"211d4ddea7bde137b14aedb6473b4f5748079c18","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.8540808be.0.tgz","fileCount":17,"integrity":"sha512-tSxbnYYOVFRmXmjkw1mWfCrbMkCuE/nqWZxKhkrBCbS0kWHSPdUxC0qHZbxqp/nwVgavSffLJl33OVUoblPRww==","signatures":[{"sig":"MEUCIQC7XU//5FrU7J8ozdABpvOORFf8ytyTMecnwc9BJEkmqAIgWz+r2i7CJfmIod+8UUPAPS0E5ir7c0lAHvMJoNhdVmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+7CRA9TVsSAnZWagAAaOUP/2ZYIWlC8ZJ0OYg2fEjA\nEGJ/xSmjDdJUkqOhMscA7UEREHql8U4/GjQbcMgIrWdbZ71pT9cMgjc0966b\nBNgWHNQKdXLaydPwwYvnMpWkd6V/kU+SKKZlgWOrinwe11xhruwtw/2X7wTE\nhSwxvxSmjYg7cKLtNhtTZfW9U0PDmnskBniivvmuO/nXoCJmOSfNKmpPvSn3\nZZrkD/Ql5wmioXEPQ6RfpYKDh58cGs5OJx89aaNUksaBShJAVGjSfWjBRSx0\nsWAoWA6Z6XyszAZsYOsAEFJWFV2MJ4nKihVDLgeeyZv57DeTrdqyRzxMq8QU\n+MYLHyN4mXuaHjs4u0IxsUK7MPFh0zDcw9tYkfuKmtrdS/Q4sstY7TAetgbh\ny6zDhw6oLj+njNktwL4ik4NEHhuhTNiD/D1U3ucPr38gFGxWcvPNfBqYjatt\nmhlr+WkrSoFs3jVN8du55hZA74k5cjlfImN4a95RBd7vg95g1nuR2rq9ZVyI\nZ1EZhFqNLCjjf5gKiwFOcCIoofsjiMwTj8ZC5UDBxVBKgcBcB87lIQMCpOIi\n/Do0MYUcldEn1tLLCuZ834uzjqSVSo0XxrFxTD377ckDZUbiwdiEBiG1wvKY\nCqNTYqwYcRlbkWzw+1P9ilOQdfA7kHtxw5w5Fq+F10OlZlrnte4a6GBmyEC7\nLmSP\r\n=hoPE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.8540808be.0","@material/rtl":"7.0.0-canary.8540808be.0","@material/shape":"7.0.0-canary.8540808be.0","@material/theme":"7.0.0-canary.8540808be.0","@material/ripple":"7.0.0-canary.8540808be.0","@material/animation":"7.0.0-canary.8540808be.0","@material/elevation":"7.0.0-canary.8540808be.0","@material/typography":"7.0.0-canary.8540808be.0","@material/touch-target":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.8540808be.0_1587662778889_0.33338891692801487","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/fab","version":"6.0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@6.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"840d430b360c0de3a8466d5b4a0be4e9f9eb665e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-6.0.0.tgz","fileCount":16,"integrity":"sha512-d+Ws2MHtS8jWKBBnj8KY5dwEUroLiGWNOZPWEP6Ms6hgSZfr9HbzUppfjFZrDG8VaJHW4DTXDcdrpZqgMMzERA==","signatures":[{"sig":"MEUCICxjuJak4EAMTIpHLfNoB/459glC5cB0ARDeMCzniN0ZAiEA9YAVI791DgxwtJG718Ctc3uOqS98yXIWdq5iAzOp9i0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/gCRA9TVsSAnZWagAAQr4P/iWD7x2xOtUAqZQZHkRn\nOAozf9SPKkuMG49ISe0u0LVEg+BkRJGNI3vW8g1YagVBR7zO5gSJBkHNvcrz\n8J1tn2nF9bxqusSlymUQ4sE+wbh/rw9ya7cfKFLGyaDrk/VwIU/0v2ycwJhJ\nzbwnZ4LYcH4Ak0roaRL66b3wL24SbBxtrj1O9ZkMBBysxzLkdb5jOaT37aa3\nabZ24MiFdBh9mwI1bdyC4dLttTuIj8CUi7EuWDPbraTxPTP+7RoZB66Iemew\nKdIOMeM1JjdCMsife4o50nhfsoSTRZoKoxc4NR7bM03+MBITERXSo1o+FVLc\nvffctASMktMgunvcx7uT2iG5BFXDGwFDcSaTwgC3858pjTYooEanyARYvW98\nBDjcUKUqEL2vc5eckrOjC2yIj9XWjPdB9UCX9PppY2l7WFKZLah5QNLI+HAK\nxGiZMdIVNRwgdDgyakmoasKJ3vNvPHJ1UVvvlvIBsg+ac8mF1jsntnjmBCsx\nq8ON4tmLfNOm75gju9lb7l/KGAVFLIs5nu6Zi5xk3XVAuAhoihywYo25QOum\nm0XK/R4R1WvFQOoduYv3XLQllmL96z2J/OIouGSg7+z4NwQIR/jQPEanRbrf\nQb0wA1JoyL3og8q+AjrIweS3o+OAxRZVlK0HVvyNfyX4/fJ+aTdQzGXWaKHL\nWUiG\r\n=narA\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"^6.0.0","@material/rtl":"^6.0.0","@material/shape":"^6.0.0","@material/theme":"^6.0.0","@material/ripple":"^6.0.0","@material/animation":"^6.0.0","@material/elevation":"^6.0.0","@material/typography":"^6.0.0","@material/touch-target":"^6.0.0","@material/feature-targeting":"^6.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_6.0.0_1587662815630_0.23210609791249115","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/fab","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.2673adb74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d6b891c56bc1be67651696a15dcfe80e6ce159c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.2673adb74.0.tgz","fileCount":17,"integrity":"sha512-NPiIi8X0tEMeHws4jmpI+FncVbGgUbrR3V4xzZC7jXzH/TH72lIUgWXCwf7jDu71/neA8eBa4etFHqm9a8gCQg==","signatures":[{"sig":"MEQCIFs1lrvCe+7avLkbTrI8ADs93gyxxGbhY3beAy0S8pvhAiAJa46VtgyJkIKNsuKT/dIyxsLPsECdaGP3eOarzGTSow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohqpCRA9TVsSAnZWagAAMcYP+wb6O/tqURr82A4EKVCS\nE8LHtMIQzO1/a7ZGyaRcKQvnhjuWS5UaA8M2JgeJ8sUJdscWXdAkZ4WjbnjD\ngAeGOayi4jhJ5U7MtjFbDFui7Tr70tEt6YtJAtTjIOMDZo9OByvzZMQ8Q8g6\nJs6mOKYIKAMVaPZQk3pmS1Tcv392I/vi/3W5sQmW93sHiU9vjdVqMSJJcbiP\nuu7pyOw1GHGK+Cs+HuVmw6Y2P/CY8yXA2xh+9do/3noZoO1ZqykbQIkTHYPl\nlPgL2XGOnNwHez2dn8PKc7DbT1Rcgxv5boOB/dDDbZf0FCH5rabx+kF8Bx77\nZqtMQQWvMPLmxIlOtym1zgmIhuknWcu4TlsWivE/VbV5PmL8RZaHCnzLgqo4\nyuEUImYuZrlZ83pKKzCCmjFRfyMh+b3FawqTBd+FfOO8c00gro6WRxqWM4R2\nFsYxnD+oTr7In5rStCo+3Q3Ramaq8DZgQ7lBMihH57sJIGW3dpik50LN5uqO\nCERjpqu5+ng5xiKHrmjjfwk5ou0g2KypoNXZfzfbKuIj5wwVkrXtG+/P04bB\nf4sIexSzP3N3SeVeism2IXUG+kkw+Y91zA2FK3AHlmg2CQGXWSkSTbKCDuWS\nkKsQdca3A3NlLXJ/ZkgTIjdR1DusitT6rKJSaKI/X9SAk4EoRvusutIL9RIl\np7FK\r\n=j0d/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.2673adb74.0","@material/rtl":"7.0.0-canary.2673adb74.0","@material/shape":"7.0.0-canary.2673adb74.0","@material/theme":"7.0.0-canary.2673adb74.0","@material/ripple":"7.0.0-canary.2673adb74.0","@material/animation":"7.0.0-canary.2673adb74.0","@material/elevation":"7.0.0-canary.2673adb74.0","@material/typography":"7.0.0-canary.2673adb74.0","@material/touch-target":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.2673adb74.0_1587681960854_0.24038441557365786","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/fab","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d7d81db7884561e7d21aeb6083f2bf2bdd020a1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":17,"integrity":"sha512-CaJ9bpUr66rFng9aS7tiAiQj5QFzyNvOYCIZhRjc/VfPD/raBMNBjI3lJFWKphhwVBUOtrKXOk3Tz7hQNHFVxQ==","signatures":[{"sig":"MEUCICOq4PsYr20vfqsnYxaQfrMDM2dIYGZMDDHpVPxTA7T3AiEA+1RTTomvpv50ZC23tr6Pd6wt1P9D2usU1EMd4zDcmFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojEICRA9TVsSAnZWagAAM4gP/RMecETm5Rk++o/l+AhX\nUD4T/KYFpUqrNd8CnEFtfL1/TacJD+iwztXHhFypd3KcrOaf0fEsL7BpzOOa\nusgWyaHFscT6NXzWFb8/dIwdFCRKjwvy+M7HekZQI5z/oDUK5AIOr2r3caYo\nMSNQh8QK4SpI1TuGpdT/a5otr5sosv20zUKVEBeE++TL00ym5kWn/IePZp9/\nB3rktXMV4M3u70xSFwvi5+SLepYzfFo+XuNxYs9uTIMvHzY5byxhSNvgkkBs\nWP2uskdNdEF38EwvT1cSUwTURF3Eruni/stKJ9WIt7FFj8oLbV0XrpMdQOIx\nLdcQGrBh/SH/OAY4Ev9IT6A13zUdCXzxYb3S61LbyT6TD+AfC10bjsUz/nC1\n1ueBXcsw7po8G2Yu2wNpuK8zuLbKNcJaquR+sSZ2r093ek/rk1UOBE3h9QMs\nPOtHu5IQ9AMWVUhJRw7a/vsVrPUOzTleQ26C7UXn3VGBpVMo7xL6i/YW/8gQ\neepNxuROBUgRnFVWGBmG1PX4ZJ+Ld+XJZ3ZilQvDwmGCs+gdPHZIwogC+25C\nNSEy8lNysKgKi4G+MGnFmZ9C1skYkIVgwFIf+qCdKLzzLQ0JFMyuKUfcsy4D\nx4wDBPo0FvQc9aCvNaM4zhGRYirSXo0iykbxIegpjgAHfdw3JzWEsBkJpyFu\ny8YO\r\n=VomP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.b10d0d7f1.0","@material/rtl":"7.0.0-canary.b10d0d7f1.0","@material/shape":"7.0.0-canary.b10d0d7f1.0","@material/theme":"7.0.0-canary.b10d0d7f1.0","@material/ripple":"7.0.0-canary.b10d0d7f1.0","@material/animation":"7.0.0-canary.b10d0d7f1.0","@material/elevation":"7.0.0-canary.b10d0d7f1.0","@material/typography":"7.0.0-canary.b10d0d7f1.0","@material/touch-target":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.b10d0d7f1.0_1587687687563_0.41090275952588895","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/fab","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e5e3558e291d1cf6d6ce7ecc004d5cdbecc97cf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":17,"integrity":"sha512-UfMtb0L0yYbUsuITb2ulBaydHszLIZuvnqfJHbFYCB5G+QAuGuljUYsYqtT778MiIZDvkBIV2x9qAb0prMrFqQ==","signatures":[{"sig":"MEQCIDyc9HEUPS4qp1VWPQzCUPfPDKNRBVO361CxoSlauB3kAiByMX6mhbYllmW3THMILkJTrA7mDg89GzbEM49ehb745Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1TLCRA9TVsSAnZWagAACDsP/12lZyhnAr1O/+rOtnqo\nptVz28WeSAs//62NvfT7QWeo3g1EhwJAKs5wRgIEutSXZorr8lTEiH/gRNE1\njQbk0bk9WGCfpV9l4qCuf8uWs3Mpbrx9NaDRRo6NrnuZkHLCpCJEV1zIQbRX\nXxhAbIMQ8Cg9HL1c0ow+T33Z9zM+zNApN9cH1iATkwpgVhnzv75INMM5/1I1\nxEGKd7hrv71g1lcTwlAE8TpxTHvaHneqPVbKxOI+NLZR+5DYB/ZvW4TRlT66\nCUVicZv1U6gxBiA6gKacHP9uu17qvcK5QyFKJXkSGpky29xA4HBBe/pzZcfC\n9/Am+QF+ILn9nJI2Xre2ylvm7TM72QkJhO+M01vClfHVzOmYdl9TwfWfJkvD\nS4WI9cLkoTF9Nzhk5S6wOPYcRKYgCmeM39XmJmfCYsPwhSStlqE0kFmOJ05K\nujoJIG73oCQ9EAF+cll7h69mgLrfY6QSGfdf6JvouOaQnFVSIfBRE8Xake49\np4ni4Kplb0cUHB5Kon5sA/nfrc2uwTQu1jhEO7lbJK+SREDGWow4B2XjEV6x\nCp9goFz1f1URTnRYbIwpfgLx4nObPFa5zuD3KG7Q10OHaItBemIDkIxMBHQP\nL+PjQTcL3GwVFwBc7ZABUOB4OIxI6A8nUy8Xg1mqZQDU2cc//nt8nG+bK86m\nKMAA\r\n=rNjD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.3bd8c1bac.0","@material/rtl":"7.0.0-canary.3bd8c1bac.0","@material/shape":"7.0.0-canary.3bd8c1bac.0","@material/theme":"7.0.0-canary.3bd8c1bac.0","@material/ripple":"7.0.0-canary.3bd8c1bac.0","@material/animation":"7.0.0-canary.3bd8c1bac.0","@material/elevation":"7.0.0-canary.3bd8c1bac.0","@material/typography":"7.0.0-canary.3bd8c1bac.0","@material/touch-target":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.3bd8c1bac.0_1587762379275_0.3518707776074408","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/fab","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7e4e6fb27cb9f69011160384ca0cefd8a78e305","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.b83c8dc22.0.tgz","fileCount":17,"integrity":"sha512-yfpbCIp1d+rK2kuuZWde5+VPYF0j0ON+LMTVguwcX967lo+0ILwoihz4b7umVdMfSPuHka4GOPckpebOaGkQVg==","signatures":[{"sig":"MEUCICLm4zkqhlc4CObSeHmnNJy0iofVN+mMgxOiCqPUiztaAiEAz425pOODGIMUtpgBz5C0hY1idaoArCegidR2GUGnpE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1fLCRA9TVsSAnZWagAATjAP/0Layua0wK5i8BA1rah1\nyuUBZbmVu1rJwOUSuo5cYKUeSwfwqgupXtxaB5Ni4VWIy9aaSr37flPcA1PV\ng/ntupAc0qMngrmIbqmzUpMxXYXI+pZ8p/mVzQl7F1rPCbwT1y8q6gmc68b9\ni3fhdS+B3ZInw36Ew+oruuN8we9Jc1lr5mtkcBwZi67Eay6vFJ4DKK7xEFL8\nx/sOghpQkACed9Ww/LfbVpyPgb9jUBWapsmkzI0bDFhNcjUYzBySddg5pR5+\nbhJS4zqcehCDPyIoIz358DOvd0RiarCz8o8T3W5a+ci+QBEam8ECdDAQbY58\nDiXsOJaS5MPI0yYk8n5B3RppF40/NAzXKy9PgoOir78pxzywAqtqIBYv52cA\n7ZtssjoLrY+X0W7u1napraG9YuhMe8NIM8/hZlOgoVOAmBc5CuaN4nQ40eaN\nuDdgRhuws02rD1z7KtXXTpMx9iwFPyzeQRwdcYtJY7FxeEjF3RmwFqHWX4KW\nL9IH6LDJdXMTESQQ4jgit28J1ZnScZegT3qCivmMx+Cmte/kvRi5+/py2WuY\nv9ZirauYQDb2hQQAtGooCpThuJR2pWgJTqoJSTdIqhgW2OExXD7MM3uwAcXO\n+FCC9AUR1i91vte61aqTuKhSpgDAg1PY7bezRPqR5WUFXrSjwB108tz29ZPf\nJCGj\r\n=pqvZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.b83c8dc22.0","@material/rtl":"7.0.0-canary.b83c8dc22.0","@material/shape":"7.0.0-canary.b83c8dc22.0","@material/theme":"7.0.0-canary.b83c8dc22.0","@material/ripple":"7.0.0-canary.b83c8dc22.0","@material/animation":"7.0.0-canary.b83c8dc22.0","@material/elevation":"7.0.0-canary.b83c8dc22.0","@material/typography":"7.0.0-canary.b83c8dc22.0","@material/touch-target":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.b83c8dc22.0_1587763146688_0.31688108841493756","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/fab","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4766ddcf201e41e7048dc4b387c3e34703b7cc2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.1b3dd846d.0.tgz","fileCount":17,"integrity":"sha512-u+jQTkGd5YMN/OaFKstjb1fyqkRXIEJYKWje2jeDDMizALw2jXx6Grl8C1NgNuJKY+M2x3xvT5/N9eOpCbV9yg==","signatures":[{"sig":"MEUCIQD24UX65s69gmPoUQ2abSD7HtD1Q2skYhMYzB5aeQc7VgIgYvbONRJUVmmfMxBV057YGCd9wN49SBsdeOb9azly4YY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4fcCRA9TVsSAnZWagAAynsP/2Hj0eOJU5lgxl591afH\nsE0mICucteFHUWaDqG5B7mpK1loaJRbGyka0T1hdfSJeXyOnrSykhWPEMjDJ\nBJVo0udwGOf4Wlf99QO7PQJ+/wVkSd92oaKBF5KqavvlyEszcF6RxYNr8ERL\nRmdBWneblRHj+4hVTJLx1NcKayd8isR8KXHOvndc5TOLPa4KZ4vOQxcBWRGx\nvnFGPt88gIB8TFegKj2QlN+8Mb9L688EVpHWQRMwmAnkEPGn1L+6N1q3yn89\nlT0ULQr5EKJCyJI9uaYVBFYUZA7kjk92ZQroDkfVjV+voYlzUjKCB3rLgVmj\nhtnMbWjY+bSXlTpmtIbAtAFOOprRNysb0BVHI/b3qNSPMwjAfO434aEtDox+\nxyzuuseNjh9EjG21HNpVzMmP5cKV8hEvXCvI3lmvG5jmrwF5a0sptXtp1CgB\ncXMDXjUup7aIUn8PgMpm+rntHHODU6klEWaiJEdrhlWgb4Fl/vVzz4XTpPKl\nEJPuHtgEx2/otV1f/2LoDq4tXqC6m8P4JUKBYx+5jevehWEKtoKcDxmI+38y\nNy7Ke9D8cWKbjd+xtyOE3LpFzJE40+mhS7vDGk89EqDsFkyayS+iWa5RVELF\nHS1I7vT9OAI2nW4A1ZM+ivw5UC3ehvPAcva3ErpCCmUvn2zYkz6yWk3dmSn3\nEQ4h\r\n=NJin\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.1b3dd846d.0","@material/rtl":"7.0.0-canary.1b3dd846d.0","@material/shape":"7.0.0-canary.1b3dd846d.0","@material/theme":"7.0.0-canary.1b3dd846d.0","@material/ripple":"7.0.0-canary.1b3dd846d.0","@material/animation":"7.0.0-canary.1b3dd846d.0","@material/elevation":"7.0.0-canary.1b3dd846d.0","@material/typography":"7.0.0-canary.1b3dd846d.0","@material/touch-target":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.1b3dd846d.0_1587775451729_0.2646813041442999","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/fab","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.29debfea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75bb4f935de983c3a1bb9ac01a47e0b832aa03fb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.29debfea7.0.tgz","fileCount":17,"integrity":"sha512-w3YvYCc6bxomdCASggD2Ept/SSuZmqRKPD7iAApzTl4fEwAEQyQS2A5YJgMrOCceL9DkRWHu/fzxLxChjzGe0g==","signatures":[{"sig":"MEUCIQDDLQNvJlNlayv+XG+4vfWqf47Ga/QpcTP2rTRJT7OS9AIgGd44AabgeCRyMR70+vkaXZx7sKIJaUnTYqtbSwvaWJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptDkCRA9TVsSAnZWagAA9CwP+QBlq3aOfe4HeEz2XFLZ\nHTDslxvJkT9PFBXTQfRI9SgxB/E63qkCoOX3U9jeLbgGargoaYxzrD7N6c4r\nXQ5bQuQmD+8PEfWnG6848VNmVlRc//E0IWjehy1zwoOp1DWhdhu8re2z4m0r\n7MbSO3An3ipx7t8vzbO77tlpjRMXyNT7KkcLIm4/9xEWikF2TZiuryWBvOgK\n5cBuZa7D6T9kyWcsw1o7aiXIv7Ij9viRLHOMogsrtOSFttXMqyqP6gy1lfvf\nLZMaaxMqsvoDQADRkhXLIfH/9X6VdiOLZ7VFMYF2VKiIFhIyBJiy5jq7XMqA\neh/2UYpRcAvDnsgCSZhM+oYPjTvgg+OsfPoifU6KrkiMErtwgGo5DRNqih9/\nVH2CEfS96XO1ChoWcPDaZxU90vmCIgtjkHVRhWlzWtCNKn0W5hpThYe+dKcg\n8GwKRckeTbNE8u9RSItHa0POqofDhftYhRMPdX0x5U1LnSxev4yKYYOZaIrp\nqcVdpmqND8/MsGr7A4tgW7rkZ+R//FEv5rH9XUlWBzIVv+PeESssACo/g6GW\nWuQ2SN/GzW21TTL3xzbjLPxQVZ3C6ujwi/xzHk6NmDC8qFcac1FzUTTuw+nb\n5Hkxx1Rcime7ku/yXuNzUa8QlXQZjqDOl4KdCNEH0tF2IzOfmUUjxz/cAQEN\nHQHR\r\n=pLyq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.29debfea7.0","@material/rtl":"7.0.0-canary.29debfea7.0","@material/shape":"7.0.0-canary.29debfea7.0","@material/theme":"7.0.0-canary.29debfea7.0","@material/ripple":"7.0.0-canary.29debfea7.0","@material/animation":"7.0.0-canary.29debfea7.0","@material/elevation":"7.0.0-canary.29debfea7.0","@material/typography":"7.0.0-canary.29debfea7.0","@material/touch-target":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.29debfea7.0_1587990755902_0.20346320405142837","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/fab","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c1df8a0987515ec0ecf4f4ef1ee6b86abdb0c93","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.28d32f8e0.0.tgz","fileCount":17,"integrity":"sha512-6Qwk+4FmpPERbQxYuLy78GcjXrEfs9MMYOTndNInAndZeRvhR5Ol9XSDPxH6h+It1GeRceprLkNdR6Ln/z2Opg==","signatures":[{"sig":"MEUCIAC/4/6JI5iTFCi34vVbmx7R8zOLciBsd88OIIETdHOlAiEA2pjX0o2fEg4YOk9OSIXnmqhd/ml1fbjC9/AqVa4smAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepucgCRA9TVsSAnZWagAAceAP/0HybcaNoXOMJnuHVjtS\neSgyzFi+P1RAuJasEcqYTk7Cr/ZcWJ9tlCIp0HjNOdTX2IUqcGlcfQC1PAsl\nfeWcTnf744jmS/pVNqJQueRrQbw+Qtp5mgU9Rt4VO3eWRTzD0ilFnajS9Y1U\nS3WpNvVayK6ClMVfCnXCJh/lVlASQOFuwb+8zbCu9bWhL+tsljicqLwLBceR\n3dQnvvH50bp0LEfEDvKntfRCUZ55kSLOS40zkp+ZnCPEpv+pSbo71CkslpZM\nWjPsJgvneG01/lPLtBLPu9dNVVECy34or4z/Gt5H91OSPufGgOIKBaf1OC12\nm2WvSlxRLbNDYNU/ToSDrXUM/VUr/6ry29t1X5e+JUJ30KmPgib1yW1hGoe8\n1nXpadSljKzmzsqxW8bepvnixoNLqrt9keH6DnxLsiXMQZiAC/kONTCN2Guh\n1g+3dQACnl7/g1W+aEIloapaecaUvS4tgoch5Ucy0fvOCcikbjRMoOjLIAii\nwz+HXaPdp4DQ7KXnOBkwYRzKcm/p07Kk5eoqSJ7ekiI9B0rZa2rF4uNlT5ky\nh5aeNEVki+NzHcoS5KMpO0zigKiLwwDrfnolA1IkxWq9MCNntM2dykbhJV2A\nLS9KpHvtRAmskhqvl9yC5kR2a1YlAzb5k2+QINE2HfHLpshBUlRy+uAWd1rW\nRGyx\r\n=QdTW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.28d32f8e0.0","@material/rtl":"7.0.0-canary.28d32f8e0.0","@material/shape":"7.0.0-canary.28d32f8e0.0","@material/theme":"7.0.0-canary.28d32f8e0.0","@material/ripple":"7.0.0-canary.28d32f8e0.0","@material/animation":"7.0.0-canary.28d32f8e0.0","@material/elevation":"7.0.0-canary.28d32f8e0.0","@material/typography":"7.0.0-canary.28d32f8e0.0","@material/touch-target":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.28d32f8e0.0_1587996447743_0.9614940708956381","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/fab","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5491a7b7ae9063f67ea7d56641ed77d9f09846c4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.af71cfdd6.0.tgz","fileCount":17,"integrity":"sha512-f/9FnaiT5NuOVZZxG02yZXoAKB4oXRNjAgWGZXI2/Y0j6IXneR7gvJyZkCGDx5LOtC3OtO0UpyzZRFOYlqnYQw==","signatures":[{"sig":"MEUCIQDyjE+OaYWUI0o+sVsGPU+4P/e9WzpABKwKgVwESUa68QIge/xEd1F2MoxSSQckKWoVaBRc3+AVy4KWsCmeHRTv6rM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLmYCRA9TVsSAnZWagAA1fAP/3kXhzJRGRDIP3N2AYXq\nqutpn3pxKt1cM/+egyKLfeM0fu795Mb94f1nnNxotujykZE7L24kl0aqckM7\nN6uZW3D4wKZwvD7vB5cvOFDPjdM1uQ2NnDhcCVbixAsY8Kb1HuoUc/u/8evi\n2QK58Ysw14WnaiAwbOu/eAyEcrTcpqpcXghK0J7cc17qi2VzV9CvLVJIUqRl\nNeoxcUhXAtrBtuxuer/hz55qN2pJ5KGVA1PKItOQ43cij1F36UMWS8041fbF\ny7/DKW4tenokQQCUJqaAXDm+T7phY1Eox00lNBmLEDJVs4eI9G5DZg4Zl7Ui\nFoTiMozsPlntCxV+GCWJaXp74t8S//vXKgYmRVjak3XqEGPMBsUTM3Y5MG//\nhTXN/BkEahywLGEYP0MBcrVaIBAkrltp1KC/ySkDILH6jH81gyBMotMZszu4\n/l14TgSm5VCD7VAASq1pDU9q9CeTGsABSF/xN+v7ACGj/DLr1k7XCH/sHlEl\n5egwObVJdS4lAk9mEGFVHBVNVhNFUHblLpR8ORXQdG8jDSuZPNdLruQcJATj\n7zAXNNJfWxclB6A03cmHSZZt8lhzGhO2V2WTF/tacmiD17uoUBRbwX8lTCqm\nwdm1KyhXVMb48qmJyQVXcEC511Y0qtJwum/NYRQ9FJLgxEIaI0wl0qy+MPm3\ny0KH\r\n=6EYQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.af71cfdd6.0","@material/rtl":"7.0.0-canary.af71cfdd6.0","@material/shape":"7.0.0-canary.af71cfdd6.0","@material/theme":"7.0.0-canary.af71cfdd6.0","@material/ripple":"7.0.0-canary.af71cfdd6.0","@material/animation":"7.0.0-canary.af71cfdd6.0","@material/elevation":"7.0.0-canary.af71cfdd6.0","@material/typography":"7.0.0-canary.af71cfdd6.0","@material/touch-target":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.af71cfdd6.0_1588115863712_0.3905676857963365","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/fab","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d048ac6285c556a38c10a45cde8d90aa2043d61","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.99d2fc961.0.tgz","fileCount":17,"integrity":"sha512-aL+Yyd2IFb6vkj1BWE2wjZ6aL300uUEdtURMYgWboFe0BkWEavmkzl+U7u126PZtH20mr98IHj52TMRxnlPEPQ==","signatures":[{"sig":"MEYCIQCZA/ckD2wV52+T5r1ufbBvOCJKTu6A3Ts1xnFHJ8+WIQIhANOVhGU3oeThf4SZjciqnKVPiaSG3h+DCgsSsJhwdBKL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVqDCRA9TVsSAnZWagAArWoP/0w2+ffZ0YJ3Z+hniWme\nERLRu5UsbExqs4a+CIQaVOELhXj+JeHKp6ON64+PQ5Rhp+qpwu1zYPcT5O06\n5VazIx9Xn4IY9Cq1FouAnye9i8loC/6qtGCJkMdGBrJVXSoKVe8dpY0cYOBu\n1eLkVuJa7nY6OJymS/0cQvhk9Va+OCQOnXAuXgjvl+xvetUtTylNIAEfhSjz\n7VeCR1PYDUAAePK4Dbt65LCPjz8ztSvnD5n6AwUEQGJnCNQ2fJmMypifKI2/\nPefT5BYekVG9UNTCsovLbIEB6N9MZHIJTMnHA7sqqWB2F7y6oFMiNu0eSt8e\nWabWSFUdgIFlg2qXrEuP/pud+nclL77uQjf6x1R4MiN4FTdwVPzkrNnY2FUf\nN7DqnVt4c7XtbdusA19HD0NobozInBsEli3v2cmhQTFWv9POGcEVYeTLecPg\n5eF/hmxoSFVRpnQo5XlgU+6Vuur+xgJgiqg7a0Uo37Ct7RK+wt5X77jjXxyr\n9Gclt72C0hIMAw4FBc/GS5QP4YF4j886DbIBXEG5rr/Qmt4Kgf203kWT4ex2\numUtA22ldF1o40dorpsd/CVp//JVd3J7ph0cUgkZTEs6x13qNCau5RQ0ciQA\nzkVD7vmTsVh4ZxCItpoRGrILq/Hop5Zi5C0ru+7ihNgivWceXnFIxncaieVy\n7fjn\r\n=hW4Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.99d2fc961.0","@material/rtl":"7.0.0-canary.99d2fc961.0","@material/shape":"7.0.0-canary.99d2fc961.0","@material/theme":"7.0.0-canary.99d2fc961.0","@material/ripple":"7.0.0-canary.99d2fc961.0","@material/animation":"7.0.0-canary.99d2fc961.0","@material/elevation":"7.0.0-canary.99d2fc961.0","@material/typography":"7.0.0-canary.99d2fc961.0","@material/touch-target":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.99d2fc961.0_1588157058772_0.6882339237875394","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/fab","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6baee9f8f6dc71d82c4bbf8cd436045a2370767","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.0e052b24f.0.tgz","fileCount":17,"integrity":"sha512-98S1i+QRI8GWaU4JplbJZDZ8XBLmtBnBlT3KNH1XGnk65GgT/oX5Zp4vq3B2/XimCz2vPY4mZghzC4xdH1rrAQ==","signatures":[{"sig":"MEUCIQC1c3pixQYOw3EgBQ1OtBLAVlaN47lT1tsu1GQiHfuZIgIgT+57EVONAFHerHiqTDIB5eoQE4Dcyfrdzs5f0r008cg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqioUCRA9TVsSAnZWagAAqIYP/2wlTRj38BR9pKNu0joE\n8ASwpDoeyTwIVRq6xVh9BYYVU8O7C7/g6ewc5gj6vpXg2IeygPsNurXDrjWF\ndWFZdl4MA31+k+SZVxPe++T9Kx7PEeSiCxL3S9m3dyefb22RqpH+NGTOiZMz\n7rJ9r8HFaAoIqn/Q4kZgtroz1a0fqza1VBNfvutSeFJqDEVETMSGFnCK29tU\nd+z0nczcH59DBkj513pC0BKVB6oNQoXp3ZJOSZsrLCRRMwFY4t2jfNPQioUq\nYbJ/nr938PC/GQnRbVoWPOUENACwrkJdvVw71+efSIH7vacJLYA8dc+521od\nYeJzrqOtpeITOcYTXYAEEoDQVO7ufAh26WlQg3cnARrqPVfpaFiRcOD/uJbX\nRTxqOeDqxuk/k/2Dp5K+aqUFWd4AcR4IZVmRUD4zgxOgJWRuYw9/U1JwvOtA\nWIVxnlr4Tl61YNyMH6q8GZ0CwwV5isLuHkGv0NCFAnAe8ndW8su3+JbRSFxE\noe+EjKPljZXF1x8QxlsCZWLoiQQ1oGojjhabGpFSNFQOibjAaxePaipEaksU\nXJPTbOcQZOKbFZ0cb4urbQ5np9onaTBC5Kt8qjWXkXp7AeBRIh0v8kKIk0mW\nyA17yQqKfXSrTVKxgKAsdmlpA9ex0STm11cw0a6+kvvaACYVf3Fnrz6lCf1K\nRtjp\r\n=y5nx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.0e052b24f.0","@material/rtl":"7.0.0-canary.0e052b24f.0","@material/shape":"7.0.0-canary.0e052b24f.0","@material/theme":"7.0.0-canary.0e052b24f.0","@material/ripple":"7.0.0-canary.0e052b24f.0","@material/animation":"7.0.0-canary.0e052b24f.0","@material/elevation":"7.0.0-canary.0e052b24f.0","@material/typography":"7.0.0-canary.0e052b24f.0","@material/touch-target":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.0e052b24f.0_1588210195675_0.9078529710166012","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/fab","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"347719966166cb897b32ae242debcb3d4cb97115","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.ff4bc632a.0.tgz","fileCount":17,"integrity":"sha512-9RwWLVfKmCPW38OYRRep8oTkTJm9zSjODqaUxPMLU5ADYGfiBSDtHzKPocAFA2JOZmPS0APD45q9ZZLci5rkaw==","signatures":[{"sig":"MEYCIQC1wi/RLwRYQ1URordFd47B946ww7sFW3gdpOH1h5VC8QIhALrUevh6xj1Pf5t/iYaVShxfIZPPssjr9Dltx8M65dZ1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowaCRA9TVsSAnZWagAASScQAJ+BwOb4ajfeP5bOGT7Z\n01e/PYf2t1rNhTHZt7IJCgUbGTtV8JRu/E0k2g3E+VVb+guxCakt2b8Om8t+\nVSqLlcFDBCEcHIiVVFIaa2kZpya0MeapPDMdTQyPXwRVdtxhgk965XyW/jUm\nTGgdBo60eAIrpxyjXylY9i2dKJr4vC4pk942J5FF262zrRdR7kfw1IX6dUBT\n38XYzLGvEP+31oH8oeAQp9PSByJaR5GLX/Uuz1gSKGdOyB5r+KFJLbft/K7K\nT7rMUrjnv/hswfz6OOz43Y8bV2TOkapq3011766jaYnH7HbyzE95I+czZrj+\n4yj9Qi4d2h1knXU2EQbR1ezpLUig/TkYnpMjkszthPh/D3xVCWWFc+bFWCYj\nszh0mxfuUb95LHcJLo6QL0nVkhtgJDI1NX4GJdSJ5opo4V5m+8ojXgR04xdb\n/sZbJ5R8VCeDrBpxSkhyF4V+fqoui26y9ZlsbfRhJQHeN8X06I0htBsoauiG\nygTBPIa8JMVwSYYWdE3oGD0yxGqr6guzSfWsCabC/SYFNrijNTwOfybvuLAj\nj9I0d5+4Pq2MslINTOnpYtv8oeZehA7XsI8mUDsIgxXGS4l9WjIqDFwjWYQb\n7+ysfwIZW2FeOEs37fI/AV9bFL0pM2VSfBu9pmMWZeACNI1Y7adleF1wMDLc\nvXWE\r\n=wztU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.ff4bc632a.0","@material/rtl":"7.0.0-canary.ff4bc632a.0","@material/shape":"7.0.0-canary.ff4bc632a.0","@material/theme":"7.0.0-canary.ff4bc632a.0","@material/ripple":"7.0.0-canary.ff4bc632a.0","@material/animation":"7.0.0-canary.ff4bc632a.0","@material/elevation":"7.0.0-canary.ff4bc632a.0","@material/typography":"7.0.0-canary.ff4bc632a.0","@material/touch-target":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.ff4bc632a.0_1588235290340_0.41015402426091874","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/fab","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9653bd40bb9b77a2b6acbec3489ded9b0a80368e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":17,"integrity":"sha512-fVaj5CdgzgT9d9BwEiv8/7ojeGvaRlO3BumfCHnShB3wI7VC+2xPoSxCDRn+bQyCIju9ugv3+PKcLEMnWjLo8Q==","signatures":[{"sig":"MEUCIQDe305Q+ts94PuBxKkEG8VdgJpYZwioPmDl2iViPlEn0AIgA3IsyjZi7avTKSNuXDG59E6t786ScgeQZBwrihuKm8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequGgCRA9TVsSAnZWagAAKMYP/3hze4toQ0LnXcWvCNiE\nKSwx9DGcpGF9RgXfj0/SSb5ccnf0ci+qTVXhu37Su3drsymbxPN8V11pthAR\nPtmhSyC12O7r523dKLgYkTpIOA3nmbGZCr8FOE+pHwW7bAuNd4PJyyqiRzRL\nhLIqJHp2y0VvV0ZnYXTFZPDxYVN0S6kQeYNUGaWJzzOsli3OIbv/NsglwSZ0\nEAEx+2GF1QafkdTmvTYzmoJ91OEa75gjVfu5xiXmuqqVl5tRKUA+/BFa0SkP\nCJox1GugEezDdpB3nI3EbqYyLpSgXUk0qt/WrG5GpAXKVZq50afo8YSi5DgZ\nVatWhK6GF/HGuBxVMH1L9UdJQ0jFMHOjzM71czMX52EekuunRLwTcNTKdwtx\ndy1/AYgaFg8A2WruYe2Qxz/Sti+cYev76J4eoRKJJF8DdWEvLEpFjY7wYj7N\n04052d3scBgjHbaqCfZW3iFjbhLpKG8YuOJ4mamVCqvOds5DuBTKl05NmEOV\n1KJjm60PIjBKpySvSFOWQIx6sDR5XWTswGmwcDKCCf2AL5s2h97TfsflJ4M+\n0gQaOQ+xRzAyjNB1UCQ3RK6/toPAJhJkpu4UN94xbARmRGP2XvuptzWimqsQ\nmC88uFBug1FEPd9goK25gTEA40Q+YwZjM5Z57eVjtcypgWnRDVou8g6J5Jja\n+A1x\r\n=cRZq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.b0f83d2fd.0","@material/rtl":"7.0.0-canary.b0f83d2fd.0","@material/shape":"7.0.0-canary.b0f83d2fd.0","@material/theme":"7.0.0-canary.b0f83d2fd.0","@material/ripple":"7.0.0-canary.b0f83d2fd.0","@material/animation":"7.0.0-canary.b0f83d2fd.0","@material/elevation":"7.0.0-canary.b0f83d2fd.0","@material/typography":"7.0.0-canary.b0f83d2fd.0","@material/touch-target":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.b0f83d2fd.0_1588257183450_0.04041523991114526","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/fab","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.e59906a57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34be4f0bf40ef78e167b438b695744038a0f1d07","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.e59906a57.0.tgz","fileCount":17,"integrity":"sha512-Bbo6RPKLUCW9/CEFMp4elGLclOhLsEUOQSCaKGcxBV1/DDPkllXzaAGXFyAMl+Ag89Tdko0eQnbxdJRTuexcNw==","signatures":[{"sig":"MEQCIHXr236R9q5bepTAu/cqz71wsHeVLcisGNpowGKvD+FLAiBTzMpWQIzoImiHUQ4Sej4DvMxaTFTDCE9ZSab8GIr/lQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerENzCRA9TVsSAnZWagAAlk0P/Rzp52c0DZMJ0ZzRyVDF\nsaWoUrJkwXg1iE1tO50CZIfil84clLcaDaMrUpGEs0i8mb2t4/LiweO7b0KC\nUOPGuS/EdR1dfugmm7F2VuePvqF7VH24ESN1YAhOmLym+g64TyQ5xMQGcjpH\nOEw4gc00wGWKYH3Fo42tNnH+cdp6frMzDjR+lAeybBcCtXTAGkrhvXrwMLKQ\nJZHheHwQrN7ZKX8NR9Q8AStd+2IOaQyaCidLRMgSxqIRn++uk5GZgfm4p63V\n7strWBMQpZjljzODTVZw1kl3eMDR3ytWDnMLtS7Jry5xa5ddeXMwivJXCB4W\nY9BMJ1wIVHMUNKVDXT35w0cHFknRXUwS6g3RdPq5LW0/x6peY//e7OLxM17n\nv0VjGpDoH2nYB4XJ3aWDulwOVgJJ/lobU9Fq3DnD8wo3KJF80tC3gZh4nsDm\nj4sKpLPFHDOWa7zxpRME1Aw0yI84y0ivuYvIWs0y3ZOu23AuL/uLmsTrzbCq\n2C3dWnu18Du+rHqbotR6sfp61SB2XumxL0mECPwmQCd5Fbc6/PyYSvZuQzyH\nFNyEP0yZj5/yRUUcCP4rK8PxnMAaL5NkmdCjlWgkU8mraS5cSPE+Qj6AN38x\n51E1rxwa6ud9jKDv1HWW4DL3QAA2svHFu3fOmZEChr3/bKA6YCDw/x+86P5H\nOATo\r\n=9U62\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.e59906a57.0","@material/rtl":"7.0.0-canary.e59906a57.0","@material/shape":"7.0.0-canary.e59906a57.0","@material/theme":"7.0.0-canary.e59906a57.0","@material/ripple":"7.0.0-canary.e59906a57.0","@material/animation":"7.0.0-canary.e59906a57.0","@material/elevation":"7.0.0-canary.e59906a57.0","@material/typography":"7.0.0-canary.e59906a57.0","@material/touch-target":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.e59906a57.0_1588347762517_0.8318826743012262","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/fab","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.c02712b59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a80b1aeec1a25497639d7e7b54a0740691fb636c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.c02712b59.0.tgz","fileCount":17,"integrity":"sha512-fsTRUcJPa/PuyRXpDQR18MCO6/5eZXMhd/zM2bkbrPR+g5RnCEuoRavfD92MEKMT9hxNAMol33GrH4/H6XB+kA==","signatures":[{"sig":"MEUCIA7XUie1dGH4a8AGHgzA05Asz8Rzwn9o9mUExHz6eCUwAiEAkA9BwcHtdM23a8uE1jk8TliQMmatCfwCJVGct8iu1d0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGm+CRA9TVsSAnZWagAAIjQP/3ERCpTxrYeaQNyrB+96\nRUxbLzuO6/sm/eUyFfbIuIIMs/rEp36S8HBKYl7v2tNuDhXI83f+LiTdchi+\nvhCBOoblzyCfyJUwpeOLmDiv7Ed7tfF7cVwn/NUl1qbJJ+etDmx5vTbhjU4Z\nFhmXKS6YNf+A1cwNH3T0csOZiWPAPlVG4Jt4ULQjYW2YOZl0DWuUOZtMvYt+\nNVDgDRd5bUMVdbR1DM4BHyfkERlDWiydu1X9/M6Tr4NgmzqTO+2klaiwL50P\ntiDhVymGCNK8NCDxAD/Ehgdf0MAKmQ5sxZgTtclDcTIjq9C+1ZXmDakcCsdV\npUWAA50Yp+QoQG4ZdENHjDGr94S6FVXpIYBM1yMiCzjBrdCQOJrJ6/1GpREl\n3T4MGdhCeDLo2i/Piayx2Nqql3m5rurPZL0OzsDLd2YThuesaVdDRJj/icqT\nI5WXbT/JdyVs1IFn3BQid2o0OTir9+275VPsj/jzeVMSyneYOciuMR3B9+kl\nSwZ9pCHt+HmX4WkJOtwA1Ck7Y503q+oIwST8YpWq75dawsUYfJEIgHPWWS3N\nspmdm+gELD/eFo9OeCfEyZAylvsn7KBnjHbalQ6eOGL+fMeUQyq3xzha/JeJ\n6nPYAd+ni8hlA0Xx56FiZUjScLgPzQf/tPBvl7/b5zjLYv/m0YKCFyFuiS34\n6VJw\r\n=uVvA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.c02712b59.0","@material/rtl":"7.0.0-canary.c02712b59.0","@material/shape":"7.0.0-canary.c02712b59.0","@material/theme":"7.0.0-canary.c02712b59.0","@material/ripple":"7.0.0-canary.c02712b59.0","@material/animation":"7.0.0-canary.c02712b59.0","@material/elevation":"7.0.0-canary.c02712b59.0","@material/typography":"7.0.0-canary.c02712b59.0","@material/touch-target":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.c02712b59.0_1588357566176_0.7365078332800503","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/fab","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.15d65448e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba3ec716d1b8507113489e73f16ef1084c9825eb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.15d65448e.0.tgz","fileCount":17,"integrity":"sha512-6S0Xd5hj8PapII7rVZP3+amkyGUuiU7WFW1zgs8gNu4QcnAMmbeqS6sxzIhQ7gNkPxPj/Z7eFx/gAcZyAD7eZA==","signatures":[{"sig":"MEUCIQD8aXugAniwvLYZpqz14rtSop4BxrDWrEepXEBLTJIIgAIgHcMdnFtfUALbdmmsS+bCCtVOmv47EnGRYZNI5KWSsyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHcRCRA9TVsSAnZWagAABi8P/RhnnfjFKRNjlR7EnjjG\nB9xkdE7dexpjQA5k9gMSmG7URs7D0l3QxxfGH1U0FUK+oYp/mvLnYljUTN1o\n5eG7WADkdltwrYKozpM6YlYbbQztl23+LGXPgDgvhaISbkRJHT7CCkZN5Fyz\n+Nq6rHZUWDgnuLu1RstikHoU4m+9VgwpZ/iwD50uCjhot4rBuHVdetjijGaR\n07DN4ZSg9lyw2sRpAZcQBphJYLsVZDZHGM5MFWsi7nOYR7EqReOgMChNuAqZ\ncZ1Jo7Dj2vrdv1iOJc/S0NWz/Nfz7QM9NO21N52ZopcePVNFkVqRBt1AA+8r\nEilT7DrqsapAc4xCxZCgGCLAOTw7Yr/nroGFiLXHkcmAZHLKzE9GYd0pzmeB\n40tzvEY+7pGZBLAcooPVStm2gTd31vu4Z1yEzuUFdfmLKUkM5MzHnfZWnBVo\nbuD7vFJgy8mInShQllu0BNTThDZ4wo4Hxb0CGuvP5HhxMTysJwx9C2Av8V8k\n8zpx9Y6TfKyrtrd/yMr/DgZrty8EYKlXjNqR76PofiBuoaCYi2UXIVHGC66Y\noW1NhYFJIIeCZpFWPoKJGymz3GqWUR9uuD0qTXaSXPC4Nw/0ES/Ht0J3eLcz\nuZk0EZixjy9nibYtqG2aPGPQnDdtYxUb0IOb3riKGdp4JtwuUUG8SPC4qj76\nTba8\r\n=q/NM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.15d65448e.0","@material/rtl":"7.0.0-canary.15d65448e.0","@material/shape":"7.0.0-canary.15d65448e.0","@material/theme":"7.0.0-canary.15d65448e.0","@material/ripple":"7.0.0-canary.15d65448e.0","@material/animation":"7.0.0-canary.15d65448e.0","@material/elevation":"7.0.0-canary.15d65448e.0","@material/typography":"7.0.0-canary.15d65448e.0","@material/touch-target":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.15d65448e.0_1588360977278_0.2625468897654215","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/fab","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.142b1549e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6480feeebb2ecd0c86df24b92e9a12741d30967e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.142b1549e.0.tgz","fileCount":17,"integrity":"sha512-CSOPrF3mntYYbC3hVJdYc0Tw2rOxc8MClRS737OzYHR+DAcSYYgk7sOoejDIkB9asuIyhCANIxscxJ+KXjwS3g==","signatures":[{"sig":"MEUCIHAYtpjlGjIImHsxLq5NwlxmzLFick/Ik1yKtbtQSHfKAiEA8GwAifpBOQ33++o0zIuIXD33QHTERIdy0+9eIMAYoC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKRWCRA9TVsSAnZWagAA3rAP/A62vRUCVncSUVheBVRe\nE71isAz7g4USqfXiQnJJE1ljXbiQ4aXh6rND0I1OaG+ecujnMq+ugMPr+TLn\n8Zp5W9LYsII/ZAZq5HTCs5D/Z1SgESi1MS42fP7iowoQny2xmKmI/0PWyOP2\nTF/eW71SWtkipAsC5z8FoW3lFB1/4zyEkWFX6Z0dKq+P2fUAeNEiJG59JYxp\nLmPZz9mprOiSIQStOfcWnxooTq/L5dVItzHXEObVJ7ZUGw4Vzmx4hhNXSHqH\n/LMVNycFlXB4DaSFl0nBJhha0y9Q1YUVfIVBtNYwiMfATXwGas/2MF5jFRBc\niOCcXmHAIAO5fsFJuWX8kMlRV4B8sC9YuWCAe0dDEEedlYZKnR6KntjzcVfB\nCdr5BXXcUmHwg2xo/TFFJVPHidFBZk4IUMBZ8u/d8A82NNoXH/EWhcnb2mVQ\nGr2zw29Snucb6/IS2sEiD5bPMeO2hiWl79GZernpXXWjyayDqB0fpqGChRB2\naORmbOSjaQ0uzBnt6XmhRNUyn8rnbhetUdAjlmh3vStDVwSkyF5Fr59kPacc\ngZ6GFRF94Ue5tREyk9eS1mUbfp3XL4ycXSjRrhFqHJFwNQQlPTdcpsaMUuwJ\nGM5ReAIhdojQZiPwPLCN5VQImmC3nTbMtS+C7bKl81+6q5wrNFt4ICU1tc3P\ns6pI\r\n=Lx6C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.142b1549e.0","@material/rtl":"7.0.0-canary.142b1549e.0","@material/shape":"7.0.0-canary.142b1549e.0","@material/theme":"7.0.0-canary.142b1549e.0","@material/ripple":"7.0.0-canary.142b1549e.0","@material/animation":"7.0.0-canary.142b1549e.0","@material/elevation":"7.0.0-canary.142b1549e.0","@material/typography":"7.0.0-canary.142b1549e.0","@material/touch-target":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.142b1549e.0_1588372565744_0.9026828423719897","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/fab","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.524b7b812.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bc9a9c480ddf2df3a81476010020ed26676ce0c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.524b7b812.0.tgz","fileCount":17,"integrity":"sha512-N3EYAkWF5wczJq/wfL3SjQP5ssBbnEJcQ6H/9OJU3qZfjnwq1CdWitki4e+TD9XspkQ7BaCqXzPLyq/8wD5Jvg==","signatures":[{"sig":"MEYCIQDIMeHGoyw9ekJnknH28+si+hdfv27nMuiGTaCqlp9EZwIhANzqjHu5qRoBJbHheZmg/AZZPBVILTQtKix15W1crO4s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery32CRA9TVsSAnZWagAA/LcQAI7/DiA0UWjtttVaHc36\nRug4X/9wRtM90/rBYA713+e3N3P2vjHLxgfKgpiB6kf2Lz4wfD11NU5Q1dNN\ngoYrvk6mI5E52BnwmOUBqZskEMpmXu1tl8Q+wwUL1bY+TCJgTzB64tEoAGAv\nNXA4Ey+1iu2/kgs6EZmNTI1WH3OnCwQ9xbL8K3OZiZM8JxzwOnQOlb2to7dE\nP6j/L7L5wYIIeqEbHkCWpOpRTd+PNt66z/9PUzD6WBwRCVqm0zfmbJt7oI8f\nf6Rr6BueZixI1Dc4SDOPoHrOPakkETkV6YN7yLK4ABsBaIzZG1S6lcHRG8Zf\nOm7HirzHlQREUIoidxpKx2diy79IwWfB+GchxMlnH3O1AFgvWs6+XAumn8fB\nLkE0lexyCAhxDtp9108Jb+RNYU7K/oKCzIMvRVgvarT/gg4zONhUawL+91iB\nNulzWm3uilDRRdYs439GZNhqg7XGycb/TOhHT6EwNMuejWy6YCpF2Pq2+aXX\nLShC6UJ6QynDE95nAdKRtkFeSWpKAB6BoI/BzWcAfyWscU2U37ne9qNL6WPO\nPxjjOvMOqhdpTZJIh8sIIfhrdLrpnhwsbgecYyx8Iy2AEPmvhOjPiWIBTcZ4\nkENjQ6/a8nY4jZMaUgxDjpPfuC+pFOBKd7LVqrkzXy6xRQAN4avmmY0LAI+/\nJ337\r\n=7JtA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.524b7b812.0","@material/rtl":"7.0.0-canary.524b7b812.0","@material/shape":"7.0.0-canary.524b7b812.0","@material/theme":"7.0.0-canary.524b7b812.0","@material/ripple":"7.0.0-canary.524b7b812.0","@material/animation":"7.0.0-canary.524b7b812.0","@material/elevation":"7.0.0-canary.524b7b812.0","@material/typography":"7.0.0-canary.524b7b812.0","@material/touch-target":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.524b7b812.0_1588538869791_0.8789185159541877","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/fab","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e8f09422b87697c0def0c04792ed302dfec9ea2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.bd8ca9678.0.tgz","fileCount":17,"integrity":"sha512-yXOBOFXTypoehubXMTJGkItU2RjksAYdfzAk+4n7/cdYIslAx3Z+vCUKp3OPRik+0DPJodSkvMFxG6Q3y/lljg==","signatures":[{"sig":"MEUCIQDUb4uoybkJ8GESBZjFirCZmdbbU9BHG54QK1NpPxJ1xAIgUtGLfBH+owEXXiQQDllX4WllaSuaj1H6EpvmjLxS0DQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE6ZCRA9TVsSAnZWagAAOQ8P/30MSkeiWc6O0++i0Z1a\nX0HDvFDkCcVZgh2NZRPmLIUwtL9TyGmI7f90pzz7bdluPW5HUVD2sQVY1Wwp\ncxLULUlpkmHHcA6p8/jttIu58TL7XC+DTXuBBrrkR4uIfFfrcf59ilduifCu\nUC+P4ijgciUPtHah1oSQIyQ5PIqW3qUHIOP8rzaAB+N0FQ5mtIEAiFkfc6hW\nxaosyqqo/zRTB3NoMa78TLs7Mc7pwy5aOPVB6VD54GJ0emg1jVXypT/qCgVW\nHX1jMmDhGPUb2hdatENN39qgo6Cpce4smRxoeR39BmxpghgZ04i1YwaAnY2j\nkgHn0w4XWtX27o7LYC3fvi1rX5+VQeuzqs4lpFWf6Dr/p7kimqGZ6LugQLwi\nIx1LWXdYPO9B4PrrppHVve99BztClLeZsCnuKw8vkosdUwlJ9l4EF3jqkE+C\n08myGTRhXn9JreSM0b8R4x2pyp01fFynZppy7Tlkar+bBg/EBxgFoC4Lh52s\ndbeedz9OZu9RKeKmAyUge2Uy+v7DsRuX0apvxqVJcBkHD9VQwo98WPPtc7hj\nN86017u4na8JxYR2XpJWGbVDzDd1rPox1pwMWwLkWNMopf8AGFUVdIPcVuy+\nmkzWgXUvR0Ne660L24jDwKelL1DStrDXnH/KM3MfOULt32A9ZPBbsM6y24ps\ndKQA\r\n=r2Cv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.bd8ca9678.0","@material/rtl":"7.0.0-canary.bd8ca9678.0","@material/shape":"7.0.0-canary.bd8ca9678.0","@material/theme":"7.0.0-canary.bd8ca9678.0","@material/ripple":"7.0.0-canary.bd8ca9678.0","@material/animation":"7.0.0-canary.bd8ca9678.0","@material/elevation":"7.0.0-canary.bd8ca9678.0","@material/typography":"7.0.0-canary.bd8ca9678.0","@material/touch-target":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.bd8ca9678.0_1588612761251_0.02321972774025638","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/fab","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b60cb737d60e1f57c10f99e6d871004673223c54","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.2553e86fe.0.tgz","fileCount":17,"integrity":"sha512-c3xILeiOC5Won/5lE6VVW0IGP+/skLQmirHbrVvdd4d4AumlK8a8zeKn0QrZHnyXnHXEFNHtb/7EFuGkbRgPPA==","signatures":[{"sig":"MEUCICmE8Zu4rojnUe4T1SbDTAoa1gXMlTiSWvzfU+Ik1gpiAiEAmOYMPSFMgWZ4js/KMfCQUveO6o2TGhVpCfFIvtcFgqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFFyCRA9TVsSAnZWagAAsUIP/1wILZLF9t7OVApD6sk2\neqhVk957GCKqfZ01ZlHTc71Stesw17Nt2KDYg/jC8u9tiu6dADoJnXb/pHuC\nohZvnbBAa0UYm+irza2xN9R/OBGa1QtPB4Oqwh9JmygHLLMJX1fK2KcUUtPT\n7pX/DijK7iq50fvbekkXuPvIfWNEoXCCciC1FTBf6hOaipzdwsV8CQhDd2tY\nPMB+PZCTWB8ldW5e+P53WEIdSd1WNxBVbzzO67EPzzvoNHqtiH0Df6CwgnXC\nOiSNEUXBSr96De9pAaBb1jM3JBCQyhCs6ZTPgEO6V8gTsUYTu08wvRFEHKzv\nj35FmNuwUOGgWjKFczcbTlXz9QK8hQLBuOey4navLooaix03ne3fiX2phgvs\n3bAzx3Q0Q54zV0BFYjhuViEHn4U+bWbfK3VbTWoqq9tjg/jNvkvFtF3eWCuf\nhszI6c0F5Bt3cDyiWcV7CuY05CnXZvGAnaLsOzTJFL9AoYW2EZaGhSwwkzDk\nTpBHReeAyTJTJL7RrL11kVWCLokRYsbjFSsnGJrBlhCi+Ea1CDFwJhYi6906\nMqrVSVxSOgOgXALKqg2G4WypsBfHdSkmJetBEQ9csd0JLqEr5TnXL7r5itDq\n1XeYS4HEnBM27XZFFffuk3zpXX6BCuW7br2yRGSF2efYpG0OhieCYsOqdq27\n9RWc\r\n=pp+O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.2553e86fe.0","@material/rtl":"7.0.0-canary.2553e86fe.0","@material/shape":"7.0.0-canary.2553e86fe.0","@material/theme":"7.0.0-canary.2553e86fe.0","@material/ripple":"7.0.0-canary.2553e86fe.0","@material/animation":"7.0.0-canary.2553e86fe.0","@material/elevation":"7.0.0-canary.2553e86fe.0","@material/typography":"7.0.0-canary.2553e86fe.0","@material/touch-target":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.2553e86fe.0_1588613489968_0.22378617930638534","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/fab","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.03dec929e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"889f4a1253a144641e15acbe950b8b2b2de37333","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.03dec929e.0.tgz","fileCount":17,"integrity":"sha512-49GkK6fQ1idd01PH7adNKeH0btg9/xh4I7+p7awzBRZ+gpYuAk8x8b6gm4HCkh75BparTcobzCkSKtgRizmGLA==","signatures":[{"sig":"MEYCIQDCCqm7bDSU/jRTWTXQGM6yUtNj9xxR84r+WncBVQWu+AIhAPyBPWQM/p3NJfK4KBU3s5MvU4OqZ8s+iJ3fW/XI3k0V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKZ5CRA9TVsSAnZWagAAqt0P/3CxHjdtEHWsHJpARrCy\ntpFgg86i5lzGPVbVF5nVla3FTdU4lXvBKWcSABpouFQ5cmrbTU87XG+XtXgH\nQb+/7+QAQBZmtcO9SkKWJ5JUMgtxTX6GQg8tegjQSC8sbnhA9bJHe78H6XDQ\nEv4UyrT0VJK8E9VFqGHq/faMQ7GWMH3W1ZsSOksbGqDDVvnxgcIGlKSENKmh\nkzZAZWnwBJIWHBHuty3dTdUKsBY20N4rDZaR814BcIYLhi6VxiP5wGTw6klW\nQqf7GVXeguvVPyqL2vrBHYnTwBWNhPpM74toaK1dTmhCNqDnzz3ly+68MSyx\ngGrK2HoMNCRxoQOAOcwN7f/91HlhimIc4qc1ql5urZiVTrGBeFrwjxezhyu7\n0KE/XUAmiUrVvMGfkDWKb6cxuzUFfJOWZVbKJNRgtUW3bKZhbcElGDdae4b6\nuSTmsRNgOv7q27gSC1ZU5rHy+GI5lq1yTqLi0gfVU7xLaZkciFjOjwGW+rU+\nJaJwe1UkeDMv64Q7tw0hGH5YX5Y/HkCjrI3vBqx/kTzTtiYrrM9SW8eFpmIR\nH0Hg9ONXEwinvH2DUmrMzc/TJ2xDFR/IdiX9B97smGhk1oUKEztlpQlSVM2h\n0h2ImEWVl8dJFRFhx72oK6CJp5vSGQAebPmjA2jWFTTx9I1c/IGjNi1eTM/q\nyuXK\r\n=ifyv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.03dec929e.0","@material/rtl":"7.0.0-canary.03dec929e.0","@material/shape":"7.0.0-canary.03dec929e.0","@material/theme":"7.0.0-canary.03dec929e.0","@material/ripple":"7.0.0-canary.03dec929e.0","@material/animation":"7.0.0-canary.03dec929e.0","@material/elevation":"7.0.0-canary.03dec929e.0","@material/typography":"7.0.0-canary.03dec929e.0","@material/touch-target":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.03dec929e.0_1588635257022_0.7565653669031704","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/fab","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b36379e02bf6e29699b50e0951751dc65dbe87bc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.d92d8c93e.0.tgz","fileCount":17,"integrity":"sha512-MMunuvYq7CnVKpV4nIdevFo02Cbypx9QtyTUYQ/RncRRXSlt5myZBk90dBvInp2B5Tq9XcbkbyIK2WCvS8d1FQ==","signatures":[{"sig":"MEQCIGKcLxqXpC6rDrPovr4prERFnHbda4m4MEkzWUkRqoJBAiA07kYzg+pjP+Ec0fP8LsohvcEYKl7d2iHLV3crjrSudA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZt1CRA9TVsSAnZWagAARQ8P/AyIq4GDPVYff8wZTlf3\nKBL6y1o4JsWqhYVI/oi3giIM4fSvAFVXUPP+gMMUMv0UHEOvXmtJxgMe0jzN\njec7+BFoHcFa3BygGXoXsXNr3KT+4t6A8p6KthFxfch0pHtjnrYgmMMQBAis\n877edW+ckxuXBTTu3OgoVrkMdOt0iSPS1ypELckiS9J81hOQj6aREUlp2rKN\n9eMYJKSVFfhcvIeztHwa6L7dvsXdYQYEXk+5+N/g1cZuHYkDKJUSEpukmZP3\ntJBPIzqF1fAaG41o3wtMjKntzHF18MlKp3zzHqQp6mW324uvJ8FcOKypMeMn\noeRpcSCqGXbt7hr2Q6jA+YEwE7u/zlZ1bbbh7XVD0OLd+aX07KyaUC+mxCaB\n3aVkV1Pp0QhhnH2f6miJKAjWSyocIPjIc5bTdT35xu1B+/XvdkiB8RPJC5Bm\n0kDuMSnZ/YvuRpo/yD5odDIG2Y62IRIpLN0+ffU2+oPHuOv8vbL+1EK4iquz\nVOriUsqwpoCszE7cb7xnpVSDTOc2/BVlV3t7BWGC3QWXphk6okVALvZ6+Nje\nND/TEabMeIlbb8VnSnS7DITTqAGAAmhIAAuFRFIktG6rfVa6vFPQCqU98N5w\n+T/QX1Fvy3IaQrLb+9M0MHDSHk0BkEhMZMFC0GaJzqz6VhWX6l9vrFEfoi59\ngkby\r\n=vqhf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.d92d8c93e.0","@material/rtl":"7.0.0-canary.d92d8c93e.0","@material/shape":"7.0.0-canary.d92d8c93e.0","@material/theme":"7.0.0-canary.d92d8c93e.0","@material/ripple":"7.0.0-canary.d92d8c93e.0","@material/animation":"7.0.0-canary.d92d8c93e.0","@material/elevation":"7.0.0-canary.d92d8c93e.0","@material/typography":"7.0.0-canary.d92d8c93e.0","@material/touch-target":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.d92d8c93e.0_1588697972708_0.7647876926413579","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/fab","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.09f591967.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5de925f17b41627ce11735ef5871b9e3b34d53d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.09f591967.0.tgz","fileCount":17,"integrity":"sha512-KAAkkhka8DW0m2JE5badAPvTeZjyqHXTVkpgnQskFBFcCRz7x0oCKw88V9ZyJRmRjezcQ9vyXDHlYrzMAeI6bg==","signatures":[{"sig":"MEYCIQCjJgws8BKoRsl/2P01Do27qt13chp7wFv2ByHjfT+OCAIhAMhCSjkPvkIv86J2uoUEEzPMdpHP2R418OM2a79ZVtG0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdTrCRA9TVsSAnZWagAAIBQQAJldMmmTt8pwaHSQLqSo\ntFjyLJp2QBPwLGca2QfdchWgSQzGedNMg4kXQjMy7IlOxqcjhz96KltBudeh\nLGWoaml/5j4D+oAUwMz6uacbOjGfo5LzjoxqsXlVgCRG+x7NqcopEQdUQVE1\n/gLlG1Fa53fWJhljd8FOoqeBJT/jQ/GUV9jmeIp159uFH6JAdYyzj4NIoimm\n3duQlDBT1Qh8SQv+VjCCUO6erXpXTN0sj5zlAE3jwla6tke5iBASLbAQCu/F\neAGL9dH+H2t/Ctf/fan4gfegReAuD8Gmr/GVgRk7c9v9ZR+W6VzL+yhLvYih\nhgKkD3dDN4Hv+eneF3UdOSTSb4egEuIOigtSe6FVFkvH70fFdtiutKzZcSfD\nIoJ3WYIcopwZfIH0K6qdGZAlNYP7+pb7amSBTCQJFAc2Y6KB/NT9EHb3Kwne\nTADJ6Rxm+XhJa4xa5YeFqkCPtoKwZcbI38v+8SjFgUQ0dP30419L6AMsysDs\nyG6QeqRs12Mo1CW4GH4yNtaw5F+UB8PPz5RhYLYP/vQCjrYonab4zgVrjjTa\noceKUerKOWeGdIJaeyWqDTaaNewShrB35nKVYLJmA/U/HlLcKeisClnq1cTv\nUjGAUiZ90NV7kjQSWPfi/3HLaXx8FDGiDer0OXpBAq+hNJ2KEg0gMQRdCqTl\nSqpl\r\n=iAEK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.09f591967.0","@material/rtl":"7.0.0-canary.09f591967.0","@material/shape":"7.0.0-canary.09f591967.0","@material/theme":"7.0.0-canary.09f591967.0","@material/ripple":"7.0.0-canary.09f591967.0","@material/animation":"7.0.0-canary.09f591967.0","@material/elevation":"7.0.0-canary.09f591967.0","@material/typography":"7.0.0-canary.09f591967.0","@material/touch-target":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.09f591967.0_1588712682580_0.8462151176908992","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/fab","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.3846ce311.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b710545adc520bf3729983275dd5a50e041b2dea","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.3846ce311.0.tgz","fileCount":17,"integrity":"sha512-kpbKR4xauKiZHBe2JwMOSLirqprSJhOwaHXxbXVHFX0m1iohypFzyFhGwip4R6bXFceHXfTUvgtwUrOY9r0Kjw==","signatures":[{"sig":"MEQCIBDz0KNgoM1Y8pQL1Ri50P5N2SHrVYFhzLJfEzpqPCzSAiAEy/3QVABQFpjhevi8Ccg1yqpMVLHgMLAb+OjKrgEyPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessUrCRA9TVsSAnZWagAAJVwP/3PFzPOhdQjmXWQ6m1ZO\nkTzjwlFqli2uqP+Ri7akhzRVgQF2L1wwaiTZD/83hk47KQ9nIwAczLI3yF2w\nLNvNCwbrubCFgK/Lo7bmJiUKoGIBl5t0w+wEg70pDaAVCvX7zOkyrpzjcb1C\n61EUJrWXWBuMIKMKxcLT+z6xOzfWR7ZubzWjpAkS+BtzhoS6dRDyQJLlZqQy\nYNW8Z15hcmhmiiapJlUmZDpEmdO0j61Htm/8y2XP/vSqV52C+KawUNdmYwnC\nIyXbKFZS4moWOTNvq5fa+EvzfhqwmA657xAhK1tou1K975GshkG54mbvTwWI\nFK9n77qbvKJ3mgWes5IYdQynA2Kq0W4aZLz4H/JJtu7GY55MJs5MJGqbcqDU\nDBi1nRlS/O4ir7W0Y+PnyV10ofZh2SRNhZCKXk4cudr7uuQTF09jXBQ++fbT\nSkyb3rnhtv9U1pQGw/3uCJJwPzUz72BbZe7DwBh+SwNp3cVUYbPRV+inmLJg\nmkeKDCHMrezgxW7Wr8GXXUc4MTnAllMcQKVcqcEzFq1Q8ZdRjm2j8EEMYYGn\nGFCGQ/sMsU7SiczuCaNHgsKdYo1DGjrzsih030vGJ+N6wAD2Wd2bdHSuoFnc\nc8UA5RxxWFLNfgesWl3r6V1Ucp41tnuVe+Xm94EyXtA6sOk0RKHy5yBXKP5R\n0czZ\r\n=qKpn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.3846ce311.0","@material/rtl":"7.0.0-canary.3846ce311.0","@material/shape":"7.0.0-canary.3846ce311.0","@material/theme":"7.0.0-canary.3846ce311.0","@material/ripple":"7.0.0-canary.3846ce311.0","@material/animation":"7.0.0-canary.3846ce311.0","@material/elevation":"7.0.0-canary.3846ce311.0","@material/typography":"7.0.0-canary.3846ce311.0","@material/touch-target":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.3846ce311.0_1588774187094_0.8347848588513467","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/fab","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80b19d8037103c48edc78703eca7f5e1bf33eea8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.ed7f32463.0.tgz","fileCount":17,"integrity":"sha512-EFYXCTHAGjmt2cnhg+CW5KH63QR1Zsxg0q0xeK8wOWiy8pki0UQMYqc//f4CWr0kwiJ4cEQhKmlfOMpC29QXKQ==","signatures":[{"sig":"MEQCIF7MES6lPpthajZgibjQRAze2eqVFduUhr7w4nSM8x/XAiBLxIrRKx7h5FaMkJZJJVwxejamWyigtrBOhY1PLPpRJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuDpCRA9TVsSAnZWagAA5jkP+wYi2LzMLrHH2DSmy5Tg\nFff1xT0AYvKQeCt52NfejNvbdGj0urzkvppgxshYlBXx7zZ2aadUW5JL6pOk\nkAY5sQj6AxxRwuORgmJz9erkFzm1SEBrdryJTW87VqJeGGizyu+Kfua+XYNJ\nkdF5XYfjrZVstGhzmapqvq9nWZehGDFZKIP6kkjvGX8RWVlIRnrPoOcslWdi\nMqLHFVz1sUO2zPXrCThsFmk8qufGgJsMpAeJ4MKlfSDbKcGCsv3KyD2j7VtZ\nd/n58+4hd4QAFqOgUxwJ7hS+q9vJ1RJGhwY2lSvtHVf+5UJzObo6jtFrM3qX\nxGnhFxWiLlH37POkj8eOHRZEWDH0Denyekj3OZTBwpIpgIZwYgK/gsWPCccL\nmMKcDde/a1gGLjXLjwGoU/07wltwNAeVrJZAzhklqyMSy3F+oRVKUfTMBctR\nFsbtMQMwP4ihwZXVPvRWGhuNQqE9H+nxn1iH9dVyEDVBhasIeKM1uLRNd3s1\nCLWwcj7oH1acR9lZL8r/GQvxRjD8r9+Y88mxJcuAeU6XRkE23QMbEkAiysf7\nXZTIGEIth1HiZE3LBZiKQUhJCN8F08gcpfABycqH4nhDSLpdWJQJnh9zfy6V\nWdZzx9KQkAyFiBYfgF/Ze9tAtjgMqOVDqXZqTHwQcoMj2dntW/SH0mb6u6wy\np05I\r\n=DM/U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.ed7f32463.0","@material/rtl":"7.0.0-canary.ed7f32463.0","@material/shape":"7.0.0-canary.ed7f32463.0","@material/theme":"7.0.0-canary.ed7f32463.0","@material/ripple":"7.0.0-canary.ed7f32463.0","@material/animation":"7.0.0-canary.ed7f32463.0","@material/elevation":"7.0.0-canary.ed7f32463.0","@material/typography":"7.0.0-canary.ed7f32463.0","@material/touch-target":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.ed7f32463.0_1588781288415_0.01575129945611997","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/fab","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.8135cc085.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd11a47157ecec15b4f947591f0bc917a5045b11","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.8135cc085.0.tgz","fileCount":17,"integrity":"sha512-poFelw+KqOWuzv+6fgeyieRj7SpDrEx03vOp30wqA7q86q3pM0CHkUTp5B6KfaTrUpZ1RtoBlIsxvlVNrpTurg==","signatures":[{"sig":"MEUCIQCqg5EarzmvVo7ACqJQeNEpouKDwkuLh0w4Yp1+GP7Q+wIgaw578BqjOW1+PND9paA48Y8mElJZC19QqvbpZG/O2jc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxYtCRA9TVsSAnZWagAAfD0QAIpvrsMxrijEWMf0H4ic\n2QpCrtK9XzIh/F9tqXL7FTupriFBGfcOvkWUn0bj2Af/AlC8ZffLmVWOf+GD\nFYYIGa9PkS/ntdinyrtknhmdWKBrILSS95FqlrHdkwUgUFtQqObRomJkAuQl\nrrnjBvowRrLf6TCQZfHI6HK8XeuejSd+p6Q7I+C2nBcpM2F7UPxZdRpRjCTt\nE5JSaLBai9A9kiMEr7s3RFrp0wRlQZoi5GnMbeZMRPBtK3ex+IbY3OrU0pb/\ndBbt3ehIFkS3PDl0vf8Yb+hqXAAGCtSfT5RjuWHQ9s9wQPKkb9n1YfHvLpoU\naNdeIyJu2R9mX958g9DF2n5Jst62UhXWkQCAT7gpeLpLU2TroVDFu5AFyaCm\nDCmTplbjwyg4wjXrUzlHe5DjDpYrn7+7S5m2enkg+mF9liBEb60tNKeP1OsW\nrssnYmOxoQwbOWPmUgi5Vd1rZRqX+U9+8G1RetJT4tEMqzsqdN8E7Rxef58f\nkP1KIU4ic1oFpenJ+r5jiSxuXsxaM/dPVmKcx5UqJTWdHOf99qRQREhZJgkQ\nBrni1/CUYffQwS4DhSnNvyvkrLmyarAwDamQtblmAGi3+1CVBvwLNO3Q4U48\ncfLUjbTcrJG3X1ovso9q9vvAT9a1ry7+BaBvet8dA91XKozVGZi1x+sqtU5O\nkNZ4\r\n=E5Ae\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.8135cc085.0","@material/rtl":"7.0.0-canary.8135cc085.0","@material/shape":"7.0.0-canary.8135cc085.0","@material/theme":"7.0.0-canary.8135cc085.0","@material/ripple":"7.0.0-canary.8135cc085.0","@material/animation":"7.0.0-canary.8135cc085.0","@material/elevation":"7.0.0-canary.8135cc085.0","@material/typography":"7.0.0-canary.8135cc085.0","@material/touch-target":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.8135cc085.0_1588794923720_0.8349687811768691","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/fab","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.deb212de4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d6c3876b0421eeabe3b407cae963aab54befb82","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.deb212de4.0.tgz","fileCount":17,"integrity":"sha512-1NSDvglmrT/9UNuxwWfwWd0vUUh+Dt87Q3OXHbK5WnNY464pPv5ahGcuZ6hG6VBhsyqaQMWW8z/xjyaz4jh7UA==","signatures":[{"sig":"MEUCICqZxRj0caTYnPJVBYcZ4HXxocWsyeTYERn7Hg0RaRplAiEApatiU+lVZY962+Z0IHk7qNnXALWivYRPVIKLBcGnW3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszfSCRA9TVsSAnZWagAARBcQAKBhPHRyKlEaC5HjkcRt\n54VWOzosY0/CtTboOeRngUQ2ljFW5z6u4Pg7woYhKPp9wmyhO30lTt4qM4aa\n4+8Pp/yKqJLICfHZU073TBPQfzvbkR6oxRH516IOab9JqQ6LGOdxPbgJeRrP\nA5wwKyDoJfJfi41r8ePYBz+gsWWCtujoDdedDDPe6AsSfPqDhlqlZSKOEb44\nnN11I05XfY1LTjGTDJHi/Kd9W0UDm8ZFxjtu9d5BZl5rfatrY3a/XZW9dWa0\nEbuT6CdL9mrC6oBUVtjLEwR6LD2folNAWU0EFMgl2BS5xIBkTC6YYQp+pO5F\nWbCpPWTriIbxsElDFMOf3XFI6b42WS7bTOPqk/D4ASIRZnFbo3GZ2jq0TNLh\n0YXNS3lz7T7mlCHFkLoElaBGfAql4zxwol8ft7DVV+act67UhnVFO/0Jg4mp\ngeKJj38vOg5wZUCOpxSWcUp0znMCxBHItss9YOZCGK5O+VqG8Ye/vZWc4JNf\nwF4rKFcezrl6J2HMApldBMS7Wv5Arg/BaTo3j4P2btjUtzrD/yzePtM0mlWd\nT6ApowDteGgbgOPr3PLkmn7i/NCBOJ+Lu32gyQoQZfYO0H9TtfAywmZ8US+u\nOcjBNbwy4XGstN6dWP+EBZqFM9A9U1nibEiabNgJMmhrVnSIEwV8LFNKCp5K\nw+PZ\r\n=aqAb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.deb212de4.0","@material/rtl":"7.0.0-canary.deb212de4.0","@material/shape":"7.0.0-canary.deb212de4.0","@material/theme":"7.0.0-canary.deb212de4.0","@material/ripple":"7.0.0-canary.deb212de4.0","@material/animation":"7.0.0-canary.deb212de4.0","@material/elevation":"7.0.0-canary.deb212de4.0","@material/typography":"7.0.0-canary.deb212de4.0","@material/touch-target":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.deb212de4.0_1588803538005_0.8829056862891058","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/fab","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.f83e00898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a798fda5f8360005b72abe2fa525ab2ce85920e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.f83e00898.0.tgz","fileCount":17,"integrity":"sha512-EZ2giwGP7uHJl2F9Sr4LFyRTHfqrHfLbjqDQK9v5VJ4lSiYSnB4UsUAmLqm0HegNRblP+MyPvtyG+lvVPDTOFQ==","signatures":[{"sig":"MEUCIQCv1Rnrq4o6lxGAS8De1g/8FLGud3k/EpxibBbeza3qjwIgQbWkWyLre0uMwutGnJaGxg4WtQEbmnNQCtExkZZYHKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDwpCRA9TVsSAnZWagAAKU4QAIvTVpRJtk0VQ5g6Yru4\n0U9Ri5duDYEBtyCi9XIck2kEFw7u90V34Tpowc9+LrjzYYR0VBY6ZQJkK09j\nprybylQzJHSYL+ag6E3U41kM7+Zla6JQUNNcPJqCKEnEhQ+4C9iVMgGEng5d\nHK1Sq0tuu/2bpRUjglbPl6zgRNeWeelPZfVko8ZMZ4bqvALOdnYedNHkG8q+\nhAlPgWYsT66EI4mODYWZl9BwdSDjmCEtgHT0C2CugWd0K1SLW8YwerGp0ioz\nqJTZtoC+gKt1p89cXq63gtqU2MSpNa5qM4w6YJ1Afl1bpf+4Ixk/f1tj3YlB\ne5Rq8/EtzvwpOP740rUAgtu+G9mHmWjCEugztiY0CeonTrNq1dH/awt+udMs\nSSiDG/ubZDAPGxGNVocEGcTfgImphhVn6jBAntDcoCHBanMO5Nto+nE0OVqH\nK5cIB6ZMHwk6jbxP93Yb0U6p3MK7GsiDJqwwdRR8qLvBx7fDjObpWpVBy2Ae\n9+08bS7Ia3BpDzjzypD3u+Y2qp/Z5v8yslSfsb8XAmQCLr5W4jofbqiq5wCr\no2VSUxRtMkttbrQ8KPitXvXkp4xF4+FLQn05CtH4uiah796n7y+AT/+swaTm\n1W7ao/T327J7ueA0Xzmzu1PGD4wq0bO+N78dDiP8bKJpVY5aOhpSNsT7qnGK\nxu1x\r\n=Lh1U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.f83e00898.0","@material/rtl":"7.0.0-canary.f83e00898.0","@material/shape":"7.0.0-canary.f83e00898.0","@material/theme":"7.0.0-canary.f83e00898.0","@material/ripple":"7.0.0-canary.f83e00898.0","@material/animation":"7.0.0-canary.f83e00898.0","@material/elevation":"7.0.0-canary.f83e00898.0","@material/typography":"7.0.0-canary.f83e00898.0","@material/touch-target":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.f83e00898.0_1588870184496_0.577146905502971","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/fab","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.047e6b337.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0a236ddc3ca8b2eee5219faac5702a8f11a61e5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.047e6b337.0.tgz","fileCount":17,"integrity":"sha512-XUh14qxvDLIUDyhybKrnuw9DaGkYXXEvk21LuTdZ4GBZiRWdjlkmPtSJ1ktifIUzmlVN5xU/pvHQ3OKK6S8X1Q==","signatures":[{"sig":"MEQCICUkgB+nYw3q9ZIEfiEWhlafgdXdyNhzjVpFAY4X3kQxAiBaCNqmja0nvlrGbIR9jClsUIN9LLUZY4N67x2sSDQ9+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetac0CRA9TVsSAnZWagAAMWsP/A9/thZhPYixiWFWWbH4\nSJn1BMfb1lnIl2W1eZ4l8bSz7/PpRFKBGlF/hJFUoHGjIkfQrwveQRdm9/Pv\n+XR+rXt8FzIUQ8OpWWLjMtDvrWI4dIELEeKC2dIl1JKTijnmlSa5U1kU3NCU\nkQM+2D/rsKX/lz+/bmEqr64Tzk0fQkk3S/6645tuRzSpCsPs4i1Bc6jFXcid\nXuYHFmzFAh60hs32s33UreOqi9Dg4inixvYrUFc/CY+grBP5jMnIOwiZpS8g\nDNcjck9yk+aO1GYROeMXjY/1ZNPLZOcmLGaoApEGJoxyfku5623/tSe2sUuW\nJ/AenA1bX90yRTJRV110x7YLWfpx4nGKwSarOE7A0w/Z+QWbfZlHC12K6OHn\nVm0a4Um5vfRiN/KTWhXgZmCX+XIDtI5FCsnFAL1f2W5AErXLzSCaCXtLO0jH\nC7wJ2yx2XH1kMDRoOE88jJuK34mpl48IkOWcXMCosM1An3242NgMmHftV33o\na+q9nWGbij/Wja0WxM57X9xZVFs/WILToSgP0KT7yoL5adLX4LYZZ624XGw5\ngpEyDNh4D68ksp8LBHatBpjxNbmod11w/zMvlHgx6HbI6WK3fwAR6whpvWZ/\nwS6h/l2DpEPhWhrSFSyTEFCmbYxMHcrcMJIEJ3bF6aCf5ge2DHOUjqr7hArf\nmUdR\r\n=qHx7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.047e6b337.0","@material/rtl":"7.0.0-canary.047e6b337.0","@material/shape":"7.0.0-canary.047e6b337.0","@material/theme":"7.0.0-canary.047e6b337.0","@material/ripple":"7.0.0-canary.047e6b337.0","@material/animation":"7.0.0-canary.047e6b337.0","@material/elevation":"7.0.0-canary.047e6b337.0","@material/typography":"7.0.0-canary.047e6b337.0","@material/touch-target":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.047e6b337.0_1588963123657_0.9176478108867179","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/fab","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.119e21426.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f9753610cfb8f9d2dd182af2fce031b23cb391c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.119e21426.0.tgz","fileCount":17,"integrity":"sha512-D1CmEBlbD34cwWu9+O0KgZc/mY/3JLq0XzmtlYxom41aW3YAmEOppfKXAgufAam83jfjCSfNeB5xM2RuCRq5kA==","signatures":[{"sig":"MEUCIQDiq8dtTBtz+TpF5yv1qLrvT+tYJ5KlpouVlNdhDdWxrQIgJYFVBnlTxRc9VePUQbgqtwoRKagGFJML7qqD4aTXhNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb+ZCRA9TVsSAnZWagAAUv8P/jJHODt0G0Btatb7qz3x\nErV5l5lxoFeQv3rAoS5EArpPsyM0IPZe7zSCgtVGPQSVcPga+mi1Haiqq9B2\nUxKvn8e6bryr2JVJib2dbq9zsQQL0p4HR0ZyI1g55K0NOkBVPik3nu1glcM4\nLZwWncLx32BYKxAwVBE8eR/7FcMeZqi4q/1BcGn7hu00+fHNbILO/TcYfG1R\nHm19rapyjLUmfrKsQPOZhk0H7X4T0XT//cQGEGdhZOm0ZURkGEEUlqgll5j5\nmkbXLIa1r9+lkwdxZkje+rj2ldxeu8NAJPcd5FM9N78tCz95HX6ox/CoZoRr\nmfbBd+/LsjzyC2a3Ftrl0ZNm4xrIJ3nBd1dBUdQAfZE5qftGdV7lW/JZO5eR\nYmCocIerEamJIN4prrFH2yHUsmqLfkxNkjPryD9SKGDPrKzZ2XwvIMHva9mD\nMiBo6rI6jmUs+WA95VUWUQ9yTwGhZdkSfu7Z3DANblL/heGqjoVrvsaAE3+s\nUGoUGBcagQLJtzkZ1QDdb8WNYdP8e8VeBEAu6tgKt5xeYqh1RMtKUeSuR7vz\nA7ft84pvsUfrYx/vARbtFMaoukknrsQEKp9pzwzc1eEUj64vDnVcVmYJsVnx\n/vVNI6pFVfUG/HFD0QB+NOxC25jxH6mMYjlrf7doXD45okS+sROEFV8i8hMg\nEu5y\r\n=EXDo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.119e21426.0","@material/rtl":"7.0.0-canary.119e21426.0","@material/shape":"7.0.0-canary.119e21426.0","@material/theme":"7.0.0-canary.119e21426.0","@material/ripple":"7.0.0-canary.119e21426.0","@material/animation":"7.0.0-canary.119e21426.0","@material/elevation":"7.0.0-canary.119e21426.0","@material/typography":"7.0.0-canary.119e21426.0","@material/touch-target":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.119e21426.0_1588969368538_0.3679267659124903","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/fab","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.2f052d824.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"185aaf83159aeb40cbc9c61ab5e399b992e1b5da","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.2f052d824.0.tgz","fileCount":17,"integrity":"sha512-UlHafyY2aahuuKeZOzgwAouuf7dYMiiZYJyu2fhC2MLAPiDuNyQE31+abyoIzKabe87QkYQUIeve5VM9BjD1uA==","signatures":[{"sig":"MEYCIQCUI0bkACTKSh91pz65QpbToFn4OGUf1OMT8ien7t9bsAIhAPPJSo7xOgEIJNNDJwFDF5hTNtHikzBmK5hcaIWCSQog","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcohCRA9TVsSAnZWagAAC6QP/00YaZn/y3Id0ddUJjXU\nbZS55mN6fKM3bVgno9M5iOXv/lFmV9zHfBE2hGVfuMEbeRl7ylh1S/u1V3m9\nUreEEbFAT1ivzoc6fPEvDmzK82ZpcSxjHRs6/OgNPkgMi8h/K5vf4gStdAMB\nYOFcrzPK6BQunvgwz1EFFocPIqDe/J5EQm8tDQ/a3nMu/dH4EQ5nOO/Ak/mH\nZq+JbdG/t+shw8afNf7620WPqnNDq8rFdj2B4eFgkqMHvm50FUh9Gd5wOk7K\noSoqMdGBL2AV8RE4dn2T8jliXYGR5pEXdq+zo59vTYgejQab5yWpEXJDrZ5Z\nNy/YR3iDKwow954Lxthd5NfWHzDSH4UUtcC3fmXpYtCHswAu58brMZLo6DAC\n7LcSix/qeeFBFOL224SFjXTv29rGwY4iFEC52vrrCj/7q3GTIIs2Pdjv6Y+p\nJtDghVUo5SVnKBs0NXN2LEmsRiOFiqBzs7TfW+um/XgiVeIggk37HKvLGLZI\nY7YUrnl541sLXlYvmtW4cSj3DZQ20L7sCsJY4ae1sOJyq3jJlVj+J/m/spgF\nSKnuTWStWrNOthN49aDbGsYCCwnCec5LR3VfVmqUHYR3rpoe5AG9bG2D7qEq\nIay7Kqfjxx1teCea/g6kCvccj+p2HclQSSTDk1+kF376W/A2T0cYs5AgQusC\nnKCB\r\n=yVTo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.2f052d824.0","@material/rtl":"7.0.0-canary.2f052d824.0","@material/shape":"7.0.0-canary.2f052d824.0","@material/theme":"7.0.0-canary.2f052d824.0","@material/ripple":"7.0.0-canary.2f052d824.0","@material/animation":"7.0.0-canary.2f052d824.0","@material/elevation":"7.0.0-canary.2f052d824.0","@material/typography":"7.0.0-canary.2f052d824.0","@material/touch-target":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.2f052d824.0_1588972064974_0.6975768039280617","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/fab","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.e84444387.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b845390dc50b5097e667251584938a28d4e7cc1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.e84444387.0.tgz","fileCount":17,"integrity":"sha512-w0Yw/AJfXN+ZzlNtfcqjbFJrp3kf0BYsiLtsHN4xeqo/siRosFK8N9OJIOQZamR9LoHnfU1xod+kmMD8MWJtaQ==","signatures":[{"sig":"MEYCIQCGBMCCOlLvmLzWHWCCjf7qo9JMN2EdB8Sr7x78A9jPrQIhAOcVIJnuSqnChhVO7INhWaCwC4pLQyRcaWLMH0Jo+Z3T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc/GCRA9TVsSAnZWagAANjMP/i2ax3uDrbB7m+ewCSVy\nmDd/fshK+ruaWd+zv59gkILbujLt7fhMYG3tIdAZ8geggKymeFInI9f2WJSh\nNpuKYayE+qmh4hVwviqGaLGFzcsHmB0BVUeoN61N5qE7SFc09dxry9Escs93\ncXVNKpEPxGLuX6aNscn5Ryy0tRZxuegy46aWVGNG+DtthzWnuiPnLnRoxVc3\nXv51YK3gEi2E2e5dzYIaV3lIFQ5JHrqgR3FmmPqI5UT8muArzyJGjWfWToZ+\n8nnkn4CX3/NxVWb8JqUWt4UwM0QzZ38nv93QDy0q6BYj/T261Vm4jEtVcKqt\no4dzcGw4Pol7I07c5K9JkS6oTzlxICpQxbdxQg4oIn8L7/Pp6ppqiGY3j22w\nr9AtPYielHo56IGcUmhTzTTiIVnGDdQYyCwMLHRY0zWq5/iDGaIruBVW+ut7\nR/vv0A2EctHLPCbuEa/U2b83SggxEROgbM/ZoM3ASdOMK8gGpNmvrRfMBqGG\netHwhjIhuNA6wOtfae0ugHHcKPp2/IfaV26rA1CHZzh5IINif/HBZho7DfLy\nIfGIkstV102lMznKuDCYQ5YaYrtiikrY+WBQJVOJDUOuQj3jHK3NYhk556Ve\neI9lak0xg781PyB6GsfKCEv1T5Abw69f75M5v6ndwE6aOgBzfhv3mlndsbVB\namSl\r\n=bLRl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.e84444387.0","@material/rtl":"7.0.0-canary.e84444387.0","@material/shape":"7.0.0-canary.e84444387.0","@material/theme":"7.0.0-canary.e84444387.0","@material/ripple":"7.0.0-canary.e84444387.0","@material/animation":"7.0.0-canary.e84444387.0","@material/elevation":"7.0.0-canary.e84444387.0","@material/typography":"7.0.0-canary.e84444387.0","@material/touch-target":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.e84444387.0_1588973510184_0.978070312824451","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/fab","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.893eb1876.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be7483e13281ec18227b6e4edb35ccecac1bf78e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.893eb1876.0.tgz","fileCount":17,"integrity":"sha512-AHnla6Hbedq7E1MALWZMzCTVYLf1xzuBvW1eh0WrUQ0W5IyZ+Yk9VIwotXbiohlA5cGcT3B2mGS4g7K85SlGEg==","signatures":[{"sig":"MEQCIA8w+VaZbdaCkjSWxNDA3t6Q797Ex9swc2TsBznShS++AiAqFjQDNs0v66CYkaIx/s604HTkTVid6pdp1e4hS1wgag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV2ECRA9TVsSAnZWagAA0yQQAIxEfNCn3GSFygD7SrtA\nJu4y/I0gpaIx5cM+lcyCavkr+Zvj7P+pKciwzg8DeZ5NAVkpkcAmFAlWhkGj\nmCCcOFDuY5ZgXw57L4IJBf6YT/9Xu5ngenZUSW8Ew+FTBk40Qiqa3RlcuU5o\noYAFQwQSYjyvwXHBSthf5WAidgN48BG98g9mp4KFaremN2zqH9eWC6iTdhNF\nUw6dZOC+JuNVj3rw1NyuJHZoFrh8KgC1HwUHVxv1YlgFt7EPJODxWsFtHRRL\nGGMLQNfDKV6m5Ka+h8LD8xVYs1TFMgTTZ874IUXMO/3WOYoXf8F2aJOTsACG\nwOe15jSStKzQxpV2Ghcl149d9Iy2dxViePn7eX6TFE+pX2bbJeO7wQdrwTVe\nattFEKSE81Lne00asr5etg0cc7+0toezT9ksdagNFbM/u1CCQFaqS2szftH3\nzIRhicWyGS1eEnamj8F0RiXDpDrVaMwoKfLBZDvViAKk944gV5DFaG8UpqVO\nZZ5YyNedGYd1VOuCIYXb6vKUgChKuMQSJFTEwn7wPnqF6DXUYzIbG/Tt/63g\nFBxE6v6FJqti2BMQPI/9qay1Q3dOT3YCrkQi5vgCnHLk6KOvez/nzpc2PME0\nsUjrvMQV1B9LcrMHoAPQgmLYi+LpNJVBbJp/82Me1G37kQ0mDzmXGzcNxePb\nobV4\r\n=+EZ0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.893eb1876.0","@material/rtl":"7.0.0-canary.893eb1876.0","@material/shape":"7.0.0-canary.893eb1876.0","@material/theme":"7.0.0-canary.893eb1876.0","@material/ripple":"7.0.0-canary.893eb1876.0","@material/animation":"7.0.0-canary.893eb1876.0","@material/elevation":"7.0.0-canary.893eb1876.0","@material/typography":"7.0.0-canary.893eb1876.0","@material/touch-target":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.893eb1876.0_1589206404236_0.09603157624377712","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/fab","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0136ed6636bb080617d548722da61ce3b39db0f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.a5aeb3001.0.tgz","fileCount":17,"integrity":"sha512-e4jMTHvdY0+OKTYT9F9X+BagcsvSbYdBqqtLQqt468UNljVR7VafIFIFmfutmH/RSruCcnO2J8dZUSybCxhoMA==","signatures":[{"sig":"MEQCIFqce9jWpnN6x6UjkquQrLclWR/uCzBSzs2W3dBsH8uDAiADG9A4t14L+jhNU6HHumdZbWzenxW3Wuu0MWuRCFL2Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWFFCRA9TVsSAnZWagAAO3cP/01ZM+rdMgbEtG9rNLW1\n7MnNvWVsNHBHgXIyMIQDxj8rVnGEwr5z3KoWqwzOA4UXbGgL5s3SIUDeT256\nxH6bFMa9sIWs+Px+tr6/a0BCkAM42G3i2VdRTxwF7h92b/uPEdqmMSvI057V\nIEzKTfOHM8h5VRJvrBSKAF6wwQPt6DXtxMWFVM50+FzfRxqiA3RjE6Bc9tN7\nYdH8rr9GvWvjD2qFwzIwfO3SDnLimn8IbzJKtfeD+XxwvnjP47ihCEywCvk6\n4ZkQsRXhEHFhKpvSsAqzo/6Aw7Tw7eEGqnAzY9dXRtJcE5v6ew4i3Q3ivexu\nTYhLh3rgs3BdPJQU5uBQ0QrmA2ljYxFLX6LUNOYgXgLJAckcTv2mCVlQoGbf\nFwraGckR15IQyi0xntfF/Wis5ac/1d7ixbKlKx7oTveaO2ckoaxyg1A+g6l8\nbPK7693eBYlHTRbsWVYxsl+YDHRRPHzI3AjfiB8uOsSuI5AHQzxNZqXKq8W6\nAHKZVTMZmA5QHHGZX04jZ8tJfF7KgCmcAfWWhfHDQQV1nNlYqRKd5Arsr0MX\ngnJ76PpqF5cY752aCFCp9uJLjbz/1FcAn2xrso/5zcSXw3wCtBNoytbknu41\nc4WBNjwf86PrOJo9tl/HTnI9N7PrbvYqRl/df84Vv9m+zB30o7yG51QNLtr+\nPz8P\r\n=Wmjd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.a5aeb3001.0","@material/rtl":"7.0.0-canary.a5aeb3001.0","@material/shape":"7.0.0-canary.a5aeb3001.0","@material/theme":"7.0.0-canary.a5aeb3001.0","@material/ripple":"7.0.0-canary.a5aeb3001.0","@material/animation":"7.0.0-canary.a5aeb3001.0","@material/elevation":"7.0.0-canary.a5aeb3001.0","@material/typography":"7.0.0-canary.a5aeb3001.0","@material/touch-target":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.a5aeb3001.0_1589207364902_0.37087918359334915","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/fab","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.610c68d97.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"011e90cf2342ab1f75837a9c04dd48f1a4916d72","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.610c68d97.0.tgz","fileCount":17,"integrity":"sha512-Mrm0SBr/QR0MpoFNnkq31eJPnWYjVwsOZ0O8XNgWdzgiD8+MrPgZfngm09Ox1q1CWi0P9tc/T9V6Q3lc3TQOZg==","signatures":[{"sig":"MEQCICKbegX8OUu0Rhb7d4sd+B+THNb9DlR2vWhuFQnG+SS1AiAwP5OySlJEZh0mP+fldrqLE53lWSfTH1/n+Hn8tKW1pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuahhCRA9TVsSAnZWagAAUVgP/RNGaMeE0IrJMjbGn/k9\nx066oghdZIaoiXY/XeqQUvapmjLGq2+i5szg7h3UvzE5KKMjIjydg7S/vlNi\n3wzfmdY6XKN9c9ZwGFQfg+Xn3wV1GA5oQijVN26kNQnZh6ZDTB8Nwcppb2IU\nGEwHfMeJat2akQ3yJOV+3kUXcyLd4RpEWMdn6bB5im2tyiFCZaWn60wPGfLT\nggr2+0aIQYuEV4HEUgvjyxHXCr9YW5OFtRP+A6fyyOdpS2zIfepwFdioluu3\n7wH47zj6yGejlsZKn4K2Vvi+PS/RvgRH9VHU4McbBCM2Bpb7PTWmnYbrTtij\nbKqAXkR3AHt9sGRwU+WvN0zwPSQeSEP52yvo8BVpLs9nMqN+mWGAq0ivst5R\n6xhCp6xkDAi97KWc3E4C/lvw2yTXxWDSAUsBDWhMU8wjs9qI7/GmoY0e6NIP\nBMCLP7YxILAaY96LYYhykBJ3T9mSletmOcEjCI30ckkm1eV9CM3pZZVL0uz4\nKLwq7P6KkbrtT43cEjOPJia6X8aeso6dtywzbMzvpcUBfGNooJg2I3AfkiB9\noG01NrKgzsIzhPIGxX+GCOiHm7/CqEEZHuNh4LORe5TAoHisabOiJrQ2/ASc\nnmZ4DMNixLZ2hdfnWKKNj+aNBd/N8RRcTbjUibSYM+cQ8IV2PdSMWEg03U78\nSaab\r\n=Fy0i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.610c68d97.0","@material/rtl":"7.0.0-canary.610c68d97.0","@material/shape":"7.0.0-canary.610c68d97.0","@material/theme":"7.0.0-canary.610c68d97.0","@material/ripple":"7.0.0-canary.610c68d97.0","@material/animation":"7.0.0-canary.610c68d97.0","@material/elevation":"7.0.0-canary.610c68d97.0","@material/typography":"7.0.0-canary.610c68d97.0","@material/touch-target":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.610c68d97.0_1589225568686_0.743289757597049","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/fab","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.ed52af767.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7cbdbd815ec6f7483ab5bc9b54a83d3aeb592a3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.ed52af767.0.tgz","fileCount":17,"integrity":"sha512-uzRV4mYLWb5DAUDvodXO7I75Z0rdCsr+6C5yvviGzR8S+LOd5f+Q3jj5HKh7HXcf8g+6KMAI8YX2tztlDn0hhw==","signatures":[{"sig":"MEQCIGCrCgSssAYF/iLFbkvo8wjjBciWRjXI+S3vhw5BnlqEAiAfcP6bNvwKhROyZgwUlvVx03ljTTkohoKgcazsOVNoyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubU1CRA9TVsSAnZWagAAsKkP/A+6Ax1Vv0loMZNOO3PN\naI+sc4HXGH34Luce0ru22x2dwfVBfIM30ZF3q03hp0JrUZaNFiUwSmwtFz4D\nQUdqv+B8Xcwq3JZg1v98yE5mPfTlmaxYWj8DQ2ByoBs686rdr8PJ6ZhsT/0Y\n+XaAb+C3pZA+KxTm3tEI40yRx0T/ZW6zBcWbfZKL9G7fdVGMHwqjxYl2PrTT\no5RckZ07BWJl885R3tOwMYB/NKHzNCf3f261dwnh8RO4mPNZwGYmgo8W+ZMt\nnNssOHtodKS/IJcnWQbvG624QH0y5uJH5E5n6b9QoQh9fIDPOPf9USTJMxfo\n3zsYmH+8MuH/i7KQAWWOzg5mLkioFiXdKttHkSVfKbrpCC7Q4G1al62j/LS8\n5+OAvQPPTOuyLq96pTBvVxgy+j80HrBFuOyKMUKV6JSp4VCu/KHG1bd73WIs\npw64xuR8Bm5vu1zwUSBuCDuw3skaWYYw9pOzY+J2aAXZjn/+gINPczegbmm4\nV0wo+EVLEHppxMRMqZf1yV33IucaWjy9XA4yhTnX1h87De698hpUQDXkPMVj\nM15xNddlz2xMd136N6/2ZWs2VUJKpHiiOHlKskUcCwrJmX8pJtISL/1e+16f\n1Tgn3jt/O0rtKM1MTUH8fTR47GDv+vrDZH4aeKmzI8kpc3+k9+J62kSsD8e1\nk58k\r\n=Cgvx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.ed52af767.0","@material/rtl":"7.0.0-canary.ed52af767.0","@material/shape":"7.0.0-canary.ed52af767.0","@material/theme":"7.0.0-canary.ed52af767.0","@material/ripple":"7.0.0-canary.ed52af767.0","@material/animation":"7.0.0-canary.ed52af767.0","@material/elevation":"7.0.0-canary.ed52af767.0","@material/typography":"7.0.0-canary.ed52af767.0","@material/touch-target":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.ed52af767.0_1589228852841_0.6700239161517696","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/fab","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75662c059236d54811ee677b0d24beeb60513b31","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.058cfd23c.0.tgz","fileCount":17,"integrity":"sha512-VCPBrfcZeH9pBBl2yY0mGQ/zAZmTi6eDqAmLlukjiPP0mgwxtAoY+QS3o2XVrkBz1Fm0/pW+CqDKfKy8ZxyBQg==","signatures":[{"sig":"MEQCIBzKbjRD/x/h3Qag+uwa+BBuf5af5QjheMGI9J02biDWAiBu7VyVrpa1OecWHWJXyKhckdWcMvzDL276Ahtrq8eNCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucK/CRA9TVsSAnZWagAANBkP/jtOihBlaUF1hmQ9rtxQ\nLAH6BpH+VWkweXFtiDYhxcKHFbqJ6TgEyPaCrmGV6fxI0LYaVQcvhHx6Sr2j\nKxL+2wuFyNn46qsN21IrpzyPAViwJylEl9htl9ZURD+eIYaGavIcZg5KZLsB\nD6hFnFPCl9bfxUSmHR+TnVjt+paFkTpkgrIkY5x9ejX8zISOYvcSV8pz0Ylz\ni1PKcQsxpb8Pm2bDQERLBMnr5EqK7hIeIXL/7jSbA4wbzp5eIF4ig0FYnP8a\nnLTLdQ09A+xZdQo0LJpdYlR3DhBrCgzFZY3wOX1Xe0eTfC91I/yTkZ0X6vpY\n5DfRn/JYxJXYccnazVQm2SN8KDSH8rhfb7OUmPOjlSbycoaAe0r2/e16vPGe\nBWdThK3V2Upe8T/DJSRLsFkaZl7Le7jWPkzVKgXeEI6uLDflawzkKd2mA3Ez\n0Yx+3cSs6OI+ypOr5XJGmnYsrIf1cf2kYsCmv36rD4oBm0dSZaXNg6cBRlQt\nA/UsV7IQK9G7CTKKN6+ehEu/V7H3NDgYV1Bcn6FdLKhs7ydK4f4XFCNwvOK0\nIHe8ZSNxnPJYw29PKsB7v5WVDqlwhCvBma61eFcM0r9sz29ywnrkvOzuzLtJ\n696d7739rH9YU/I1Sk5Pv8ksh86F9lCdR8jqtxg27vyoTrgD9IAUlAXIg2Nx\nIqo5\r\n=LKSm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.058cfd23c.0","@material/rtl":"7.0.0-canary.058cfd23c.0","@material/shape":"7.0.0-canary.058cfd23c.0","@material/theme":"7.0.0-canary.058cfd23c.0","@material/ripple":"7.0.0-canary.058cfd23c.0","@material/animation":"7.0.0-canary.058cfd23c.0","@material/elevation":"7.0.0-canary.058cfd23c.0","@material/typography":"7.0.0-canary.058cfd23c.0","@material/touch-target":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.058cfd23c.0_1589232319053_0.48572115163607954","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/fab","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ac6218eeb411e06126a171b0aa60e2f44d25d80","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.0a371b4fe.0.tgz","fileCount":17,"integrity":"sha512-RoV+Q16z77ytqMoIgB1IPKHI4Nmk0z86i1xvf5CTExxYWV9W8l0z3sPwtzHFuDW39+AwvC3TzNustOYwyMFzFA==","signatures":[{"sig":"MEUCIQCr2VHBSmksqe678KzLCbDZSulW0xTyZZ57kOz7we/7pQIgLgjBix179nj05sgIouJLQw/1o3yGg4a+0ALWQRzCD+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy7CCRA9TVsSAnZWagAAPj0P/2hhb5S9+UF9yCuuG3pp\ngd3t3LlVDFbyuc4CL25m0l00CeNlEBLEKg6YOMckHYt8ZK3mJNdZfsjfeotc\nXLQHjzR3q1p72ioxRbF9pxEUX+oE/opvD6PIUbOAOp/s/+z4ALBmUcA3wOp+\nTJwLUMX7dC+36FREs6hzlYlmfi+ChUWO7XMO9IjyNezcVDJ7DufMum1u64Fx\n+OdEMmidYw6BWZWtxdXeLI+bEhLfKTzMx8831Alz9E2bAS5OO6Y5yHFA/Cv/\nirppPwnpWNlmzLMGj21+Drc7fQYqm25QenNOaWC/oJwDseBmOKoY1g9GY7f2\n0waOxt9gL32QkmjeAbQGoWtAQMg9fudTcXVxdsGV7vNgZGDZrD0rYYXHDKhv\nGOzmWG15pC+oc/EMovMfMPfaUB1sebtUGgcgXtTj15ptV9JSwtN2WZzofaJA\n0t5AUFdZPfBAamGvSXL9bs1vVVm+mb6nr3Xt186xxIRELfB7COmRTC0MUfVP\nv7j3zyny91MDOtPXwlUIXn48F1EG+EYZTVPZABQoR8HgU8CrtGMORVyOX76F\nOH284LlzdD5ArumgyALanjDtCapnf/3tHXNwdjYnserSN97lx2CVHeiN5MCh\nrPvVP0C/cpFUli91AwO3nF+S7cSHH0vgOd9j5hx5jPSD/C3b4ae0P5OYasLX\nY5II\r\n=hgZs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.0a371b4fe.0","@material/rtl":"7.0.0-canary.0a371b4fe.0","@material/shape":"7.0.0-canary.0a371b4fe.0","@material/theme":"7.0.0-canary.0a371b4fe.0","@material/ripple":"7.0.0-canary.0a371b4fe.0","@material/animation":"7.0.0-canary.0a371b4fe.0","@material/elevation":"7.0.0-canary.0a371b4fe.0","@material/typography":"7.0.0-canary.0a371b4fe.0","@material/touch-target":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.0a371b4fe.0_1589325505932_0.5911243400545729","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/fab","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.2139200b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f27629b442b98b3773c72301f5c8f08928c8d659","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.2139200b3.0.tgz","fileCount":17,"integrity":"sha512-eNrV/6R6MKeTICOAq7RXZRVGb/WBFrSGS+8Ukks18LhaT12FprU5qiq3YZIeibGkOlGz/XwsQgUOerCU1mAkRQ==","signatures":[{"sig":"MEYCIQDiZ3zDVHJuhPQ9VbEVvzmiibXgzowKyTvvdpBYajxbiAIhALTWV9DtiQjW3bMsb0XHSW3J45nWh1G/zkV3/D9Acp12","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAiJCRA9TVsSAnZWagAAaBsP/i7XriOBh9WQ61qsEguV\nerSJj9+MFOWxouTwteZavkop6oIoOGlCMpBen4B6CoHfkDdxWm2oJpk6cBD1\nLT21Bv2G2DN6YK/Ls0XjVFfqg4yKIoyl9ClkrhZSTGU8fsUGtcghqPeLXVzU\nK+DK8x4R8YSFLcBUyXiMxIb10KXmwFmGyH3Z/cSB56o+jFmrL3BdnQ/sp/Nc\nXuylaxzxGrSz5yynbHklZU2RCw5YsBxvOBl0KQjRiBlSAG3bpbcoDX+AyxNz\nCRxP7pNIDG1bCNSB77OWqFSha7nx6tZg/gDj9ZoJ3yPSPgVefXNXAhHfMYJ/\n0WBMyE2LgnQxokpq4FLJqp17w+LrgdHN0kN4MfCTCkumsH6QkXEt2cgtkgm4\nJHkjI9AnW22iEC4ne6MYs9ox3ocEnRMYlbMYI1kATG3KWT/+/gD0ss4pFJ3d\nViSuHSF6rn/cDHlrxaEsC1nQbwpg0nsmKbtr3SHoPUQdcdGzc3uE4+9MKgCk\n3XHQRFrk1iJh4ca0f4bZ71n5V7RqnhGDiPQ/59I0aI6HTHX+/bckvk8zfLCg\ncsbAGoqB9JTTjOusS6rVGdn7A9C/LR5uEe4k3RxEYzesbNISwQJmoZAFmWAZ\nUdNYnYw1aSAGMPjkab0p7K65u50tuhtDp/tTa+X8XmjpsIcXaUxy9XrMQOZJ\nJ5ML\r\n=jrRx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.2139200b3.0","@material/rtl":"7.0.0-canary.2139200b3.0","@material/shape":"7.0.0-canary.2139200b3.0","@material/theme":"7.0.0-canary.2139200b3.0","@material/ripple":"7.0.0-canary.2139200b3.0","@material/animation":"7.0.0-canary.2139200b3.0","@material/elevation":"7.0.0-canary.2139200b3.0","@material/typography":"7.0.0-canary.2139200b3.0","@material/touch-target":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.2139200b3.0_1589381257164_0.1453359733673112","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/fab","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.744d751a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"218fa9864bfe9d8335da51cd87a36c7af0f6d82c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.744d751a0.0.tgz","fileCount":17,"integrity":"sha512-e2cvB5MbVJqG6ECBJZovqEKK/e7PzDBq/4Ux1kToRvvumLOLzk9l3EyGWmu5Yd+5abpoU/AjNwD2afKryF37Xw==","signatures":[{"sig":"MEYCIQDGOS5ZYVO8kmdfP/WJbfkI82VMcFt+J3x/FbOHQbbF7wIhAKpDwSrFLr8ZpUNJTgHzNo2xJQJhsVeNmmtnP/7+nMYC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMxXCRA9TVsSAnZWagAAtjYP/RBs7Wi3QsBgtFJxkqhb\noV+d0b7rCrAckqYENmZPLUU9M0QQ+qW3m60omcJdobhIrBLutZHPTZq8Fhwy\nWEnry2+w7jPomfiGX4kMGK9MI+aTmmHUx+gvf55LjUMnsSLVPuV6HvyTBzTs\nZEH8RCMsENasRGRM+l4TvaaIMcLmfnL/v5fFg5qO3f3YSuYnh6vgNIwdtHS7\n1MJcxFmT9Q+v3nFsnYbL9s5WCEtEUtekZQgWeQymOux797Y9UmjOtn99wba7\nDYjB/CvXmUzumIl5B0F/5f8Kg5+pgnjU1Y/lnYxbxo9Gs4BS4Y1BW75QAT11\nut6/IYKUny7mm5670cXk5vWk77irGMMhO6htqvV7U2qNkBDM+cpY+tP05Gox\nlqla2vnf93t46Udcva1Bn6ztFsgLUVCYNij40IhhJR5HRmMh4TsJGNQQ34ru\nPKBaRTfYvCRZYboo5WGngU6r5rp727oQpfm+GCaPWaO6uhxpqyFF1UIU9qFu\nJTdqDt+kUaZ8plfQeWnYfAbkaqNU93Bjl4zdvAGgF+r+I54YJ0Cwr+g/4/kP\nsrbMmCQQhaXdaFcKKVbIvAkoTkqdHBgg9nQ84MWs8Pgigp5xliqWpsUjHhxi\nQ2mLKaAFwExbQU6qi1Z/AoD9mmynFg364HW1dT32h03D4A/v0vb5mL1SUEQN\nY4LR\r\n=JyNJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.744d751a0.0","@material/rtl":"7.0.0-canary.744d751a0.0","@material/shape":"7.0.0-canary.744d751a0.0","@material/theme":"7.0.0-canary.744d751a0.0","@material/ripple":"7.0.0-canary.744d751a0.0","@material/animation":"7.0.0-canary.744d751a0.0","@material/elevation":"7.0.0-canary.744d751a0.0","@material/typography":"7.0.0-canary.744d751a0.0","@material/touch-target":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.744d751a0.0_1589431382781_0.020102673144086536","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/fab","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fba14f0684f6805ecd65f761b69d4f0c1c0087de","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.ad0c0c103.0.tgz","fileCount":17,"integrity":"sha512-rVlsnxrmL+JmF/kqFQp7bDkjmgf+ykDsaWoD4VigggeqTotBkH5nv30cVR5/cB5rkc5k74GYqjrZdXBjxpYVrw==","signatures":[{"sig":"MEUCIAuvq5rjDObeLX5/mNv6MiiRlNDMJjqBsm6KGfwnqMccAiEA7p3j1yqmTeTVfLb4Zj3tsYLMk4I02DOINaUUkrVeTBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVsACRA9TVsSAnZWagAA3I4QAIbKBqUYL5ZRnr7OVZbA\nbgMf8E1p0wjHESsrKPcnzTwSTei8L13M1VTUr6QaP22bsC/9Kxynrl1ljCi3\n6vf//TrSJiWftbY1gNQw6wqoAgUwQ6zYfbqewrnbyq+XNOkSlLm/NNwGSvvx\nM01WOz52lM2fwBWciOPkeMHXbiRVK2sGYxZiBFc8DwNFlTVH84FvBJl5zH6B\n8GST++988UzM4Vd9f12rAOkTWTqhytqzald2Jgrqv+TFkHVIkvU8dqoSmIu2\ngGcPdYYsn3a5DZ7xRNoFBVlrCAauQ/O1b9BHm/hboBWsmpzuxnTOuwRF5joK\nZ7hynMHoJrzamy8oSvPtxZkV1kbi6qSlgCfpG+A7brbtiKLzkq7632rfuMtn\naOo/c/YgkWSZvNEf7k/jwMjD7bLD2L8i6eKAw6iexxqrO3LCZvnUJEAAMm7X\ngtFsc2rvS9CWmmUsUGfP/01PkL8yJA9zRczkLJiwTNGSRFWDtN8uJgSf1G7v\neJf8Cwwz9wL4rkwo3IpQtGShy2pObrOP2DkPY5SYkBzu9A+QgeIFs2/4jzYq\ntmKoHpnC+lBN8tJ2sRN/LmxIBZvZ0DAtoTJM35gThN3AbucBkYCA6JSLquoE\naQoBEilaiRSVPTHG0Xby3KrX45FQid47p5EpMGFgHYmAPfXzpkniPA5zT9qV\ngTLe\r\n=foVa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.ad0c0c103.0","@material/rtl":"7.0.0-canary.ad0c0c103.0","@material/shape":"7.0.0-canary.ad0c0c103.0","@material/theme":"7.0.0-canary.ad0c0c103.0","@material/ripple":"7.0.0-canary.ad0c0c103.0","@material/animation":"7.0.0-canary.ad0c0c103.0","@material/elevation":"7.0.0-canary.ad0c0c103.0","@material/typography":"7.0.0-canary.ad0c0c103.0","@material/touch-target":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.ad0c0c103.0_1589467903990_0.0946868345050842","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/fab","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43d8f06794d3994c2dc247a411523d3ffe101a08","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":17,"integrity":"sha512-5iB1bmd5xDNZrf+kXndgU86HN3DnhhfFubNHn0N4pmCgLIzJ1UST8TK0dkTTKsgSzzbu8ECHlXebBKhmq4kprw==","signatures":[{"sig":"MEYCIQCqGFGUJUUfgyxxnxt9Scuy+vHe4GnYXqLrFKRho+bbMgIhAKOrlQTwWNeOctEFJED7vO4RYMgUyTocd6/HV5oaZTEk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsuyCRA9TVsSAnZWagAAeA8QAJP709GoPnTm2xAY7KC9\n2WNaT4bwu35fJ3vwuI5tvMmqffRRVqqRdroosUc9LxV96NtOuARRuX1bqQyL\nv0Cqv1z+0thFkATs5ShG0K3YJe9QyIUmppgpIVlsdEt9g4/yGfyP+wLgSzlB\nsCRsbfP+6OduPUrX61ZNNClbzpZHaowY289KaI6yI+zaM8snGGdINf40mMHU\nOudvSsuVDvX5EsHN9fCh4lN5VB4Pt7upjqbcxbswe74KnzbrpHCG1wqUm0XD\nZPQ6rLCyHe/GhdE1KsDPLpdD1MwzAvk1TtgZfQgZx7XxvI/NCIXKts7VxWkT\nQLiFrsfubcADKorNovYwGdffQJSOZSsUY6bGU9eGxlU4Ag0KIlkTDr9a/Ak+\ndNgp9D2wQC1Iax79s0jSUQRPIWZsS15LxWNURpEY2BjOQqf3viB0ZFaA6RIR\n6vWMG0WtzQ8FT0/DtjfCFwUQ8jZFHeZdRmhUZK1qtNUMpUGk3cYd1pa/zumq\nTn4O2KaBItg0dYfQoPkXT01Aw5DvdvWIwjaH48mk1eJHLaNpc4/mmVcIDPKP\nDXfiYHHl6UU5LbiYNKYn6XWCJHaJLQ4tOjH907vdbo2I6X2I+jZR3AiN5Yme\nh6QTgiwhAwIMFR29FSjycmZTlrsPwz5JPYm7LZhUglV6Bksr7rmYSi6wiy+N\nggF1\r\n=Ya0a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.fd8f8f2b7.0","@material/rtl":"7.0.0-canary.fd8f8f2b7.0","@material/shape":"7.0.0-canary.fd8f8f2b7.0","@material/theme":"7.0.0-canary.fd8f8f2b7.0","@material/ripple":"7.0.0-canary.fd8f8f2b7.0","@material/animation":"7.0.0-canary.fd8f8f2b7.0","@material/elevation":"7.0.0-canary.fd8f8f2b7.0","@material/typography":"7.0.0-canary.fd8f8f2b7.0","@material/touch-target":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.fd8f8f2b7.0_1589824433539_0.13668135561930694","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/fab","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.730920fbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2a46d69f7b4554aa0e1657fdc626803dc1527cd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.730920fbb.0.tgz","fileCount":17,"integrity":"sha512-cZc2lGNtry61gnWsx0mdexRw6eKUJqAg2ctN+mAnVUhSTb2s5Z3izVqYPNRI5QrvZ/K5r/frhCAQQiXRP20+SA==","signatures":[{"sig":"MEUCIQC6WXrXRsREGDxZW0KkLJsGq6DV6zGiSDLLSW8trw8PSAIgZeoZgznUiGbAqLqFb5roob/bXYpv2tVlPLAv10G9cuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuWVCRA9TVsSAnZWagAAockP/AznexwbpqlHV+bpW+ie\nbDuKsjZ6QrjsWbX1WtIAvApQ68EpnTTwpoOXFXsvkoBoZn0Vjb62zTlyRZcw\neCQaMhHfwl90mlPHVrIpBI4+u9C1MI1RcDhWVrTG8iXthd8mLR6qT0UaeHRE\n05mXeS6NiioZubinmzg6/45nmGvrDJhn2A9bh5Rf5/C9itXeM+plj24MADQi\nw6LomJ1MeOC9uWkPtRbhr/+V/lT0tUfLVmdRYS/88H7hn413EwI1eqdSvhsI\nA5I/xKOlEmQgoUUp7ZbMy99P6eeKHE0KhrelYJcImfCr95uDPpyt5XfHmjcu\nrVDzdz+8wPjCty7EbQfqo9JtNsVWAXT1YalReD0aH7aH7w5rpJa7TcJFj5Qh\npqbKT6KZB0n90wr82GFPqN3LpAA7Jn49bjnpWKZlDD6Yh+jvp2zhmTlC16eO\nAmGGuFOWHGY4hUTTJTPmdlQgNBb9loIUcZzAQDh5HeV2TBISyRlfOdIwzKs+\naXGUlog++EoWvjhDq6MjHeVvtNHwzQrjL5Gp5wEkZ1Yn7nnC5FyBtbIlTozB\nYRtlZCS9SrJLqb/4HBPQgHlZkFTkcE/tSVmjlVCxqjZR9oE6KQvrFv12SFOJ\nqSWViM+FTBQXIHzaejYIo3bmzx0evrEUJ6VZdd+bOZtPL26n+JJyvqFT/P7b\nmBi8\r\n=S7GC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.730920fbb.0","@material/rtl":"7.0.0-canary.730920fbb.0","@material/shape":"7.0.0-canary.730920fbb.0","@material/theme":"7.0.0-canary.730920fbb.0","@material/ripple":"7.0.0-canary.730920fbb.0","@material/animation":"7.0.0-canary.730920fbb.0","@material/elevation":"7.0.0-canary.730920fbb.0","@material/typography":"7.0.0-canary.730920fbb.0","@material/touch-target":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.730920fbb.0_1589831060718_0.24604968712895148","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/fab","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"055597125037c8bed1ed046e3cbef42a70f270b4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.bcdad99bb.0.tgz","fileCount":17,"integrity":"sha512-60jWRghshv7Fgb9Pjy3DJ9eWXw14mA4ybhCkaIkb2Ul6R1o19Fd+t3KULD91WhvatUtcNTraXfx9WY6BxWxWXw==","signatures":[{"sig":"MEUCIDZOgUACA+37HL2YMhUNmXdpRCJF0zrKG1XVUYdk2EZKAiEA52XfH5qQPUW7TC4OhvseH81pTUP1Ns/RE+zumCi5tA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0/4CRA9TVsSAnZWagAA7eUP/2d7RjNJjAjdAXRxS/7e\nibhOydczig4iqEFZp91QE0r+w2x+LbxI5Jiyl/76z9nNlgms+uIvLOi0Lrw8\nMF7l8FqyjMTHd+Vx42+z7pKnCn0RCTDRkOIih9TWTQ5powFUvvlaTNr1hfed\nBBxTbOupYTFYeUZn97dfy0dCuLkgR06LZNI6YiqdMYEQAYtoDW4HCC/3LHJ3\nFPe2hnLH80P6zT/3BMXIEYYnWoJSdAnKOz9dwmSjVxoUUaOf4IOa+KqtqP96\nYQAwsYj09g2sQpQlu+nfAco/wNxuLEzz6vd+/O0+fSJqgv9RSXvcOvqAqx/1\n19DD6ck0Wjw3wu9UKRozjcr9soTdTMVHblmulZ9H7jXaGbreZobCCPkfIFpW\nyim2WMzEHaIpid+I+eDBQZpF+nRoTCumxEUc8XY+ed3w830K8ZCTvSI9YSDz\ndzz7rpCx7Zm8QAHUvxBrzElO4TaWWh130eKPfPArJxPYOe32eZotT8pexHcO\neJB3KJAKo2A4MW20iiJ2Whtzj1TIUwrloC6HDUN7yrkK8/Uvt5WTDcfSSAkw\nx/vTStsEiC3CGH7hHg8ksDGcXHqgQocUUhboD5PQthfUrCXQ74n2tYxi2NBD\nlGSAUGscCw+jlhAcPe7+L4UXiuscHnF0skvOaViD9mbsV7CeDz2+hcPUrxxt\nbIW6\r\n=56NM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.bcdad99bb.0","@material/rtl":"7.0.0-canary.bcdad99bb.0","@material/shape":"7.0.0-canary.bcdad99bb.0","@material/theme":"7.0.0-canary.bcdad99bb.0","@material/ripple":"7.0.0-canary.bcdad99bb.0","@material/animation":"7.0.0-canary.bcdad99bb.0","@material/elevation":"7.0.0-canary.bcdad99bb.0","@material/typography":"7.0.0-canary.bcdad99bb.0","@material/touch-target":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.bcdad99bb.0_1589858296204_0.2774599797943911","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/fab","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f6887eba352dca2889c1deaf470bc9b1116b9e3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.4497b86ed.0.tgz","fileCount":17,"integrity":"sha512-akjsbIQfbOrJs4yInezC4kgJWTbPWeUu5sFU2FwAPDZoDYR7Aolkwm2I/SExLpZJM4slV8pnuiueYCqG6ZOIbg==","signatures":[{"sig":"MEUCIBRWg9UPg16QNVNXWlfULhGg272gWTQE2B0v4GA7uIjgAiEA+ZAu7tujJnHZJFTWX20qw56hii7zgqMKMngcFWQkVRg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1elCRA9TVsSAnZWagAAJgYP/1iTUkZFVhNUQAUAsi+0\ndRSsR1B92V9bKd0Pk3FDJi1NdCJAURMpiuOB1dtiZc4J6orGj6Y2rj+6pvNP\nmjrTpZr9qabyxthDdIAFMkuPskjeTchujmOtzhAa3AkxrR3KsO4Wtzo40zTf\ntL35XCIgt8Zn/90pc+ou1oI3///PxRThf+z29Z7LPi3IxTCJgpQjT0vGqKs2\nlkBlFCu1wCifcYlqEtaemi5Ixb+RXDJrSDJmIj9U0phBM/72aN35XL0BCgJb\nqwtvARkZlMudrk61b90EdA9R82FD/xLRFNmqgEVpau/MTguY75fBlX9aw5eN\nV+O0g4k4RsJ8sk8Vv0dRNIhbFji3rbQcsllKwDJqXzHbbHtv6srwBacrwLaD\nE6jblLPEPvotxJuoKxk7+TC6NUAE0mTsnYOqDkucTA/I4YWMAHR2z5JFhhic\nM4WzOLp5QUUij2RHzLOWSH9DJICqEveNFGyZeZFNqinm4fKUSRTX4vTglP86\nd+hE/QJVVR/3oQtL1N8bFJmtAc0ojA/2/hT/+iLIib7X6Q4X8eVrmSmiigMk\nY0OQ8Skcxcgms3AQdb/EvGfS6zsGY01j6yeiJi0t3KEbIkqJmnFUMUe/m43S\nLD54NMnrKfaHP9jk0vZK9PlhZGchoUjZLGb/jduCPY37vCbbPUnlxAty4QWP\nXoKI\r\n=hKr7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.4497b86ed.0","@material/rtl":"7.0.0-canary.4497b86ed.0","@material/shape":"7.0.0-canary.4497b86ed.0","@material/theme":"7.0.0-canary.4497b86ed.0","@material/ripple":"7.0.0-canary.4497b86ed.0","@material/animation":"7.0.0-canary.4497b86ed.0","@material/elevation":"7.0.0-canary.4497b86ed.0","@material/typography":"7.0.0-canary.4497b86ed.0","@material/touch-target":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.4497b86ed.0_1589860260775_0.7574967310160776","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/fab","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.2e60575da.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ae41812d2c26198f414025d441186429afa375c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.2e60575da.0.tgz","fileCount":17,"integrity":"sha512-VJO/0BEOe1jUF7IHppxmr2krP0ttpRo0FeaNW3iEgjkR00ap68Sqyj/0Z2jArecDRrkfcK1Ezd+yP1H1BQUwXA==","signatures":[{"sig":"MEUCIQD4ReYVMzINXy48jq+h65D9SJx3WB5LPa1Ulq0U5E9O3AIgPsxLzZWv+N9474hmmtZae0A0IwtcSsaSDlS6Qx77LHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexATACRA9TVsSAnZWagAAODAP/22U7gDCN7Tyaf3Dm5Uv\ng/sES8bHOb0CD7GqyrK/xNY118I3zWwbCzSJ02jtIQf/TEX4nT2UWSLIaput\nfr0VbFu43s509AUz56ixMFQnWqe2h42OEHpoKIWebrxQlzZbT8JyOt7VZc1C\nhLOE6cG+kqSP6zL7wfdva7EGpSwENMLeDDx1U/Z2p49iTSZOOzt710n61N/v\nEJabhQtI/YHdlCx2i+qGcaDHtOcaZ3gY2Jy91YrEjoEHNt0fNRQt/muh7/4p\nMY9lGFpKA6x8oLLBxuW8Dyi+w7CQvRFMgvvevHSojpBrtTII4ATve0My+U8J\n+Ihpp9FS0Ahu9ulsRGTNZNibzHEYuIOO1FQ4bTH8Y61XV8/PoqumdBGOq4SY\n/60PtRdQe961XCuIvfK+wJQNK9GImxsCMhrEf94Nzp7R4aXUnY+WmF7mY1XG\n/UitzrTi9YRZI286+PsU0awUeEgMJfBkdwvOXcQPaN1TCEADvUfK4FiHFe/q\n6X1GXesvDSKNfw9WZowCtt6zr5nqUcWTtxDRd98GOqBkVMPqUMIsR7KUAo/4\nhFaHAxw5ARp+KaysWgoyI7/KYCIPfwgLKerx44NxROD60cYgzBKiI7JUATuM\n3bvw2DHXfuiCTIIYXZjglytmFnVdn+MapgEl3f2W21FUk+9QpBipoJa+Cxg6\nGmuK\r\n=afHn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.2e60575da.0","@material/rtl":"7.0.0-canary.2e60575da.0","@material/shape":"7.0.0-canary.2e60575da.0","@material/theme":"7.0.0-canary.2e60575da.0","@material/ripple":"7.0.0-canary.2e60575da.0","@material/animation":"7.0.0-canary.2e60575da.0","@material/elevation":"7.0.0-canary.2e60575da.0","@material/typography":"7.0.0-canary.2e60575da.0","@material/touch-target":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.2e60575da.0_1589904575659_0.3081454430243695","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/fab","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b17ee8678fa5cb70e98ed62de4aa251ff05e9632","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.e3eacefcc.0.tgz","fileCount":17,"integrity":"sha512-D6eyzy+vwTEFGf9axwIbZzqu2rDm/YkX8Z6Lou1HrcerYgL5LcaupBb+c/vT2fjGYxNiiuq/3zbh5RqUqlV7uA==","signatures":[{"sig":"MEUCIG3AlEZM7TpOVKWfoeK7Qn+EI44iEDQbtdU1dJ49TrZ+AiEAobZb9vjE61p0AOdHuPo+Jiz414Z331vitSkkZEbmR4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBmTCRA9TVsSAnZWagAALXEP/jk+w+jfASfj9UXphpz4\n7CVd55AADGf7czxDZ9RkM3Sb7ar4B8YJGii+vHe3au6XfSnh81efNTVQaMiy\nfK7VwN/tBABmUBEhYYCvZgY6I1KJQA9OzUAggJLflyg7tssP9xei3yH3Hs3+\nUGng7n5kfyFEFmH5BvHEfj7i2h3VP3hsiw0ZYSt5MsPQc5N1a0KGOYKdO1RA\nY+OgHpP+opC50StbVioEEBBX9xck7vq9YpHHKEqi1kjYQkTf676GGjpITEAg\nHJB65zk8gUm1E2LQoCKhu8P1ilirVcE2AGWnWqfTb90R8Iyyc/ith2tXUPXD\ndtGZ0sZt36tzYpXFWuePK6it+rYJa4w6adynBNWV6LkES1d5/OzQ8n5Ox55a\n+UTwYOBv6yO7oRRfgFFGzM/YeDLhLtb2GSJqwZlvxMl4y0h011BhI8s9+yGf\nnsDmk3YmpkPDdFbhFTL0uaQdCX8vXZfx8FbOl40dBvwz2wdokvNyoRHgVWRC\ncdRI1FGrtG08kbrh+qg7dYgnZGkRSIhe2J25cc2QWwFyVPoYw8XWA8nXl42k\nenwBLxOBUS56X/iWGjP0ZnGsQJ/tLaZQUr2kU3N0Rr5gXosyy1iie3JvDwOr\nMsTGpsrnZOm2am1YD/m0u0hLxPBF7g5FvEdIl5Hds4et3RZazeckiisRxbGa\nFRg3\r\n=OCW6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.e3eacefcc.0","@material/rtl":"7.0.0-canary.e3eacefcc.0","@material/shape":"7.0.0-canary.e3eacefcc.0","@material/theme":"7.0.0-canary.e3eacefcc.0","@material/ripple":"7.0.0-canary.e3eacefcc.0","@material/animation":"7.0.0-canary.e3eacefcc.0","@material/elevation":"7.0.0-canary.e3eacefcc.0","@material/typography":"7.0.0-canary.e3eacefcc.0","@material/touch-target":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.e3eacefcc.0_1589909907060_0.7480688234793087","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/fab","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e42a34bbd96f96b70da666103a3e6bc525e8d98","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.b065a4d2b.0.tgz","fileCount":17,"integrity":"sha512-VagC0R7xJVibF7xari7lavxA0cEwK4yI3TWH6fJ53sq8Uo6tsIDRDj4udirqx0Zb/+4lW2LueGhTW6iQO2rCYQ==","signatures":[{"sig":"MEUCIQDssf4jrsqQPnpyYnX0mki4Dn3IrMaa88IfYYK1Xry9kQIgGW3ZuQtQJZhHyk1aioiR6M0IjzxoBsT43fhHZY9w8OU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUCSCRA9TVsSAnZWagAALwUP/1AtymkJd7Iwj3Yjs/qr\nIhAK7PYm7WC080DNGEY/yJ5mR7yOMmjVK66UsGn/J3XZEUCvm2kT+HzikDDr\n5oDTx+/aG9rmYpMvyftlTc+DmAnHA3LFqcO3zJ1mxK90xfFJSo2aVrD36iqp\nTCAAtu3inttx/sHsnwE+ywCT5R38xiM4rbELClbnih1ONtk+RZvSnN49CkK4\nTPPwn16LWwqERHSBeafGnBDTwxq2JGagm0uJ5Xfhb9Ghe/PcToN561p6KHBz\nnOo7XkwT1oSd3KyxVLcs/V1Ju5htdHb+XNDvctf8TWiJNt4KBTPJx6zvv3H7\nyQi7bXpL1jZAxoGE6O/1s0LbnLz+GGoiwMY8apKVs9yzZ9XO3rt2mwHXybcO\naxUdAKlrkkxlTQA83t6e1WvjUjhw8XkGQgq/bso2nX/GvVcA8g2gXVvFg4w8\nF5ie7oRIPYAgEaRmV1WMEyZHQb4HJylY3R+WRlpPwlc4vNSYAH2+yjQSAHHj\nGwVJhpGRUYdF1EVPjTB60dSCiywrFgqeZwUutsgYxukfws9IklTLADRFV4y/\nw4oZOb9hIXPsSw5FLyKHMrm1UDzb0u0YLjwSw6R/xb8o0R3r21f5Krmnc4Io\nOZe64G3hOL0jRgNR23avv9NaWr7NnZygeRW/KfFdLpp0LgspY65vEXHxN6lo\ngROK\r\n=e2A3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.b065a4d2b.0","@material/rtl":"7.0.0-canary.b065a4d2b.0","@material/shape":"7.0.0-canary.b065a4d2b.0","@material/theme":"7.0.0-canary.b065a4d2b.0","@material/ripple":"7.0.0-canary.b065a4d2b.0","@material/animation":"7.0.0-canary.b065a4d2b.0","@material/elevation":"7.0.0-canary.b065a4d2b.0","@material/typography":"7.0.0-canary.b065a4d2b.0","@material/touch-target":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.b065a4d2b.0_1589985426386_0.37078283906553633","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/fab","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b41a0bce275109f5e28293c23a43c56e1f4151a3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.4ebce8d78.0.tgz","fileCount":17,"integrity":"sha512-rYxibVufECfnKEg1e04NU1SA4ZSXatZf0ALiYmq/9ZyqlJsq9ooVa/d5E9FchKDHJEgyJHFlAgksqieifLK+AA==","signatures":[{"sig":"MEQCIAOulOf1frQHCAH84krgcbjzEugNqIjwpcahc90mD+OlAiAe14bgQpYdS7h6ejlLjIg/rkpDMhKf+b4ByR0k4ZoVLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZgoCRA9TVsSAnZWagAAPGEP/Rzd5wgDpSeZCnWbpcxx\nIkaPjv96PWfxFp96+Gibu2kKB3KKLK/TTJOEgoJcEY71tCOB6xVcXkwhLjiM\ntyg6texXKN4Qqaiq94He7oM9osiGTBXBBVxo2ePYCBqRAzGpR9PRbSCmWRnj\nreXZwT5Or3hj+P9yWuRdTKJ33liSwE0XJVlCmwNQPoHehm1ytDTQOIzTR3G9\nHSRmkwzLGHSy79h8knoEygyp9WyLOXTgjs1RaXMmg2tNsPCF5dmwHFgIJPHe\ncn/1kCRaCQ08ngAtztWFtZ3h5rN5nCKW0YW6IN1ZAK6f4EjvYtAr4P9oA6f5\nLiukjWCAWkzs3a0qhNwl4RYayOfzUb+tPjE+XJ4RigNCieKVk/yFMlOZCpQ4\nqmcGpZXTHZ6b0pbEiOismzbUd/1opXKWNBZHD7loFSZLv7qvGuhvJ3LgxVMU\nzu+fqwr1Swpk5j12V972WUK748EE227KLBRP8s5VMtNDSMbvZEkriqwNXBfx\nziqelyWUC9KRInkJlor4Ooc6abEPpQpkhbwReg4DNHHoA6C82aS+TU5Sy1v6\n07c40BWRVojP8kGqt3Lc23C4dMN9PweKRinegq+dJJ8UnwueXicYwMB3g3/r\noj6pYFmT9zjN47L3+atYJuP+5qah+VXIJYAY7xWGnXCpz9Fri7JUpQiSYY1c\noNWr\r\n=Gc7W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.4ebce8d78.0","@material/rtl":"7.0.0-canary.4ebce8d78.0","@material/shape":"7.0.0-canary.4ebce8d78.0","@material/theme":"7.0.0-canary.4ebce8d78.0","@material/ripple":"7.0.0-canary.4ebce8d78.0","@material/animation":"7.0.0-canary.4ebce8d78.0","@material/elevation":"7.0.0-canary.4ebce8d78.0","@material/typography":"7.0.0-canary.4ebce8d78.0","@material/touch-target":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.4ebce8d78.0_1590007848002_0.03630824091566143","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/fab","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"955cacb10ef5d2f2a3051f344c73fc7567e44a1d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.b0fdca492.0.tgz","fileCount":17,"integrity":"sha512-tpOJ36N1djBh/5yhqLm+AnA73Lzczv2rDsnVe82/+TIqVuaF0KZAoAWpGOmylfyrQuF8qoqvQnvPNdMIv3zekA==","signatures":[{"sig":"MEUCIGREkSTXFHw5idt1r7+P4azl6NFET3uFxqcbr89bBVDWAiEA/+P/6GEoXzmMiTErBZ6/L5hPTyszAUgPIc9Gu/LUqYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbcpCRA9TVsSAnZWagAADdkP/0ptFI4PnmoKRzyVqURO\n/SooZpyxJUjIZQW/h7OUHfPyeBOEUzMu8AEDOwH8vDHAMmuoU9yzfkz/QSiK\nLKrktioB+Pct1p9W7wyUwbE0alRVQ79aqhBaDZAF6eVNSrTDQWPTWzaGL6/x\nrS1VlsP1361JNtJaHJ+c3OZmsqVah4Q7gfmB9ZMgoxXuSrUol2ZQM8iWNWPD\nAyEvihyzITkIakl6cZZGdueRu3shZGLxt4wqutMSvcv7EXa6lGNWDT5eXM1/\nWtLNnF1HgfEyo/G1q+Hq/BbT6hJjkISK42s3pSPTTCOV+CHByVu/z/qOEVj4\n20LZfpRe+CrsLTai6xMQ9M7/ZqGZIJXnKFNvsbHVb49r2COLSMvOxlOtZvuB\nrpf7U9o8fke5fvZb3NeQrQ1FNQeBqregZEt9MIOZeFJCp9nE1EaVsGWer6kG\n7OndgOkvC1YpBvP1BB5NbCcIqat5u/jAeWkKOImp0PsOmiO0A13m8gYfTUmD\n4fValmhi1Urwxupl4+tDBvIpMXPJSgsYLpU3yc66Zsz/lS0v4V17mGYuwbn/\n4km7ChaO2tc+DFUnIPzH9WFf7/geXSCvqrBP/TzhcAwoyb01R1p3q+MZKGBh\nSYNgfyNjSOkghYDudRCtBJnA5rwy4lZaxPN40Yax1LV9HST8dBz9RCLrcMI7\ncLhv\r\n=6SlJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.b0fdca492.0","@material/rtl":"7.0.0-canary.b0fdca492.0","@material/shape":"7.0.0-canary.b0fdca492.0","@material/theme":"7.0.0-canary.b0fdca492.0","@material/ripple":"7.0.0-canary.b0fdca492.0","@material/animation":"7.0.0-canary.b0fdca492.0","@material/elevation":"7.0.0-canary.b0fdca492.0","@material/typography":"7.0.0-canary.b0fdca492.0","@material/touch-target":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.b0fdca492.0_1590015784822_0.8816262736803462","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/fab","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58b3a3aaa242d0219975e48ee3122548eb298f2f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.c67667e8e.0.tgz","fileCount":17,"integrity":"sha512-Xcz8cFGAfUf7aNPdsiHBGpJmHtMr75PWLpqyY3jgupVVMq7Vs+ayt2QxEFnblo6wHcTMGdA0sJbyPFQjTnRsYg==","signatures":[{"sig":"MEUCIF7Z0GpLC2uSv0rx9sFMJRG6bPNY9mvhu/4kqrl6ANbKAiEA3GEvup6UQA0OeFjDC85V5h3K53Apw/QmDdu1DlxPFeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoxwCRA9TVsSAnZWagAAnaUP/iMHEFGp1/2eoFA/SgZS\na6a4oFFU698tAHkyK5/I8wN4nQbKj4wtkF0mCN07dlvDBpqsn7X/wEuU3nTh\nm8OOSomyc/uCWfe0DhylfH3GFXCi13hyvDWE5WeEYG+2xKy6LJVoEjjn6fnQ\neWdRxENEr3q2Ms0+fdEsDCYTG0ZFwlxwwCT7aJKKVZEUaxmuhNDtgtUX5VwE\nRZhOWwo4IKjlwgI3Lhsq+K38jWzcpQvAkjS6dROfWmP9T3iYL+3Pr6+AsNRm\nkXPkIyaf9uvT1JpHLcdvbHpV+AEER+SEnvrVxxuLDCPMBaa7JBw6DyaOQRiV\nojugk99xfrlPvL9SANB783ao3NEo+chCy88OE1aniavndRstDFbnknP9/xCe\nvKYBqwgQ8UuZSNLeZ+WV6XxlXctL+scIH7WztlmBw5YerugeWGA1dqYEnrPM\n+qRjhHBac3AbK/m852LfVhp7mIDc6vSrD3dqMbzLd9/NmUszdWHfprLBz4L2\n/YKcSGOAwkWCA4D6WfFhNFEnVoFeTlK1T9GxcDiYZy6CC+RARCqQUEWtfalr\nqbkaDRM7Y+oXMXvRye0FfKwE9SBhxDUQYQeCaMhygfylUjHiWdEK7LF7lsUS\nIEFe2IRx/JfRkVUQW9WbPOjzY6rD1IHry8s/Ut+8h1QNSt0UWh9x5vcrLir6\nMfZP\r\n=aC7F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.c67667e8e.0","@material/rtl":"7.0.0-canary.c67667e8e.0","@material/shape":"7.0.0-canary.c67667e8e.0","@material/theme":"7.0.0-canary.c67667e8e.0","@material/ripple":"7.0.0-canary.c67667e8e.0","@material/animation":"7.0.0-canary.c67667e8e.0","@material/elevation":"7.0.0-canary.c67667e8e.0","@material/typography":"7.0.0-canary.c67667e8e.0","@material/touch-target":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.c67667e8e.0_1590070383391_0.3878550090700421","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/fab","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88f41267cba19667832662ca9e03b13c23dde1fc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.62b5f37db.0.tgz","fileCount":17,"integrity":"sha512-rTDzR+ac0FpMQrtY1VibLTfTkzIXENZNT1xfr28lvql865T8bbTQnXgfVySuU5/z9CFtRedaseUSUY6lrGvlBQ==","signatures":[{"sig":"MEUCIQDNckpjm6WvzzKCbyu9hT+FjlhedjbX0B5Dh5WY4pxKogIgRE51gxrYe/F0fyY37ViTBDUfSoSe6mQO6mAr8uB//oA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq82CRA9TVsSAnZWagAAtX8P/2UWay0Q6EvD90FtErNM\n65y51eKt8mZau6TjLJvUwMKCBnuVFx6pjHd7l1PXexTymLNYvMfAeEuxWaL9\n6Yh15NcI1uZyP/b4bECneQwll80gpc8+TUk0MlPjonJZnQZ6PQr/wr8HNM/Y\n2fXxlRdqeNl5/FkUFA6oovBLoE7lMiaIeuOqbA0RQ8VlJK5xmoaajeWy3Cr+\nwruCt7NWeI92yrWKGdjnl/OBiFV5vmt8+57SLHpirMfYx23Lh949GaO3/0pp\nFBPQcH3Dt9yhLbJIQdbXtLkbFEcC6ncp7cMWxDYvN2EVN14MWXm/pGsEzH9X\nO093s9pyGRwCV4U27puX+tWcqUsHYDX8fQVq8qVKYvw7wg1eZ+2BAtbhebYB\n7It5/2QPRX4hZu7pH++lll4vn6Mf3qTOp+onWMWyYbOWzOsygkdRf3CloZoL\n9WLgVf8wrVLNwQnMWgM/Hr7WH6z46q0NkUGvp+tp6eT5uSKpaKkwdZIdJv1V\nm2IUlCaQ8vbP4qPw52G12Fhh34+48Vd5onMAR8a5ISeuEUnnWK/sOgLr1e+W\n59vOeyeoReYbFQKTDNfXz8UfMocFd5punQXi5xgAP99qLCnYHIt4Q7X+KVec\niRxWPrUBWH7u0marfq8PBLjWfOPT5rETMn/fZb1pyxreIGIn7YZY9Jhm4TVi\nL5Tk\r\n=LhGG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.62b5f37db.0","@material/rtl":"7.0.0-canary.62b5f37db.0","@material/shape":"7.0.0-canary.62b5f37db.0","@material/theme":"7.0.0-canary.62b5f37db.0","@material/ripple":"7.0.0-canary.62b5f37db.0","@material/animation":"7.0.0-canary.62b5f37db.0","@material/elevation":"7.0.0-canary.62b5f37db.0","@material/typography":"7.0.0-canary.62b5f37db.0","@material/touch-target":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.62b5f37db.0_1590079286256_0.4298477986700542","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/fab","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6976c24ea5a19e23dcf85c92d135e8ff54aeacd8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.2e218dbf8.0.tgz","fileCount":17,"integrity":"sha512-aplkA+YiBTYApEdEtG+6wR0jFFhqEiO78eIb8xWo3IWgoLtQ+alYyQ0HNGKOJOrFrePkSKLsNH7S4tfLsCWE8A==","signatures":[{"sig":"MEYCIQC8FzfFDG8FqQ1+WPhhE50JbzQqS+agEWs7yZjqHNP2rAIhAP3T2rd/d5CYpHx94yuStcku5RIVVjgkJ0KtRszqKJoT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrQdCRA9TVsSAnZWagAAlVUP/0gALN0yJCAKMpjCedL2\nD57Slx8/STuN6ZCpDiRhPK0qM1ppVICsfLiFhmMCJ3HWc8+KxwRW71txkD+J\nPy42GGLvbaW9xXfc7zD0S0sfgLKpVhd1n2G6ynl0X2WDL7EYvL165ftbd8Xl\nSkJgRJ7Ny3npRs12vDCKgn259s69z2zqeQEsCo3jlOu3qeCaTGh/uaDDVCho\nbrQ5HgESSiATd1vriqfNrnyjkQZxNU2TZmTsd+9WGo6WlMXrOTYer0ZNkY3F\n7PtqKn1dLcbjbZkSWkC+Flhh/lqFLgalCf8RVtGdy0Wz3NHb7bu1Kpd5A8kf\nM1zL+deHmwl8jqzuap9z4quplofP7yr+eHCqigFexPTnQA0imjDVz/eUgCcq\nqP4fGNJRUBe22GJ5xz3X3obJxmiDHZA5GyJVt/1ExX0R+NufVSuFTNpNqcqT\n/BOIQU1qvpZ/N0rY30U92mQt45q9vMgKIUGASncRefTiEhsD12aiUIpxpYND\nrGetNIMi5eP3ZzVgZFhYkClb1kB9d61HpYSGqajrALGS0ZMD0PeTy7MhzxFj\n5AHYsdfn0D7Jmd6+fs3yrPLUkJNmeKfNilNZN792ZvPVlA4nxOzgSFZIClS/\nnlVVIj00uZdptHpffi3a86j4t68me92YdlrhtVbJe6o0CHMVR7Lu7Scslt8i\n1okO\r\n=763m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.2e218dbf8.0","@material/rtl":"7.0.0-canary.2e218dbf8.0","@material/shape":"7.0.0-canary.2e218dbf8.0","@material/theme":"7.0.0-canary.2e218dbf8.0","@material/ripple":"7.0.0-canary.2e218dbf8.0","@material/animation":"7.0.0-canary.2e218dbf8.0","@material/elevation":"7.0.0-canary.2e218dbf8.0","@material/typography":"7.0.0-canary.2e218dbf8.0","@material/touch-target":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.2e218dbf8.0_1590080540827_0.3990504275898654","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/fab","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78e6da104eec1f89077934d1cd84a90db56fbdf5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.7fd792bb9.0.tgz","fileCount":17,"integrity":"sha512-A/zcoySq7JFFJLxz7eIpw0U+V7RmMJWaj/UtDCi1DSDGPDoBoz54fpYzLD1UO9C7w6tgzJwq3shXh1iDjuk1BQ==","signatures":[{"sig":"MEYCIQC7cZoWnI4VLXv3pByEuqlwOHvgd4Qo33TuNgjVGtqxEQIhAPiOA5+22ZdMWoLIzyvRuu1b+nwGUO6hVzLcb0kxQXFy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrcRCRA9TVsSAnZWagAAkK0P/jW87YJkjVWyR0rXxxYt\nQ288CylCq/Bg+exVAoWHQWAxw3xpmForb2iMo/v4P0nGoPxvkeM/R+hGKzla\nIBH/i/rzX8U316xqDspr33bALlm+t8IMqSV89fanD6+n+tNj0RPc/olvEQ7G\nXt4ms8wkl2HQnikBpcrM2GV3Zx81i3MozMQVXvwiP0rp/QKTurQm281s7At1\n71bZuC77MZFdckYDP3fieAcf7miRaxex9lxaui5rC6Nu8FU2asHtaQ+RaB8C\nkDjfx7PnXuOiKrzvXuPxlgS36RgNAY7rA1ZuV3tTR+C3owxcb3ugRrX0Ia1M\nqTujKSzvzPaUAfAKQ3yulx7+K50kaomHgfuwxCerWRXZF7f1MVyrdM1/rQw7\nAFg5LBaEMA/gTH/fR/CNOcpsuN8wu8jTUDGCpBDanK9qEA8GqRAjd9UKjo5l\nd8Jmcc6gdrql2qt5EpQg8fpsWamH1nPCHYVO1M5HntIe4m5cUMHenn5o8vwf\nvmMVpMO+gYDmac6rcNe0zA76j0nHDqvIGG3mRvRxMYN5IkSL2KPzgDyMSt9Z\nXiOCRia5fdGiXC9jGGhkbc7LYjomY5rxEhkz1oaGptb8N4+4IeP8nip6rmRT\nJ0AX48LehC0FHH45jqSKyh+FZi3aLyB693H+5R9u2HIpbIm/n5fyUoPK1Q/1\n78ZV\r\n=abhd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.7fd792bb9.0","@material/rtl":"7.0.0-canary.7fd792bb9.0","@material/shape":"7.0.0-canary.7fd792bb9.0","@material/theme":"7.0.0-canary.7fd792bb9.0","@material/ripple":"7.0.0-canary.7fd792bb9.0","@material/animation":"7.0.0-canary.7fd792bb9.0","@material/elevation":"7.0.0-canary.7fd792bb9.0","@material/typography":"7.0.0-canary.7fd792bb9.0","@material/touch-target":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.7fd792bb9.0_1590081296654_0.193623335601103","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/fab","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc2cdfab7f60de4ccc23f3ba4831c6e737cc2b6e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.a66493cd8.0.tgz","fileCount":17,"integrity":"sha512-MfCQQ+Mp1RqwYPC2EFPBpMAbn94WZ+dNT2Y+yCSdzqCkE8ksclzrEWHmwXILAS+852JMdIXRj8Y3S6g1N8svbg==","signatures":[{"sig":"MEYCIQDe54yf3a6Zz6xu/JvTOUg2LrrfLnByzdAkU20+pbzVMwIhAN2AI1q20KrVXW356MVu+vivNCWFLA/HKeu29VcX0CxT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrfjCRA9TVsSAnZWagAAb4cP/i/wV4h+xZ7FCAePt+48\ndqjw3AufNi5AyGxaNK0Gejc54rfQirqI53QL8LjYwxZIXkm2HOzXZZ21vGpL\ny4RENcEmFawAmF5mjp/PazfXS2JIPlgjjPhvEhturiGoH69gGrazC6TDO/Yx\nvsx07WOuvO9RoZnW8jo5YHZjYWvfUrbbChL8ahc5HMgMLc4Jp+lkWpfc+Iyt\nbX6POLnN68uWba1XFEOEtlGqW3Zk9OziCwVm8T4pIUB3Caiyh45RwSOMekWZ\nEoWK5Mz852Pfqfpd9fdPnXOA+9JcORTUcsnR2Q4u+AsK+i3kwMcTZABd24ho\n4lzlkgXvBUfQ6r/FAMrXiFOOsj4DhGKIPmCv4VJ7Z3TsSf56rdOo+jWDWZVf\naaQuhKt7Q7DUs7TTIIV/tmmWn+y6UB9Ngx5YsLz+vYsJaMFytwu04pU5PpGS\nGxPUqjhK2/Ik5R/0eauV6aCFiBAXdM5Y/L+ALKsST/cUOKPlrpOyJBJCHhpp\nMvMcwW5Dsx+CSgfGvCqNyYXWi7QTbO0SY6OPmGb9UR2oEKt4FkFEt/7atOM1\n85siIfMQE3NEeEDBkA3yMzYVf6FFyYjkF2F7KzUoQtdML5wnHxplPspFmB3P\ny6OfRnRwQhAu+ckbRSAEeL7VGp0PJ4M6cMbLYcVM9bErIVQpkt3mIacJp5BP\nGPu1\r\n=mgUF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.a66493cd8.0","@material/rtl":"7.0.0-canary.a66493cd8.0","@material/shape":"7.0.0-canary.a66493cd8.0","@material/theme":"7.0.0-canary.a66493cd8.0","@material/ripple":"7.0.0-canary.a66493cd8.0","@material/animation":"7.0.0-canary.a66493cd8.0","@material/elevation":"7.0.0-canary.a66493cd8.0","@material/typography":"7.0.0-canary.a66493cd8.0","@material/touch-target":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.a66493cd8.0_1590081507161_0.2751718721007519","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/fab","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8081a1ae9bdc99d5ca4c912e54cbaafa4cc1459b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.da05f66e1.0.tgz","fileCount":17,"integrity":"sha512-vw9gu1jlVsaxj3xYrbQYLeCocQDhNzb+txfrlSHv2XNlp2NmKeqqmeckNQkEG+6qn+WuXxWbcmILMDsQet6Q2A==","signatures":[{"sig":"MEQCIF3UM5Gb/b+FG9uPdqXx1Q/o/yS+R2bU5nW96o5fnXsuAiAEhtH0GKJv4Vo1GtfsEL9Fc9tZdsu8yi4yRiFGt6yUig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrhVCRA9TVsSAnZWagAAVR8P/R4cI8ldbPEuS5iT2OSB\n6gm8tnXm/MEXX0mvfbccA4Ttz7f2JhYBiqlM+nvitETu/N+TneUtJ1DGiS9I\nUR74ad8hRnj6I+4l7l6BfCRVYpqE8s4MGMbwF+LdM3qTub2SpmKAwYRTifb3\n4XyQjRxDV1KUbYFVfEZjAqKT74E5gtPlBqFfu3i+Yha0c47j+YIU3BswJM58\nXbvM/DD5AGUnyqJyunTwLflak3mMas3fe/RiUmTuCkTWrKvK+hHxcy0usBmg\nWeRKx+UCIh0mvtOzGH02eqJn04RwSUoi9MmKbSkmQjai5Z96pdHRShWoBggo\nRbb+p7evtk1MmUme4Ph5U6hwG5QX/FBClFL3+oAszWe7KpAuaU4jXmopVLMa\nuCAGl9aQaD6IGReWkxI6fDNoFjWHaW6k0z4T13ncfpVTKEsBIKCbmW8vAeI0\nodPvkZ6rQpHD2chQTZBYH6RPIUAZ3qSzlu1+DcJeYymQ4CG82SgTpfnFAV1P\n8fijFu3+Is4VYN33ctsevFoPS9kQlvYqeVifiBJo5nsRrJUaxwm0o994uGgG\nDpTL/t7LQ0Ic3sUvruMzuN5h0cIco4MCh2sGS58isKN8D1l9uy/jcDq2SX4P\nkhVV3P8xSisWGdoxurf+CWQkfjBjtDtHIWyUWum7hHzSP2qKRDDtC7tj4O+w\nHqPL\r\n=kZ8R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.da05f66e1.0","@material/rtl":"7.0.0-canary.da05f66e1.0","@material/shape":"7.0.0-canary.da05f66e1.0","@material/theme":"7.0.0-canary.da05f66e1.0","@material/ripple":"7.0.0-canary.da05f66e1.0","@material/animation":"7.0.0-canary.da05f66e1.0","@material/elevation":"7.0.0-canary.da05f66e1.0","@material/typography":"7.0.0-canary.da05f66e1.0","@material/touch-target":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.da05f66e1.0_1590081621065_0.182702769738867","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/fab","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.740860e78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a11fd5351ca49b1bf9c39bde217c7c2c22ddeee2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.740860e78.0.tgz","fileCount":17,"integrity":"sha512-Fra3w/dRPhYAkG8N8K5PSo+fwcW6hBQrNs7phC/TRBU6wPlcQIWtySOktcGywHnMhp4RuGZsPExuPHQ2369ELg==","signatures":[{"sig":"MEUCIFCS/1KrknJpW84Wt62ng01+7/oKlIE4homkuNoUt56hAiEAgrwzyNhTOsgetwME0WIHIvh/VjpadgZBUhSlGK9CQlo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrnfCRA9TVsSAnZWagAAXPwP/2FlYv60EjWrogEiASNc\nVcL5uJ17hznf1q2Q58qtCOlGH56HO7EWbBUWLSzY8Ikzu1mI++EbMjACEoe8\nSQGbjQvhPZ91daD2eJLeVFk1wM9p4NsuqPd/VueJ+1L3c+0O09xana70I20m\nbQWVVd6BxkZ6mHSJgRa/UOTedRTRwfKfn7e6H4x5iBwRMYF2qw3LxiXOs1l8\nKmKiESLIbL/Wg2I7DE+//DipbQ+W//FDYZW/kkiYBjgbxI/3trSZmspsKks/\nKKWhm/lJnA03bLheptdg96GBv4gB4Ni3Uzeyu2RvuKZbGWwnCgR+GaxdvSex\nJdXdiHCSoTTSg63jnf7m+zDPbuaDfZVyImm+BkIQVWFh7JgKlKO4GtZxJ4lp\nQVnHYPbgGUWx3zcYIjnWkVxf9XEk/COtBTAXhAWzBMmArGguYchm12nO90qm\nPosDqFfyi8YBo2Vg3VGiQjF915r7pY5bKb5yryK3llTQcdQwPtqFrOFZGCAH\nWyb6WB2R8xlwTfRe3GH/FSQuan8jEu3QAZuafMGMb53AAXI9DT4+yaHQ1ntB\nH/HvVcThGmnYdb5jYaRHkZ8ADOzaiezmqCY54eYDV0MXSbiBrD40E41td2y8\n2wTCrvYN0J2RcqCJfok0714nidLqFNM86Phm3pEpOr8ti7YPHzLOEFc6OPY0\ngNbq\r\n=tSur\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.740860e78.0","@material/rtl":"7.0.0-canary.740860e78.0","@material/shape":"7.0.0-canary.740860e78.0","@material/theme":"7.0.0-canary.740860e78.0","@material/ripple":"7.0.0-canary.740860e78.0","@material/animation":"7.0.0-canary.740860e78.0","@material/elevation":"7.0.0-canary.740860e78.0","@material/typography":"7.0.0-canary.740860e78.0","@material/touch-target":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.740860e78.0_1590082015421_0.9064331660740963","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/fab","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e20451a99e6c5b73c0ee7a0ca44c2626d5e74dc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.5cea2610f.0.tgz","fileCount":17,"integrity":"sha512-9p7zBSB41y93/sE8XPFjgwleH7Qm5Ho4+6b6UmZU0BWm6SExvXzHCyNKwqWJQGiLswXyW6mCTYCDEAJ4s05LGg==","signatures":[{"sig":"MEQCIBzyRq0mJCNf1gFmjGqBeK8fU/qIwjbwzqkZ3sePVBSYAiBLN/AUxhzzKSFFkHyg74uyUinBlDwpEyqzuRCcwLlV0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpZCRA9TVsSAnZWagAAX94P+gN6D/sneZZFGNMCxIkD\nFEtlfM1/vTBpN3lC933/IwocUxUc8Ae4NuqzqMtnDzjN03QHrsdYF/CpUcm2\ntYqwL0lYX+kdVjLveEolVT4vkIPqulrO7ceqlabztXOpyitnnpyXNpbJSckO\n04oS0Zob48VWoruL6pGfb0uyKjkfX8xt8tji5FVZD2FfW8o81/0BiIeQB3ji\ncsDBYSU7U7Bu/sBGq/YUU2MJD3PEIXUiMsZeeOHyfG/jpM9PK+eJ3jmel8no\nhKt7qXdq3B3H/BLpo6bShwpSVpvgMip8tng8H1zjzl4eVw4mTAThempHLRX8\n+acsjQdMzBEm2RQUV9u2nQ9SQT+WUpKBrTTkiroMUZA1b9/nPDdoLX8R+mx3\n0i/JSTOtIVFQhpVvVUYGjJE0H+yr+7FF5s9PMFyhTjJsyqVopmapCM0qEsF7\nYh+RfMHZ8Ja/nmldFGiTfIOinCnHGUCBvSm7alzyK1Mq1Wv5YGK8nMcSaXaY\nkcr71qltOUy3HTH8NoJqrHiF+YvOtrqLEy83bgvI2O6JpmvHcdpQmhDq+BKL\nb0++1OGImgyFntAE29DCfBEM4cNjiVqRl0yg+9P1CNHcNLZcfUzBxV9nncCm\nmKUo8IFpt3q3/BSxq2+Q+yU8cbVNJBIixvPTobxE+VruRdfzkTGoSRvLDaVJ\nm1Ju\r\n=YZBR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.5cea2610f.0","@material/rtl":"7.0.0-canary.5cea2610f.0","@material/shape":"7.0.0-canary.5cea2610f.0","@material/theme":"7.0.0-canary.5cea2610f.0","@material/ripple":"7.0.0-canary.5cea2610f.0","@material/animation":"7.0.0-canary.5cea2610f.0","@material/elevation":"7.0.0-canary.5cea2610f.0","@material/typography":"7.0.0-canary.5cea2610f.0","@material/touch-target":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.5cea2610f.0_1590082136961_0.7959211122192105","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/fab","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d95df8b514c6affa11dec0bdd35872b3d034b7b9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.cf7747ef7.0.tgz","fileCount":17,"integrity":"sha512-fPsmv7XUh5gkaSivNVE0tC/8HGIgnBEZQYMGao3NqfOKBlJGPle1MzgtG8CSsDswWYHofCWHYTaTX2JP2wNohQ==","signatures":[{"sig":"MEUCIDU1Ql20BXJSPMJBpVlH8OXeLBop77RQgr/hK5LgNib9AiEA+RxZF3Pb/xOVJZc8Yzk6cfv+APlSu2KXeS2uiVYJYn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpxCRA9TVsSAnZWagAAEoYQAKJs0aRfiypd62tmRQx7\n9yoh+hq+FdPhvO6ok6VSyaqigWInm9BAzsfoFse+pid7jTfjHq5KSTDhFS6S\nyEjaOAVdntjGzpwDmSP6rnxCFq+62oIUq+Ps7uw56hig56YOdu9aZiS5thIL\nwtyx2dkJu4urUoDmAogyQXlsfl4bsxveg3Cw5dFfH0e4yFkocNbAi6peq8IB\nIgX9VYJPwRw0aK5+jlh7e+9efXxHUu+y/MvPng+9A2xO0mwFxK3uArl9lMQ8\n7SicPuPLdZsrOPEywyo3QVfwLmQ1XGoGFuKYq5CJ5Gs9HUE8xuEOn9bOOrqR\n0HpftTPBw/rW1Kpjgjk14tgk0nxnvXMNX+f5uZ5qqaIA46kNgHgmSxOvfOIe\n4L/2MU3RbZp1dNff+Es20kLfvopbM5a0wbdV34x26OvNnsmfFnpxJU0X5gY/\nhcd/gQytYgoR89AXngs/WzMamDPDpy1zKY/s26Q6BsI1B2ii22MBZMLJDtya\nb+50Rlllg5HM4JELYSfZN/qUVbhby9wO1GmoBfDASbG2PwRUL3+UFlvH1OA3\nOinOLbv7XOVDJ+drK7avbVYtI+AoLPOa5pK7TCwfeMiKw0JGp5/JrDXxyozr\n04DU/N/uZtO47PYQXwevLSQMSEXRm9vbNfMm1vVy6HThWp/LtbnUZtpQOzx1\n4Kl3\r\n=NGE5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.cf7747ef7.0","@material/rtl":"7.0.0-canary.cf7747ef7.0","@material/shape":"7.0.0-canary.cf7747ef7.0","@material/theme":"7.0.0-canary.cf7747ef7.0","@material/ripple":"7.0.0-canary.cf7747ef7.0","@material/animation":"7.0.0-canary.cf7747ef7.0","@material/elevation":"7.0.0-canary.cf7747ef7.0","@material/typography":"7.0.0-canary.cf7747ef7.0","@material/touch-target":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.cf7747ef7.0_1590082160968_0.7353150731625535","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/fab","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb14aa0d79156bf5e4b926eede1e972459e86ac9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.862d0d7bc.0.tgz","fileCount":17,"integrity":"sha512-qzt19TgN0GrxZsH+l9ZqE4ffogKDmdlkKfKDGC4nnJBh7tdaXhh7+RlILoVKkaGNchfIV0hcgO8h81s/wy/6PA==","signatures":[{"sig":"MEYCIQCvTU402kH49XwlztdxoRuSgX4/H+ZqyCGo6rn9djKY6AIhAKQaNGLGbNcIIP1ijX6ormaL6oOuI9f/EfEhcQ/RkgGt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrsSCRA9TVsSAnZWagAA6T4P/1K49G//QdOIuAZdWdbR\nWS7vJmbNDhf8jutlgbTqEVGNsdLt755n+oaQu52YTI5OxMM5abqtScpqNxWq\ni+SHAavXxuUobEyx88JNV4SPbckYPcR/pPvgpavlb3uRmoQXMgUbw7tucU2i\n/6Gh6CiP3CxFus1XANebiAE/PkjzqYyFQf5/CTwtVRVk6o75ymUvIaYF+FF0\nDGI9m44MJFwNWOdkeSj/tSbOTFtlNDR/CrxpWz4JizQrLcTVtnCo4fBPrJ8o\nuzC+J78xv9tN/zswpFkcDBXAz1PBKKcL+gbvs/PVmDIPeW53PZ7PR86X7HTV\nhF+YqqmX+RbBA1F/M28J1oRpeym9gox95ypjuYZx6TG6FJk/6YutfKXwoRN2\nKTee/iaayeODrUY0GqLUdWD1gcp9qwU5dVY7twCmP2Vw7+mOFBw+09Cjqvpn\nQ3XKTJJv0lGWmzYuOx1q6Y57o+3F2YyCrpEK21m9345kR9UWcGQLLBWapPdM\n2gRdfn6EQ5GCqFp/6OZJZkuRkDV+HaXJG2VkYd2aCTk9OJR8JnH2PMCLb7Fl\ngfDKIM/EZ2r8hHbUzw4NnAlrlrf2Ee4fQPns8Hd8H9lj9aYQNuF1YFxzB3+/\nsgVa59uhATIuvFqX5XGv7TE8QgDV2i1osDqjxw/0/uRnAlRJnXbUdYu6yoO+\nn8he\r\n=TW1i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.862d0d7bc.0","@material/rtl":"7.0.0-canary.862d0d7bc.0","@material/shape":"7.0.0-canary.862d0d7bc.0","@material/theme":"7.0.0-canary.862d0d7bc.0","@material/ripple":"7.0.0-canary.862d0d7bc.0","@material/animation":"7.0.0-canary.862d0d7bc.0","@material/elevation":"7.0.0-canary.862d0d7bc.0","@material/typography":"7.0.0-canary.862d0d7bc.0","@material/touch-target":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.862d0d7bc.0_1590082322105_0.7027945882763258","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/fab","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"900fc8089bcaa92d717115ad011d17254b45ad95","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.0008c8a91.0.tgz","fileCount":17,"integrity":"sha512-+WP1g5ZM8pkGMXjV7+nFpmKSThd3osNhJtRcBpULYl4F7OraRpAWEu4FvGCUZkpo7zd6yTGdfAl2MwX8nvLsMw==","signatures":[{"sig":"MEYCIQCQPzoq58j2PT27ubz5u/XHfxaZQezRxhKfiuTSslemJwIhANQLa8mFJs+PAnVtb2w2lNkyWZ+U4wi1hfnfSsoSs0Hf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexteBCRA9TVsSAnZWagAAHawQAJAnOM/KvZ9pkKPXcbwT\nojAcUM0o2K/LRobOy7LI4hmjKGMWbs8JkfH5zQqVq36GME8HVm1+lb8jMXJC\neMh9G2SHSDFl0gQuR30cyUkdx2q0kDIv0WtGu4zylOnBB3HAhkBLm0Zlt9Dp\nTALYICuKsMjj8HoGoRVGSNq2ccr/vu8CWd9Q0xYY75a13Cg59J8c5eXsXBwV\nqkBVJW82Mw/cDkNK2AH/JR8Qs7Lo77Q+/eisWsbVA4Wnu00ngj4YmHY5Htwp\nY1ccoywKNlFCsr2jKZQMlHqOurwWWOOUb4NLcNMVx9cuJLAnOPxQOe7af+Ei\n++J4ud9udwHtZ/mzUWC+W78BL16wIz+vOpPArGEWIVJ86UgSYSbfvgcQBdB7\n5r75X41GjxdKE5uXQS++MRWxPbY8wZ+dG45VNNFJXNxwsEVUfLPmQjHjffEz\nBN+TrYMKe6j1zoin2Bq2Xl5s++vZB8pdIIXn/YtOlRagvFbv2WesRrgv1r4H\nc5EEVTyMtmlAteoWQMYZDsCoHVOeOTG+ev++Pf05RnaDNclAfLs8Vj5g+8j0\nuC/nBMcsTZTRvWM8OFKc47/mo4yljmT8D241TFyDEEAXNx9wiS5L9VeYkShT\ncI6F/RJdUILSH5HgvUshdjO4F5Rw53qzGfOH+U5fCZ65FmedRBEkYiNob5bv\nmaLO\r\n=pMLz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.0008c8a91.0","@material/rtl":"7.0.0-canary.0008c8a91.0","@material/shape":"7.0.0-canary.0008c8a91.0","@material/theme":"7.0.0-canary.0008c8a91.0","@material/ripple":"7.0.0-canary.0008c8a91.0","@material/animation":"7.0.0-canary.0008c8a91.0","@material/elevation":"7.0.0-canary.0008c8a91.0","@material/typography":"7.0.0-canary.0008c8a91.0","@material/touch-target":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.0008c8a91.0_1590089601143_0.7120587693715752","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/fab","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.541638fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30331377925d3aa9a57c0d2f5c983591720a6e57","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.541638fa2.0.tgz","fileCount":17,"integrity":"sha512-BHsTAijW7y9EstasgTquNR/UCMRruSvoIy/8ULJAnRh8QOiiiOJoHt9+OsvTnHJgCvVeKQFXy80bxzYvIP65zw==","signatures":[{"sig":"MEUCIQD1nNhxCtIlRAKsD/zuAQhIpsTTzOb44qIjDrf64p0sVQIgcS5Hn2ouxK3UTDmaQWuHlEb32S50qukyQ2rWUtVj9NA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextsCCRA9TVsSAnZWagAAtHwP/AhiSSNRvFxadW2rlgEp\nZynDVnoNuh1W0BTs3dbDiYeqlxxePD2sAP8EK0jmsqbgsV8TRaBDHUyA7piO\n0K4Ni2EAroGaBk9ugTGm41ugN6+Hmm/LHk4F0gepd6705QQo3Fs14dcWbqNW\n75XEaXXhktlx3vS9HZ6YKKJR+2gqLDXKgOFqWGDaUJGf/bEbWuz8cFQczC2d\nIFQT+Jd3miln5V9QoFlib84j0cI5uvAzfGQei6VHXWX0hV/PeG8kkFPrguxj\n5zORjmtL53ED7bwZW5xEWZfEyjzluDy8NC7GESCse62/B3c67HISKlWOfvYJ\nBGIsR7vs8DJ4JkZsGUglCLZrBqwag0vaMML4hUbTCbd9OEy0O1GIOKsgg0hB\n6+wy5Lw5NRX/EmSUOdct2+FfgfBh94mDV+VI4lGFu1FYCtPncTIKnMHaQ7+y\nGCXjEnkHF14KM9hZnjdlI9wfWNwIAMbOa74MNZlbah0HUrxjfkapRKvkyPdt\nxCAbJfa6cf2lIqp1Qan/M8sVRxm+4x9noqn4hERFK6EugB7o4guOGyQwTt0Y\nk0IDUq6QiO7eyUF0FY1DW8zZFsFlaSxnZ8YmhNHQfjvSfWQMyF3WIdLMbR5f\nILeQMP10USyBdQW+0rGi1hyULEp6IteFacsOniDLCkIIj0VtRGcOG0f3/nG3\nYubc\r\n=YysT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.541638fa2.0","@material/rtl":"7.0.0-canary.541638fa2.0","@material/shape":"7.0.0-canary.541638fa2.0","@material/theme":"7.0.0-canary.541638fa2.0","@material/ripple":"7.0.0-canary.541638fa2.0","@material/animation":"7.0.0-canary.541638fa2.0","@material/elevation":"7.0.0-canary.541638fa2.0","@material/typography":"7.0.0-canary.541638fa2.0","@material/touch-target":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.541638fa2.0_1590090497847_0.14501139917575356","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/fab","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.6167cd075.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a1f10e729e95d95206992f8a59ceac1d64b3e9b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.6167cd075.0.tgz","fileCount":17,"integrity":"sha512-vQVfkQZ/4tm/gPVF09s/TzvV2Stx/pT0A2Ju+wXh9GX7LPWJJPL9ubJSlRAvMUmdWdnkHr4uAxSEEEzaxnxgrw==","signatures":[{"sig":"MEUCIQDhTwgBo9INuxD0kYl2zdsVzVPk5zcGpiDojadnUrMVWwIgZoJ46g+rRWUDJLHWJh04a5flKIERz3mzSvwuQ3d7giA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuLACRA9TVsSAnZWagAAViIP/iV7gX9NUdCPMKsancey\nTCM2MUYWnxRI4ft5HrQv/u4uZS+crnjJU1P2aYOBVKc7BOvIpCSclZ1KW8iO\nb4ZmF1aAbG4XDUWGQdMClLv7ymFzmunk9yMvvpFZHnfhR9TVGIsjTeLB+W2Z\nNFIC0WH+8sSIA0LemHS7oEBw/ZUsA6PT7kfWi/v0/6pBVgjfCJJIrWenYn9I\nxZuxKijOqc86p/ZKiedZNtx8XFerwIL9SmpMXmTXwwEe6LhG70W3ZCRXSXGI\nsnZA1DNYfRG0aD1OfIfe0uTe8lpvabAvCS4YQSHP1b9/i0I+cL013JTMFnUX\n1Y5f3oDQZinvB4+FCD8HqqTiaQD0TeW5OLljh3kFvu4CDdeNNn2xf318uHtE\nqAq2PN3uhzhz75hUFO7JVov3mQyBGR+xCwELmf7SWPE4KjS1QNqT0FSBmnxf\nzinbNR0XkuaHUt/cwFPTcwUijcFKsZb49ePWHczG4H4zAIi+4jyRPAwgscz1\n9Co6/b+qoBzLZmP8cxVHlJvqzWOnTw7GS+D/eXQ3jBLqZ1EpjxsLpAYTwngA\nDoSZIn6LlPGJrcr8yfhi9UMWHhVLi0f761y1BfyEAMYYz3u2PaBmsz+VCGGE\nOnR4n2dsbe3/S4nsfenenKMZ3PH1mx9Gp5CHB++PuiB5O8dnjWPezVq8Ua5W\ndPTd\r\n=wm+S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.6167cd075.0","@material/rtl":"7.0.0-canary.6167cd075.0","@material/shape":"7.0.0-canary.6167cd075.0","@material/theme":"7.0.0-canary.6167cd075.0","@material/ripple":"7.0.0-canary.6167cd075.0","@material/animation":"7.0.0-canary.6167cd075.0","@material/elevation":"7.0.0-canary.6167cd075.0","@material/typography":"7.0.0-canary.6167cd075.0","@material/touch-target":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.6167cd075.0_1590092480001_0.8233518414564474","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/fab","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"946b31ecaa7a257d26613dd16f35afab9bdd212f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.863ac1b0f.0.tgz","fileCount":17,"integrity":"sha512-DGBSAC5q4CtpDLHlfdsH4GtkGTeM+ezEIZkIAxHsyPJSnx9Bmp9Ofzfhh/R6FLSmtSVWbelFbpxW+5l+RwXyIA==","signatures":[{"sig":"MEQCIAVJipoijCkgNqwsq0FHcGmrUWYk1wn/NBrQ7cFtNbGXAiAYZWdtFZAZYO85piZwtyRyoLFab7/xt103akKTSJjWVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuvZCRA9TVsSAnZWagAA0GwP/2lu1N94pEq06d8n4T8j\n24GtPm01tDHWlb2Wh3t7oI2Jk3N6JGsUOzL2H9nivQo83A70TrdR5lFWziBI\nrMztZ8GIR3wqTrWgg1yN8/wpVO29/krqdaa/shn7ue52i029OvLe71ZqnQ1d\n3Og0PQBtkUtLSMoRDfUVLNPLoAm0CrSogOVr2tPz3nqiK/IhZ2rbc7Tdni2d\nZZbGmwiqj2V4zrmz21IzIlXfT7Ld9HO4B65j0mzMP5FukhGmZULSplju6b4I\ny+OwQloa5VwAaf4PcTv78onUWfI6qoHWKe8A1BXpnq/Mi+zJ+CPENoYsH9K6\nTiS17lXunqTrVeqki2MOvJVWWcRTrDqMGsdukH68TEOGyUBMYKYJXaMPjIL1\nVHlrub4CFZF2cAk+FjEWBTd4w8lHeAy048aHKMde1QmAtZGEXIgCplTkvZWq\nG1i+FBgQet9PF1lN13gZ7PMUPNOPDO/SkdoftsWMsBaB3JDfWIcfRcigbhNK\nyUGY6K0JEuWtfukpKTKSpQbREXvLROffImwKF3wOXlmdJnhxaa9pozy7qhdI\nmXoxQz4hQReH8nEOC4wn7kY9EJj8SYXOiYoKwbBH5GUR1AY9bm+K4udPplML\nCFTGgsapG4ZEpaL34ImBOy7y4nNMSVNK343F/GjyqkhXdOEpNCERQFF3ZRIA\nuumD\r\n=JtIs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.863ac1b0f.0","@material/rtl":"7.0.0-canary.863ac1b0f.0","@material/shape":"7.0.0-canary.863ac1b0f.0","@material/theme":"7.0.0-canary.863ac1b0f.0","@material/ripple":"7.0.0-canary.863ac1b0f.0","@material/animation":"7.0.0-canary.863ac1b0f.0","@material/elevation":"7.0.0-canary.863ac1b0f.0","@material/typography":"7.0.0-canary.863ac1b0f.0","@material/touch-target":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.863ac1b0f.0_1590094808964_0.5603288831021194","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/fab","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e922e188b71bb11092a8aaa62feea0f16a3820f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.d30a214ac.0.tgz","fileCount":17,"integrity":"sha512-5/UcItouoNGBGRI/F6ykCFEXX4YaXX/D0ld8nv7z32pHJm19u38vsCqrxfX3G5Mif47/nwdZTfOOJvlXhyHJMQ==","signatures":[{"sig":"MEQCIDjbxU7+/RJL3R3xie4BcfF3qZLho0gk7RPaxRwDLDgSAiAHAe/H0ijRThntFIImUbuAsH4wpDNR4hcouHazR+A1Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuzNCRA9TVsSAnZWagAAgAUQAIpzE1comerk4WzsQbyQ\n3rj5yYVW+hprnUF+G+1YuAMxGZepworWgAwpsmNacKVmu+y7zk+iAfn4p6mS\nOjvUPEQ5i0XEYQQ1qGIELv3w4jzCFvJDThhpaQjMjf1Pz0uRb2N1vOChrbDj\ngCxe/NQC/R9oMUttQDPfxptjW5bADS7LdwKonTWIVWRDfPpded89l71llr1J\n/7EvYqPqCAbbx1Kk4M0d/gbhczme0jqiwLJ1a5Kn8ccTmmrC0aBreSoz9P3q\niSq3zOkHL37bvdGPuWiiChMC5mGDW85MCSaZQWTEDdJL2jOJDH2iLK4SJgOT\nt4trW3WL+PNmjh7mz1MJJnziKt8raItzpk9EdQBxNyt4TNK4gTtLcSP+f9Wt\nB5Ew6iciyfp2EL3nWp68na3Y1OF/6S1xLX6IIj3bhe2kgQQmVP1Y7Sb/ETrb\nhAUOB35TJ2WnwTXlEkjoDjKP3wGbdvAMVQplrFGK3A6S5iBQJejI2B54waPI\nIQMqxbdGbT3WgVIMCNdoF/yeJP3BpM7Iy7LHKIgKRykdhQzdiBnqF8hTTH7r\nPRM1T1fualxczKZ/YRSkzTOmgMuXGEmCtE0dJxtxKEEecQYk5Fj8PwwGQfpu\nRWAuP6FmLbQ7f7sao2aP8mHI1oYSFYNOXveFLAj0yWrLmfqbW2jEvT7apofR\nuuEz\r\n=E69q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.d30a214ac.0","@material/rtl":"7.0.0-canary.d30a214ac.0","@material/shape":"7.0.0-canary.d30a214ac.0","@material/theme":"7.0.0-canary.d30a214ac.0","@material/ripple":"7.0.0-canary.d30a214ac.0","@material/animation":"7.0.0-canary.d30a214ac.0","@material/elevation":"7.0.0-canary.d30a214ac.0","@material/typography":"7.0.0-canary.d30a214ac.0","@material/touch-target":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.d30a214ac.0_1590095052624_0.9587957112808774","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/fab","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cf0b0d5957951a356154e255f93de4bf810dcdc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.62abbc8d7.0.tgz","fileCount":17,"integrity":"sha512-marfZtxj7kXFHUIKbyODRjwRTruMKI0kRjqknHddrmpAhlgO5/Fsyswm6LPwFUY+DkVzkVQzIPI1dr7xlD/IOQ==","signatures":[{"sig":"MEQCIDox6j7gnd4cg1v+gOu7bHwWisgJXmUCVhgccxVEKrlVAiA4h1YmYoBNK+Z/V6N//6dp+GGGl9IRptwatWRdhEGjqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvKTCRA9TVsSAnZWagAA0ZEP/jrK4ireOUei97RIq/Jp\ndHRyZ85dAKzCNC2/D55sGCtWC9/jkxZU4Kx2dn7m2KA3WWossLZE5y3Ja/Zf\n4WGHt6rTaJeWxnEIt4oce9kKKB7IiA0RBbkRpIKydzJcbl7mkczQvjpxUfoc\nO+HlPfNpL95TvfXEz6Wax1b++fpG2sLM7uiEKjhSNN8H4XHAC2Gq9xdp/8Ca\neIJabHjWH0GqWwDb/twj/3AbjG7ZzosotDKRov1vipx2XjoP/gte30ueKQ8M\nxHxQM+6K7e26pWJa5YXaStVHhMwJNzdTmJ9eCHNdcrynyQMR5ViiFbJi0pwC\n4Rhwkf/fQovKO2zGr96JaZUajaCloFS7blecgKCm7OjoKlXw3R12GFATml5A\nwv3F1DHdkG6Oh0pHES9SY4Mpq/PmQKdT9ekpzuJQ9bplMXrmh8iw4VNzJe+X\ngaQbWjQr2eeqgUO9+2k5DMFOB4i7nniUwyWsgj8LlFhfM0GuoHIAFjH3mo9D\nz4Djx4B490C12Xx6AGm5SCFBQc2psWpoNW+aFuX7EZyub6/87rxieg+kxKNI\nb33m8GALdIAYwgj87PH25cXaJp50zGp/DzPcpTd6kDQnwngQV8sjwChwL9Px\nNcbwd4qD17jjqaGsUV4oUVDlhRUUoa9vwiWDunZuTHgGpvNtTwBdfihrGWUU\nmSGm\r\n=r+vt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.62abbc8d7.0","@material/rtl":"7.0.0-canary.62abbc8d7.0","@material/shape":"7.0.0-canary.62abbc8d7.0","@material/theme":"7.0.0-canary.62abbc8d7.0","@material/ripple":"7.0.0-canary.62abbc8d7.0","@material/animation":"7.0.0-canary.62abbc8d7.0","@material/elevation":"7.0.0-canary.62abbc8d7.0","@material/typography":"7.0.0-canary.62abbc8d7.0","@material/touch-target":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.62abbc8d7.0_1590096530841_0.16209733113544567","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/fab","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fadf0c42ef689a271ad28ce40d31e056c3483773","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.49bf31d5c.0.tgz","fileCount":17,"integrity":"sha512-Yf/w27Kwi7RqByeSCqy2fERo6Ax9I+nxUnrS+chrSJFdCyIguxZqMiJDIthTCCI3ev0feYQLCF1r+t8lNBXlSw==","signatures":[{"sig":"MEUCIQC+dEf4We19GxGNoqROXfPPPwo6WKcnngxiurm+Wea3XAIgC8O5g+4lVh2xSCx4m4L7nIdPlxoVo0uz8dqr3yLd2jI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvNhCRA9TVsSAnZWagAAir8P/ib+z3Uy/q8I2sivujR0\nLK2eqAf7DMyVpvXlrRAtlIGeJQUIav1oPCqkh+yQtAqKxPNgmJf2HGnnvAoQ\n2XK4YmagFM4Jqohse4UokxggPT72VHAOqv27nG4osQoiTp930DkmLW79Xz02\nx0HWsndEujsJg9tkusqqZWZZKTnRy4lBp6x8VsRj9ZpIBS/2MKuiQRaZx9Sd\niBZbDu+4NghOdpaL8m7Sf0kF8yGC27CCn/N4n8yN882aiCpaqWcysBXC0XE1\nHZsZyusuaDJFeRo8nEnx0f3YdfDBVnouhqsndf3/35bEdeF7CZZb4eo7rYWB\n3b5y0T6Nz1l6pz46eoLj3gypCoD8EhZEegk8cZHAwqrWLEABW58UdenjmLUx\nxhOPlEW5auT8IpNZjE/DBWd+X3fcHJPZtiKXNcDHaZpAAnRKxTBpKjmoeV18\nFaUSNDy/ydul/FzYLpeoPHMs2s3QBN2HGPu3UIRkM1iSwkeWkhfYjzAZIgF5\nqvAE23kekYfpbuUlt53ZvP4WCA7SQUvsqzF/wPQqGMpyIgK/GfpbOQ5U2AUS\n7IiQM6u0OikIlhrTXI1OKGtkr9vRrl5UQRvd5Idx4Q4nsq0l/efYCvC98y37\nrRsZlwCGTw+nWCyVaJScSbFU2YrsEuEssX3DG+gFWbDLisIGJDGGMdVQtpVP\ne24u\r\n=G3s6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.49bf31d5c.0","@material/rtl":"7.0.0-canary.49bf31d5c.0","@material/shape":"7.0.0-canary.49bf31d5c.0","@material/theme":"7.0.0-canary.49bf31d5c.0","@material/ripple":"7.0.0-canary.49bf31d5c.0","@material/animation":"7.0.0-canary.49bf31d5c.0","@material/elevation":"7.0.0-canary.49bf31d5c.0","@material/typography":"7.0.0-canary.49bf31d5c.0","@material/touch-target":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.49bf31d5c.0_1590096736715_0.5244316769094886","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/fab","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b45b5e6ecbc0ca2e205699d11bd2cdce854ef3f7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.8e17857d0.0.tgz","fileCount":17,"integrity":"sha512-gjNjzU0mVe6OgAhP9EnpvdEZBkAfbey8bttl1Grh1GNyD6nOnBXtJfHyNGVkMfmdi/4PmDuNKfF2iPTn5XJguw==","signatures":[{"sig":"MEUCIQDdUPbe9fTTjE/bIA5nK7GdUOzVb5g38uR9pUk6HLok3QIgIpGHbQ8eXQmjL7OBdb5EsZrMSGc83PvX0TplPNzWlpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOZCRA9TVsSAnZWagAAc4YQAJ/P1NfYL+O17kr02G9e\nHhm016ZmH2qahtwh3IGQdQGhpjuFhZ3h4dL+Tq8nY5aGUHY7VYuhdxNU4fYG\n45JisZuoHkZMnZBccHXNhX8+L00AlLGoqf643QFShQVSwmt/8V0ku2NlHHMe\nEppRJgg881PdplNhXcfQD3hBjW6g3ZW57SR9jajiqvFS+InwhOUxS9JN8Kqe\nTHqeZl2cZEVoiIFUzFhT99C4XVxRd/Hp0G+YD+8u8y5jvHAVCqMa67nwg/pa\neko9CQuQg+ouZmNO0+3ZKjC4/8QLh3JvoPG5lYXrJN+zSLCUE4OUZswV0/FX\nNGRJpIrolN2SLYZZmFzZnEX7VOIVCKtj3rHI0Fqi50NACPeu8HjYIsZ+lAbx\nFlHhCagVABiUc0e0Z272yxh+h7/nTHbhLwuijWI3JRwrSdOlZYoHaJ7c70IL\nwfBp03lUA6+EK0Q/HnJCdcnFk7q1vyeqwivvzsaBjxazesvpcWstxH2wUssM\nC0q7zLObo0OMRv20nxhS8hD66uRFpevLMbdx1sgtk5ZB69U43M3aPPbFNGeb\n8RLIi0bxSee6Iiwpk5RJuJevk+Xk0KQHpS44VrJGL+iLU8NluHO8ZDI9KlUa\nHkkeePpQsk4HMLgWg+uJOyC/6/qC1qK9Y48nK+aAFsdSsL9ZqNtt7MUhPvIY\nMzxo\r\n=JBNN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.8e17857d0.0","@material/rtl":"7.0.0-canary.8e17857d0.0","@material/shape":"7.0.0-canary.8e17857d0.0","@material/theme":"7.0.0-canary.8e17857d0.0","@material/ripple":"7.0.0-canary.8e17857d0.0","@material/animation":"7.0.0-canary.8e17857d0.0","@material/elevation":"7.0.0-canary.8e17857d0.0","@material/typography":"7.0.0-canary.8e17857d0.0","@material/touch-target":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.8e17857d0.0_1590096793359_0.011373742999559067","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/fab","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.c113fc942.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e888b164ca16a200b726f4f2c9cd9b027b96fa90","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.c113fc942.0.tgz","fileCount":17,"integrity":"sha512-fUYwYO82UQBJDqfRwU5v6vzN9frTGFn7ozBP4vAi/sXCxnqWHiY1z+lPvLt0YC8RzfUg4uIEoLd1VDSYALo4Cw==","signatures":[{"sig":"MEUCIQCsb0tp7mfuregMZ9IXTZ2W/o86wubUNEO9eT7MucWPMwIgSAIG7AlXnx6OQDS63XLNr7yrJQRiHxzRgsghRbMrjbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwTMCRA9TVsSAnZWagAArqIP/0UAmHIxLLHtdvKYMM+6\nRgHtztwvcexhI0ofcuKKGlNI2u1dDI9pvPoZOuEzjiEknpX+jaNYBhN/oqj2\n2dg0D8uJwZPaWRhLHlr8YmNJoNO3LyVe8omdBXvZKhl/K5ISDmKLHuXM7BXi\nGZNhD1tj/Uh4LArnTuHTWbdI0ExOvd1KJEa5apiz2GA+5eEzz006uMgMFeVm\n2PyfAiyAU5a3MQRlO5z1LAjJ5gzpppF73KQxc4ECNjH4jnvmpRsrXoiuwPt0\ntXzXbXKgaw4f4uW+kv84wD8teVt6zl28/NHIMFxXH5xq0pXmcT0g9poJ0+YE\nHOAiIVlQYhLqTyRxMX35vVMiZN9snvGDa1RnhEd+YXPkR550uSGSA85kOd/s\nyqf4/APLsEiN68+VMGEeRPVoHqazJQBfj+XYaoLp4zIxCN2Sg0LrKWK0fZQa\nTcvmByJ3Y92tHh8qW0GpJKvczuDQqeymYPtd3CLpSorUkWk5LV7aSstcu4/F\ns8JsRoeQ+3Yoe4qwvEQUZWYOJfIpGN2eK5nu3KEzz/WW8O9bUYs9cnRLE80T\nEcDyNgjR9pI+3CwQw8abKEGRfZv1kq6Owz6aswf80FmsVleq2p+8ZfvYBJiJ\n7R+b1D1Xke9R5VHbwQ8YSiDg3su/TITmEzeHg6HaSsCkwsV30c/VEnwOxsef\nqaDu\r\n=cArW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.c113fc942.0","@material/rtl":"7.0.0-canary.c113fc942.0","@material/shape":"7.0.0-canary.c113fc942.0","@material/theme":"7.0.0-canary.c113fc942.0","@material/ripple":"7.0.0-canary.c113fc942.0","@material/animation":"7.0.0-canary.c113fc942.0","@material/elevation":"7.0.0-canary.c113fc942.0","@material/typography":"7.0.0-canary.c113fc942.0","@material/touch-target":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.c113fc942.0_1590101196383_0.23468770490528867","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/fab","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.912d9021d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bb308bfb58249f84b4d9b2f2622f0b3bb0553b9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.912d9021d.0.tgz","fileCount":17,"integrity":"sha512-qa6a9sa1dhi5JmhGjZKhNy9Nxf/6XK78TLH4tc6GWj6zifntYCq1DcjUGXWJnjXu5/FFuv7SBq/DZYqlHvlCCQ==","signatures":[{"sig":"MEUCIQDRpEWDM8SqjJzQmmcTpBG8RsXfDd7YB3a1EMejwE+jzAIgcWUNZvd9eML9MnSWOQdAixzAtm9e2uCr2ZpJi0HjDgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWPRCRA9TVsSAnZWagAAKy0QAJZBF1hm3wWrwPN6+cpD\nS6qQSO+jei4RMnzLFCNZDV0QyWqbLbxBNXVm73bJycle1/9x06a+JzkvSoOl\nAGj+yOORBVAqCGWMbNINJiBaE/w9LtPvgfYN0QKMolEme+o/2M3cKHnt0cLV\nIiUWFO1gJfFmec9ZHaBpk8ycwSIlqRpTMxn6CQUTNIlNBlbSpFUh+YTwGGRS\nUXQ23kqeo6GUzaUC0QJ/UQ/J2PqbPNgqB8AZb2oz1u90nU9HnMCkiEUfbrwI\nsZ2GX3bmCgmcxMrCip1XhgFoGQcFucRp/nR2T/0Vm2+4T4797z14sbfyi0sj\n33ZteT69mhYYh/azEusPfJOfvCwOKKyTS8LdTbdiyygAddJl0pBbJvNVc+xb\nMHI1y9QEKPDL1eSfvLaXYHd6kYiJvnPdt7VNwHqEWCLq2C8ts5t1RjDw6PHR\nRsaLQGpe2akfh2rwWs6xhHfaR94yLReJXjtUD4dS+ohtu4wAkbWFH59eR09O\nTCtYNlnhfEw9PzyEDhU1sVnighGeD8c0JopsuzNk8HQb554BzgJaLyldKVIN\njU38uedUl5lNsaUqB8oAJoAb6a8PBjD5YHRAwmafAyIQvdCLzkuhzF3pr7iV\nq3EEYdocPVvbspMwdG5JvFfeIUPvt0uaEk3j2mVnJbS4n1Y9c8Ukm9/NzToD\nqtB6\r\n=lQqC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.912d9021d.0","@material/rtl":"7.0.0-canary.912d9021d.0","@material/shape":"7.0.0-canary.912d9021d.0","@material/theme":"7.0.0-canary.912d9021d.0","@material/ripple":"7.0.0-canary.912d9021d.0","@material/animation":"7.0.0-canary.912d9021d.0","@material/elevation":"7.0.0-canary.912d9021d.0","@material/typography":"7.0.0-canary.912d9021d.0","@material/touch-target":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.912d9021d.0_1590518736870_0.05512511154168287","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/fab","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.68a2af131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17dff8c45ff4d121ca88eeaed6496acafa0a8539","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.68a2af131.0.tgz","fileCount":17,"integrity":"sha512-6LCz8WVp+VgjinbsOuc4kB5Afu6srATX4CVLSk4ka29D1EtVaobUK0FgIv6E0H0RnkT6O7EKu402fhaPuEOB4Q==","signatures":[{"sig":"MEQCIEcvfBzls2Zryk7EWUhd/oBU7edntTQMnVtB3kMVGZvpAiB3lUap8f+MR13Fi2Hcb5gRGzUtGYudWDWBBWYblBwO7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWkGCRA9TVsSAnZWagAAjbAP/iHjvolcGutBDAXMTd69\nl1HjhCoLySO7bX0mWBYll5JFtnWSjj1kNV5Aqzak6OUVut+TJDQUL0TJ5d6e\nluEpM0PROm0bzXqqldJkrAQ4e7NF5r1vCkpM+XkggE962i1wa8MVEyXz2R0A\nxYe1Dx95x6BzLMeHmWA/m3wKM4aEVo7VeJiAd+XD9U/DUAWamPvxaDLLy9Le\nd7HTMeHG7TNti34A/dkbcb60LFlX66ECzz+4BO+Il0PUs2YbdKVUdefB06zz\nVaVX2XgLtdCVKVjTsV+MuYgq20LGLxb/hsB97lQtL8rtF74b6JNcSg6Y9ZoG\nhA5szhUwySTvCR+eAApMX1rtqTLkodBwDsOX1DWQ/U1fEa1AJWXe72OF3JYZ\nsYAD2h3g4LXkmY7ekiAI89ecwQttR+cXIfBEi6GKi7LskMfRTN9x2dIEVPQo\nV3dDjHsOzDOKHSKfbYwdMsW6ZxKCOM4Y3aqdI8vpwuenS4hrMnuD06DLR9A/\nav+INEClR0ZAen6MdPTcUdKneJMgN7RsIuIYJ3tmsvSolz+J31uUVXebitcn\nHl8MqZNPmeOXEDUZax+dIXfqPanuBciX4uu9RsN0JQSVn6rYnkhMp5FCQBTA\nR5ZfeVthxpu//dzjhvQxuCMelWoEF6TsqwgiR/Lgy9eo77erQ+aELLYukzeV\nYySd\r\n=UJ1q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.68a2af131.0","@material/rtl":"7.0.0-canary.68a2af131.0","@material/shape":"7.0.0-canary.68a2af131.0","@material/theme":"7.0.0-canary.68a2af131.0","@material/ripple":"7.0.0-canary.68a2af131.0","@material/animation":"7.0.0-canary.68a2af131.0","@material/elevation":"7.0.0-canary.68a2af131.0","@material/typography":"7.0.0-canary.68a2af131.0","@material/touch-target":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.68a2af131.0_1590520069569_0.605140329736962","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/fab","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.01de07011.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d3874f6ead18e1a1a60c06800b919853ac23618","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.01de07011.0.tgz","fileCount":17,"integrity":"sha512-6z9Mi7408z8HyAu966XhJmm6bPMNvnTt7UE/dtzRoNuuNK3dXDfgqO7YKeuKivjN7QB8GQWtrwyo+OlSAodQjg==","signatures":[{"sig":"MEQCIH9HcpmxVje6ZHaFsKwj8gc88UYgRQfPQ2OgSC2MAQm9AiB2nTD5BTpx1Q3lI8LReMeCpb/F2yrTCUUofTrXQN3AYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXOSCRA9TVsSAnZWagAAu8AP/36v7Zm+CMkKW/DwTWLo\nGv+VDFsWOwi/z17is+ci1mKniY2VmGLbOEABjShM+Jtfcdyucm96Y/b8PPZl\nNeoWngnjQKAPJXPhN5cnuNMKHx1gku2hbCTNwm/BQ/tvERZMO8u55Cu3K371\ndNJLK592Ne+bAFdEFYkjdAuooHnBF/YTBKLvO2/G46blsvxeGNevVJWyQ/ur\ntVRsX5GylzBobuHuSdBBMUkC8yDA9SpLVrbgVc5NfCCHquZCGQ/s8OsNEeLS\ngCxnMM+yh4b0NPz9mvzSFKKaTo5TXRrGW021mMAfjS0mIYurztatZgMfWyzR\niDgO1pukapgZWitjxlsVSJCVWW1mq6eKwPQelr958GFYvKDqo4FOi/LwMrSX\noTqscFcxBX7eKdH6kmj1CKUwyzwys82e4M43t7Ko5q9u2MejJ50Ro2cXrNLy\nHL0wwYvwhKcn+PZAzvU3xadQC/PXhcu8JHwawS5KCnVKm/ZmpYNmxCvkq0kV\nlzxUh9vMfpYpyJNIroWIiFQQQ0c8mGIZccStGUIo4fQ3EvCMzxcqGh4+nRYr\nT4XBFataq/7texCiTEVYN6Pv6j2XpdVvJ/Ug9dbc+z9B+pQMSI6jAM+8c5pI\nKnMq/azHmyUI3wS9C2uws75v2HOFpvpPWNfR+gxyFuSrcwmtvuJe/Ksrcrz9\nTR7R\r\n=2Dd4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.01de07011.0","@material/rtl":"7.0.0-canary.01de07011.0","@material/shape":"7.0.0-canary.01de07011.0","@material/theme":"7.0.0-canary.01de07011.0","@material/ripple":"7.0.0-canary.01de07011.0","@material/animation":"7.0.0-canary.01de07011.0","@material/elevation":"7.0.0-canary.01de07011.0","@material/typography":"7.0.0-canary.01de07011.0","@material/touch-target":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.01de07011.0_1590522769694_0.20750393606400208","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/fab","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53a1316a0287cc83e8a7831737536478c155f7a3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.51d4535fe.0.tgz","fileCount":17,"integrity":"sha512-A/A2nUipn6mTU1c5stxFZOqIv0CY8Yz6jIRwME2y05NmP50Wjlpwm+qvSSPEpSZWfDbOv3qtlczb/fnvsPvSPA==","signatures":[{"sig":"MEUCIQDfW2XMasnChPEaUKIk0Yd73l7SKiHJYmlTtBsF4tfMiAIgbcafaBqr68hYH+HFOncdJujxHjfSdXDi5jk7CKYZ5KA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYuZCRA9TVsSAnZWagAA/MIP/3HgMSTWFq5iVDAS5P6v\nMVemkf1MNiZ7hRAJ+l7Tr+Cd3l5B0zbEXLuleUZwvaUC4a/jeEcS2qmdol4k\n4+BQVLWaSo2LJkuu759+IFDbweb2F4MNOqiYzb4yic7CGIh0xRssORpVpxOf\nxwqKB1qyS49lQsYnsZ+THAV2+mM3LTMDEbVdGfI6/ln4GzY+8JzIM+uwPKbS\nsYWqOBIALicVWTzgmo7NXtE6DSepMTA8A6RxX298ryXu/hkVtCBMBt2xh0RK\nnp/9mRYdJYqlVT6gE0sKKfj2KgskbbNzBvA0QeLHzsqnp5/vR/OmMZ+FAZtK\nbiUKh/lNbpwsNkFkov/YeYDArZvhAa60FSNfZRaciDEUlxrOEOq+Nvg7GXk+\nOBrGZ8ENRVh/9LmhFUVLAJaJBsTlHWzOYH9iTjSW5RncpK5nUUGKjHBjycJ2\nVyeuFY06T+mMb17120Ddy1Fw6zs8ZEOTIo4RgtGWygPCJ22ZmGQ/sn6RN264\nos8TcYYMGJSSH75ML/iy5cQebMtvEotTCKA+VYSqYQNh4wo+azxiHt0IWrte\naxOipoNJdWCfEnD0j87bBGWtDGJHtAWvD8BtaywkywDllQPkuYhg3/56vyAn\nXkkj1QM1zX/kaPIXGWdzttDZDXYImJbVTizd7XG/DQGWliE7VWjepnPPWhCr\ncdv6\r\n=138U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.51d4535fe.0","@material/rtl":"7.0.0-canary.51d4535fe.0","@material/shape":"7.0.0-canary.51d4535fe.0","@material/theme":"7.0.0-canary.51d4535fe.0","@material/ripple":"7.0.0-canary.51d4535fe.0","@material/animation":"7.0.0-canary.51d4535fe.0","@material/elevation":"7.0.0-canary.51d4535fe.0","@material/typography":"7.0.0-canary.51d4535fe.0","@material/touch-target":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.51d4535fe.0_1590528920915_0.45190883700250195","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/fab","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01aae5a6e0079a3d20ec81c52d539606d1d1372f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.b86d826b7.0.tgz","fileCount":17,"integrity":"sha512-/g0Lkpd+ze4MZIn49JzyRt0jMJIstL8QsQ9bK7S2xwNriRQmvWLu9hsPl7DS86ZeZFEXDO599QOJSxc9vIMYzw==","signatures":[{"sig":"MEUCIQDPGtFjkPO5pLVg7X3P4i6f28UOdaVZo6b85de3IM2QpwIgf7b3XpF15xqcCbP8iCttUPpQWNh3BFqRJT60NoZdiiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZSlCRA9TVsSAnZWagAAv/YQAJ9QsaFDYOQAHmcUT5DR\npIQeWAwBiRMPBHtSemtsHthMryQEpgXuykunjn3RE4uibOv/ht9lcddzdbOn\n6rt7Jj5br2u1ZHOtlgdK1alBVzWH98MghiTm/52UaFGVMSQKCXfHV7ni+eqB\nTQIlam6Jm2zvVSohGPgMONOY2MkmtdZ2nzpNo+KzdVao3rGiVJwq3NKyJSL2\n11yYTVu+JJ+zjo6iTVQthyCliTXJIRyjlmsodotE1pkJpbnMUImB/ihXloFr\ngVfzWtJUE1cbrj9TxcwrUy6Ax1pQ0oLoYowuoCrM2GETVLaVqNUF4Izyeip5\n9fnqvmPrTQi90MqytxHNT4JRvQRPqOLNX0yEg3FUrlIUceopJvjb0Z/Qse0a\ntlmAv4uzrHaO3/hxc6WJJAKdGW53N+rA33go2jq8zueSgQ+iRX8KdziqPTQU\nP1y6HKCuLh6yaY0X/bZOpJEIhUBXC9+fDgGEk52+sT67dcXwr0V8j4MhsYU1\nsv76JIS+RnoX9Ze18mnT/NjCmNudVU9OasA06ST1RFGsSg+K1UpVh+yzYQ1D\n48ELSyr1xAtsHOOGnASRhHEjIfEKxC3IgefkjoWhlxDQmqCDJBev2Lc0exOV\nP+nBRvAxSUXC4pUAdQbib2jvZMwgzwj6s3xd5WWAIqYvI8ebscQtL7zZdW3h\nVpP+\r\n=/rtM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.b86d826b7.0","@material/rtl":"7.0.0-canary.b86d826b7.0","@material/shape":"7.0.0-canary.b86d826b7.0","@material/theme":"7.0.0-canary.b86d826b7.0","@material/ripple":"7.0.0-canary.b86d826b7.0","@material/animation":"7.0.0-canary.b86d826b7.0","@material/elevation":"7.0.0-canary.b86d826b7.0","@material/typography":"7.0.0-canary.b86d826b7.0","@material/touch-target":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.b86d826b7.0_1590531237026_0.3265597995656768","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/fab","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30e2eb5b063b034e765d67379177323262b93cb9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.d91794c7e.0.tgz","fileCount":17,"integrity":"sha512-d79UlAcSz3nxyXJFT3NFobY0uioAzvyF5fdjN4QJ8UZMSm5kZuq52oqizLvYt8HDS1wL/axoe8NmDF22Y0ez8A==","signatures":[{"sig":"MEYCIQCSw/AaMmEonQmzZpJzbJCE4yteLUe7LD8w1i4XsMz23wIhAKxJFbgM5umvX/huim6LklrLMr8rHQvkKqd9HxYTlj69","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaxcCRA9TVsSAnZWagAAKbkP/3jSn7Zl1tFFyn5GwcKs\nHdoZF3NHUL4A0aYbbZFbMijuOg3tU1fEbqcWnaq3Lm2fPuHjFmHNvG4WriKx\nK5EADMwXVXrb2v/vvx6pcfe9ilwFtKtUe5W503z9xeC3DaJKoU3i7s1yYNOY\nxXUY02G7Cgwsw33i3Hpg1sIHdiYJU57wzJ3YJAOxZ+uPUaKSKjwz78nXWeuC\nnUEF0k/6idp8p3xPzhLeGnDpOExaP9Qmv77BZrPmKsndH9g6aToEepEjH0FK\nDblgvBlfGJfFkm2YBDkMO7unLmZdFUgnLDoW8Uz+38ahOT1rhq71cUsJyEfW\nad8H+SPHrA4QTNiHFsMZVLIwQN1OfkaZnsryrqTeBp52Rc6tKiyDCBW1aXvF\n8tZXNVSbMBv1KMQp763xvTbmwoEnLxQ1JSHzZkPr/ZaJAuOzzSU2T6+eX4/P\nnPC+ecTDCwdwM9/lMpSq3RueDGrrHGC0crrYRPwWNsSw9gCt/U/2YVJJSAVC\nZmH9cSX3jYECtnoQRqJCEca8yd18j9AQrHBmIKtpPXMNkd3u23pCiUtYdEau\n4Mfbhwn/0UyebrcAKCsI/nqik7IISEJroRGXlMYPwfNdzLfHOF2ZbNTkh7QC\nesg9Uzd92iuRnZp/oTOIUiUufFL+XpxaCjhunzUC8vplImxLSP7oEzTJRq1v\nWysC\r\n=3fDH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.d91794c7e.0","@material/rtl":"7.0.0-canary.d91794c7e.0","@material/shape":"7.0.0-canary.d91794c7e.0","@material/theme":"7.0.0-canary.d91794c7e.0","@material/ripple":"7.0.0-canary.d91794c7e.0","@material/animation":"7.0.0-canary.d91794c7e.0","@material/elevation":"7.0.0-canary.d91794c7e.0","@material/typography":"7.0.0-canary.d91794c7e.0","@material/touch-target":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.d91794c7e.0_1590537308107_0.09337940814358303","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/fab","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9efeb9ed8d6723d586a82c7e5dc7c9a0ae3537d8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.8c6d7e076.0.tgz","fileCount":17,"integrity":"sha512-pWdlxqU+QkfWprX/agA6jJDEN1VtVj4dSniaKGK9tL3z32ZANY55NL83NGuY67kbGCyPo44hMSyHIjKSL3eakQ==","signatures":[{"sig":"MEUCIQDvyhEsdXUKG3FUkMxWBczJFwEAu2WCYrAk/78+lU/zKgIgNyLxIAgKOx2nROQGT5CgwKcwOOkoA3afcyd+T9bZ7t8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezriVCRA9TVsSAnZWagAAmiUP/RTOoHqNMylDujY7lqYS\nlr8jtc5A1HYSpLdmKIUuyuhSw2cGJWnGHGuiPzb7AWfMbExkQttkffIHf4cY\ndcOQA2zj/GW9BoLGpOE9za/Bf0z01SVIEw2fuPlNkK+sQMvG7s4gwdeth1UG\npvs+cwjAcsKoJ2AJaXSjDa1le4t5uTe+qzi0XEtLHwV0tRs7bPXdRzoFRKKS\ndebY+rgfFueHC+FuPEshoafwL6YT3/viewPT7bV2bFkhmUt9T2QIRx8S11ZN\nHFajhp4b2I4qvx/Ipe7MEtPFvxs7T81Ep3pMtxP8kYB8qXsc8zN3YQiLaVmB\nD5N+wTN0Q3ktNvLrW1tyLROrbLFVzYfj12zcrJ41FxnIFHSz41s9BDeoCfdO\nZust7IPzgy/05MXJjF3Lp96jizQ31muUR3NiRuERnLF6f8pLbRvZZreSmewe\nKPZyaJAWMRI8Ru9r/hDyITN9caIXr+4qJFwkTG+haNiaNAqN/waB15yE7Tw+\nU/YOmj6BPTp9Gl2PSi/8twuDOairaiEvsW15rLkkeThdCxfFH0pQfzNx+ku8\nieeCiM9L0mD8UAlWWggVLJoaSApedpr59qpElY1rszav7Ncy8vv4TvaUB14r\nKyFLKsUnxq95BRk400C9+vxeSBzHCCYA6uJmYqtNzyf9c/UZWSB1HLfWeW1R\nCatL\r\n=yLeV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.8c6d7e076.0","@material/rtl":"7.0.0-canary.8c6d7e076.0","@material/shape":"7.0.0-canary.8c6d7e076.0","@material/theme":"7.0.0-canary.8c6d7e076.0","@material/ripple":"7.0.0-canary.8c6d7e076.0","@material/animation":"7.0.0-canary.8c6d7e076.0","@material/elevation":"7.0.0-canary.8c6d7e076.0","@material/typography":"7.0.0-canary.8c6d7e076.0","@material/touch-target":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.8c6d7e076.0_1590605973242_0.9207375082198614","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/fab","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adc5f6994df1355f4aa969aedc95fd43f13ad5f5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.5b5f62f93.0.tgz","fileCount":17,"integrity":"sha512-onVo9hQe3oSYhx6KkkSsuNoh1ibZJKiEgG2ZJu7wuChjGtHaNv4jroqewa4uI7h29BaG1E7q+6fzIG6Perc3Fg==","signatures":[{"sig":"MEYCIQD0mA4j8eKVtHR5olMkiQa12yFT9D1XDTw7npVU3/fxKAIhAMoXdzoaLFtxILjE6USOnqi3VzbHYy5t74kC+/9dH45J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrydCRA9TVsSAnZWagAA1jEP/R/C/e53hSYWAesU84EL\nhRF7VSHv7m3xLZs4PI42J7jq3Hn8no1yFBVhve7i/wtGIMY5zPXI1QZlAA77\ntQM6rFU8h0ndVhf6E3oF1xLwnWH1kygfgRE1XlkZaaImYVj/fy41Hgp/wYdR\naBzkhU97F+ysnMmTpubS45/smiATPBuH11c+1vqZN8zcMBIc2ZOZkeNWc1vm\nq7DBaLS3rJXWnDxpKh5UzFAM2ASYH5i1gia3U2RnDN5wuQRfPicyzJGnvDaT\nuVDOIejAp6I3JSddwkmBT34En79rqMbSiCEngDa+GPgojJAssc/DNMuioqtm\n54FTdGuXfrqWJAqBiE+W1xaiC38Jtf9mGNX0QhFLSowwa5enBd9/lCqN7w8B\n/GLmEoIeiEkI4LudN+KpkJGQ/M5MdsWYB5iKcjI5pMehBsikAM2c6O6RgDfD\nLSg2856NITFKKVniMmatD0zZqfwvA4YNgvq7k9Mmx0Y5imneexh+5MkgKDyU\nCofyWqJzjYF8MGa+Bb46MqgAYuSgRP11lQZrQBHvI7w2kaidIgILKT79dNWm\n+Rg5tILx4OC4nu6H6XdkzosRLWi0p1RZoO8UbGFDqpbDbYfZFhjPNEIXdtc0\nMl4Glse3UD+NfpLMw0d0XubWOTwjhF7ObV7nhLOijMd8ZyoLn9ZbWx2lLjkm\nVhXm\r\n=US1Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.5b5f62f93.0","@material/rtl":"7.0.0-canary.5b5f62f93.0","@material/shape":"7.0.0-canary.5b5f62f93.0","@material/theme":"7.0.0-canary.5b5f62f93.0","@material/ripple":"7.0.0-canary.5b5f62f93.0","@material/animation":"7.0.0-canary.5b5f62f93.0","@material/elevation":"7.0.0-canary.5b5f62f93.0","@material/typography":"7.0.0-canary.5b5f62f93.0","@material/touch-target":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.5b5f62f93.0_1590607005015_0.2814162879735316","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/fab","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d97fbb0746b5d272469e77bc33fe3900d7d99f5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.d9972abb1.0.tgz","fileCount":17,"integrity":"sha512-lr/DrbSoL312pCaneapsnc3DGH239iwcr/Yb9P/rj0ZhV0Unx7W2U7l34pO+qDePa1icnmSnptNXzhMomMisvQ==","signatures":[{"sig":"MEQCIE6GiH2Bcosj6KZnbpxQlw6PRV525zajSWoc9L8qT2otAiB7RhPQUNOkfsew9AgqMy/Dk/MckIX7+391X8jwnwXBww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsuxCRA9TVsSAnZWagAAj20P/2Ohoh5dGSXUXn1Ht2cw\noACRXribp0CUqecA90wlXbM2uJfb7LwVaOO0ha2po78k9HZZiFu4KmT2v15F\nHiXQeX6D9W1R6qNSfUnhi2RZWP8SxTxEAco3SugCoN/LmFYrYYsJuCZ+op2O\nT/qp8BABCvCYmH+aGXieRAW3ZzHIYmuPNBhgwInmjT181uqrN8kz0ussSSEZ\n5u59Ct9T+9UonPwkMbVRCJf98tU1oX9Ftqg7EQp7C1wGDomlnHOhjQ8diUsx\nSZCAAoRFA55ClSsGsVx2JLL7QKN5R91kAFgKd1k+3VtplesEaJIl02yENSu6\nRFq8UfU/psr4zaMgmrhSlkLpF+P1NjKzduGBFYbKxWMHyHDIu1C80oy5Slmp\nOv+2d/CQNfsKaZcNlLJfoO7JmjlR5hDMiK77tA0d7pmxIXjnqykoZKOCgnDY\nUWXjDjrnLXhA9zNSFa3+VcwXUIsj2eV7SJ9sUc/45YOhcE7zu+x50XzWAeRf\neubg5Ok2TPz2H+4oEkKQLfiHPMzUzZ+x+2eniSeJOTKOBqdICC4Bd6Bz0dck\nT8gdVkj6pfgooN6/60Qmu9Np1NXhfVlOmp1Xu8Wg8vmNZ7RFFOPfXmFAZkBt\nyl5H1zcp3qN7rG5aUcy44sBEjHcCirljhN3QG3NaT3Hr3PusEebfAbnviAq6\nOQ4G\r\n=cdIz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.d9972abb1.0","@material/rtl":"7.0.0-canary.d9972abb1.0","@material/shape":"7.0.0-canary.d9972abb1.0","@material/theme":"7.0.0-canary.d9972abb1.0","@material/ripple":"7.0.0-canary.d9972abb1.0","@material/animation":"7.0.0-canary.d9972abb1.0","@material/elevation":"7.0.0-canary.d9972abb1.0","@material/typography":"7.0.0-canary.d9972abb1.0","@material/touch-target":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.d9972abb1.0_1590610864781_0.4163668641256739","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/fab","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e67186d99bfc47563db0a314f99873faed25def4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.6556eda2b.0.tgz","fileCount":17,"integrity":"sha512-H0K8TzD75jLj1rdNM6lbVmyazqMsMEiejU/gIpUebh2EptHXq2PlDcMtYIzOSOtMoZ3hzmuNwofIvKB4eH0Gdw==","signatures":[{"sig":"MEUCIQC741etOFerb1aFva1aoLHYFchbgita/mhf5jD6KjRX8gIgIio1s0XnUHmi2RfFOvA3in3YJ4YqkOq88ud6JiReuag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs3VCRA9TVsSAnZWagAAVCcP/0FACn5ppMoA7dekUECB\nfG5gFegLPGksltvgadpc29/tQoharwolBtSj35GZ78vmosxKZu8JBPhlfgWv\nh6zgkNqU/fkYFxlQXJQjrmVxaggCJoAWFM7CnAHb0d3fbVTkSAoFfLAUbCUq\nEwiXobj1dgDGBQ6KeIl6HKDpTCFYMKK7/wmZjr/fjqC2zZVEK55lClby1//Z\npHvzcsGhVv9VhQr5Wcc8qooSCQ0B7SfmyKZAPElPv/HuPFljLPu4CEN905XU\nUjuQYu6k80E7opQYbarZBCUY9xbuL5fNCLW+3rHDR7GytaBqFEFfOB/a/9jW\nW+0+1B7BwU20+J9584FR988wp24K1Yml5epePwfvJMeZlviMRDfU/jzThQbQ\nE9q6VACQv18u7sK1uf1Wx8yDJIrobvTILrDkGGtXLoEdQkD62GiIz+3tTbeG\nlO+G8pRRuDP9BqqYH7tQ6/8ifN9noVT7DaH7idjjUJEsYMAUF5+FCEthANLb\nb47TWy1Lr3rsKUWskrezBoYFD+nBg+O7SwE7upGoDmqTJeKh2pWgGGKd8yle\nXDuRuMUq0u6hwsdFUqfu+JuSS5WrV1548LZKjGoD97JTS50mal4UMLtLudIl\ngDQSrIvtVIdjRtqEQsRg8rcMlK3HG+CWZYnHeod5wIcF6GPuSjSpAgAtVzZm\nTQzK\r\n=UJFb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.6556eda2b.0","@material/rtl":"7.0.0-canary.6556eda2b.0","@material/shape":"7.0.0-canary.6556eda2b.0","@material/theme":"7.0.0-canary.6556eda2b.0","@material/ripple":"7.0.0-canary.6556eda2b.0","@material/animation":"7.0.0-canary.6556eda2b.0","@material/elevation":"7.0.0-canary.6556eda2b.0","@material/typography":"7.0.0-canary.6556eda2b.0","@material/touch-target":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.6556eda2b.0_1590611412476_0.9684593176168419","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/fab","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.32aa23641.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"534e01f5b93574b694cb5fd33a88c4bc2ce91416","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.32aa23641.0.tgz","fileCount":17,"integrity":"sha512-EnT2hHHGlgDsVGmbdLc+m8c5RQSxY+MDiiFSA0nvnVvV9Vui/JSb27eiaI1mThmw+SiVVnSfpFGJlFTn156ZRw==","signatures":[{"sig":"MEUCIBtVp/e9Vhugxj8io0hQrOt6/gXjMLqQB1u+j2b4p5wBAiEAs30Dlx1aWTU749xm7AzWM/+WeKAe1Ve/v4hlTNb1OYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt3VCRA9TVsSAnZWagAA48cP/iFgm+xdRmDhc5vIsoso\nhxoANywi0Xlz4xPN7pojD+GZHvYYrQS0Stz45FVBaByrgt/3IddiMhvYueQN\ngKXe1/eXic9Ci08x37faT9njaHPb+OZIN4nHRBzh/+JArUTgnLwfVQOm8mdB\nlgZChz/B2OJqKdVygahWfvg63bO282BAjSUYv2cNqvPL394eEsroKyqz068O\n6aNsP83rGZPLt6F6nzPI5XbORaS2C262zV+6M5fXYsztJ/KFqAfHVQKJfpy2\n/j7R7yfxfVLD/RrluoX07ndXbSEzspCsc6lIXr2yv3+RZGQyOv/m0DvwNqat\nbDo2Nt+EGuRE2z/gR2Bh8+pAlJ3dqNf3B8FiKUQlyrWG22VOmJnUraWq+LAG\nMHzagyEaTSje+oop8Kz0aZiu3v2MStHoc0Ohls7ljw+gKHm7EWH68guL0ozJ\nWapaAz42xf14PaCUo/4kFv9PI8+sC7fpLCQN0/treiNwTRfAUyVcZPwS63kr\n2WApJhCzkUNKcgZOjSZ3DgVZdZ4xlHd43ESKjj95Yo4o81PoOjOYxwRH0XYu\n7IStzDgUa7hiYh2qvZwzJNeyhw9Wgyr4pfsNcuF4hxei8b077NqkEQM6chPX\n45Hizw/+8n052JOX3xcfe4Qc9LxLG6pvLqQlVn1N65GyUrktHfB/rJsnTJbi\n3Gt+\r\n=5XtH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.32aa23641.0","@material/rtl":"7.0.0-canary.32aa23641.0","@material/shape":"7.0.0-canary.32aa23641.0","@material/theme":"7.0.0-canary.32aa23641.0","@material/ripple":"7.0.0-canary.32aa23641.0","@material/animation":"7.0.0-canary.32aa23641.0","@material/elevation":"7.0.0-canary.32aa23641.0","@material/typography":"7.0.0-canary.32aa23641.0","@material/touch-target":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.32aa23641.0_1590615508889_0.8378629745249744","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/fab","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.654934dfa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0ea25fc51a0c0dca7820e677bca03a5bbb4b652","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.654934dfa.0.tgz","fileCount":17,"integrity":"sha512-Yf/00k468iorz7Nz5alsx0ig1Z9nYAZtn5sh74+oG9feZH8NmhJJiRN+Eermz8ECMdAZwKtM6HQvRq8SLSI2rA==","signatures":[{"sig":"MEYCIQDmkwDZxixa7WkjC1IKokMhS9S9sA6fu+b/UJMmuCTRvwIhAJmCUhxNMIPqNHgr6YlMUCf496L+KS1f9Btp3v62egCZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwe3CRA9TVsSAnZWagAAMxUP/icfPw8iDlRDtjfANtQg\n55+6Gc9njEA5oJSMNmJ1aexEB3X7YCFpn0KoouWgFJH1/Le5hOGhgCrK14rI\nDEs81c+kLrrE8yUlhZJPfr1MZUlULAB3E0OEIxOmb0YEm0AKUigkcFpFFFl+\nEH4ZZWZsTyW3YrSHrmhDYvd32WwjobtfPgU4ejZJzx3gNX9Lah0LrD/kYxMo\n0ERN4mhgieKUTLPabTQF4CB/kW4MwXWb8E1au6YWu1ngB2wlUcKt2XHP9V2C\nYMM4KLL71rBDVsSmsW5RXqEzKROW0UDwtlfezCzMl20QM0EA/gYv2dp+Rmbs\nZFiK+NrFUpG0IGP1EZpsaVND2F4ZNRl7OWeKEKv+GvYAiToUIUF4iin1BLNz\nY6wzIvk/ttStEpn+sMhk001CpzOgLf2uOpeDX3KYT175QH1TolmsWDU/IGzb\n1kNhZ9nHL2LiIINaZSs7R/lmdOaM90RlEoaHfUA/bVeI2BwZY1KSgjO7oPSj\nNGTSghWDIy/pm+i08ir9dPwZKamBV0E6hILwvRg8UjHyRnmR47HIOnHYeBB5\nhEnDuleZ7l9Ad8nbKgfCOiETYoBygwPuD8moDyk8i/cugnvA9dtABfpIuF2+\no4drwGFt/FRvPi92q4xjWUgX5wY4C70ociPl6/EvVf715eSp7GdMiO2/ZBiV\nTU+0\r\n=3goG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.654934dfa.0","@material/rtl":"7.0.0-canary.654934dfa.0","@material/shape":"7.0.0-canary.654934dfa.0","@material/theme":"7.0.0-canary.654934dfa.0","@material/ripple":"7.0.0-canary.654934dfa.0","@material/animation":"7.0.0-canary.654934dfa.0","@material/elevation":"7.0.0-canary.654934dfa.0","@material/typography":"7.0.0-canary.654934dfa.0","@material/touch-target":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.654934dfa.0_1590626230342_0.546774084086306","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/fab","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b5513edb5773b9bb0b7d03588b0a763aa000bd7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.41910b8b8.0.tgz","fileCount":17,"integrity":"sha512-8t5xBdfLECeTA+T9pbsJRJ+SbPlEJF5ZbEpZBIm6lX8jqDOpGSvXpMLcOa4E4I5nlzoOLhv2G8I64snESbrm+g==","signatures":[{"sig":"MEQCIFk06yM3V055NYtr7p05Fb/aIYj3gp0Quz89lii+nD55AiAihdSRer2N99xrELHxmcECu1XWT3tk2Tm3SjMqSzzeMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwsTCRA9TVsSAnZWagAAdTMP/A/wLhy/cjy1+/uYMa5E\nriqEsAqe7ATXU0oSUpRB1lx6sKD0arwjC3hiqxSpeyompd6vQgWjP3tPcgV5\nEBOYDadLrUXd097cIYxNCNdguVZg5zmO/11SQ4rlt5A2EOXr4UlswlJ+iyUB\njd7xdJcvEezdg3d0KAV52sc+bAsiriw4+3rxBHriLVXEHdIBjisH1p5KbaO/\nnvbWwniRVZelhmAWUGQBhnpSAsl9LbqZ5I85l2UdH0Qt5seYnOrITlTi2ADY\nS4Skavrt/QZXM8RU6zFbpzNmw+oxelO6gdrSsDCj7dyzVydYPaDxICTYXcWg\nX8+LSKuR/Rg673fESdsIhSz5QuEAgpxcFRYyEIglPQRjF0K+/e9MbG83CPBc\n6TzjnHGSAdIu0ekP0GWPtmc378WzfnMNzwjnFTjqR6zcjKXB0wjLfa9FFuvp\nuErwxK0eceSxIkmtHA6xsMPaUd6D1aU/BqRgVWfmUxtEgAdCERP4UHJcR91J\n3KAqyt2/OtXAHh/eqMVJfZaNPsBt94Ll2iNeqwCjan1QrCxvniqFibZdTGNQ\n3FVIm0AbdSb0BSAg1F95/mzwIxA118eEotq4IHxbxsRTSI2u33QuZO70bekX\neqIeZsMSLqqadnBi87iOCTZPctkttZx5HHHwr84Lz1JDYilbjtFfHup+rF2v\nzyF7\r\n=7LZ5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.41910b8b8.0","@material/rtl":"7.0.0-canary.41910b8b8.0","@material/shape":"7.0.0-canary.41910b8b8.0","@material/theme":"7.0.0-canary.41910b8b8.0","@material/ripple":"7.0.0-canary.41910b8b8.0","@material/animation":"7.0.0-canary.41910b8b8.0","@material/elevation":"7.0.0-canary.41910b8b8.0","@material/typography":"7.0.0-canary.41910b8b8.0","@material/touch-target":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.41910b8b8.0_1590627091405_0.27229441031034685","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/fab","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5be50de32ecfc6899fa945d92bc8a69e31c946f5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.d66d22bf9.0.tgz","fileCount":17,"integrity":"sha512-yTkgnXtdsfxN9yYabJ0ckjLeuyzlys7vyt19vqammXy5c7L3o+FN2PdmRlIBtbBul6z/Nr8xhiNQ8gzUw2PxSQ==","signatures":[{"sig":"MEUCIQCoRAupJmwE7KrdzFTMANK+PK/LKIl5gVy0oEskFmF1FQIgOQXO+8MrSBBpwNFQvzpGe9P/CyMoy+jSJ0fR9vIK1WE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Bc7CRA9TVsSAnZWagAAz0sP/j3ZBWM+2+ESUwmnagU2\ng6DxLU+xruKBovjq46fx9YEs2ZNHtP0y8VtUmxiZFIPr8WfouznDOOOjr3pD\nCXqN3s9bctn0+S3iwOlpBWponDuX2iN6tvghEYA6jr29UcEVtj1d55ElH63e\n9EkJQotor8HONoK9Q18Zmc9GwbS8X1Qt8Pu190Dt1ldBybyogID5bgIrdw7j\nCaxBDR383pMUZoai9Omr/iWHlYarbn3Tg8z4P960GjvGuXYxZDE5kQ202h5f\nSRLThlXn1d6fMrEu5M0U+t9lWnfNFznPEINZZ9h8DbHU4bFB34GZvGLVq7lP\nTFU05aYDUbhdyC4jI6E6OhcyDQbYs5qA72hADE0ew133gp60w9SLNexCQ8Bu\nJfdoOwX/8P+tbqmm98TcxK7u2nXiP+gvslXzjTUNucsyxSvLcLXhZjoLnViR\nhyLgopQIYxzH2HHpxx0DYgy8ssQSufBy5Nhlvvil+eunjx0HfVFavZs+XTSX\nvBdil3F33obPeWcuZiK59nXDMWKOyxHMUFcc2d+wqanWhlTwWUoiXDA+hM2f\n0d/KqFqO41E3jLTt+mve6AvZk3DiNMsxxRDhbvAAVqF74UmlcDm/s4X9PvDn\nEs48i4yR52Dbkl830H6yfjKsO/zLBgru0sGyYIGTLMMEEPqPkHXQtWKQLAyS\nvmMf\r\n=JFn/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.d66d22bf9.0","@material/rtl":"7.0.0-canary.d66d22bf9.0","@material/shape":"7.0.0-canary.d66d22bf9.0","@material/theme":"7.0.0-canary.d66d22bf9.0","@material/ripple":"7.0.0-canary.d66d22bf9.0","@material/animation":"7.0.0-canary.d66d22bf9.0","@material/elevation":"7.0.0-canary.d66d22bf9.0","@material/typography":"7.0.0-canary.d66d22bf9.0","@material/touch-target":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.d66d22bf9.0_1590695738831_0.0896649682501598","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/fab","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40e98447c9f7bd54b4afd8443a362972465bcabc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.8904f3cbe.0.tgz","fileCount":17,"integrity":"sha512-UbRVH0Fabhhbl0rU0D9mpyBoMhMVgNBvstwnIJHezFFld6TQEay++PwPjhES8RN7PyM25s+t7lOgl4PN93p7Dw==","signatures":[{"sig":"MEUCIQC2qlhvoTiCbGn5Maud3KNdUr2pz0Jyr3Xgdww8l5xV5gIgQC2oCII7U+zG3DNOf1WjXK+d9oP+MET4F+lZ/bATt7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T1aCRA9TVsSAnZWagAAPbcP/iaD407s+4lUEeckQyv1\nxSoj6KtKMTRxJlqp8MWoQc5GqyqcoHoztZ1I3Zv6ZeS6sWQVX17dzM+TTtRX\nnDfW9HRX5fAlmoP0BJr+Mvl/zgCcJ6Jo2UOTuV6CZHK/wsCZWU8sGaBlcmHW\namrx4CZfZ9IqQNuhsp6L55Wa1mwn36K7Ow5scTdDWrCQ0tUi7Xc/i7NaaNjw\nUkltaLsMDABm28d63+twe4HEcFTwAAVMMSnMz3giuQ0jr0P9sKgh8VraN62W\n4oEjV5ZQ28Y9vpJ9CPRdQ5/Ud6yPc/5kzcJmR2Jw0D+y3a7/NKhF1K7h6je3\nTXfuU6rDmd1hqxIwuSn9EjeS0GjaDEByYtbMc/+3Szahc6OL2pi7OkEpLyRU\ndj81xN78ukCZsR7td9+fralOpRT2jvE7cSs9yUAZZbZv+lErv7IFJv6tkcBI\nLgPTjJFuqXeeFk99P4nt8Ia4sqd1LdAUi90R9JUOOMOsHp/vMzZjSd5mNO4e\n/IY6B/jHaEIeaiEC70rdTvkg0f1/BGm26a5W+HydCFEl1TGDTmi4JB+7qrid\nq9eG7aYa/8BQrAN8lp/wCnjqZoJmn5NTtDMsKxfQN4voSDW5WVHO/wnD642/\nP1ApDM3p6u9f1fipdA0EBq6ctoiW1yoWb8h7suL29btCDjjTDLK6i4gkjpPP\n99ux\r\n=kz+0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.8904f3cbe.0","@material/rtl":"7.0.0-canary.8904f3cbe.0","@material/shape":"7.0.0-canary.8904f3cbe.0","@material/theme":"7.0.0-canary.8904f3cbe.0","@material/ripple":"7.0.0-canary.8904f3cbe.0","@material/animation":"7.0.0-canary.8904f3cbe.0","@material/elevation":"7.0.0-canary.8904f3cbe.0","@material/typography":"7.0.0-canary.8904f3cbe.0","@material/touch-target":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.8904f3cbe.0_1590771033659_0.6750990935376988","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/fab","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df669111855a25d433380c596d3ae311b3bfa481","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.51512a4ac.0.tgz","fileCount":17,"integrity":"sha512-esqQZUrACBuVyZ4uRLCmBn869s6Z0fSiprNgyltZkILP0NN54ls2eSpG5yvQcaoIJBwCLa116782JvcZY5zTmA==","signatures":[{"sig":"MEYCIQD7butQpiaOYdUtKsd2z8u0Z1whEGlOGd6hGApOV4CPggIhAKFoKs3sEFHJBrb538JgY0Qv0ezIV5gv+cQXiho00NTw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V9NCRA9TVsSAnZWagAA2j4P/28AffBYkBp68M+Zqop3\n4xhU3FaMO+KtZEQr322PwLYsfclsE3vOTEdwh6KE/d/kmgMYWQH1QKHqYtuX\ntsKLnH5q0N6ygRtusR4Ldts1xOW/l4GNZtQgvmbh1U44iaplq8h0gdZGm1oF\nriJ2m5dFFcURcKrDSpMZaKwUOtX/cegE44YS29ioE9qoBsUIM1i0Z8sZyclR\nomJ93PklF/Y3Qy0XuaNiqy9upUp+ORRT2Bf7L8z8adcrIn9hzfEgPY2NZwan\nP+uNAQYIeFScii1joFMlu+6dtP72oCzgLweN2XmeayCGhX8xjurka1jv8hRH\nHoIESVpR8IC/62uJ9nZoLfmOCx1dzgLPysbKDGbAbW4yt9525bRRmTMdmIuX\nitwHzPNHU4Hj/DFSY4FF3nfmFgJat5sXpODBEUiteR4cQ2vt5Ob/pX2itxgM\nAgvEaTICkoDMlzUbpamQIQMUMFSwEckICRBpnfdeEpuiQelg2VJ8GkVNLzsi\nkY3/X9UCeSdl3iHWj5XPlHbAP7TSqMhctdIzUqCMz8anHOBNbdLrrB1Avc5D\nzsu8Cwz/MGSv5ThAhzUFVUmtUVLWZ60sX9RBe1Ld/ibTbcEgsXFEEZPbQpBp\n15rOTahHvKl/iB00rECWaI+69ruIk/SVCM9RnPDmArA/HXUVp2Id+kGvzFyu\nlg1b\r\n=ak8K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.51512a4ac.0","@material/rtl":"7.0.0-canary.51512a4ac.0","@material/shape":"7.0.0-canary.51512a4ac.0","@material/theme":"7.0.0-canary.51512a4ac.0","@material/ripple":"7.0.0-canary.51512a4ac.0","@material/animation":"7.0.0-canary.51512a4ac.0","@material/elevation":"7.0.0-canary.51512a4ac.0","@material/typography":"7.0.0-canary.51512a4ac.0","@material/touch-target":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.51512a4ac.0_1590779724918_0.4695374674392574","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/fab","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.0743288fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24066374792e1dddef233af31618a1308ee9e2c5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.0743288fb.0.tgz","fileCount":17,"integrity":"sha512-pPfCDtGO3w+ImDIC7JpEy7xK++bW8dVcML8qJKoU8hXKHsbwe+lJSBqATNCj7yI9dnHEGuvCDeBQTxehB339Bg==","signatures":[{"sig":"MEYCIQCNJK4Uq7GyQ8Ok4wyI+f6TjixOAri74fkcvz3ntM/bIQIhAJGO5NIjyBBIT/CvySTNuj9bMSY7wc8chyVlErUbcxM6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Wr9CRA9TVsSAnZWagAAhKIP/2cj5dnZSG7Q2rzpVBU2\nCYsgpe2cPKQHReseLo3jaWFsAqMlBp9RtMLvr4W8Sc07MMRW01RcOwwuxkgY\ngt6yDkamJCGCnGjIJDH0zUJpStboMxHjQK4dT5nXqR7kih7rh0GKqFyHbATb\n9CJcgKa/5A8gKLO67b4VDq3JDBqBHviAp6pssGSbwyu5DviHCH/4HNPrTCc4\nePatu7GwWunZb2/oFn1oCmnIWvfnNvWGKnNlbtU82xAPRYi08LHnsFUWABjS\nULqN1TWDUkqv6VDF6xz9bxPG34mmr2Iklh+iIr6VqJ3y1Oxe2H+yYgh0ViL7\nLwZbriwx+At2tjQdUkemC70kSlj0JLHAdur+PYZEUNhV9t3XQpfEI9M8DOoK\nssuO3rki5P7Yk0q/9zHByrCSDCyjQ1DcxjLLi3F60UtEsKI6qAs5xMoldvtS\ndDGT1695P+76KbQYTyy7WtDEXubw+/Sb9AgRIY8/9WfDEPzftIBFHCK9/Trf\n2w3e12hshNN2vM0zLYzO5NFiqw6puc+4Yjixwg9ZdWA8aBqQZRSvkmDvD3+6\n5PXUo4+Hk+LiLYDylohaGOEm+ovtJMjo6JPcHAkKWPvKwM2yfOEncMbR5yz0\nJbhiIPSJrxGKbsvApxAlb7V2iuy/dD9xSzgVlozjnpxT7OKHptaPgKsYMFJw\n9TwN\r\n=y1Ae\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.0743288fb.0","@material/rtl":"7.0.0-canary.0743288fb.0","@material/shape":"7.0.0-canary.0743288fb.0","@material/theme":"7.0.0-canary.0743288fb.0","@material/ripple":"7.0.0-canary.0743288fb.0","@material/animation":"7.0.0-canary.0743288fb.0","@material/elevation":"7.0.0-canary.0743288fb.0","@material/typography":"7.0.0-canary.0743288fb.0","@material/touch-target":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.0743288fb.0_1590782716837_0.07296265897357013","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/fab","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb7e90f7f4e7f8ec653d542fc05c9c355e018915","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.06ef147b5.0.tgz","fileCount":17,"integrity":"sha512-8bzH+JHfmnQZazPNtPuNUKDZ1ymTmm5zfAdmqE0/yQk2aRCw/eFU3uiB1MMFV5qSz0Qops1wvJdhFj5I9Jn/7w==","signatures":[{"sig":"MEUCIQDCDuC1oh/HzfAAe1XB8pX9eL7uWkt/uPuyAmoCaOgXDgIgCsQKHKFHT6iv0i/TC2Vh+f4Eap7BQ5kVltd+2rTPKyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XNWCRA9TVsSAnZWagAAFr8P/js5OZem1FdVrnvAXauB\nAkeKvSY6InZ+/Y8x/ll7+mpHqr791qQ2GxYcfgSrHqBWUXGZ4ajfBZd1eJnn\nI6IdaB0ULQAz6LDBi0VX33C3MRX9cc4R1b+0mjoWkLA9v1HEdmP8k5zr5/fH\n75wf78oWGOnCmlZtWTJg4WaVzLZO6873tkQc5GYbfE50/dZpwi9V6SmJGkOH\ngBcdSuD7cHYZz9m3JlUY1RuXh/cy7kOTfcKfG2PYiRI/lopCNU9v4mPfz2PU\n9Y+z3tzN0mxKWVmGfx8X9hsqdTBdobBROYTUHopzinpZnCwntz5ImOXuEs3C\nzlSlwNOAzrpvKtnLnScUTWN7gdHkhvC7by/uwa1KnmoqNqsdvTjDSgYxMhx6\nC8jlm9ZmdqlgWYhD41oueJQ0r28YX9RrCfEmOtmgTE9z28uaTIkfzs0B8lJA\n4PvUpPoIvv7QgciYUs963Vdk9ZfoitwL5BEPiP9aob2DYINRefztHUiaiEyo\nS0r3Q5ruSSn9M5xf0vWhc4qB5VPumz0Pxtie1ZTSL/iMPabtqFCSh068uBey\nezb+BvQ1I5iphOCPPrZbltG/6PcNvNtU3f2AyTCbF/gVNJsP3tj6xYdYu4Y/\nAQ6OWniPjwtA3GTW58T0n5rEL5yqLruuvucaWSh6mBKqebc6JacCX+t+kLJ7\nH0T0\r\n=nnbK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.06ef147b5.0","@material/rtl":"7.0.0-canary.06ef147b5.0","@material/shape":"7.0.0-canary.06ef147b5.0","@material/theme":"7.0.0-canary.06ef147b5.0","@material/ripple":"7.0.0-canary.06ef147b5.0","@material/animation":"7.0.0-canary.06ef147b5.0","@material/elevation":"7.0.0-canary.06ef147b5.0","@material/typography":"7.0.0-canary.06ef147b5.0","@material/touch-target":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.06ef147b5.0_1590784854193_0.08083267539070715","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/fab","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9560aef329570887d50ec3463ac4c03e9a524deb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.8073a20a9.0.tgz","fileCount":17,"integrity":"sha512-fPTxLELZM9EhcGl4kbET0a+MAV8qwCfwJ+9TAQFnmBMjkzlMnbosGpVCAry8+Ry5HYYh9isERMUWCcJ/39G8vg==","signatures":[{"sig":"MEQCIDRS+KiElFthudQKBZVMkYrlNVsJUJML/qltY3tiU7FlAiBpkqArEtKvimGH5BV3sVxfa14sQOhhemXbq8eg8gcOaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Zn7CRA9TVsSAnZWagAAxL4P/0lNjElyzRvenN3K62mo\nfglSyqV+2+3hw44tk2hCb+6S562Hab4PecJPpvbWl39lLYHd01IshDq7SyX5\nWIj+FQA5XI1WfeW0McRZi8D9Sza19n1cKFkUlJQ88qKbmcwW64C8fn93iFWV\nOWwFvLbuU4Zc4xFkrn/T7FzpgocixmvN7XsFblTRRAVGp2x2nDsPQCiH1e5C\nkGi9W8dwZ7o/67iTKbun5W4uoQxvou4ctQWqw2q1uMB3z44hxrI6UHHec8Eg\nEie8He/0yCLHSy2ueHv0BQjU6kaFVwSiEjZ8MIXQOrCllbrLcqW/YvY/LteL\nwsOlvM6HXthGYxICIqq19BFITCEm52F1EVUh5iGdIPQZ+iz4vxg5lDo/fvjP\nNMEwd/o9GBXsWEihFIJNO+czGhaQnP/Byxy/QDndLS56CW9AsP8uQVCB1PWN\nKX6lzhgX1LhJGrY+uJdqvU9MvN2zPw49T7vFRRHl0yFlkg4u3a93QRdhwVtY\n0qF0TQvDDoRFbQ9SjbkoJR8eoztnWtghJMmKhHx4XL3PvZIVeeKTM2cuOxoZ\nqxQN/uptY9Y9WNRKhPXWgO3l/TJHFPUhxMA9kRM/vxhjkXzrMSztdY8ZwWzJ\n1PbV12lQjVWiklQ7GDTrGQnIA95q3VvOXeuvq5m4w/QkNONVwzYT2R3TRgmg\nx+Qj\r\n=DEe/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.8073a20a9.0","@material/rtl":"7.0.0-canary.8073a20a9.0","@material/shape":"7.0.0-canary.8073a20a9.0","@material/theme":"7.0.0-canary.8073a20a9.0","@material/ripple":"7.0.0-canary.8073a20a9.0","@material/animation":"7.0.0-canary.8073a20a9.0","@material/elevation":"7.0.0-canary.8073a20a9.0","@material/typography":"7.0.0-canary.8073a20a9.0","@material/touch-target":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.8073a20a9.0_1590794746517_0.684029413239551","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/fab","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.72ff42330.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9422f76d6edad3bb771bea662c5d924237736cc4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.72ff42330.0.tgz","fileCount":17,"integrity":"sha512-wMb5WvmEgZMQZ5oAiCVzyWBSfgYz+dO0NzY0TjSwGkGfPaHgEJDCvFiAh7JNyyVoGEIq4Vw5OFYC4+0nEZTVaA==","signatures":[{"sig":"MEUCIFMLHlFb5kr/JXY5c8s1qBWm2eONL1CZLRe3PNBgIiYAAiEArLfq3qwvKdgQIHXB/mUE1PysKwFLJxu8rkopd35jsyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TBuCRA9TVsSAnZWagAArJ4QAJb08fRqZuSR6X/W4JcI\nG8U9jnFD8CRcrRLq82lxRuIW36BSFnBd3thwKX4SoJWyJoROWC+Ll4idgmPQ\ndzsZ2V7g88ln/FwUwbX2Wn3g8JpwlpsXP3UWVkGPDx6gN6UjTi+LkUwWy/U+\nl3v0CKL1479XRCmYuLrfKNBD7AZx6CZctfqkjVz9yys/KRYNppT3x7Ux6l2R\nNbwhe3ENuKDu54Sv4iDbcQTziaw/uyjRtfxcuEMWRuSxVLWSCqdA/OQSZENo\nI6ZWrykmU9K3TX6TQEClaGMtR0XieC88nGOp8cfPPqgXEZpYpOkBIjLDwEyi\nZY7VWpY4wVXX+PzudVvUdYdiCL+WBjHOZwyDkdr/SVPm4anLXKW+HBcgKRKb\ncWrswxbYjpdVaRxdNiKh/TULmGwpe9jPF4Ln0vBDx+lvzNq0sbBFwXNiNWiP\nWW8Vwrvdg95VD0htYbaxZm4ojhgN/ujXc+T2l3xFMAzIUbqvthBF1FQleiPE\n3QjV+29vq2pGuSrm5l/D4GYClBvHjLeDquoLiXvXvb8H0/cQJXFJ8sXtJxun\nfcaFps9BTH0tTSMZKU500YB/3MuUsyG9caEvbalIeoR9NtORf+LHhwySVZJ6\nUJWDZvzGNwlhRmqlmIwSQ/mp3acUoVW28hwllAp1uGc8b3J7H7todrLHQDvA\nTRWe\r\n=/vLt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.72ff42330.0","@material/rtl":"7.0.0-canary.72ff42330.0","@material/shape":"7.0.0-canary.72ff42330.0","@material/theme":"7.0.0-canary.72ff42330.0","@material/ripple":"7.0.0-canary.72ff42330.0","@material/animation":"7.0.0-canary.72ff42330.0","@material/elevation":"7.0.0-canary.72ff42330.0","@material/typography":"7.0.0-canary.72ff42330.0","@material/touch-target":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.72ff42330.0_1591029870294_0.667488201046541","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/fab","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75ec79fe2f883f2cb2ca1a9fc102db1a9bd13b3a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.9ea52070f.0.tgz","fileCount":17,"integrity":"sha512-zD1w0LGv8IqK/DeXNyHHRwanOJeaX3BJ1vbUJ2ftp+Md7CDxsF9hJxu87RUUBITUNmeKI1UAY5NibZGUuaFRZQ==","signatures":[{"sig":"MEQCICh47SdLTIIx2OQHRlfpYewkeRlZ/MbXVL+hVSB5grkXAiBR7LnHFUitasWaUY5GyPtrbbz2qICaC41cyAkFGgVvTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TGMCRA9TVsSAnZWagAAakkP/3Lcu3vd0qIpQCRFQhZL\nb9Mavp9VkNbgyd2MvMCUACYdodroy4ND2Jv2tk0rN46o1QgJ7qUG4VYVXvTr\nq6nLUHRuXVtNCxTNinYuSqXejtzyRDSMrBy5IY+ZBT6Z9Rh9dnNmDBg7B65d\nw2jKxjIzE/S3LAU10KfwUd6vAxcfTMjA9oBGOJU/ZqLdz+kJcggH1yJ9RpYV\niXHeqoc8lf5RJbjgTqccb6b5LqkgNZmfOXoGejFAeadUHy3Xxqqg4LOvbUC2\nL3RmgmDGbsJT18bxpJhrfjJiz1sGCq0wZ6LjZCBEeMhYC1Rep1XH936+s4gs\nn+Pai3ATTjLgFY3trV/oNcmtdOeBIntzfyow2FI0VECDsGBDZayacdJ3SDaI\nCtmmFbJwQCj/TOcuq4L9LVW9ruG+O7+qZrmvNvED3jLAgPoCYDeFuDPAInvy\nDyqz/uPwPScl0KCqVmWIIX+GUlY68ORLIMcy9KoQvDqSxfdIF5CQWi/4WJAF\ngYBkRhXP0hE4zCJH26HpDWYzVJ4/BnH8eHRKo96mlXPkFy9OdG+LiWmnWek4\n+A3Wu6/jTyah9JlRJlchaaIYKybY0vdKlKHqbpaxcatCfzO13nm7ObZxnwb1\nTZQ7PNnIJ79nKHMx0V+kogd5BmfQbfFHtFKmji4Utf9DjecAEtH+fHBy5uON\n/d4P\r\n=EfV/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.9ea52070f.0","@material/rtl":"7.0.0-canary.9ea52070f.0","@material/shape":"7.0.0-canary.9ea52070f.0","@material/theme":"7.0.0-canary.9ea52070f.0","@material/ripple":"7.0.0-canary.9ea52070f.0","@material/animation":"7.0.0-canary.9ea52070f.0","@material/elevation":"7.0.0-canary.9ea52070f.0","@material/typography":"7.0.0-canary.9ea52070f.0","@material/touch-target":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.9ea52070f.0_1591030155955_0.13391053897619898","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/fab","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dac58d380a8630ba85bee2d7596b28bc5bc86a0f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.d86ad3b60.0.tgz","fileCount":17,"integrity":"sha512-S7iD9P54+YUqVxxXxRuOpHZxo5d42SWiX45EucdlkfS2KDfmeIbVhUUvT+zmTr67etNbDAnj1Airf5fJi+rRAw==","signatures":[{"sig":"MEUCIQDX8bn07um4wbzQRHV9uKl6+LYPtrYLm5bSZiZoC1NGGgIgCi/3S4n/IcL0nalPZoBsEKCctwCbcljl80E/EF7Qopc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T+PCRA9TVsSAnZWagAAxj4QAJotzSspqzvJ4INi9sIZ\nxK6SwL/GIyExiHfXyoajiCh8KdPxjvH13DwRKT06u6WAFjNUibybhW7IYDG6\nA1F+DVqVDrDl7Av22YACfWfmfpBK2wWoZe6lPfkrA3aiFNhKwZ3iHyFm3SVT\nQidc8tQQyXZeBr3jTB5qxk51z+1Ov5WNw2yv6kI79vJlxz6RDcI2eCIzidsq\nmCFRmHYD83Zkpdr4Xaryzck06sbRBvdHKSAQHF1FGjU4Ed4CPprFP6qUNvMX\nN8rItQXL7dIiZkOFpUitM0DlJeusQ1wAKD26mTm4UjhHZMW6RLymYD+37tvK\n2Hgp1Aez6SKZjrDAt7VF/fak/mED/OnMbCD+P05CNpKGdPEhc7SVjgxrOP6c\nwCzvWhC3Fr7m42BSfy9BlTtIRR0k9AUtoPbviigYnxprFa0LGv3gaQKqL9kG\nJhsYCMBDn9OIX4/MCRS0ZW+ZnEvvfEmS5QDNMcao2Q5i9ofqZrl6zmYHxxl4\nFahYABWP0XrWX1MNZ7LHJ+sqiax87sVRSxdn530Aw92aXRFY7T1b5M3YOebg\nuozyNRaOIWRm2MErp9zrcRLdru8jCSIrnV1eGxuknix+Ekw2qn8/2q/54alT\no/g/GyT69wTtLRfIVinil4ZFUc657eGMdfwHWzMdgSx8kPzJh/+krtEgaHte\nMnHo\r\n=Pbok\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.d86ad3b60.0","@material/rtl":"7.0.0-canary.d86ad3b60.0","@material/shape":"7.0.0-canary.d86ad3b60.0","@material/theme":"7.0.0-canary.d86ad3b60.0","@material/ripple":"7.0.0-canary.d86ad3b60.0","@material/animation":"7.0.0-canary.d86ad3b60.0","@material/elevation":"7.0.0-canary.d86ad3b60.0","@material/typography":"7.0.0-canary.d86ad3b60.0","@material/touch-target":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.d86ad3b60.0_1591033743099_0.9894841444562303","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/fab","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ffa1316648b1b8eff3c3b8b84a72ca3920ed799","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.b9776b1d0.0.tgz","fileCount":17,"integrity":"sha512-vEvhqiuCEAxcm6mgwzPzdv+NhCKAEou4azSLq6vg3vVZiRArtlRZi8UyTlK/JuLrAfmZxHM7NRfNbPtjHwPydg==","signatures":[{"sig":"MEUCIGVXTlC/uELgOPHd3anHNtf9MA8rspBvODrfJjUjIbySAiEAnYlMjX+DeSvg9chdqYqP7cRj/hjqJUJ/29MgABnTb7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1UhNCRA9TVsSAnZWagAAZfQP/2aJcB+0xeilwe4Gic+r\n24Z5JT8P6LoXSzp89/bHz8lbULse9cu4xFu9k3dbEBs33699tIhbPP6cgWRC\nleaU3zlNOu7IAjTvK2HkspiwCmru1a8yqbq+koeaGLWGCa54yz9kxMQTLnNy\ne51tCf6xd3gjMt8PjfttcZtmwBD26MG6HWlErke/DkangmtDw6rmd/1C82b8\nvnxcY0jeBELWkBVoEZ3EylTerKT/but+k+aD0O+WPPhpUz/lb4lkC/VUan7h\nYUjv9ZVfAyKY++N0x5MQl6CIdMuILgDyvZjWbkbNonl+mYEWATpMvd6LLUOD\nryxM/BW/ePk5JLIKuCMBq6rQqvMHqrFJhOrmTh5zMFz0G7qCl2y0bDzG7Bsv\nI7IjvnVg28MTEbMOgwCQ0MwOag09iNXegKrkpelYc3ddZU1p6C3Kql4IAV2u\nJ4oNqmhiswapDf7WpHhJt2n1JNXLw/hNgastG1bhgW/T3ctHClvFezuJmrDd\nWA/PX44tgTDb0i0XvqUpjsiCxlN6OjR/Mk7Fl2f82piYBM2yyqd6wbzFMfGw\ndp1KAOvss/sbJHr2YakENSswflCwXZx8PtAhI9YNEYWNNkZgwzl1QVGqOJU1\na5oW8SFpitX7Mg8Gm467C1G9SH00tWB1XFZ3Hl0EYj9ncPV6KQsyJjZjvGNZ\nMKue\r\n=QaOY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.b9776b1d0.0","@material/rtl":"7.0.0-canary.b9776b1d0.0","@material/shape":"7.0.0-canary.b9776b1d0.0","@material/theme":"7.0.0-canary.b9776b1d0.0","@material/ripple":"7.0.0-canary.b9776b1d0.0","@material/animation":"7.0.0-canary.b9776b1d0.0","@material/elevation":"7.0.0-canary.b9776b1d0.0","@material/typography":"7.0.0-canary.b9776b1d0.0","@material/touch-target":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.b9776b1d0.0_1591035981410_0.5641671777723019","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/fab","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b21dd08b0f1ab1ccd5f68cdc4d26b8a28d9444cc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.ba6f7c294.0.tgz","fileCount":17,"integrity":"sha512-dGNlYJ0XuyLo0xNa/Y3uRh+UQl0wLIvRu+1p8LAvv7qQvDM2TMB4vegugc4Zy7Q5/S5cG/Mdl+xKOQks/n10Rw==","signatures":[{"sig":"MEQCIFS1bCr0A0ElbneVQdOewyIAb9FP2cLMGdCCth+3TbUXAiBmul0vzAcwEP+HXXJtMvzrEDR0MtlYxed1CpJxzBjhDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oZDCRA9TVsSAnZWagAAPfMP/indnV4+eb/B4wJcivtT\nbo8hA6dPxkqRgLCJsGdTR44Tdbor8SRpSKIwZ/1IjEzpIX6LsvLDshFL6trz\nbvZQ13NVdUo8HI9anq2jO+XWLQgLJqJcoGgWsdHwL89aGOyFXmL7wJnqPJxC\nKc5XmdiOI2LY7pNXmdevTwOAvM9vZN94DMAKcGjAw3mmeIYvr1BRDBGUdvHy\nVreoT3Zr0mt6Yv64dj18qTgzvY1wye3oI4YNKIM+V0YltR2bmLyzNI/Q5pfR\nkKQmA4yztBaDXttMJVXErkann1e+bEdeWCcnkxfWxIK0FNPwj1vaK/+1BDfk\ny6CcKr1jZcYW8QAj4LZWUqQihBBEBBJDsHwPxsjALMXIlg74CJ3Bv5GrNbik\naGJDBXySoO7evs7OAD8nQg2a11A+Vqk+k9TsdvSR7V89i11QFU5sZShciH6O\nEZj8wAXrZJQBEkVnoBzKB5ZpW2jmAE075u0JkOCDzQMLrNHv09Lwgrm/zVi3\niExMTdRbMGOejnMXPo9apqE+WhDj8TNftsP53kBcEl/Xy+dUNeVqG3MzqiWV\nIHpwyz/ZNBRzROkkGK0eBxUDZaxBZmuWzacUwK7c1E0CmkABjm23CfeEzzEf\ngiz8Bo2mn/ifDHWK8/7Xun1psoaLa9zRWaq1aKXQINhSqrW85wdsCld/xy2T\nuWWU\r\n=PHZp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.ba6f7c294.0","@material/rtl":"7.0.0-canary.ba6f7c294.0","@material/shape":"7.0.0-canary.ba6f7c294.0","@material/theme":"7.0.0-canary.ba6f7c294.0","@material/ripple":"7.0.0-canary.ba6f7c294.0","@material/animation":"7.0.0-canary.ba6f7c294.0","@material/elevation":"7.0.0-canary.ba6f7c294.0","@material/typography":"7.0.0-canary.ba6f7c294.0","@material/touch-target":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.ba6f7c294.0_1591117378747_0.1510988308754284","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/fab","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b6932278d4a2104a2ab293149fb6637e09dc9ae","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.cf3b664ab.0.tgz","fileCount":17,"integrity":"sha512-+pYq9wB7uGN/QrLradDTk+w3KfN9ot49LzmjERewj0GqcpttSGYckpxKEn4qVS6Bc7EDhDRMZ8LYXwgqd0aCog==","signatures":[{"sig":"MEUCIQCBuGQtvoY4+rMe7vQvlI9tH8/B2jymTJM+otyMGgUfEQIgIe6Kk+VSWfS68mfwlzBSveyDeEgZMvWUv7YFvu0KhTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pk2CRA9TVsSAnZWagAAdyUP/ieymuLZpAC6GRp4Ji4t\nTv5SJAsLwBvjfNPmJIm+rbuQ8Id6kHdUNt7snsf1EUIhhPmcD4tB358fE+Ay\nDZnea5hYOSLRK1wWVTDQJGyw/bTL/8GvDeVwG9IMO/gQHqQ/8x+yAYRLKdV7\nPL+SFTCcAYUJuaYFR9ub0mMD5MrSNQgFk/T5zXCTKI0KDk43og5ZcYoftymy\nZW4wkz3xjteBprbtCFv+Lh/XGhMfS2mNeGdHRmrEm5D+/GYB4MLtiKV3yFZn\nWfWe/wjge+MhDHLwoNkHj/DJyThrk1bOJmal6cx29SiNDLQpbIhkwmRsUq69\nPzeK3OKZwVGNbkObPeswX+neGG4nEfx7KyTRp0vLFbNiF3c0fZ56Ehh0H4j4\nNiq7DPRG9SpjsfVKCL7YSoMgrx/3IXNiAwXMRObbW3idK0/OkhUK7tKPsUNp\nv/r/hfmhpI6DfXE6GbfCAd/GIdo09qEgwMrGAk3TFoX4ZrVhvRUxhvrp6F4C\nKB+rIBblb1aUEgVvtswNUbUurVEP2mtzFrTf32fZrMNesfYVx9RqHdBt1AS8\nM6gZoccoka82dccmss76C/KJyCl/pXZxNofPxxg1UZWAZrhFjq6dD+3pw1Tl\nbQTedcEmOi/6DkSGnYF1rQ+SOliPKP5Jl9xy97VasIlwg5kmcm/M5AwjDW4p\nbkdm\r\n=1XXa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.cf3b664ab.0","@material/rtl":"7.0.0-canary.cf3b664ab.0","@material/shape":"7.0.0-canary.cf3b664ab.0","@material/theme":"7.0.0-canary.cf3b664ab.0","@material/ripple":"7.0.0-canary.cf3b664ab.0","@material/animation":"7.0.0-canary.cf3b664ab.0","@material/elevation":"7.0.0-canary.cf3b664ab.0","@material/typography":"7.0.0-canary.cf3b664ab.0","@material/touch-target":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.cf3b664ab.0_1591122229584_0.779148073581291","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/fab","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d253b6d3b8bbf7541900c37498e3ca1ac5ee442","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":17,"integrity":"sha512-keZ+pKYD/RKXEKuNNhKslRjpquAjop0MntQxxQ5TFi3k5ZIvnqIY+uSIf1YxC00J3QI/SdyGdX3KiAz0ZgeX2g==","signatures":[{"sig":"MEQCIAs1qvOv6fzsnrFNs2cIA2iD1nDUP9W/ERCNrR7DaoFmAiBz3fYPIp54UtelMaVRM7m48mskJ86Y0kEh1SzrUJ/lHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uY/CRA9TVsSAnZWagAApqQQAI52J9p2Yetp6eIrghjR\nS9SvGmyiwAfT+n7hGqbEc3S0OGBdnjAgOzEQvKKjuuC1nZIzoA4HIOBdmUNn\naOxOMA4RG8nr9EyKgCwjb+cLxQmkkM77ks027cWjZXpsNsLEIZlElAS8Ns6x\nq7Y7Bf13kH31T4a3lVbceiSEnQzLqbwRpaLbZNdNHMPP2Kvd5ttPJ+9t7OuE\njSFLLSEdxTUnDsRF2Fa51yJyUXKyfpcZf0MSjrnPKw1S7+SscMOEMaHGQklo\nl8XDtf16QhmGLesQLFUHsNpu058WcbCpU66JSO4HWLRvZM9aJDJN78lIN+/h\n6juQBdQYCViop0n2wOYJqriGm1a/7cfZniAQaFaegbOmJEpbJZKCS/yGnJHH\n5GP6EsOXjCHvNN1eNZ1doqE+IgtBw9oittW2PFTRSBGmVOvXxQl45Pcq/Du2\nW5k0lw+bPAa5QLPV4Gel4ltsCqOzTZKv94azS4WdNtauOaweFdg99tmxsqge\n3oeha95KkH7J3Q03R/OKQxsVAUvpjLO/7iwvPrt6nsF/0QIr54fBbv1K2gUH\nCPSEN4XIDrUPKTMFMsSh/6RLpuGNgz+j52Mrr5/I4SZRxN6g5XKwc6pczkmc\n2U7GtnbszoECfGhhb4qFUqCxOx0P4KTXEZRlKVPT37t4tcksb+EMgmOdll3j\ngItg\r\n=zRyJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.4ba3c9a31.0","@material/rtl":"7.0.0-canary.4ba3c9a31.0","@material/shape":"7.0.0-canary.4ba3c9a31.0","@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/ripple":"7.0.0-canary.4ba3c9a31.0","@material/animation":"7.0.0-canary.4ba3c9a31.0","@material/elevation":"7.0.0-canary.4ba3c9a31.0","@material/typography":"7.0.0-canary.4ba3c9a31.0","@material/touch-target":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.4ba3c9a31.0_1591141950808_0.8635383493973698","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/fab","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.388b042c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92ac4c1e7052916e7c7fcde1feafc5cda4b45456","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.388b042c7.0.tgz","fileCount":17,"integrity":"sha512-wHWN4L4KapDXFMIfxZMQH+sZuxGz2Pcpzl/q0tAPG6+0dzPxGXWIEyBOyGcJW5dt9Tqz+hLGIg5+vPOVdrLJxw==","signatures":[{"sig":"MEUCIB5tlEm7NXKngskqsf0mTt9TNiEM4/5K8IESju5AK+0tAiEA0l01RJe9MbOZWJPxop/H1hRhEXPMU/HLTKwpo5umlEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16nNCRA9TVsSAnZWagAAHgwP/2FXN6KCBsY68pvFJVe4\nO1pXCxdvj40OgdI6fXQ8b1him4893xJuyBOU4RgPxrUo6sKrwj45FdG283wu\nvK4yiSByiXWGOA+D6/JOigwomSlXk6R1Pdlshf321WOZfPEpDx4XVr07t7L+\nsgncjHXJaRV5oq6UvKQPonQV0kAN6ONeyxH906tW9APWLJ33Yg3D+Zy3Li8b\n3YzhsDT1Zq/wUIV6WLUC3dygBWHvinvSijy+7lfwwe+BShLK1/aXh2OdC3qH\ndmhsiA3Y/jKkQGKJWSANqdiGID0JUAsnsRI7litPdm6rhCEDVrUErB061tXg\nUenE/cd5WkFYdTxvIxMVUBe/lUUWRyuYYAFsRH2O8bfDcSUjSgXGSDyi7WrZ\nMLSiyC/E4pehtKApCPMkFIfXKnXzGe9HKRUvkWatT76T8zzGStwdmAdAYWMP\nIBocLy6RaqwPgMZhJfmnv8Sqak9Y39hGZIMGY6x6/cr1dQi7o0BJ9gjJzywG\nfyI3lctm4R+1H/yDw6XVPus3wqL2BjYaPe+gitXcqiQwmNPiYalTe0NHSdlE\ng7qd3GzNHZYeIEqjaDxsg1e3j/CLY1kj8+Q4aWUeiXVsV0r4yXaVmzup/BZi\nTif+C9NUUTLFZt48z1CMTY3EPQkd/qf1gshid0DunvU7gL8CBa9Lcvm0b9ab\n6+/i\r\n=wxEV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.388b042c7.0","@material/rtl":"7.0.0-canary.388b042c7.0","@material/shape":"7.0.0-canary.388b042c7.0","@material/theme":"7.0.0-canary.388b042c7.0","@material/ripple":"7.0.0-canary.388b042c7.0","@material/animation":"7.0.0-canary.388b042c7.0","@material/elevation":"7.0.0-canary.388b042c7.0","@material/typography":"7.0.0-canary.388b042c7.0","@material/touch-target":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.388b042c7.0_1591192012959_0.8552942496021656","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/fab","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53c16779b570bd97689bef08aba8df437254c8f1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.cca1ca84d.0.tgz","fileCount":17,"integrity":"sha512-S4uoIZidY4CqMfTzPUDU/LdMYVeucv+Zy7r9kBfmCZn8ImZi3+cL/twdOgBPiFwI2b8qHHpiM4hxIMfXeHIGEA==","signatures":[{"sig":"MEUCIDAxZbXrTqWtH02KRUcKgFfT6WagPpgShaEdyCny+VxhAiEAq0cKHgalj8wYr03xEGQ1ZcSjR88WHxUUZquYuUFTGw8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18nZCRA9TVsSAnZWagAAb2AP/26G5EKKIUDR080yNYtE\nc/iBlV9/C0H22acL5KG2Ea23+aGk1FWNALTtj/dJ8DFi0IWyvUMmHUD5cFv9\nO/CloTQyqInV3bd4EqK5+Sr+C/4AbxEYtumdrg2wHLMxMShY7xpygAcYZOPQ\nlIfg6b50uXJCJ/Txx+XBsATbIa3hzKOMD30263yIAigvoiTex17ulhxm1WUO\ngA2i385cUcz7pI/2d9w/cCXfUtTwyhR1j6wU5jf83eSVZPKk/nWxAo5Icd7S\nXhrDWdwJkmH4k/KhvHxyd6mxIaNeuNyBKkrUJVbqUXg1EzxL2PxktL/IolRU\nAVjoPJMmmE/Cmzykh8jwnBNZJww5qIiiIaBh/r6CjDVp4v6RTOI6a4WPRzmw\nCbhgC1Ca0k/8WjPd9ohUg4Oe5E/ozOzBs14RqRtf7zvMfb/162cVeNHQ4frn\nBSaGGQVDUY5CkmfRSQw0L3boYgaw8tukNx2PkvfMqGLGF7puq2iLptcRRF0u\nMQa6KsARDvlkCO9gd557Ue+/d1sy8NNN/X6GRNzNbsm9VDbbcJPhSZnxb68u\nKsXbOW3dJvmGWqrRKSTN0VSsIIeSYxqnyR9X6ZIHm1lNAMN+3YiCPiqP29qs\ngVDQnKBAJHkvFdZn/J+B8mDTF/CcmSVZpJXSbIl5JKxKI+Mmc8uWVLoZusfo\nMc8P\r\n=eAUD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.cca1ca84d.0","@material/rtl":"7.0.0-canary.cca1ca84d.0","@material/shape":"7.0.0-canary.cca1ca84d.0","@material/theme":"7.0.0-canary.cca1ca84d.0","@material/ripple":"7.0.0-canary.cca1ca84d.0","@material/animation":"7.0.0-canary.cca1ca84d.0","@material/elevation":"7.0.0-canary.cca1ca84d.0","@material/typography":"7.0.0-canary.cca1ca84d.0","@material/touch-target":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.cca1ca84d.0_1591200216835_0.8534705554041198","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/fab","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f307c532d637d22e325cde028d68e42dbdd81c1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":17,"integrity":"sha512-k26z/c0Zujh32mOWYHT3NLND3c27zRt5rYvzxPMbPMEgYEIMarmDhX0eElXm3Ahg1R3XYVkYH9H1OxFDX3apmQ==","signatures":[{"sig":"MEYCIQDHHHYfHD/8nq43MxrOLGbO6TSdAkBA8pjuEmFRddcgFAIhAJaiLnYhdKyc8WK+wp5arOXWYRIlrWxveJenGgHPfE7a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/KyCRA9TVsSAnZWagAAl+4P/AsTXOkuFDkbGesjt37Z\n7C0SmZid4GiT8PGMSEab/onyw+HnY8Fll75zrBrH4iC0PNrY3xW+YdAmSdW3\nHMSsmgUy/4G8TgeiZd/f4086U8Dc7XTMBLGDL2QzZrcGRVPbpwwsJ9ty3x4E\ndEHkX+rG74RhtTefYxIVy3Zhj4Qfn9k1h9L55SdKV68YUsgrZjoQh2OuhMoW\nD3amwYQV7aLiFoJHzkWFr4z9RQo/Uq7vVUMDbfmSbhvxKEZAyj8OT5dKNYaY\nkNZrhc75wmwYpBOXurdnRq1Va7G+YfMWmc9I5d/SQhT71npD3xuapV5DbPF1\nkBAWibxj+sYoU4cqvou9bQa3PcSWftCMuBgJ1rK8x/vbkuxFo/uvEM6JPuVi\niMzY8F/+oxGpzBevgM91eNVn/Xkhn5cGqSVlVhFot7b1AoK1opqpm6p66OHW\nXp++AwOzjVGpnPyeg1eI4jmX5hF88vTCmbUDNTHDh0nvFUuXuNyaJl2jSBGw\nlINqdAZP+6Duk63EXG6EeBlGbIbQC8iVRfvjTB4bs4f6ZB1OqxMTNwRThKkG\nKzk6muKhrVVNVEwt6J3+N2lLLgLOdaCIjvgnVcV3lBVEmR0SMR9mPHzet61N\n+oGYBSIjT8TtLcpfdFQpOkI20gZPiYK7ceBXVVrwCi7osoKFiEHciTL2gch4\n/+Nl\r\n=apUQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.9b0b5f2e0.0","@material/rtl":"7.0.0-canary.9b0b5f2e0.0","@material/shape":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/ripple":"7.0.0-canary.9b0b5f2e0.0","@material/animation":"7.0.0-canary.9b0b5f2e0.0","@material/elevation":"7.0.0-canary.9b0b5f2e0.0","@material/typography":"7.0.0-canary.9b0b5f2e0.0","@material/touch-target":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.9b0b5f2e0.0_1591210673938_0.07660035989372038","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/fab","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0ed13e5e9e05470b171cd3948e4dbfdb95de1ac","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.0a7895f4d.0.tgz","fileCount":17,"integrity":"sha512-wUIrxz0ZOSog2Avp7tNatIANgtFERu0FFpdaVUCfsMa3Tml3C9s+Aq8Ac06cvSCFSBG+YYDy9anJbq10RrcLrA==","signatures":[{"sig":"MEUCIQCWqZbnPnJo2l4um00o3x8coIpFyCMlfzIZNs7UMaqpbgIgOfIJztfqc8L/QgwnsxZFdpk42mDOaASWUJnhTPH6GKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BGECRA9TVsSAnZWagAAR0kQAJTa8GsFKFn8S8uUQxBf\n3gH3b165DGVnS7pux7yQ1vSLASCzfl+zblZjgDcf+D5+UFqanktw5zk5Bv9T\nyoU24X8qkrqKQyE+PsSPiVonySiDJ1Cyo718GoWu3hPGvYQ7Cm2K+jPj0zBy\nK8OZy0XK0gwFCFGZjGeBx33KhSkBian7IwFA5iwrv8F2T7g83sIYQ8srAw+e\nTwcUa3KjcSQOLvrRBY1dtmGxZ5D+w7jl767n5mYYsU7o2VIPGLV0vFU+F0d0\nZ3GE66Sr+mZuHAisc4BpQraRND895J5BZSy2t6kWgcL3wg1P/DQ2euyCDl1/\nO+ltbpEiVyPIb1xppJ4l9SDxuDG9LQtZjnceVNQRAU+lN15+T45eadRieTkx\nRV5doi3TulYoPtH0Y+NNe6dA/uVjCfQNLrkYxua8LTDLHj+ahEOZIVUJ0KUO\n3ExxEbj5XRKV2Iiuub+k0RF6adO+Zc+R0v8Ep2jHooomAzPtyozpKPCHzOeo\nqe+1kJ/bxlY/XEBia9DdN57O9PrPZuir2lRyxt2hERUAaj4YvURZHtOUZISk\nqmSKM/e0nmCifmQbCrLbIr2eMGzK/63ZgMz+nS7/338AwTn0sPIdwBZSczRI\nn19d2nAH4Im8sgEqMZ1kn9UD+byPzCXg39EPPt7Ur+71l3/r7Gm3vhRxfJ8j\nieF6\r\n=eCnl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.0a7895f4d.0","@material/rtl":"7.0.0-canary.0a7895f4d.0","@material/shape":"7.0.0-canary.0a7895f4d.0","@material/theme":"7.0.0-canary.0a7895f4d.0","@material/ripple":"7.0.0-canary.0a7895f4d.0","@material/animation":"7.0.0-canary.0a7895f4d.0","@material/elevation":"7.0.0-canary.0a7895f4d.0","@material/typography":"7.0.0-canary.0a7895f4d.0","@material/touch-target":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.0a7895f4d.0_1591218564144_0.5830304324406506","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/fab","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.7461aad68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f2bedc64b37f654a61d09a4f2fa9b20a73e0bda","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.7461aad68.0.tgz","fileCount":17,"integrity":"sha512-GLeGh3OWgnG+AeIFrrUkspCtbtXM7fpTmPMhyn2qpaG1TWncVJknM0ABKv2UhhTrCjpYz0wFUPP4Tig0rop0kQ==","signatures":[{"sig":"MEQCIBFXd+GlMhp+xtIQCUr6INFh6LCxfCnaEb8BZNNfF1KWAiAOwDPw/RPPIzStCYDkaWYKnHJ6N6P14SfVHZIFjOvceg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CBjCRA9TVsSAnZWagAAV1oP/0n6DBuJ1Nb9ajXJEU9f\nDrdSR0eMSQUFrLowrT1UNPbOIArFLkZ35Fs/+b+BlqeNEI8vxFNi9AQ5AKHn\nFQPvMrNul/dlQJ2jlAAUc++4kSzciurlcdROXZdsVzmf7KwyBtxbmmpgiWe+\nFDaAd7kLy6EtIsKdsdfw0yfpCQet1hEfqQAGpc4gcRW/SjbACdL/MyV6CNs3\nggVqjbUjN+EtXs9i183Pa1Lo3yjVnu7J9RBjDHSgV0l1fIQKc+2qambBysk+\nWILyqQ3AeJzf6eKmKxaInB/L5poh59pDRxWmC359mviHtJUbWGJ5Pgkaf9XA\nuxAxIbsKbwdOG9JaUV5NKVh6n86Skg+70SpSDJMxhqV+SvoPs6w3UZHmIvj8\nWNyHOTY8y0g02PKvRjQsFORWRK7cnVuEmP9725R2QA//mol4wt9JgPd1UxN6\nPaiGhOhsTJBFq9/vEiqx6Immf+z/HkLVQkQpUos2B+tphgJHDsmwezevqqGv\n/wjf2Sohpl7jUiEslFoejO2iWQqol9weiT/4aQPcW/AE1jqfRW0DAo+NXl3d\nEimLuG7FaNED0iZQcJ9zksjc9nakjIrybDTdkVE1A1FHRvOoHJDAhYN5A75/\ngMyuxECNfij9MsXHmq+KlqvYQIK4YoEjtacOGnAwLQqLwy0MN2mKZErKFSDo\nySHc\r\n=B/Xi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.7461aad68.0","@material/rtl":"7.0.0-canary.7461aad68.0","@material/shape":"7.0.0-canary.7461aad68.0","@material/theme":"7.0.0-canary.7461aad68.0","@material/ripple":"7.0.0-canary.7461aad68.0","@material/animation":"7.0.0-canary.7461aad68.0","@material/elevation":"7.0.0-canary.7461aad68.0","@material/typography":"7.0.0-canary.7461aad68.0","@material/touch-target":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.7461aad68.0_1591222370941_0.2704531425020176","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/fab","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d809ae9789ad0ccb60573ad2aa57b1ac117f2c10","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":17,"integrity":"sha512-GIJ4r34mHvIsnQ+dgSOxXg3X8KOVxwPL5I+/2kWTbtXB6x/v6yHXBKazt34k+3TBVtxn9tvkRwR8m62KEn3Ghw==","signatures":[{"sig":"MEQCIFtu9aME3U4hdSOL+f1Ui0d2wO9BJCaf6K2S7aCddUdtAiBE408FtJ+0BhVKct/zXHHXY9QISZTV4THG1dQL0if1zQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WQ5CRA9TVsSAnZWagAAGv0P/RGnTSyKv9xZZFUTfV27\nrYAgu5n/ZPyxqRnEDWN+IwORxJ9sAInkYgm6PLqsJa6OVc065jvPqKdI+VEA\ncensLvxygRJH3lfoRE3+O445jKSMoLkQbjnX3hucCgQM5ENvPPfWgG5ZgSAR\nAZfaRY/pGHaNlOhs1BQvUutrGQeFgoWpLVLJmzDiLinTQ1Sk8IFzb6VPESF/\n5IxTg19+8Wbr7x7Ygr4tJ/PyhcbCDZtyXv3tZ/UyOf9TTf53dS9i2cwtEFr/\nstrR8KSpqMIda8ETy3SkLQuN335UBg33RGepTX61q24Jvua75y14STOS+4Wc\nAw4JgOxm2XXzmGhf4KNylFKR+gMljK3y831obpZwpHN1+XW32SYgvfZmRBge\n+kDHM8EKiR7Q633J4DN2nKeHM8+wb5lthXG77Y5hMNp8TfKkBs4erkiGdiX6\n9TqkWOW/5WYhkUbMVtiwUnm7+4NJqzFmJnTFvt6W6i8bRXEJ3y4CQw4IejVr\n714ueVaZjBepZxRFiwT81PD5wSiO0pdPqgkFrKJbkdSZA61UiKqRJHGDyM3+\nu89w/VpMk3kAPk9lyQHRclFobHJBwLVdXDqOy9tNVhH317mPLcuG1jb52RlM\nkTaGa4K/RpRL3GNg2ajhJO1ynCI2yD6u0vVBb0HRui2tfIA9HfRTXY4gb7EW\nQ9uu\r\n=KuZ+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.a0dc2b5c4.0","@material/rtl":"7.0.0-canary.a0dc2b5c4.0","@material/shape":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/ripple":"7.0.0-canary.a0dc2b5c4.0","@material/animation":"7.0.0-canary.a0dc2b5c4.0","@material/elevation":"7.0.0-canary.a0dc2b5c4.0","@material/typography":"7.0.0-canary.a0dc2b5c4.0","@material/touch-target":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.a0dc2b5c4.0_1591305270366_0.4186230458051561","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/fab","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cabf710e9316d4d3abe8fcf4271e06eff47bd09","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.2b420c5b3.0.tgz","fileCount":17,"integrity":"sha512-dpUWuJho/1FAX3X3zQ4rXBIHxAYADPXpZ1SKCI3pFH+Am/SK1PBkvkmbB/G+83XCDtQgUemBNQddoQdzqkzlOw==","signatures":[{"sig":"MEUCIGsvefh8VJqGP6ad6RGhZ/OCcnwoNFGlY79Sg29VxOIlAiEApUJABQKJvFXIx95imfT4OV3rx7sI/lERhiBTE3T59DA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mP5CRA9TVsSAnZWagAAEDoP/2aPTqQC0MzGGjU+ZX2z\neT+0MHBBGRiyQ+Rwawbz+oZdgflM/BVsBEPNvujIvSv+in4msDzl5T3atDL3\n8R9VjsdGdFm/mwBgJXTgagS4zw8hJmHHLEb9+9HPu8+TRMQWKY7u/ZwVLMw0\nAN/tw/LHlEC+r9z9JxZPBnm45VxSPPskjzjbT97IbfR+us8PhcDrZOLc2T/a\ns3aDHn9ORBBzmyvnCgjN3VMJfmApqq4h6ccHoFxKsZnpAzi/N/uMO/HrOE1A\nYHlyM18CULohpD6NZzo0Z8pnBCnm9bVmikCQzfcUh6mpEVyeM6UfwyqvxoSV\nUHiEvheOLrAsck1IBddMCsvZMkRM7KOV9Bv9/NZd7WIcgWpIn0SKSAvPBnvb\nCICZJxUm6u7qIw0bd5aJY2Qgoj7vwIJYaihV7FYI+qj9EDzRfZDUPfUu53gn\ntj8okBePoc6IYUbsgSTtq2NxDbu+zwFpD3EtaQhTNtHWFKMWV14cVCqbb2/R\nvC36wKV7EByb50emqVv5X3UQMFSlEFDl/ZBqeCDh5N300HAlc/mX32DFSfZv\nO7AhAiH/VnwVbgBXABR90Sb2LCeT73Nk0XzU54+L9YjdDVPs5iYJkuVIbxkY\n2FezVsbi1DeB0oVIX2Ku05k1WsWZUDcPT7gLMS2s/tmnhbaxGTD9uwU2wOdN\nHJL+\r\n=UsEZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.2b420c5b3.0","@material/rtl":"7.0.0-canary.2b420c5b3.0","@material/shape":"7.0.0-canary.2b420c5b3.0","@material/theme":"7.0.0-canary.2b420c5b3.0","@material/ripple":"7.0.0-canary.2b420c5b3.0","@material/animation":"7.0.0-canary.2b420c5b3.0","@material/elevation":"7.0.0-canary.2b420c5b3.0","@material/typography":"7.0.0-canary.2b420c5b3.0","@material/touch-target":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.2b420c5b3.0_1591632888683_0.12207465874395518","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/fab","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9eac9181a54dfdbf387b687678a1d3c7b26bb507","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.8fa22aacc.0.tgz","fileCount":17,"integrity":"sha512-dnan4gHwlgnuRca2msX7uYhOBU7W+Warw609H5dKpvDykmmoi9Fujm8DhFOB66gjOSnIGme4/+j0WNSnpV9WYg==","signatures":[{"sig":"MEYCIQDCusIzxF4P8qu+BV7Lya6tyb+WWJrXws+LQd2iiQUvyQIhAJSgthTA66+K9vHUcxCIkoCkZR8tt2IuzAzjnMLf+CX1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n3CCRA9TVsSAnZWagAAr4oQAIpdVF+93VN6RZ2am9hf\nbVA7jGKGhtTtsKSXIZgT9jpF23KKKtD7b8o9uY/QVCR9VvcKNDk37hVDQWgJ\n0hV3q5QskUWOG5f01q2DsTOU7KAAtFIB/Z+kwuC5nIvfsXlmpQOjOfWBazf9\nv7B4sjFCOaWalwCI8rSUTDc20vCO1LR1SqlGq7JUcSmqh3xQ0N+fSe7Q4qY4\nu3u+w7808hHL75/VkG0Lc5nESmOgkpDXioXU3S3HfEX3BWPyjHfpcEV2aWIs\nHprn+J06po5B3hRtbcWMQMUgtoXUuJbtHGp+znX4c+9uTGbbi9WX8r1drcvu\n6d0ls+0KptjxH9QUDzUKNFBrwnS4TeLA/AF8t5fRQBJiZ7PDYsGTV6hjoeFG\n6wyqBwTSHrLltoAttwCsRIucY75zSqBrI9E/Y540Wf78gAxiPBlKDdOUpyM9\nohNWeKrIaABXjk696RF+Y9OB17SGUBDbCJbRJdL51aQXMbBvOX7CTKiyz0+v\nM9UK3k8Al1THjFB1dsuwOgYrchn7UCnFjHwLtaMOYymQgMHF8PVeCQkXmrBN\nclFoi3Gjjq3fUDg6hlo5R90n/8mcsmVkWaeF+u4MuOXkMU8UBBsCAGsDl7Iq\nptI8LyMNFJLIBRVdDYIaMmdjPKg8tnTITZs4eiYh0onMJIoSUx11ZP0TGaCY\nu5Ex\r\n=TDTq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.8fa22aacc.0","@material/rtl":"7.0.0-canary.8fa22aacc.0","@material/shape":"7.0.0-canary.8fa22aacc.0","@material/theme":"7.0.0-canary.8fa22aacc.0","@material/ripple":"7.0.0-canary.8fa22aacc.0","@material/animation":"7.0.0-canary.8fa22aacc.0","@material/elevation":"7.0.0-canary.8fa22aacc.0","@material/typography":"7.0.0-canary.8fa22aacc.0","@material/touch-target":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.8fa22aacc.0_1591639489749_0.7986941507318746","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/fab","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18c37b0fe33cb710433c8e1bb0a7534d8b50eb02","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":17,"integrity":"sha512-VtdEdsUpFJ4BeTGzWmYCF/a5HLrJG7MC30L2bqEjRS118IIHUnfudiUA+3jAZXYZQHHqJ+w9EE+Hqg3c5KxqpQ==","signatures":[{"sig":"MEUCIQC3oSUsvUbXi64WWFqk+5qv5ObeKMDUFxq1ak08oEKyyAIgFQqW1YmZd8vajHRK+yAwQNESGIYEVHbcZE5l4hlG1Rw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ocVCRA9TVsSAnZWagAALRsP/1JAr3GYUwVwt7kCWIES\n/AOPIaRneOZ4g50Q2z+6CTrD9cpRinJmeIu/Nk8gZBctp0DFQqhgmbphffxV\nK/9af9w3ZmZ8Zhy5bzYze4Er8BC284mVCGbB6zVS9aai0gcvhBIcXvz4vK2N\nQ9joNdQFSAC6MuMR4BIX9i/te5HLqgQHDIAQZXnNVRjEe8lRAd6+X8Z9iOTQ\nfUHjW5S8O3C93Tq13KgmmqMj+oQAUegD/AF3NTcZEg/5iTTGqbxXeBeQirNc\nEsSXA5rMz14NqLVUQh7cAck+iKPh6/9GC3W6m2jgpQC1r8Hm/QHan5lT9SoP\n/0YtnzBbS06271YJ4ljMYmCsuHAVq1+YddyfT/8l9dDmWY+vE7wyDOHPtwpx\n6CrB9zNu6jvty2kJZqRYlAnwofpBN8U7QmpsSL8f3zi1Fpps8PAqMPf8OkK4\nflZmfAu0IMVenwROpWPoczDusOz3M5YfWcEo9TLdsNltE4ixX94U2NEHForf\nW4TTZEWdJ9203GBeqyY6+8AkjG1Z+6jXoeCa9J2C6i17owJnTRP8eZNWZ3Uo\nRJontgM0fh5Ml2NDm3xfOpeRE/VPqWZ+RAvWui5FPmfvqeh4qci2O+tyGJNf\nM/hAryRsxzz5CvblBAMbxZOygyQbXhLVNRwrDrYy8Q5cIZMLm3GrruRmt94K\ns0rK\r\n=nrPc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.21c4e4ed8.0","@material/rtl":"7.0.0-canary.21c4e4ed8.0","@material/shape":"7.0.0-canary.21c4e4ed8.0","@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/ripple":"7.0.0-canary.21c4e4ed8.0","@material/animation":"7.0.0-canary.21c4e4ed8.0","@material/elevation":"7.0.0-canary.21c4e4ed8.0","@material/typography":"7.0.0-canary.21c4e4ed8.0","@material/touch-target":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.21c4e4ed8.0_1591641876689_0.15132003659128457","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/fab","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.dfde46516.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19024e7238d774244489867114590ca42d940266","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.dfde46516.0.tgz","fileCount":17,"integrity":"sha512-tt7Z9ksqJ9fqJ5jqYbYGbUeLlDe03q3Y5VyKx4egFD2EofEEhYwl0r72QINGDNmyt0An2Ebj8Otp19ztOIEXgg==","signatures":[{"sig":"MEUCIQDRcMRTf8v8txLQRWRKYGDTUyq9xc6vmjgYNNimzYbG2QIgDxyLfVU4wu7ciQe2fAYTFUnX93LXc9tR44CbSQckn2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pSWCRA9TVsSAnZWagAAlzkP/jeIn25XBr7/nbtXtoK7\nlzDyrWar2H7/rnnnS4C26pjXzxAsFOAO2dfXPhHeoWhPqtwPcEIBvZ4iKpNw\niRWxLbcQcK7u2Hjk/QttM90OaLD9W71hMUIu6H/EkyvDtpwcFk+yrmXUkDl9\nxKspZIoms93zHFhKx+jHIMoH6MFHYU55l5elaSi0FkpB/dyTWy8H6/dVhpMM\n62JZuhBzPoDN/yhVkiLWWZz1vZ80CC3o5JeggsJzI4ytKMBY0Dr5y5UYyWyf\nNEf1RfR0fpHCOLSwEv+x6Vzdv2ES8fmm7mhLwAkZNNDtVP+6OLhg9dWtPrKz\nRjWCTbEFd+dp+nxZsiy1uaE41sAGzruuuM8ldxqpCSekpyVUVf8NpUkhrqg5\nDT6bil7ZJdX6KA3BXz0FMyD5qIjVBsqpA2QmhGbtGD7xbw1rLh/U7B2zgkqF\nX+Cz7v39ohlTKYxDmInlNcfWbRmGLFmvrYoQwKoh5+2XvVb9yJQA9ATGGp+i\nvS2FVwjvxBSUnkul4J0uW3nYzJaqILu/PshMqHYfAO9uzEoPat1YNeqD3ifh\ndS4V48TS5B18xNPqTIuLp7VHVEFO55j11HZXYI6n1GTCmcV8G+Uxhyhub0lE\ncnRNKh5BQE58SkObgNWn3lEzLipfr2TFGEpDO+mqcCdT72bRgrd26S1qCO/4\nVcZ7\r\n=5z9Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.dfde46516.0","@material/rtl":"7.0.0-canary.dfde46516.0","@material/shape":"7.0.0-canary.dfde46516.0","@material/theme":"7.0.0-canary.dfde46516.0","@material/ripple":"7.0.0-canary.dfde46516.0","@material/animation":"7.0.0-canary.dfde46516.0","@material/elevation":"7.0.0-canary.dfde46516.0","@material/typography":"7.0.0-canary.dfde46516.0","@material/touch-target":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.dfde46516.0_1591645334169_0.042200418109113125","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/fab","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f671558914b7b0337d0d5fdaaf6dceada7c18c1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.05cc5c206.0.tgz","fileCount":17,"integrity":"sha512-eueQzkATHJjJXXot3E79ZnN7fTHJvbXYFvtXa1B2i58oz+XMqyQGAJ4jGVUNAoktc5meLx19JUPbMJ9I7E0knQ==","signatures":[{"sig":"MEUCIGnY5OSua3aznvpoxjys+PpnRXrenuT0XvPahXxFARFfAiEA7yjRWSagFe/9dgFUIXuFho8dHl12ps8nV6uLGN1MJGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":229100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qY1CRA9TVsSAnZWagAAgmYQAJ5JdTv2XHLWeOp+CRCs\nQBF2DE667vaNzXpOx15KhALczy8rkgv82zgJ3uwKzUzKcpwgqRgdypvehrKA\nHCOfmMLqEm3TglBSsmZatK0BE8qe7IhqoHBac9mAtV0QSwfdxxVvgATHbQvC\n7VLmnvUVRG0epEX4rMC5Ac7SqxbD9T8gZkTR8t02uyHqsG570MY0nnpC0uw5\nIHPAyocGMK1uxQq8EvXLbBb3/xyIxO7/LyD+2SNana4KEf8firfw5DHB+367\nj9mAsvydQzzafFBL9c0FYUjFXWf7bVbbpOHSp9zfV4yn0lQ3UuXs2Zv50FlR\nLxU9OzdpM5895eZRsv8kYH+4g/fsSdPciHLU6OFhwn8F1KrkPm+Iir8aN83s\no7xdmNqc31iNQ9V4qlO2JJnfpJd2phbFAVY2YncpAUDS3eJ+c7gQSmj/T7nb\ntxrxhS++B/+bOi87o4AmsxS5S4RwJ7XotJe2+lxlJ2+3WOYSdDbDlbxPJjqx\nhUL5OIyQlpBIVX1/Gb8mvPjEe3ZuyxkVbMvcKmVY9W4pH4cKZUasYuXPU9Gi\nVptbEYt+Mtkz9nUmqljfRULS+ND7eySZBimPMVaOGQAnJYBot1I7/giSFoBr\nr3s1urnFBV/dsue9fcqWrvOfoExP7/0kmbJtekt8eiNn2qwAwno7c0Nan58D\n/Jcq\r\n=Lx3p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.05cc5c206.0","@material/rtl":"7.0.0-canary.05cc5c206.0","@material/shape":"7.0.0-canary.05cc5c206.0","@material/theme":"7.0.0-canary.05cc5c206.0","@material/ripple":"7.0.0-canary.05cc5c206.0","@material/animation":"7.0.0-canary.05cc5c206.0","@material/elevation":"7.0.0-canary.05cc5c206.0","@material/typography":"7.0.0-canary.05cc5c206.0","@material/touch-target":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.05cc5c206.0_1591649844509_0.8144140878836823","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/fab","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8292be530dfee2058e2a9bea065ad2716f0f2c3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.3ee488f1c.0.tgz","fileCount":17,"integrity":"sha512-ZiNEc+wDH0/360FA5jgnSPN80F8MzrmQDCyBSOxIkT9J3PSTImcG+hdAV3+ozsSTwVfZlqZVXbzBILC4fk7OeA==","signatures":[{"sig":"MEUCIQDLCr6jXxIlyks47lWVANjZtijLX0AitOWCbdXZsJSqgQIgWfLapFHij464kSQQnBVA+f3NOQO72irPLeh0URPmxeI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":229100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36KaCRA9TVsSAnZWagAA8+EQAJj8aoeMHoVlhj8dK/KB\nzUIe56+X7NM0zUenkdfkvGNFsTDjnp2Dvf4O6c5fgAjx6CRRVJTKIX3vtFwY\nI/asm+6gdrNqXaSMsaSMLB0V7lHxeBG9hqm6OJbh4nrEaTBAMqyTQQzs4t3M\nntRT3jdzPYvKu7imD03COTHRk5/wlbsOhIEwT6wZKioZcBPKpVSxXlX0pvzy\nKVyqN9ltLbcj66xB5iM2FqSZwq8ZgoA8XkIqlCj7nEmKbwAiB7amrI3aUkAX\nc17I5NAAtwHX2p76KqYm8Day4+qu5q/22jE97Q9CQ73BIM2kKdXz4uopBGQE\nCLh3DzhQEb9XtfarT/yIBxM4a9e4m0V0RmTZ7QKNbdnlSxpbc3qZlwHXXGCg\nOP5Q32YZEfehBvs82q3yIHWaHi6JMDnqey77TUXhGlcYIFcKQx/27dNDMXon\n96nwAX2dHlOObvCsHxP2bBzYBOhRfWXJEwVz9c6aw3xbUQHRn01rQsNEq9rr\nCmtwOrk6rTyr7iyjyvT2NVQZrEq9UzwJR0sWGSL78qt/9yYChPS07lJufogn\nhtFcvkGKCf8FnX8opL73IIndNpfuLTReCQZt7uMejcnuGCldRqB/niijV20+\nQaQmPydTXtFkwjcXyVxQ4lklzSft9wvtHGC2CUhcs5NOQ5r67D3B3aZ71z7h\neCJ8\r\n=kMKb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.3ee488f1c.0","@material/rtl":"7.0.0-canary.3ee488f1c.0","@material/shape":"7.0.0-canary.3ee488f1c.0","@material/theme":"7.0.0-canary.3ee488f1c.0","@material/ripple":"7.0.0-canary.3ee488f1c.0","@material/animation":"7.0.0-canary.3ee488f1c.0","@material/elevation":"7.0.0-canary.3ee488f1c.0","@material/typography":"7.0.0-canary.3ee488f1c.0","@material/touch-target":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.3ee488f1c.0_1591714457649_0.8920532331908257","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/fab","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"443fb28b3d94f0edf3b00eecc3923a7bc228c8e3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.b83d720ee.0.tgz","fileCount":17,"integrity":"sha512-PpJv+u/BNyf2MxqB6eyqL3OA/DEp09XxiNW2Sit/XeBqNwi22GMKXiXMa7u4ldOX+lvHcEFULfTfVg8smdDsEw==","signatures":[{"sig":"MEYCIQDyQuuZnmHzMjcrgyioSFPzZ/RtAA7zw8FI08+uM52BGQIhAKXWVBM02wh7HBF8VKJ8AROvXgpa6XvE2sfuoySvjp8L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":229100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38ZGCRA9TVsSAnZWagAAeDUP/349zXSShIv6lWpaw/Zp\nuH7W18uJPKW0d+G86Vx31i0VmByKcrQe4R+4GEZ41HcuMpfqUb2259/T3tRy\nd6LNEFqe5jY+zcOfmh+bjE4cYU+xuFy6xpsgs2rftX2cb4xzEOj0kNKH21mK\nybSfCX7WKd7DmxYaJzTuugdu7FjnejHNiXHIR10yF4l2CenFVLXBeaB2BDV5\nYnLi6a9wninnG8RPzREqqkDxwqIOY4rUcU+tiRMT3KYeSgwdyAp7Wj6LLMPN\nuYsq3E6rs6ZeyrY0jF//GsHHZ5qDkVlFYMw7/d4rg0YXrAJMA3Xjpm4r0TRa\nOCC1sw9fA4zAWiLhL6fTY1joAeY7EH8YrqoBg3v+FKakPLbBWAhCVOkYbM74\nAaj+y8dZEUFVR2nGvh4T2fDitzKFsvhq3yEp02KelGLLUUnkADMIgaeRFFZD\nPnjV/N7Q5w2tJRrOPa2Mgq33QugsJo1dO3sQRRR1VxUd05efCaJy/wVCgDTR\nl9PtFGLl3DeOiULAoUhDz4sASwuMfITH+R1wQ6Jq2fkE2tVb5244qposxYek\nccHCFpNIROdpMKlDOiOGQSA8xU+kSXajVLWWVifWqApkNGT862hSP4EQvVql\nuuCUwO1OzDt9Xd2NXyFPJW6mSNGmW0qye/8JGhHcxctcN3ORB4F3YJplbFDc\nanF2\r\n=6+xZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.b83d720ee.0","@material/rtl":"7.0.0-canary.b83d720ee.0","@material/shape":"7.0.0-canary.b83d720ee.0","@material/theme":"7.0.0-canary.b83d720ee.0","@material/ripple":"7.0.0-canary.b83d720ee.0","@material/animation":"7.0.0-canary.b83d720ee.0","@material/elevation":"7.0.0-canary.b83d720ee.0","@material/typography":"7.0.0-canary.b83d720ee.0","@material/touch-target":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.b83d720ee.0_1591723590409_0.9842158413600126","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/fab","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84f901f1409b9b2289f98413c1acc96ef1fedc99","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.afb1c11a9.0.tgz","fileCount":17,"integrity":"sha512-wa1gkNQ8OdNHfN603qkALYugPXNWRFVEOgFCukDYJDCpAEgScpBEq0SROBCxJcqfWCZsx4XVKOqguGbv5w948w==","signatures":[{"sig":"MEUCIQCj4LbLVpuI/H3hDPZlQ2UGdzgwN7Q3deDynkQ4OCdfxwIgUAs67xXIjsenpUDpoxrI76oHzYFBTJPYfXp04xKrLvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":229394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+43CRA9TVsSAnZWagAAc2QP/0AhklhZsX2z4jKoQ5Mn\nr4MwSIwj/BQvvTKI0KXkSjW1cH9nST8FDwO3IpeflyLOA6tKntA7BJLRSCvP\nQvI60VStLhLQ7vDPU2QFLKrFKLOtg9OrS/pk3EiAFH2NRim4ZgRO0ArsO0t/\nwr4DpSUabOlac3uFsNpcv+J/kj+2ryWmaK14x99pE1ROg7YqK8Uguk8sHlez\npmYNLAAWlMtLnS6l7nqgO69uP0C7+5JhnbhoJN/YTsRs+NMIKhXCys1DiV5B\nxpnnUU+DLtE8PLwnXeM/vuGLEwYQomXO3HGf8pIWzK7jFodL+QumPRbtEH7K\nG+nqi2G7vV6+fqIga39O7OexN8iAowe2vxu65C2rW8VE+aWxibJKiAfVSEtF\nVs4ivkhJsH3PiUnx7sr49/x49OMuZ22NMfWDe4+wty60vQK248zFWIGs8t1c\ny9ntUt46G24AHUilZCYNqpKtSjkrSYRv9dh2SkFYvyS1xeDd4MP3zNWjMLVP\nSrdMlzE/QCu1kVJ6LefAyoeD1WEm9IvTABflYmuOYR6KbjcZlZWl3EDt4AHr\nuNbGbpRR4CnhNyOpG7HBQ1Wbv+RUV3j+1Ei9BqcIToUJVA4PAQlc8+tXm3Ot\nDNk+2QCrobnfI875Jym/LZ6BscW2U/SsDs63AjV8xR/l4+fxoC9jEsux+tFa\nK3FD\r\n=1ERR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.afb1c11a9.0","@material/rtl":"7.0.0-canary.afb1c11a9.0","@material/shape":"7.0.0-canary.afb1c11a9.0","@material/theme":"7.0.0-canary.afb1c11a9.0","@material/ripple":"7.0.0-canary.afb1c11a9.0","@material/animation":"7.0.0-canary.afb1c11a9.0","@material/elevation":"7.0.0-canary.afb1c11a9.0","@material/typography":"7.0.0-canary.afb1c11a9.0","@material/touch-target":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.afb1c11a9.0_1591733815349_0.7042299776066947","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/fab","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd4ccfca7f0413c1ef5d2831eded992094ff0293","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.39e6f71e2.0.tgz","fileCount":17,"integrity":"sha512-mnzL8Q6wrSsD3iDHHyVuA2e43i54BmPFZJQpzg+MX/bLwv6I0OQR9RfQFBOQOLNoZGlVEzqYM7dP1jaXuybfrw==","signatures":[{"sig":"MEQCIF5Mff58SE//HPCzc7EbZU99Zhw8E/+XFZ3fBOb5pZibAiAEkqgNccyE5L7IVb7FHvJRwYpiZlYncZ77I7WpBR45BQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":229394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B3ZCRA9TVsSAnZWagAAVXoQAI6GnH2zNhCHO2rnBbUk\nyYJIhkC6gLPY9wKZRHaGtETsFWa5tdZSidtW8Otg6Mkj3u1UxzxOYvszpxBQ\n9cbmLH2Kyb0pO1MHxCEHWjgqrAFIlqpQhV1QcVTsrlo4Mow97Ur+UFSOEaJ1\nAIsA46rCuX3sAPMKCxyoZ0+qbRVtwqE/0pjRu0spXcQxhMz62S1ztVICfzct\nNxtEy+6YTze73SWNqSP6k/PaS49EGGsoPJ1V7gDUULJS3RH1E9/AWQpRxvdZ\nlyumnGpFsTVGYnfqxa+23d4nMDtqDFqkEEC3JxcKTdkV1FdyowmUVCAD2sH6\nq2Pir26dqHWNM1UAibzNq+w6TCsUYDQ5J6vxbDyevOFyGH0YsjarFrl+10NU\ndV5iuoWkCMMIO9hinBc/Y04YTmLJ6IXdtfht9VNURvM/4nlab8rHK16jrpOr\nkCNFJycODJPw0uHjesRfASQfm+ZsepesUdD6IfxCwVzszISoJNDjiCBMBn3m\nrT2i037Jfbe3WtsHutSWzCOCJtN/4JsquoMiuj8SEv7dcSRWTXzyh15tLePK\n1dkmGDw8T6LfJ4QIZYBbC6aNzlvMN49sGyzZSIYWyGiivkzN0PbBNsTGSNsc\nj87frzpC42fIPPjR+L8ZKVz+IV/wYrAFARAXHEAD+SvSeOTcqJvjrRhNeQTl\n+vni\r\n=qYTH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/dom":"7.0.0-canary.39e6f71e2.0","@material/rtl":"7.0.0-canary.39e6f71e2.0","@material/shape":"7.0.0-canary.39e6f71e2.0","@material/theme":"7.0.0-canary.39e6f71e2.0","@material/ripple":"7.0.0-canary.39e6f71e2.0","@material/animation":"7.0.0-canary.39e6f71e2.0","@material/elevation":"7.0.0-canary.39e6f71e2.0","@material/typography":"7.0.0-canary.39e6f71e2.0","@material/touch-target":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.39e6f71e2.0_1591746008783_0.34922017208713085","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/fab","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a883639c851bf2598310b61b49c95ad30323a96","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":17,"integrity":"sha512-AQyykyGETyRKc9MD5n4UgYAYffd0FXXkV/mtEnI0mmPihPI2Oyl9NS4YIn2LCh7qmLca/JUbR4QHyKIlrYavWg==","signatures":[{"sig":"MEUCICvawHEmRHylXkPEmmmmuCQfpbu0Xq4s8JorO6QpjQE0AiEA5gtY7iP2oKEYf8u8bI1yJjfHYxBmguHRKkE/Qj4lSP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":229394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m4aCRA9TVsSAnZWagAAUIYP/2fuz8DL4JZWvPffh4Ei\nWfedK3QuExc1f8dBTc2UnrvVZ+uIg12E2Zehje5YU6L//NKM/AmaQyNmcmCg\nuI51Ygu0JX4OmcM5qJgmO0IikYxZzHai/5YdyxygSYkr5X/YRI+iA5sICFwI\nWCYS1b2LDip2fdsTzuKTq5symrN497PoqJ7vHal7C9vr4ltdaIQjw//Obpt/\nrchgx0Ilfrat3DuIrOa1NwMVl8zs3l8aIfwwzC4LxprmGDZNTGbh59pY0oeO\nVWxJOlqdeBVgRr6vnH88t8D/J3D5GJnWogbz+pcZvwfOYrgbu2OJ+FyzbpK/\nmJGoa8XX6yH9849zJyVBHXSQl895LeeT5yEHrJXgu/oWaRqBbKy6mCoARX0Y\nyCKhoWkp6Y5bfCHytrVCVMEryUixmhTnMzIIzdeUFvHi0wKI18p81QwO5tBo\njGDQ/dZEMokyRfjs5tUK0XBw9yDxtzfW2mk65sX5pztsc6CVnCCpZxIOi4zN\nrAY0JXFnO9RRDpul5INJSW0tdXdhY5XTiOI8OMTRGbodzpzkhU5h9nx5CQ/e\nGKBrTqi28ECrCeGmA8BKrffqWhKLm1uSwJzwjbRZNNCVPGBx0xzCcV74R3Se\nTCc7H5exleglr9L/XEJdvGwaSGPxutRxZlTY0L/IZ8GTmFDmn7NxhjThrU2M\nLJ44\r\n=ES5c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.d4c66dc7d.0","@material/rtl":"7.0.0-canary.d4c66dc7d.0","@material/shape":"7.0.0-canary.d4c66dc7d.0","@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/ripple":"7.0.0-canary.d4c66dc7d.0","@material/animation":"7.0.0-canary.d4c66dc7d.0","@material/elevation":"7.0.0-canary.d4c66dc7d.0","@material/typography":"7.0.0-canary.d4c66dc7d.0","@material/touch-target":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.d4c66dc7d.0_1591897626089_0.5431994835025624","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/fab","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d04a7238b2b22f1350f41eba8638d2afa342e53","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.be4a19f9f.0.tgz","fileCount":17,"integrity":"sha512-Qi2wYDXAnjl2XEFbfomXVf3IHds5lOFW2NoJ5XrXd5mvdP3O3LzCNHACUXlzL24j+xNn1tNIFx/LFTDsiU3jJg==","signatures":[{"sig":"MEUCIQD0ZufnHgPJnLSILJFNvTM2mbrbk2iEKZLZIYDlIWWEdwIgc3wPKFZdRH3V44p5Pq9fSK5du4UWhMQKLFcpJfhyKqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":229394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xv0CRA9TVsSAnZWagAAWhYQAJWRbPkw/vIm1HVvMneN\nbLpAFyh34TWKzKmzuH3mZ56MYw2CYOVNt0+jhLfU/pK3JrA0HwZ45NmSlAyB\nEjCQNC3yxeoaBl1ZvX5tuPe/J7wzK1gD33wUqgJIiJu88uvavxm3UMM5xgLR\nfyykRqbTNMbbEBL0RpglAg1jN/nttTJcnoWtOJ7+6VVq8aIjakxdyYW7aK8Q\nZFFlW7VWJNeR3tn9L5tKHWS1XUd5NQ2Q+QwM8kRUGP5csqYaw3vV8SHoUhjF\nZ802S1a3zSIlb4EOWRsBAi5b2jX7yaJS/H3IdDomnZKGKNcKngVUxtjLJkxB\nZ9B3To41PMaH1BkZu2OKj2EqqvZQ2fChiLWi/OJINc0P5giEmYCwLH4T4YPk\nLb/DKW1BX5GuUtq9mD4GzBuLJlYsnQTzumCcBaObmJAV809ibbzmj79D6x/+\nDFpTQWOcdMZL5Ig0vxalmHHqkqUvNXT+GcjGn+b0JrBKB1YmaKvDU3isYTSs\nn25bxxa9r1s4Hiq3/2e9LcsuW+xrrm2kxb0LFqTqRbKztrmWztkGrZj1lqeE\n9EekC+JuyJ/WXkQKa4qOahowpoELXhTF5s8AGkvLGxVdXxFMY3lyZPe1jGB4\nxHu82H8EbRJ8tRuXyAGWK/6zkpltQbN9sDBmuf+UVsMWF6WbgUqkuWVL53iX\nb3Da\r\n=58Gt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating Action Button\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png\" width=\"78\" alt=\"Floating action button screenshot\">\n  </a>\n</div>-->\n\nA floating action button represents the primary action in an application.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-fab\">Material Design guidelines: Floating Action Button</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/fab\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Basic Usage\n\n### Load Material Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### HTML Structure\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Styles\n\n```scss\n@use \"@material/fab/mdc-fab\";\n```\n\n### JavaScript Instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Extended FAB\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass Mixins\n\n#### Basic Sass Mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass Mixins\n\n> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Additional Information\n\n#### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48x48px.\nWhile the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n#### Positioning\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n<!--\n  This will position the FAB in the bottom-right corner.\n  Modify to fit your design's requirements.\n-->\n<style>\n.app-fab--absolute {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n}\n\n@media(min-width: 1024px) {\n   .app-fab--absolute {\n    bottom: 1.5rem;\n    right: 1.5rem;\n  }\n}\n</style>\n<button class=\"mdc-fab app-fab--absolute\" aria-label=\"Favorite\">\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.be4a19f9f.0","@material/rtl":"7.0.0-canary.be4a19f9f.0","@material/shape":"7.0.0-canary.be4a19f9f.0","@material/theme":"7.0.0-canary.be4a19f9f.0","@material/ripple":"7.0.0-canary.be4a19f9f.0","@material/animation":"7.0.0-canary.be4a19f9f.0","@material/elevation":"7.0.0-canary.be4a19f9f.0","@material/typography":"7.0.0-canary.be4a19f9f.0","@material/touch-target":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.be4a19f9f.0_1591942132443_0.7365892886612639","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/fab","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57f64f93bb228196ce6da00936a3f7c13b1097b7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.a6ac8f629.0.tgz","fileCount":18,"integrity":"sha512-5uIeZlSiIdntQd7KaZrJrG6sp0UGNjSWcmzSS8gOl+be0NM0cSGoYeQRfcxQOivUX0KBm2D523jPZcg2PBWAyg==","signatures":[{"sig":"MEQCIFLXTuEvC4mS9Z4BqWz7H1bVfO81aYKZkPzKUQOTV7SJAiBiq4mRdHTaHX+Dd1hxDld01d1ffmEZofd17Mqs7MJxAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+ieCRA9TVsSAnZWagAAL7IQAJ9Gs93rMArfcW4FrnE2\n33RpxBvh3j4ktlL9FkGqZL0c9lpiDUXNcM9C9zOaTwKajWKIC0eupyems9Hk\nGs2y2AjXRsBWO/UU5CxqZDNJ0qNfNKYMRNBKCeHxVPHonI+s5o4shK5R9dAi\nXkLGHZcPh91DgY0TwDxFx/205d+LmnpMVWVRcVAXk/dKrlK7NW9THVO2+HZK\n7us//7bdXL8eW9CRhzE7hq0ID/yeWHD9RAZFvKa6ZGm84mTVaJrNM73UiJ2C\nRClG3e9+U66gkGC2E9CekgZdb2DXl4qLt9MhyQxiOwhD5+5Y727uzYn5BVbY\n3h7jAaWqEHUTqK43w6SgWDoGEh6ehObgBpk29d4e2hc3SKzXd8KpbcQ1zJtz\nQwbW9pgNNUsGckp14/3PcS6FD1dRpNQ4FgZ2cOHQA3oz2KjT4FEvESChy1ql\nF3BMUzZKe9AbZ4offBFzQLGFJIYxkdyz5SWy0QGKGw0c8IMIHmtncukUU7pe\nSb/a7tptUEeGrfhzs2SAIvOR58H8ZUi8nIcRiwhZDggLZQ47/P7O3LZKpZIm\nPdrtFD7+P3xguV+KGHOMam2ZQHOrRcgXK5nR23uqhzzRv81yoKWSnOpzwYk4\n8UDZt/mlL2TBGyCluCRbIIMKl8Y7Mj+B6pkGWITPAX3Snfuh+JzTXek5Jy4c\nk9y2\r\n=greC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.a6ac8f629.0","@material/rtl":"7.0.0-canary.a6ac8f629.0","@material/shape":"7.0.0-canary.a6ac8f629.0","@material/theme":"7.0.0-canary.a6ac8f629.0","@material/ripple":"7.0.0-canary.a6ac8f629.0","@material/animation":"7.0.0-canary.a6ac8f629.0","@material/elevation":"7.0.0-canary.a6ac8f629.0","@material/typography":"7.0.0-canary.a6ac8f629.0","@material/touch-target":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.a6ac8f629.0_1592256669633_0.1386624501789473","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/fab","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.9833dc287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"390104a7b008f40ac26a5992de25e8c743ae02e8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.9833dc287.0.tgz","fileCount":18,"integrity":"sha512-8eC7CgmFD5ighwfFwNRftmzeqNHrNMtSsz0nd/jP+nMO4Cjo7fzEydYiGAVkc0rEP32iAj9hZawvdcn1yYx16A==","signatures":[{"sig":"MEUCICqdSbQ20zoShNw3wW1HygOT1rhhEs9En27d8T46Ba87AiEAgh9Djqb5HNq0XETYjyXGojQ8xSXLFh4Uw0DLM0n+O2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJcCRA9TVsSAnZWagAAe7EP/0pokKf9iYaZmmiKgbNu\nMPU9ItsF3Si+1bZRPXxy3AAM/C/Z4JRZ6ynGdvpuxPlcyhaex6b2rWo+pOJl\nTCPT3OgoQ23CuU8W/AppRDSQTCVsqrZKu14i1po6TK//hbTX63pG3GGyLzN9\nC5pt5X2PPk2KoWC+y+HOiiTgwMpcmjS4GeqlZZmWn6k7wG8zsd9KUva29OwY\nCREkW6F/leSe+MVnbGPMm6qqyiMqrkFdKFRAdViLkvClcu6I8hlpkC6dZlar\nwSSWriZk/oHJiChnkfVBDk+dAF9BOT/c1tFRX19aSSiLXPWlawujFLlgrJQz\nYqOfT9/1rkoCG4QmgW1NZIyGWTXUDeu2oONpxz0wFWw6u38PtzkVxLJc7TJe\nUjr8IAT90/LysOKiCFSL+HPYbrvGQbPvW7nCDvuD8MVCNt3AzGnN8Surfyjc\n6AB8rPGqXFgg0PYklKFf3oNzJ1tO+KVNT3vr9ZgIIx+qhxhPW/ETtJMctXJe\n6Cl9xrfBotKDV5NNQZc5YsxCGOnpqoNSU7DqLyDxC6ECMrWBvJfW6LnFP9TN\n3CeFUaV/1m5mkLUATJcImjRPI3OB01J0uyQiRAK0Sok+lFJZfrKl5eN73Bu0\nxvmUqcWcPkQxHriEuKOJOk5anLAg2ZLX5K0vT+2sl5lQAeQLzTkWD84vA1VO\nYkbh\r\n=VU4r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.9833dc287.0","@material/rtl":"7.0.0-canary.9833dc287.0","@material/shape":"7.0.0-canary.9833dc287.0","@material/theme":"7.0.0-canary.9833dc287.0","@material/ripple":"7.0.0-canary.9833dc287.0","@material/animation":"7.0.0-canary.9833dc287.0","@material/elevation":"7.0.0-canary.9833dc287.0","@material/typography":"7.0.0-canary.9833dc287.0","@material/touch-target":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.9833dc287.0_1592336988234_0.009415845791500344","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/fab","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c48ef29f8a4b938c8d07e9aca64a5f8dfbf9e28","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.3aa33998e.0.tgz","fileCount":18,"integrity":"sha512-kDhU/jDWzoGiBJ7LrBjRqy4auAANzls1EB5R187FZsjnL2F+7H9cUtzHsCilI9k9hPA8kDs6wffLtZ5bAACt+w==","signatures":[{"sig":"MEUCIDvP+P9LOTVoGKS4ZB0VMuqJzMD5cCeblVhR1Oq+0XbrAiEAt5ZcFDfcwm/zUHRxzHaQ8nk8/isEuq9QL9aQ9u5dftE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SngCRA9TVsSAnZWagAAQNMQAKTbXcPj1vZubiYldO1h\nh/WTEttfaKSqGN1zo18Z8a2AoFaTcE8vVW6mq2vxaVOyEWIHb/5sIsAZpvGB\nyWfN/QvnpVpMQ3AFwftRHefDE5xU1grhf4FP6cgeVRIkAG3oUdTy7h0R5Pl5\nn7VtMCEQA38wIytJVSd5wY75XTS0MZLZD8vdlDx6iuvXD7kpukW9OfA6epVK\nP1dxDkQFzRukSeqMKOqW1zK/iQwY+4XpQquoYZU+cpT/ix3HBmr6B8m2Srrx\nWR87+LknvOPOwvzLUvhbJkqyOJEkGKYXtPnX0kuoQy6SWjgbc1/tSqqjtOfs\nkj2RedteBFSkhYJOi1OT8jBWZslg1zYQPiPbd8etWWKHQG9riTf/fBG/rLJc\nQSBBNbrIFts8bHw1gW4GGit7SmB11NFLE8dUe4Z4jwwc2b+cAbbGvw5sfjWQ\nsUJkxaxHnHhxtTN2LRwCgsmeeymlGYmof01RbXtUs+TRaE5/o/v6ZNK4WMzz\n1NTg8fWWQwxgZjqXGnOJMzMtqqgE/SY/g852IOaTAPctvUBGu0ceoiPNACMW\nnY+CHwVH1OJ8AT/3aWIMOS5+SXjimf7SXvTkpFRtIma6rg6Hdf6iIV2OPxil\nizbh04YEpHrKVIVni8iMyGo+VsYYhMHvW2b44U9lAQoBh4pDUNpEkgZVrzUp\nCf4A\r\n=uQkk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.3aa33998e.0","@material/rtl":"7.0.0-canary.3aa33998e.0","@material/shape":"7.0.0-canary.3aa33998e.0","@material/theme":"7.0.0-canary.3aa33998e.0","@material/ripple":"7.0.0-canary.3aa33998e.0","@material/animation":"7.0.0-canary.3aa33998e.0","@material/elevation":"7.0.0-canary.3aa33998e.0","@material/typography":"7.0.0-canary.3aa33998e.0","@material/touch-target":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.3aa33998e.0_1592338911607_0.416871442307875","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/fab","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"882caa9873b388720be1877708615060b26215cf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.d2b54d183.0.tgz","fileCount":18,"integrity":"sha512-uej+j/D4FuWX6VyEylErI7fO8RyPkpZF/A+TLQfLiKG4RQ/hrP4+t3upaPLKBwR/gjb/wsmAhVE1Sgp9r5a0ww==","signatures":[{"sig":"MEUCIQC4kOqcj7GcZrfG1eQ/Eh8iRebZJWGvj/jhpcMGKi40IwIgUcthXwrcTS2D978pM0yxIq+vQ7TzP8K/M2gCq6GwxNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sBZCRA9TVsSAnZWagAAUPMQAIvVe0k9rtsIDdObfP74\noOSJuqUs0RoY0fuWD5m/k/C1YxrvkOdS9x+al8IzZnBEJWv2d1lOH3uDdx2F\nQYCboBl+kDvHJ2hUIyP4fU865XRR0CUSwBEx+K3Yv3zsWk2i7cO/4z5GMe+1\n/AobAgv+1j6N4/M9THN+hDuT9YAew/vyLTL6U8vDS5KwFYS8w6PgtlNpvH89\nM6qjxlya8MtVfD3MWDuEhNa8YBIlJv11jaMyNGjOyUAjz1DURKjGa1nt91uM\npK3+UMGnIDpEiWBOXbIR4cenmbrYDqnltvb19ucqLmj8KLbj6tyeNE1yhET4\nzsBv8voPphnus2r66HZtxdB4edFOyUoo8n4l3u65XXnVdHAQda67HMgMpjDD\nE2kOkGdLRF/c/ItiFw45qnxn+fkBds24bUIFRsRhIyd+DcHSqfGR/AmH4Pmb\nVNziPlJyleYGYoQMeKs6jHE7zLd4rtxOkthc1Z4T75GFPjjE5Gah+iS9GZvH\nTykeI38jw5+hupzBEi4lWdKR3XCaIhIieZdBFzOY0fDTrVQUZiK7i6oxcPnh\nCUHboDRIXnF+ysO5U0Czjnbbk71ls0Dk2JPzn8MauHMmJNetY6uRMMyKJXfu\nzTkhQC5zGwNcoORAyokzQE9FJFAxN5GiF0z+Ylwehd8b05+gVwLPeBEwzsXd\n81Y8\r\n=5LEv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.d2b54d183.0","@material/rtl":"7.0.0-canary.d2b54d183.0","@material/shape":"7.0.0-canary.d2b54d183.0","@material/theme":"7.0.0-canary.d2b54d183.0","@material/ripple":"7.0.0-canary.d2b54d183.0","@material/animation":"7.0.0-canary.d2b54d183.0","@material/elevation":"7.0.0-canary.d2b54d183.0","@material/typography":"7.0.0-canary.d2b54d183.0","@material/touch-target":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.d2b54d183.0_1592442969057_0.5593613998267464","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/fab","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"121db0e9d30468206ff8e0cdd9edf46d1d0a3b3a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.f2a488e95.0.tgz","fileCount":18,"integrity":"sha512-ecPEi+M1D3YeGHoVPx0hDEnbYMyJomktVYZYuFCfKaWvkLV6PcBVixvIMQQwAKzisjEqcjBIxVOkSftfh0wA/Q==","signatures":[{"sig":"MEYCIQDDTeGBiH66w3MgC6VkpR4wIZ7M4z6dN+azPJh0QbG88wIhAMw9fHpSu841p1MIP0C3DH8wn0YN7aQlQmivLy+seipO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64KRCRA9TVsSAnZWagAAHh0P/1dM+XWd795Hnckn2SAu\n3Ub4z88h61gqZ29WgSCGYQBBHX0k7gy6nhU9eoXFSSHL8GH+W3UdKEQ4yjF1\nAiaAlVwZFpMW1MQKRXm0q1UnibyIl72rnVxO+/FTnXdOkXxY6EnDWsRDj94m\nHg9QEzvZ2IA+eeX7/1XXq+/4L/DLiR0hw/9v8EV4BkDniJn04CL/mLfVyrVw\nXR3QasyZYhyXCtJOoY2AB5593o/zsPCQVOeujggcWQZS6ze4ER/8aMHGr4Kr\n0YG/cB8jVfeY3rJW5BBpzYaXXnZPhV3c9MGOnrRFs/suhfTz+GzLzEdysFZp\nE8/uJdle5JxTMlf3sG5bhyvWh5JjHMAddAgWas7aXPNINRQmXJRRRxdrlhhI\nk5ccj6LyVjq3QfRTklj7336dsspNoDb8qheWalQ0xgD8cq+Br9VnBgnlY6i9\nxYjkextP8lOwkSOJYH+dkxWgIC6ZrKvn5RdXX74JSLLfgA0qd9XhvrwJwSjJ\nxB8l9B7MRY3h/lv+OyhVZJALANPB8U4nrLFI6qRG/UwgLDx3roJopukRkGj0\nuBn+56NAyzLGbUcLs4edcVFJB1S5X1HYmLYfo4LQFQGyCCiIL9RoehqL/qRg\ngB4Yf0Tat+SJj6r8zzE7ZeCXq5sZPNQfUB1X6PWXj6ZJgpZ3+e1+UZGX8AZH\nBZTF\r\n=I10a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.f2a488e95.0","@material/rtl":"7.0.0-canary.f2a488e95.0","@material/shape":"7.0.0-canary.f2a488e95.0","@material/theme":"7.0.0-canary.f2a488e95.0","@material/ripple":"7.0.0-canary.f2a488e95.0","@material/animation":"7.0.0-canary.f2a488e95.0","@material/elevation":"7.0.0-canary.f2a488e95.0","@material/typography":"7.0.0-canary.f2a488e95.0","@material/touch-target":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.f2a488e95.0_1592492688540_0.5602855643555393","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/fab","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fa1d3884554d70ceb3261fe94b9cbe80f2c7d64","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":18,"integrity":"sha512-oiutOeYkhEHFzDnf/h4CjRqsGxO8VTV5ZCRsmHCrcsQ7XFrZScXj496wc7W9G/d8xKPbIDf1cljCJ165mtqXEA==","signatures":[{"sig":"MEQCIE5Ch8gXeIVScDmpFH+8/mgsGqq1ERrpN1Z4N2/zr+3eAiBsjMRw6J/tyMFNApyov69LxOmx77DrBwLRJEVVnYdnKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64ViCRA9TVsSAnZWagAAG1sQAJZvhEZN8U3bGRBH+IEd\nEGH4dEbDhQQUy2ZTsdb0e32PQiFY2PVlgy8BN2+dChMoRaK4BKmMD7j+29v7\n5GzwL/GN4TR8zqC6ARSrvWTT5bC7ppX/5cm0J85qrZLBlwK19tYQSwaXDqcq\n0zz36Xx+PhlzSKQ2Os8OYVW95QbR0V4NutnjFrRGCPn3lyVBK7rAXoVRMjEl\nD4vkSgiBChloLDlylfWE47xLxIvtdEn1jNH09bLVAo7fjsECO+PT2vNxTe0n\nDuLTul4l3KQSzSIrFW7stfAtc65kcIrSNjm0ORQe4o4XKUMR/d79KdsfaTo4\nqxBl5QTDX6sGnh5kdfdIEGsg2P6yykAo5DyV0SH8lpnObw3obVWQTYqaM82Q\n86f3lnkNKld/sBilEJVP3ucIMeyZjWxawh/v9Fq+n11LUFiUmtXLnvIEkM5N\nW/4nvx4+Xy+PI/d/Xp4luQDU+r8P3nDxmUDaW+e4k/MPBR5Nv1Sua27z5Mtp\nokBI6HgYJq/KGuaa66LfV+qAvfVWx3hPaB+8eH4i+qX3GQvT3KzipgC5PEze\ngRsvtQZ/6N/ohulNSMFOYWTIk+FfRRL6y/sS5IslpcsyfzQWGWUtM3VNWert\npOBaGn355j4F7PY6colkEXOUQcvlfhWKnTKgHcnWonz4uc6Ao7fxiQ9g9sx3\netry\r\n=1aoJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.bd8d1aafa.0","@material/rtl":"7.0.0-canary.bd8d1aafa.0","@material/shape":"7.0.0-canary.bd8d1aafa.0","@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/ripple":"7.0.0-canary.bd8d1aafa.0","@material/animation":"7.0.0-canary.bd8d1aafa.0","@material/elevation":"7.0.0-canary.bd8d1aafa.0","@material/typography":"7.0.0-canary.bd8d1aafa.0","@material/touch-target":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.bd8d1aafa.0_1592493409716_0.5700094775942404","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/fab","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.1321eb968.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a73026fa2a8f6cd2203e3270d867738e6a3be1e1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.1321eb968.0.tgz","fileCount":18,"integrity":"sha512-XZ3JtYkwrYg2Pdr9TLQMqF+CzNT3oFS9KZvupg9GhO1ezKsnRurAOSqQWLniSIHfibag+myLUPmNh4ljoDfjbg==","signatures":[{"sig":"MEUCIBICSafI2FvhWUxHpZZpwupkchCfvh/DuG6V4DV/jVZxAiEA/cXy0S9Yudy0sAHnx/SCvyFQBRq89ZYqQcMTuKXJOvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RBOCRA9TVsSAnZWagAAdAQP/RL1WHS3XZwqSLJoKGvW\nlePmmf8AZ1MpJXGrxZ5P+GrKQPnLa9UpIb4jS8ZUGCtIL+2sTdvyeRqjPYbj\n3u+ut8a6rTrWLoLtWrtUCXVDTwEVJ6b/+ydulRe15Nktoa/n54AbH9WyUMWc\ndYsPrVPDy/yaIhPMgGrJ8ESjJ9wD0PK8BcAF5F8yPvN395m/oiD2KhLg79t8\nDwbIGITMLsRa2+z+D2YqhId8uW0ya0WAeZjj3ui04cbj8Jv5MsCAyFqRw3EC\n9GyOPz2MWSh5go6rfzLQr4PFYRe3yqsYHQ1HgQxo0aOUzAcc316VXao8DLsW\nRR+/Mz5DG+LxZ8K5JsW14EgdnoqDQqlykrQeVWgk0NkpYlcqJsxFxG1UJYIh\nNAB7FBDm2D+a0RcEW7ZSmbLBtuzHSVAXFybO6q7fDXruL+h9LDqGtqKGXhzX\nTH2gaAH8v5QgLvIUaZhdpVYcRUk24OM3enQkKukKcpx80OofsD4HUQO+CDZ5\nbpUNjAsNwHd7VU7Dfxf9mF2Oi9r9pB89fBZTPQPjynqwzLV9wZZyGMsB8Krb\nLyYX7zIT3dAiWa8bh23H4Kh58/finJ3IxyzNNZAMq3wyTEayDim1VrPD0mJY\nWcg+g0juwhXMIpjqvgnYXQ5JXak44c0AGjRjXWPZOSj/y/+yfB3lme6dS7oC\nxjBR\r\n=WT7l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.1321eb968.0","@material/rtl":"7.0.0-canary.1321eb968.0","@material/shape":"7.0.0-canary.1321eb968.0","@material/theme":"7.0.0-canary.1321eb968.0","@material/ripple":"7.0.0-canary.1321eb968.0","@material/animation":"7.0.0-canary.1321eb968.0","@material/elevation":"7.0.0-canary.1321eb968.0","@material/typography":"7.0.0-canary.1321eb968.0","@material/touch-target":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.1321eb968.0_1592594509743_0.5738500980648045","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/fab","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58a3ea8e456274d01ede00d8adb9ca50e4721842","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.db5cc0382.0.tgz","fileCount":18,"integrity":"sha512-HEGEIfJcq8sRLCD9gQNZjRlQQO0/7gBE6dqnZmLZWZXoD512grntHf26m0rTRtW2BgmaEzCn91JDIMkGOuHk7w==","signatures":[{"sig":"MEYCIQC1zRDqqkVQq8GAA+rNiE0rl77wS16S3iyAnNWlFz6rwQIhAMDluH+XMG9wWGAc4LcR9ZZGamFs8KwOw90ImqU/1jJa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RHPCRA9TVsSAnZWagAAawIP/jWR/gaY/dWm61ni5Kxu\ni6gE4yd8r4LTCTySwv3y8J3VnSxHK2F0Sa1cowAeCB9QiG55G/uKpWwelp2k\nXQ+gl7hxuASwmappfrYMURjXbaeNlVpdsPcrNHS1YC0lz5JLAEebmiwaRXal\nyMU2ff+uql3ekqyzCvqwDvQYbsqzI8QkR4yIdiyZa7ODaqndJpriIz+nFfM2\nt2O5zM/blsfRZVhmqYMWuwyqP2a+wxfZaz8vALDdGTADo3LWP0H2UzUsp6fN\nZIuNq6z0UZ5kIIag41p/85lJiQ1cRzVx61KrvT0cv2hNbQuspS/YDPaGfSLD\neLgB6OMEsbYZUK6UKBFGChuDuDJoy6JxGGmCHa7ovQPE6PGXWK1pZ+m3q4Co\nccj+C4UTTKKQidvoWG9IRysCfLMvFgprZBX9qx6dRtB8xxU9JeFSbCAaYx98\nqjlc1ngGazmrlBoSui0ZTs7wHnX9dsPKStrGpPs+JcKtnzs/rinfq7f2mnqF\nVkhH1YuoQp/NS4/NdtXc/T3CU6qTWwTY+6w01cOzedfRmA3KePkTWfXxpcLx\njTVNrs7kRAHHzZq5QJV3Yrqfs1OLRNdo2DQbKKrvYl0hqjKpHh6LXsLryfbz\nJx6xGH6MkxQ+3K6Ynr4kYp4nwsYsWeMSWkzzew7sleAMu7Q4vConkfpi1kk/\nrAEW\r\n=0v5+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.db5cc0382.0","@material/rtl":"7.0.0-canary.db5cc0382.0","@material/shape":"7.0.0-canary.db5cc0382.0","@material/theme":"7.0.0-canary.db5cc0382.0","@material/ripple":"7.0.0-canary.db5cc0382.0","@material/animation":"7.0.0-canary.db5cc0382.0","@material/elevation":"7.0.0-canary.db5cc0382.0","@material/typography":"7.0.0-canary.db5cc0382.0","@material/touch-target":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.db5cc0382.0_1592594895480_0.6531627190384142","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/fab","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"813a8796d47c919cde0b79bbd29e73342ec4fe8c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.6ac9bf031.0.tgz","fileCount":18,"integrity":"sha512-teMc085ga4eS+bpNxS3QzpzlCyXB0b5QpObdpJO061o1Bl98yHVY16FjWzNWwmCBNW3/duE9Ph6AB2jb/CAgqA==","signatures":[{"sig":"MEUCIAjf+sYjaCmdfW4OLu2OMJzWZfZcjFJQPijJk4yG+tfzAiEA/trFidr7ufTU6sTHsNWQYO9uX9CWdDTdAeMb/RKwPDg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RabCRA9TVsSAnZWagAAkFUP/iMJN1wqZ+VNHwFIbuIS\n2GVP5vu+u884X0oDVlQkQS2GAeGCi2AzvJ7XJg99ivKVe5KGbshGqP+bk99+\nyxa+EXft2GSrynAPRquYzyQbDTmAI7hCaBTHiJ8ncXVzDMcFrATgyaOAeWrw\nAeaFvY06nJ00z0rme28RcdbNip+aAtzlEc4pym7k2n8Qlt32oJWQ1PLGi4Wr\nfK4+/fKVwdQKlbr/Hr94SnwzVuvLZPd3qyk1jiIDSYem7pjNquByq5c/OA6o\n2kAlOSfs4iFPk+qh4KuO0M7Rs48hxqbCGTdDk9osfWLDbkxtBidJRecPVmz2\nBynkOQ6ZeTy4zC39ClDiMxHXG5ArtwKrmXI1NS4lx5cKJ6i81EMM2e0p+cLy\nqJQoBNmc++xEnYc63wie7gVYmAIYcLUFactgqVvNyVE3yoKzlDF9P/78HfqF\nmH3qiz/7Fs8+PNOex3oLDZEduhdL7b+A6Vd8bIsKbXNBioZzHstuTMcAunl9\noCxpBMU/guwQr/kgW6Uc2Rv3m4fX8QZ+PY0WJrEAqvq0iFhiUQD5SOtXYLwB\nUV/1wHnIR0h2ddVSBbRdqSuJ8OmNZH/Gh/Tj61YMzj6Juhmj4Ib8fjLkGBYj\nEMuZ5dQpTxX/0T+UU5dTaTdhK/9hovNzni/FgbeOUUmh37M32+OOiVIziT9L\n+deR\r\n=ugu+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.6ac9bf031.0","@material/rtl":"7.0.0-canary.6ac9bf031.0","@material/shape":"7.0.0-canary.6ac9bf031.0","@material/theme":"7.0.0-canary.6ac9bf031.0","@material/ripple":"7.0.0-canary.6ac9bf031.0","@material/animation":"7.0.0-canary.6ac9bf031.0","@material/elevation":"7.0.0-canary.6ac9bf031.0","@material/typography":"7.0.0-canary.6ac9bf031.0","@material/touch-target":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.6ac9bf031.0_1592596122915_0.5695400386323806","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/fab","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"172a4df17052560cca0c2d40d6833b83aeee7e75","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.c21b5c367.0.tgz","fileCount":18,"integrity":"sha512-FHpUZxHNTLo331+DKvbIqppewo1rFJfnKJquuKggSHCFMKJDxYgf/2kCBypEnZx2l943fE7MU3Gzte79Gza+Tw==","signatures":[{"sig":"MEYCIQC0K6McnUPsNLAS6O8nNE9KG+J/OrylexpdSiQh1ATq6AIhAONvogfMuEfCBaXEMn87AY2YhuciGdLKMRssvXRHqJdy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RvZCRA9TVsSAnZWagAAGmoP/32FMswL33NCI4qhnd3J\nysADgKSqIOzSj5QvRAtfuq/LnEPfs+BHeLI26Cd0gj7tFDwkZT7GB5k4iWjv\nqt+S4d+jWi2jShDREZcS39NsUWJ0DYAIzfqahvTcdJhrEj5SHMputEK/W0dl\nBln2rg90axsXXRjFtoaUT2yQXA/y9i6NkD0/MYz/k287WkKsdnRR1TJfKDsq\nmLYQ0Bq58tvIg4O1IWlKOZajjeg4HLC4QLK80Ybn5P+G9FqFPhTfdSv+jky1\nNDs7VJNLvUPjlkKzaRsilvUNltOvcohde5wLbHftcmDHgtOpg9XhlY6zKVVU\ncRNNqyDE/Vl24krtE8lYlu5tHdJSavkPqfJ6XZ7w47vj2+Yg6j1Q3Pe2XEZr\nLzDKx+oTXoPLooWhNXzic6abhLtfrpjdFzbEastR2IcgPHtFxfF+k8/3iRmf\ny4aXw210WIUoeRM07B3AYqKMXthWJFlJzNY8L8jV0BotKWgVmuUfyB5lsYum\nyUzuyzX3smgMvsc36pvGvaqKzjE5/7O0ROFjVAl4m8pjniOpPCWEh09mjq+1\njd5vu71nvCybTr90KJn+wERM73Jnri5OMdrlh+t9iOon5D2KLFM7e6UfT9e1\niOZyNUyxP5zKEbOniR8lHXFEunzVfzYvPYOOeytGQJvr/elqAC/DwvLrNN4o\nu3oF\r\n=Enzt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.c21b5c367.0","@material/rtl":"7.0.0-canary.c21b5c367.0","@material/shape":"7.0.0-canary.c21b5c367.0","@material/theme":"7.0.0-canary.c21b5c367.0","@material/ripple":"7.0.0-canary.c21b5c367.0","@material/animation":"7.0.0-canary.c21b5c367.0","@material/elevation":"7.0.0-canary.c21b5c367.0","@material/typography":"7.0.0-canary.c21b5c367.0","@material/touch-target":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.c21b5c367.0_1592597464825_0.8393034563059742","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/fab","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fa314a3a4bf2d6d998084b3529634f484ba2ab6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":18,"integrity":"sha512-M1y7jbha1gQIERUQjN8yvObsdNyKGVXucsw7BjVd8Zhwj80EBrGfoudlXBNhWywrKx4s8jmF9a/VP/5R6yPLMA==","signatures":[{"sig":"MEQCIHPDJ2pxq0fWMbCPo50ElBX885b5a+8nnE4UIYNDO6sCAiAh17blj4hggmHhSNaoPjpMjEXmsK6aLt/mz/5JI0Jfsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R4ICRA9TVsSAnZWagAAMPYP/jgbnvrjWUeQmXKg7b8f\nld8ep7dpRL73gm3i0lbKYs4gXmuejkQHhB24uFX3Hzw7JzMNurwCqBZif44l\n1fyLP8OaX9mzeNc6rAMtT1v+d3eK1LDAY10e9F3pI1jx4Ds5ZT8qZ/e49d1x\n2vLGV0ayYqlDj2yZpwJWd91dYxxQ0We8XzRhJi+FcjxbfzC86bKHXuh8Wmb9\nqagbDp6crUnNVTab78XvVfYDdNQTQHVl3kH4+mxilhVLnvr8mPiKUicDrmXD\n0h0VXoBBKcHILf6DvnEkN9RZ7q4WZhNTsV3taYJ4ur2iiqejA9Iwy9sXXGtE\nhGiCQHTDcVceHzVpdDAY+r2n5ORVfYcvQWZ7+P5I2xfx8krWzBEkqfD110KZ\n+8dZPaDGiViv9+IpUHHQBGZY+6ER9KLKKe2Lq9IzhS3UGZD83mVUc9rQD3AD\nRP/wWDWjFgcafpiBPL4BYOmUJKpWyIXfES/6FEEydga3G3H3JJ3nA+OSBClO\nJ/TfzpP4m+I1n4naQzQb+CmxxpWak62uW8MpmtpwEoYb/vQWhfMNjkkUY7ru\np8rGADMHvXSlnIEID7hx/l/dgGVVSVIEFoy/bIZEh7IPiYIJwlCWyeMEyYOa\nQhsCN9ssX8L0Ep9xKeEI2aeaifjSkbmsDUVr1jx98ynZuKPco1LDgcoVX26/\n7yj2\r\n=O4LJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.bfdd7fd39.0","@material/rtl":"7.0.0-canary.bfdd7fd39.0","@material/shape":"7.0.0-canary.bfdd7fd39.0","@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/ripple":"7.0.0-canary.bfdd7fd39.0","@material/animation":"7.0.0-canary.bfdd7fd39.0","@material/elevation":"7.0.0-canary.bfdd7fd39.0","@material/typography":"7.0.0-canary.bfdd7fd39.0","@material/touch-target":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.bfdd7fd39.0_1592598023506_0.41970458090137064","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/fab","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.10b505785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7cdb862775f0b6f8e7ef67385f55e8e023ddf12","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.10b505785.0.tgz","fileCount":18,"integrity":"sha512-WjAf97QhYPwBqU9Q8w7/AGfFpslO4VV4seWjx4bBUyqaJrnsRLZhD4e0VCsqD5XCmWKhdl7aJ3n6gg1uukOh4w==","signatures":[{"sig":"MEQCIGjJos1EUaHNaw//UboKZdIIEjWTUGyPUa5XI5unYGhrAiAjBJL4ajaoSLQkiTIBOkgErhUa/f77kDFne2241dqKpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R5hCRA9TVsSAnZWagAAIgMP/iO6xQCJi27cCun3kiWY\nc1VdPIGuI7ctmzwgPUj69eY04ImnokLAPf9Iio97RG7Q4uNCJfk3ns3Du4/1\nEsjjOKC9GhbX8M7b3iPiWKI+knKJ6+Hr6o6aVuAr78dVzAt0wx8aUcMqGY/E\nqwf1lr3vSC2f224SZKMVeYMwv/etapeVBTuKTma1t7/vZhbiqNnPr5t+tVWk\nNDoWb72tCamk4+pWBliL3hMu5iEW9y7OipnRn4Rv4PUVvHO2SdK/72xIE7FX\n8VxgQNUEwqeDPLoWPszEBv71balNmFJ8s7m8Oy6qVTt8rQq3EggLv1W9CYop\n/VTO501EssYRHCkyGYfzUs8IQkIKNmUaoU1/y100M/VHikpIGbOogXPZxa/h\nGvCN2cGOmfFomBSUMCYoY87ZptdBQNY6tKPdQFWwNh4yDh/RvJDaCi7YnekB\nIFxtrXQLUkr1ejlvIe2PmPJIXUzDasdtjgsZv5i6Xpi9k28vDlASc5oScHRu\nPprIN10YUuOOIw48bBBaLa6h+9/UIO0z6fI/DJRiwXinK08Qes4siR3+SjgU\nNq/zzexkhdsOafi+BtD3D2m+VMc3tseHBuTyEFXa4yTMb8iF2JlzJcG4qu8q\nw+Tu736FL43I+ao34NecFi10g+oJ8WcLwSbNULlcPqn7p8m0zTQ12adQ4mdm\nNcrw\r\n=Qe6z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.10b505785.0","@material/rtl":"7.0.0-canary.10b505785.0","@material/shape":"7.0.0-canary.10b505785.0","@material/theme":"7.0.0-canary.10b505785.0","@material/ripple":"7.0.0-canary.10b505785.0","@material/animation":"7.0.0-canary.10b505785.0","@material/elevation":"7.0.0-canary.10b505785.0","@material/typography":"7.0.0-canary.10b505785.0","@material/touch-target":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.10b505785.0_1592598112858_0.3545133936686242","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/fab","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7629503074ab34c6f72dd09e03e6e4e3cd3a38db","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.6483d3f44.0.tgz","fileCount":18,"integrity":"sha512-24Q0wV7JfEpa9cR1HS/rSvMktai0WQ3fWd/BwxHjvTKAxXwGod2pjg6l+UkpOhKP3RJPOwJI0f3xfDvADp8olQ==","signatures":[{"sig":"MEUCIADajkTguXk23d5pK+aUUS2H6FfQ6rH7kGYBfD6ntpSvAiEAn9Bu8FYYRDEdWQI+xroanucJuREL3Az6vZpZ54aWE5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SItCRA9TVsSAnZWagAABnEQAJBQ/OavUtoJTDqYaRxe\nKWci0m61PcdfPlkMfVwssUNfUb+DR2f9LdTKULPZ1l6DNy6CAC1TL/QP+oU4\n8U8ulltY1axU1setI1Eh6q3LaBQ8gEZ7nLmBF0Wa+neZlJa9ttrrK1NHzEGD\nNXDM7hzASVVT6GlVOk9m6whpj4tldNam4w5h/dlSI574gmc6d0bsoEvcRZ3u\n6OVjKskL/2sPhfMahIlMZn3xKuCLNub6dgY2wEvXzGkttZZ4j0KREKd7PglE\nP5XZQGoKqGikCZdze4+++PAuOtZ7iSYIa69qjwELqdlfCRL7vh8fkh8uefSG\nizx0MXP98XAPNYjD6YYG7+GbfdHKD23OUHBrIW7t79rsCnzYATTvgnwOoct2\nonlxpopocdv/85cMC8XmkqaBXGTPfkbbY+MIYYqrFN11qlJH4vwI7Z8xOzPi\nNolRGpurCTe31g5N+oouIA2bXC4JUodl2fEPQT3JFSJs18hpO43eoOz93Gnl\nnBdxfV5Eri9nKIRRNfAHtss56NJcyRn09ZotO8vSe6du2tt12MzHAEqGyWlg\njX4ZRri7giVILEZebZ+ThYa/FHaPHOHsOJkq/Q98hletnLxzXjKmC+fSKsxG\ns3f17ve7OQV2aHFlhAtM0IObFG8G531y3zohX1l3h9HBnCB0g+rHRaZcLrtv\nSvnz\r\n=tztC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.6483d3f44.0","@material/rtl":"7.0.0-canary.6483d3f44.0","@material/shape":"7.0.0-canary.6483d3f44.0","@material/theme":"7.0.0-canary.6483d3f44.0","@material/ripple":"7.0.0-canary.6483d3f44.0","@material/animation":"7.0.0-canary.6483d3f44.0","@material/elevation":"7.0.0-canary.6483d3f44.0","@material/typography":"7.0.0-canary.6483d3f44.0","@material/touch-target":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.6483d3f44.0_1592599084681_0.4959746035055024","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/fab","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.30a74e921.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16a66d3e4c87c1f158636c07e9844477c3493150","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.30a74e921.0.tgz","fileCount":18,"integrity":"sha512-2eUhLUSfdqUgrAfBuyvR3KVn0Kv2VznqNGK4twNuw+h1/l3CF96XQo7EufUwBpSAGkZKfKqskMgPEz0CzYlhyw==","signatures":[{"sig":"MEUCIQDmHnyXLb9TLqmUybPUGP56sAkA3hhtunHeBwwBM8lVrwIgI7SFCTMZdpzrVWEZ/5UrtKQN242MZgjRQEEZYvKetZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SKzCRA9TVsSAnZWagAApCEP/199C1LiCFWEJrXpP32f\nmBFyGtxfHvFNb3XELtBGpOryfOeHUhP77ghyoNaTkNKodZEV5eBI+R+vBzJN\nSO09al1ieLYA+16HU5Ia1JhSohow2l963ArxGcWUxkZ7F6cu6TixvTyJO4HD\nkylu7SasLMqOYzf4aLPEXRfoD4VppKFM5yeifZHpOV+plh+92S6PmX43Xzms\niXm7d3c1/l/2lGVBXAcKGRhhI9CAIToEyHUBbrCGKJob+hyqXHis0estHtOb\ngo8w3TnZtVpmTfRfAylzuRLLWDUQc0Zuo0ZBG4SmAzPt9VbFd2Nj5R+CRHcc\nr6QqjLwn5Mpj/r826L8W/JoS7/E9vV6LAMbv9zxL+gLxpnH2NI0Y4EbUktDw\njMFoweonvqyuva/lRUg3z7Dzg2M8GuzyM+RvdNUISVhCEy3V2c0KQkPTCcxA\nLjUjiJLSUWpCJm/DXy3kNOyx8AktlvyjEcsJy7M6iSQ5xvfz+vjexNJJKves\nj/FNQFD4eB1jFj8CQFfogsdXtaHmpnBl4Tr9UO9zBanuCAko8ORxmvrngWvJ\nzCDYGK1F0Z+c3/asM20oXPzcmBMt/IQ1PSSfHokDt0Ab1hPeXiRqr/nGuE9K\nXgzYbPM00BRmh3Wo22/Xhrp6QF7RO2gBiXmxo1jC2oYp6jz17s5w0k9VG16o\nf/DA\r\n=btlN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.30a74e921.0","@material/rtl":"7.0.0-canary.30a74e921.0","@material/shape":"7.0.0-canary.30a74e921.0","@material/theme":"7.0.0-canary.30a74e921.0","@material/ripple":"7.0.0-canary.30a74e921.0","@material/animation":"7.0.0-canary.30a74e921.0","@material/elevation":"7.0.0-canary.30a74e921.0","@material/typography":"7.0.0-canary.30a74e921.0","@material/touch-target":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.30a74e921.0_1592599219138_0.6628353817227417","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/fab","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.c20727498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e91490d6aced2fa9f88b94863a0edf23fc332bae","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.c20727498.0.tgz","fileCount":18,"integrity":"sha512-6axEnWyw0WFZIgHnNyI79t/eN78Y4PmrwvtS5pGOgMIUSzBX8gesouVAyLF8xsoPOkXFdNvVSzH8K4QLosDe8g==","signatures":[{"sig":"MEUCICX5726BWvuN0/iihqVg/rIZNE+UVjdQuPThelh9D7EpAiEAsxwjWz0gdmIXrh3HTvOY50pwQsTniauAwfzdcUzGvco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SNdCRA9TVsSAnZWagAAoyIP/0ZOGcsHLDbYMtLM61kn\n3d8kAH3O+JH9OIsPuRcB3EbJsFiK9uI1alkogDReYEsJmGe+XGIunXzcSKvD\nSiMId79EvbjJq/bRpH1GWQBP+YGSkm66jKEIjRE/ZnllhmEujcgEBM82ufxn\nyn9aqromjCLvnuv02vPScXxmHvXrs/gEVH4Ivm7d+uy8HJE58kRxzwkXlQzW\nmzq8gyXPO6n67e1+dqdTU1e8XW19wGvwn2H7dARBhZJ5CYD+0ZaLDWNj81Z2\nQjdW8q6houo0MaTHPoPsAI6hSw9UlJoyEvZ+TkVXQOIyINmNh+H3z9/dyhiQ\n7rrxbGcRvam/2ZpWmjdOnmNXfJiAhjzz8UNbVDLkLdq/yLLzaMCuFJ+wksmn\nyEv/N9v7h4O/R56bn1GbJivwTAwMwPO9lRSu33o0QQovumx3Pr3dR346DwEp\nFEa/MO0+NGIhmiccV1/sS+V4pqskhd9C5BvpVuT8JdoT/9sgkWZg9fw1GOc+\nL/rxd21wYaI1B709ZvX7N1/PB1pYDfSO2SngugNHp+Ln0vWbcOpI/RV2bAPa\nYvXZt+LGOsXKHnIwuoUPWk0YnOarOMA1rXjecGPxIHABOSV8SIxJseqV0Pkh\nTfR1DFw1Nxjegr4Q7BFPNjzQ11iR249nPE1Y/ssFNJiq5trzA9u80Otw/WxF\n8sbR\r\n=5eTR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.c20727498.0","@material/rtl":"7.0.0-canary.c20727498.0","@material/shape":"7.0.0-canary.c20727498.0","@material/theme":"7.0.0-canary.c20727498.0","@material/ripple":"7.0.0-canary.c20727498.0","@material/animation":"7.0.0-canary.c20727498.0","@material/elevation":"7.0.0-canary.c20727498.0","@material/typography":"7.0.0-canary.c20727498.0","@material/touch-target":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.c20727498.0_1592599388607_0.4026365108362677","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/fab","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d047b2e2c76a8faf197c60c1d1c53c30dba0eafd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.4e360ae94.0.tgz","fileCount":18,"integrity":"sha512-z5uo64tyvUVNBjtf7M1b9dVbWxUo5OvkNOjcGBTEQbbZnT4uhOAxA/6tJFVfP5+LXYtlqdSw3vLUdewL8bw0vg==","signatures":[{"sig":"MEYCIQCiTASYsJIC2fM3CKKy619+oKjkuU/UJhcG0/mEfiJb2AIhAOOoeXz2w/P2G1/BzmPtsrZ2xeDQpbQjm3h5xFOB4Urt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SdKCRA9TVsSAnZWagAAQZ8QAJRS4ufWg8xQaQZI8lXZ\n8bcu4uforUbVanEdfufj2uCvJ5mOgnrUqsSoulshZ13nvxkA4fz+7JgTbuJS\nRuzgKwGd9NhoRYOegGQer9A1+Ef/hOVycll6j8fP64MlqrcNiniT2EqneijE\n29gqzNfh441/bi5cAx48fbA5673i8l4490EahHL6NEgUDXYcRTTsl+ASC5IV\nq3oPsCceA+TSaOMrcpuZhxReJAPUtCnLHcG7kOjY1tJttiu4b46lscEeTYo4\nlljknotmv7lb3TB4nMCZTHE1bP9+vQPofaY+kXusw04IhzTPB4BTtmft7E2K\nEfRAiIHL72HMdlfjgKWyCa0FsEfS7Js3UVBZjfS207WOLeJUqodauyuGlGOc\nmMDHL9eINSurKgTupqq26t+RQHK8CLiNnnjwFAV4g562RzS0bfboaW+ZJQvd\nYU150yCbEyeL8v3BEc8+cMxv0Dv82G7UeKbCvls1e35EMC7gPiHffbIBrTVp\nDzUpF/7HkYVMCclAD7bElMfobLTw8dcmAomNdn0WYK6RZkOQ9M66DkUbhEw7\np8nQ0RO6hAZx39ZPdOB47aQJB6TNCYcO0RjlsiGvBzDHYO+wS/5arNMV2ciF\njHYTarTFaQC+0HD6TBbJkjL+sgNOLV4w0RCnCnpzXBm+Eltyk/HVmEbWFgjR\nQDvF\r\n=xYg+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.4e360ae94.0","@material/rtl":"7.0.0-canary.4e360ae94.0","@material/shape":"7.0.0-canary.4e360ae94.0","@material/theme":"7.0.0-canary.4e360ae94.0","@material/ripple":"7.0.0-canary.4e360ae94.0","@material/animation":"7.0.0-canary.4e360ae94.0","@material/elevation":"7.0.0-canary.4e360ae94.0","@material/typography":"7.0.0-canary.4e360ae94.0","@material/touch-target":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.4e360ae94.0_1592600393883_0.40123399325201925","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/fab","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59f32f546fb5a4a805a074b1ec9553fecba6156d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.8550fa53b.0.tgz","fileCount":18,"integrity":"sha512-HKxbtIv+Nhr7yuwmlCiIK8i8qOV4Aot1dab8vCpE5qps35loKUsN2WzSUhYD/fn2mUQBlD7d2NkrKWybcI16Tw==","signatures":[{"sig":"MEQCIGXFvRpsbLvkAXhC+t8PbHNO3gU/XFc4NVTI8jCx4H3mAiBY0Il0Nvjmo2wM69JPBa1fzFgZXTs3//gMyUlHiXKwbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SfdCRA9TVsSAnZWagAA8GIP+wdDi+0BdwkHCG3EiXkd\ndK8oNcoR0nOLvZlCwmOxBgklGX9DPmqbjpfVQr9nTVdJTFLmIXDZXpf4k+C0\nCFZigg5mudrQHjO+oRwCcy7Ax8Ixoes7C1K2RjUuRqtPGjurDENrYXZmpMju\nULWifMQxkMlC2RUqyejF4EVIn8xXdkLGjXsKIiKVAvOWz6NO143OoQdp6RCx\n8UMyaX5DZ/VoWz6mXQzFfEIrnEri//8IulMLesua8AXA+blPKLACvVjyKOb0\n3+NPYlP4W59dsaZ3b3kyc4hq9dPPNMM5VBRXW0EDt5Rrz9KS0yWrl+BaKqFw\n/v8sKZ4ccGjgzp9GCorEf3UUMhCP4jWeGLpFctetL1eooqmWa0tqq5bD5rR2\nfYpxAo9Ub47dorB4Bnqn9SRLU9Mc+Q8ERqr+p3qKfjxS44X5xJllhwwI/yB0\nvaYAB/5B6PyyQLMN2zhDna65HK2My5dH0HL5mmidc9O8ykivrv3GFC0Az0vv\nIwpsuspsCyKOUwbZu3Idg4mslWmTuBr8KkINwtZB/lsEyZcqqjGiBrBhrg2e\n9SlQHzb249w9uqdZGhHvQE+DyqtN/dnU+2vxKtwv+GxN6BPVfNZCnx5QL10v\nzIb9U3u5YzsMXbSCWpX2Oawk+CjMbVRmSpFlRYuB2pkziizssV70xjwLopnu\nGvaS\r\n=T6TT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.8550fa53b.0","@material/rtl":"7.0.0-canary.8550fa53b.0","@material/shape":"7.0.0-canary.8550fa53b.0","@material/theme":"7.0.0-canary.8550fa53b.0","@material/ripple":"7.0.0-canary.8550fa53b.0","@material/animation":"7.0.0-canary.8550fa53b.0","@material/elevation":"7.0.0-canary.8550fa53b.0","@material/typography":"7.0.0-canary.8550fa53b.0","@material/touch-target":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.8550fa53b.0_1592600541025_0.041434182925249585","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/fab","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.93ade142e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28bfb1720c05d8465f8861126175775571a71d45","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.93ade142e.0.tgz","fileCount":18,"integrity":"sha512-VPyyEXxkT52WRp0zP5WTK5IrfUiVsarm0BJGRtuyIXC2gmrZ0V0VlspbTSRrCFYMJ3bKpqCVJneDw5Jv0NgF2A==","signatures":[{"sig":"MEQCICm9f9/TTTWrKZyYVDip+afSa9LJfDhAfrrIORL11fSyAiAajXIhObF/ByY0USH6v7Dtnbu/u2lG2TQEdSteN9N+0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SggCRA9TVsSAnZWagAAWqMP/Rbfep7HZusDgk4kMvjU\n7WOY4HBMvEOymM87syEoHC6zPRt/+kDFrTr5log8nfeWvFv4EfkmhLsNoFjC\nQEHjEV3Z/YeAO06GcUsQrmHt324rIua7KbTxpqIyi4Wh1PiIqhLXlbPMcN1E\nf59aNYsPFyRS8kRxAi39fnuTJ2w0/vwdSJ8FxEsW4H0B7xcsljhZkG9HkT0I\nyye6T+wdeGHGnTfhQmbm4VczD4VZYoPxjX/117rwF8iKulj+tTo+sXebIj8y\ncpVDhd/QlOVRMtew8AEDi+H+om3Tm89rc7z0PmQ/hiLHN6u/wEsrSuRhFQjY\ncKrmJS7Y7GgF0Y9IMM8Oo3ejf9IjxZLqGheP8qbP/CXbT2f6mHDb5pz/3R23\ncxCqp1TmL97tGeFZFGzXHrArG2cmzrVRGBjkD5yaze02P/98dLlidVeWstHv\nA7UxChTKjlBPjEStnnny+3G9L+qBKtXVMjhXDq40PIUB83jpl3IPwwT31aEI\nk4uZPTcIjA831jJs4E4C1nnuzwPUAm4UV2yDSwmKICVUVjoUN/lZXb8mPS72\njtLQAfmQtwLhyW02MbvQA0iQJ5VckDiUI2e/0Yz/Egh+bLVg/qSMM24PW7gq\n/GQ9bC6/ehn645C/mEacNiKyv0CPkBbQtmrzKeaMHu4bgGZh7ed1iKJsUGUZ\ntgvP\r\n=axdB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.93ade142e.0","@material/rtl":"7.0.0-canary.93ade142e.0","@material/shape":"7.0.0-canary.93ade142e.0","@material/theme":"7.0.0-canary.93ade142e.0","@material/ripple":"7.0.0-canary.93ade142e.0","@material/animation":"7.0.0-canary.93ade142e.0","@material/elevation":"7.0.0-canary.93ade142e.0","@material/typography":"7.0.0-canary.93ade142e.0","@material/touch-target":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.93ade142e.0_1592600607520_0.5402556827650749","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/fab","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2284a9558d45ae8c6424826079614be3b9b370e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.a0032f5bb.0.tgz","fileCount":18,"integrity":"sha512-sfl9uFyc8dozWlaE45t7M987rzpR1RgeUCjLI8mcTub28Dpkh+MNJnMLzelCsi7SYdxCu5ceK48MLHvMfyBGWg==","signatures":[{"sig":"MEUCIQCv0W35TJJfWcah+2GdqbOFd/kWlBTYGZIYlRUwD5CI6QIgOLr11Rp+WSJwAg6IAhL/F29+Q3FvD4XZhdLB/4exbnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S4FCRA9TVsSAnZWagAAb/MP/3HmckcHSowtos7cRqVe\nbchbG4eXGWqMS4LWD+mxkGkBi+voxBlvy0pgw+7DL9sH7OS/QqS5xJ9t70Tp\n2UsrTVp9mnJPRZ3CrodcIr1V/3GK4nCliBpPFk9lcbBBLaIPLgCLoHzZsVAV\nL0+RFa8vZzbCjACWxUaVpir6yym19uSnXHvlwRvo48qT1MZCbYYEVgPuOWY3\nMFzNH2rcXvolhJv+pu/UmyT3pbAiuJaqonbpgncnj/E7DH2Hqj9vLxAYFf1n\n3EeLzKMsvD/sTzcyvcBjXnzfFNNBmXPBvHf6mKrX6qkM0xJlJ17/+6AX1lY7\n2SAiFRtkp8MI7m4twxcYG11YbDtvdEHBgxw5Bh5IYX4P8yB5fItUuyZ5q3Ld\n91jq3+SwM4uYLq5cu6VPWcppB/T32c7pIK45xD0QIn56FJUSbZ5bxUBG8oYQ\ngeroGNPEypA7Uu0YzZ5AIZlSLaVSdXtJya9ULhK01xmchdHMT/m9ELFBeS96\nrRSK1/h6/X/F7BT3PMXyWahKm9wlrhOENK4ySv8yT/fnBMbDAlJiHvJB9KY6\nCYF8qbxqj663EnQUMKBg2WdstqG0XJ8y8K/xe2X+DTKkWT5h3k4Up5sBTLTO\nqTgkYXi6JP6C5bYOFSSs1knKxFSMuSatPqPMY8P0qmU+iNUl6xoM6HThxwf6\nLOud\r\n=raBK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.a0032f5bb.0","@material/rtl":"7.0.0-canary.a0032f5bb.0","@material/shape":"7.0.0-canary.a0032f5bb.0","@material/theme":"7.0.0-canary.a0032f5bb.0","@material/ripple":"7.0.0-canary.a0032f5bb.0","@material/animation":"7.0.0-canary.a0032f5bb.0","@material/elevation":"7.0.0-canary.a0032f5bb.0","@material/typography":"7.0.0-canary.a0032f5bb.0","@material/touch-target":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.a0032f5bb.0_1592602116997_0.4721588079404997","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/fab","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.3f342e721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"068ad4236ddd08668103b35e168b74208a2ea895","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.3f342e721.0.tgz","fileCount":18,"integrity":"sha512-lJRE+ItyghlRVeVf/IsDuPMSxger4qj4J1yMG7MbDpAq0Grh+x9ErKNcBqG/aFeR84EV4hKrZbtdnHiB3mOW1A==","signatures":[{"sig":"MEUCIQDFc3Y9N8rSwxK8MLhezHcZ4YJMHv72c49GCw2ZypjETAIgJyKW4KNl7lXSY/meKw0FRO8vCp9N1Ip/ivSLOawTAzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6LCRA9TVsSAnZWagAAlN0P/jrq2ab0LrVdmn6Xt+ar\n18EaW6aPY06OlAQgBHSXpPh/WV4PMg04FzXtqSCez0rc8pdhmr3kjcic5hPJ\nT5J+IU9DKh9PSYYmwjDZjR/SBkaQzGfQCU2nZfOayqbD7lhyx14mvVFF5CZK\n/OnFkvsmBy1CT9RKDUfzusUuL4Y0Nl746PY2KqiB7D01sqtDV3Seh5RknHks\ntDajfPH0ybjF5S998Af9h7HYBnhPw0f2PJ/jsAZVyCpCl0K85CDN5t6KwFA9\nPyt/CkLlECR+rcuNV1RjFaimAb36T6lQmXWAtstnMT+9rpnxPUK2JwfjMzCl\nJ+hQeKagkP2iwbIEkPJlqvFfIhZqeDxTGCBf/a7tbXlnYbhCGqwyxTCdP1U9\njpVr8UkFWNVO8EK1PeVRMmeOGRihpSx3p78bZzbQMyLwakz+75YoL2oDsDo4\n4XQfcd04hFxChT2QPm3dCRNr4GAubRHbS3Pq3fJrtcY/0GRS4pooAF9uTrOZ\nos9fSrmst+ULy+mOAgSJz8pFKQWZZvuz9b87DeENcYyVmtP+wvoOV3LNnMZ6\nJFSyGialtt/zugUB9oYE9h53GiNDQ3Jq12xly1VllugXiSOit5kl4x2ybTVU\n6SQa1aTXbqRDb5meZrttzRPOTsmkOcANhkFDtuOdZo3gIXi3Wy3jg2T+P+ba\n/D3l\r\n=Ext7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.3f342e721.0","@material/rtl":"7.0.0-canary.3f342e721.0","@material/shape":"7.0.0-canary.3f342e721.0","@material/theme":"7.0.0-canary.3f342e721.0","@material/ripple":"7.0.0-canary.3f342e721.0","@material/animation":"7.0.0-canary.3f342e721.0","@material/elevation":"7.0.0-canary.3f342e721.0","@material/typography":"7.0.0-canary.3f342e721.0","@material/touch-target":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.3f342e721.0_1592602250761_0.15828861882649647","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/fab","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8ad4acb24101d9804db42653a24d655def8d97d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.ff89457cc.0.tgz","fileCount":18,"integrity":"sha512-qyVue3tShW2eTYooK9AeTOw1reI4MSEM5zNNXJTQUYwI4dXOstPaQ90topRoJM9+e/Hu0jX1s20LDdruRMY/eA==","signatures":[{"sig":"MEUCIAI38hL6hZdL7Frgxb+avgmtk03PBBfxLaxE+ioBkABwAiEAkRk1KakvB81UcLokc45vavxPciWutV2/pz+2pOxoc7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S7HCRA9TVsSAnZWagAA9BsQAIWyLBh+yV7sD4lEvWHI\nazZjTGnsEcZbfjAKkPcmETL1JkWdw+NmHBAa06e+OTAPWC/GEe4BdlxmnWbS\n6YAj2SQ+PtGJh6hg2FrN9+8FEjJ4cTyOVbdYwqqdZ02oJ4fb/8hc8s39oi8K\nPSUJx9Ff/NbGVRC+n+268npoW9HqaGJL3WwXLSoD0c7OoBHd7+BsSiVo1Koh\nevj0c1Tyuegb8DnzCJoILL81MJxy3wUn7WeA6oQ1ugC3IKHtKrGiU0L+frLf\nlqus1JhlK6IFTtN6TnZGaiGeifuiO69pLVEwnPg60NxCj/c7N+9v1RYe5yeY\nKa+xojnWX0hSl5OZ8Jtl5N3qSYGzm9aiS45Zd/f2eDndylZ11iE/d6ZVT/v+\nZ745Tu2tZ4/zOaNhrayhRGVmxmY1z0n8+0RM1UANpwgkKFg4C7M0hTMtY3qB\n3pwTc8Ux5i9wil0i4NLj54geHNQucCUOpytuzo5r09sVGxBgScDE9wROhr1Q\n+VJsXd6seE04wGemHGNfJ5qQjajAqhh/HSh30Qnxa/yD/0B2N96dPKeytwbQ\n1Mpj7zyCc8WQ0G6oGJ6UnCPUWrmaohiRqlBrJl+c2Yp8xliTpbKxyLdpGv7q\ndtcwCTlMyq3HDDHD3brvzAqPtvHwoxl+AI7w84uRpNxJL8/6bCE6xhaOESr0\nUvI0\r\n=NkUx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.ff89457cc.0","@material/rtl":"7.0.0-canary.ff89457cc.0","@material/shape":"7.0.0-canary.ff89457cc.0","@material/theme":"7.0.0-canary.ff89457cc.0","@material/ripple":"7.0.0-canary.ff89457cc.0","@material/animation":"7.0.0-canary.ff89457cc.0","@material/elevation":"7.0.0-canary.ff89457cc.0","@material/typography":"7.0.0-canary.ff89457cc.0","@material/touch-target":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.ff89457cc.0_1592602310582_0.9180358307990619","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/fab","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe0e6699ab9053c09a234bfafbb68dd0cbba3b8e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.4a1855cf8.0.tgz","fileCount":18,"integrity":"sha512-b/Ufzbj401j7YNj1skJIMJ/12pzJpWBqz+guD3KqScRodGVOYJAaZgrvR/qKzq1ePv0GREk4PZpy9oAQ4XHEYA==","signatures":[{"sig":"MEYCIQCJv5U4eORpir59aTRfvcdi60An2ZvadrJqrg0qa6NXxgIhAOwuvobS77PtoKBwz0r4B8IKZbGVc8KaVQ5szHXCicot","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S9nCRA9TVsSAnZWagAAwmUP/RckoPZkdNeXon3IpUss\nOsjkudvtypaNfxXneq5dOhM6rK8kHaqZLukJ/lV6DrqmTqBAhqoA7i7xdrfM\nNYGlEgB8yaehLqy+Yzm3Kb8y6mgXKmcOcjdyMaqZoL2uPQzSnH1Soqe1m6Il\n/O7J/HJRMD1CD18OIKXmAmjPmG4+Agofe0AQdhq3z5uf6/dDC1kuCjkvHk/A\nAuiFpfgrdO8/4bqu5hKU2+yhpDq25vVylBn3asyIdpkaThngjhY8+rIM4iVP\ncfsL9HMqjf8xfJ3QOwec73d6psEaRki4TanNJg1oXgdw6igFRxz/CYvWf/fw\ng4z2oRUqkZ/3H2g4WjFRNxd3CuNlzkPUqwp9FJlaUH0FaDpgIFZhLkaT4Hnt\nCHyarAw5HnF07iyFw6PYeVspElb47zAyk6x9xy6rvxqkqyHxhJMianpbtj2H\nRiGs0QCY/WsrCjC4R/sjz/7ZTZpjIj4b2dyk6ixIPM/Thu0CTFDzMOH18Tnt\nQruWBZYVyWFxesP+NUll35TPNceNC8b4LWlIsAgj6z9Qbmft6tBpvcdRCDYI\nLi6nX3QUAMtWYas3bwSdg1nHI1DBzQxLMpwSp8HCTnw71tOBeG9ChnaA/lLl\n3xoQEPxEfj3LRdhwiH/Q2wqED+y0yCyqtFiRx2iCdTyVK+1KswMQjo+LBFR3\noDNm\r\n=cQmi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.4a1855cf8.0","@material/rtl":"7.0.0-canary.4a1855cf8.0","@material/shape":"7.0.0-canary.4a1855cf8.0","@material/theme":"7.0.0-canary.4a1855cf8.0","@material/ripple":"7.0.0-canary.4a1855cf8.0","@material/animation":"7.0.0-canary.4a1855cf8.0","@material/elevation":"7.0.0-canary.4a1855cf8.0","@material/typography":"7.0.0-canary.4a1855cf8.0","@material/touch-target":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.4a1855cf8.0_1592602470953_0.4470881652963521","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/fab","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0b70ef9a6431c860075cb88849150b3b71a91f2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.8602f1b4d.0.tgz","fileCount":18,"integrity":"sha512-LZDjyg695EGzBM+mpGWTo/Z2cGmSgiNlNbnT4VgtwhBqWqkyk5aIH3u+RrLnyWSq3wh/3UIEPZWeVg/o+Kvmtw==","signatures":[{"sig":"MEQCIAxngS5ObKsq9m4pkOAhN3GGloyIWYTILOEoewcGy+APAiA/tOBLNogUMtZe7WxAnlDLOLZDvsBckhgMAWvcK8E09A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8Ok7CRA9TVsSAnZWagAA/l8P/iRqWZzGXNhV6PFlD36R\n08sPEhTSeFSHdOn5mvs4JJe5XkrehJz6I3CTiDIjuUibW8GthGlAcwr7MrRc\nl1eJ1YXcoCttxA2ucX2isUSONzo/BPrDuKjllSO3gX5nz5z2D2v3C+3KFf1h\ncJHgDhRynM08EA2lAFew+4S8ajdcEcKQkXpgZ6nOcj8AGJJPD1cPy7TFw+fj\nDC4APM2iRs+SK9nnQ1JyJa4WghwwTt8530qhFL2gbeE7wChN2SafKAkmWgnr\nCs5zncYoP6HYEuAr7FNLv5gyTrrbcbVeYGrvLkBWkOeSDREhvWrchDIZy0Me\nHZ9jSeEp9IH9IEsH77Ndwe/NgJ2RA/sEuBjGoAFDRGSRD7FATIj+VzlkJqYH\nVXimh7RedjRRp5Gxni3r4px0rW0d+crBNqMrU6d1Gv/QQCDWwYQE/YWwH72b\nIl5LkV5KBPd9mixvF0wK7v4r5bvAtiv2jE96dc25wKhkEDIK8RKdHE7Jthu9\nuobeEAOUA9LHBaDYlZA+FH1s2nl9Qmd5Q37rnrLuQcSiGpg5LAf1kRbcdiH7\nNmhdNG8SZJedYJqpa+RQ+RcA65cMRp67m5Hsoy19EapCAqt18rroHcXaLdee\nSHtFlH6qFs35Pvkk5AUC5049EOFiyozxKOThhzT2CLzlsq+E5Fk5FakOR+dj\nB8Yl\r\n=MA7j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.8602f1b4d.0","@material/rtl":"7.0.0-canary.8602f1b4d.0","@material/shape":"7.0.0-canary.8602f1b4d.0","@material/theme":"7.0.0-canary.8602f1b4d.0","@material/ripple":"7.0.0-canary.8602f1b4d.0","@material/animation":"7.0.0-canary.8602f1b4d.0","@material/elevation":"7.0.0-canary.8602f1b4d.0","@material/typography":"7.0.0-canary.8602f1b4d.0","@material/touch-target":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.8602f1b4d.0_1592846650671_0.992348115371551","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/fab","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce924ad54e8eab1df88518b8d0df38ca273ce1fb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.69f9f0982.0.tgz","fileCount":18,"integrity":"sha512-09q0P+frmpVIrXYbB7n1HGj2Hd8jMcpfWZTaNM4FCelfSSJID0nAb3XwOPta+PemqruXVfrR9QC74BNCjz4nzg==","signatures":[{"sig":"MEUCID+EbJgoiTTIAj/drvvTrKbC1fTAkg1lGBed0T4JjGdWAiEAvDR+YuwKeMacC1Fc11P8+Fo3MJ9yFscn/tohQMD/puc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R9ZCRA9TVsSAnZWagAAm6IQAIeyahSOrC0d/UjngA7O\nH0uC6A7XmAcHnK6lm9Qt2yu8pqTzyOhfgZih7qhGjmI80oMhGZz+q6BNVNmG\nO54QV+/voSwzFp9XN7nKiH0LqStbm4rdypecpZNiZrw7StaZvsSHHAIJ1La7\nzXdtAXkGuA7DKRhRGkYpiAct91+ZiQwBHFN4GndZaJWhjJDynVrAyZE2iJDs\n8uBYUre2LSjAecHHux8xyfYCQ+haMsTlOvmeQCVL+htud3xGZubyiw8+yG2/\nZuvtuYG14ZcZ4nf+9Y6/YG0txmGDEwiqVtvyqTwfQ6xKGoc6CaGDF6LgoTzk\ntHE7HzvJI7vlgE35qDWGLq473QKIze+y4rHschhtfDXGQaueRlqMOaXdGzBT\nDXVMuH8tIjo9YnPKriGBI3rzLtZkF9G8rgPrF/6DKpUdutex9DyY6RwPdoSz\nuo0afIzRcU4/fEQFklTvFVfSGRg3b81RsA+QlVq1a+SWtkxT6nvlUFQr4Mkc\naIUB/iuML+vLBGC66mbXpORE+Zc/8VKmZD3WAqq0vBVjtXiQC4VykyPk2OXX\nz6zTHMHNuCBcnZJnSA9XNgYVDH/6r+9eBK9RrES8dTBqk0wk5qGvrnKKAj2F\nUeRxjlXQ1T24nGGo0wNgSk0vXeD5c6UrUXXAKdewN0Q/K3F9liBItU27VCAo\no+rh\r\n=Z482\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.69f9f0982.0","@material/rtl":"7.0.0-canary.69f9f0982.0","@material/shape":"7.0.0-canary.69f9f0982.0","@material/theme":"7.0.0-canary.69f9f0982.0","@material/ripple":"7.0.0-canary.69f9f0982.0","@material/animation":"7.0.0-canary.69f9f0982.0","@material/elevation":"7.0.0-canary.69f9f0982.0","@material/typography":"7.0.0-canary.69f9f0982.0","@material/touch-target":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.69f9f0982.0_1592860504961_0.7969821879643506","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/fab","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.369a293f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adf4dc7a7fb87238beb93fe7fcd1a19548db2f1d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.369a293f0.0.tgz","fileCount":18,"integrity":"sha512-ez8UEjNx8T/OXg4ZVgNIAI3jlR58yUbACaeVj026Zm+U+SsuxdQzg0Jb6EUcWlBYCtxL7vd5rmWg7gNeDxPQZQ==","signatures":[{"sig":"MEUCIGtKfqiS2QX5QaC9lsAvM9GJYh5YldWX4wdAfa0ac5xRAiEA9YfMY/Exd1zI7xVJoCMskwUtls9EDUkYvIFTMc71eMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R/4CRA9TVsSAnZWagAAHFoP/A1mmwU8Po5ok5E0ryCV\nu86SzS1QvS//A1bbZt5s0Nt3yniifv+zDGS81pUpxIVn61TvviUM/OnXqWKP\nwvis4PFFD0mlHFAW7o+wwYrrdoHWrxkmTgOznn3pdonb0LjvomkxPRhf834J\n8tzULHyD8d+zpgn6o006FkcXT0hvEDu21mHc/9uvacXMRyeDBDqwnQzRlKUa\nEdYBIhF9TYXcAgWj7i4m2t0qxjn2AWhkHBA6bYneGB7Hdxj0IYPbrwGdIkZQ\ncWCR2DaS6dAk+OqIuGSip3mzvV9sP/9+YuypNCeYwOiiUk6BFuE3OixAlIMl\n5XH0OkMd503Txtaumpr4lP5npGvNhYCXBZg7VkdFrSV6QRAeZzAsCuV9jOcA\niJRyl1a8m28wb1Bpp+Uq6OllQ9ikDawT4h2Q/WyzF6vNRW0RbMhmSSndOM/U\n6/EZQg/Ux+YM3YBSbB03hHeFA2R/lPE6xS1x4KZU0PGs+HGsA6Wd0+PFxzPH\nyNzmJSoAlULU+Q/2NT9I2Oo82HyTNJfeNigadhfZIEkVZip/mUiMhqUKDlb+\nWRYja7S4fLQyvkzlY52MeUhKKBiM9XykeWf3Xel5Drh3GSG5Jzam5p0KlZM+\nzmlB4K+5Q6MWJUjyyOdH/lLGqKAhhf6N1LjR8dbCPBd7lJEhYblPyk9W0ZV6\nqa9g\r\n=X28E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.369a293f0.0","@material/rtl":"7.0.0-canary.369a293f0.0","@material/shape":"7.0.0-canary.369a293f0.0","@material/theme":"7.0.0-canary.369a293f0.0","@material/ripple":"7.0.0-canary.369a293f0.0","@material/animation":"7.0.0-canary.369a293f0.0","@material/elevation":"7.0.0-canary.369a293f0.0","@material/typography":"7.0.0-canary.369a293f0.0","@material/touch-target":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.369a293f0.0_1592860663957_0.6429168110817662","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/fab","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd853a8f71f8c9368adde928e8aac561ecb994cd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.f1432b5c6.0.tgz","fileCount":18,"integrity":"sha512-tENgvnSk5js/m4vsw5Z9KXrUxtnXFWoshl3H38WOckl2EbrhGLBkiKQ8LOAW+bxisvuw0ExC23BQhLXvXr/yeg==","signatures":[{"sig":"MEUCIQDdObMsFYPZTR7DQDRXPtcubzdYanlG0iJMezNH8cUdPQIgdGiXkepTItPywFJKTyG06EA2ckd4zPSasBeI1P3oSfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SHVCRA9TVsSAnZWagAAoy0QAJRMAtBYCoSGa9Dd1KPv\nYSyO6s8dAcK1vbddSiEkc7ySdKwLS8p7I+8upHiceqmB1wraCTWbqB7Ly8FK\nc6yHVkTU465Gxu2rLJ6gMNS+0OuVuUUFynxCSXeC2kMLIzhQSxw0epKrpA7E\n7OjTIZma3ySpZ2Pc85BlbGfbKIimevTxh0sL5i5z0Wr1ZKg9daS4eNkFCnF6\n2HlwjDax5oUa6GtC9+SMWQNhbxjo08hzuJau+tTRVWw09ww7JHyPr40p2w0t\n+Yjsad/GKfPPwFm1+M68t0y0QrC8Btj6jDsmRGbHYa7FQCpDPsIDK8kPy5gb\nS9qI13weixp2FLj9PtYWsW0O9vBqMPcxVk/5NaWO5jzze+px53xuHgXwDwCW\npp2jEh0nZBtfWq+qTVJ7gBDqf9fZFhZwU5O/QRa143E8GzjJhTheVvAoQ6js\nK7Nh+jP1Xj6DNTAi3zpxGP8mb8HaBsYx9k+X70YluYpoSzNpYD8Ra4oRAuMu\nSwK/U8FV9Pxm2AqMsbfMMJ84iR1GZn5qQ6TxKcWpjwHb6w2Qd8c9M4BlBu88\ntoKqUwbFx5BwEeK9frrZtZbPlnUGwAketqmmTegDUTHsOBROwAnA5/d7YL1J\nk32guV81JYIswXUnvl5EqNLRw0s+x22AlZ5gbBKA0GdOP1ZbqvL5pzcLgzUG\nDRHL\r\n=blLA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.f1432b5c6.0","@material/rtl":"7.0.0-canary.f1432b5c6.0","@material/shape":"7.0.0-canary.f1432b5c6.0","@material/theme":"7.0.0-canary.f1432b5c6.0","@material/ripple":"7.0.0-canary.f1432b5c6.0","@material/animation":"7.0.0-canary.f1432b5c6.0","@material/elevation":"7.0.0-canary.f1432b5c6.0","@material/typography":"7.0.0-canary.f1432b5c6.0","@material/touch-target":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.f1432b5c6.0_1592861141261_0.056487359449635344","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/fab","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"452076a253873fc7a4369acb02922285fcf05c9a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.4757a16b4.0.tgz","fileCount":18,"integrity":"sha512-A3kXuhFlhZtKi9lC2A/hd5WX6suk1H6I0WGFXm+3cvqzili+g8nQpAXtK6fyb7X2qwkEWXAQKX+gPhcjGSr0sg==","signatures":[{"sig":"MEYCIQCoqYi+dV49//ycbugUW0+MPzFtp7oDJYxLZPHjXVR+FwIhAKyGWjBUAUNVvNSAOoIJFkTHOCpfd100l4R+s0vFaYY8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ShyCRA9TVsSAnZWagAATNIQAIINfyWUtlM7sakRbzGj\nHOBDvUwc1ftMFaSCk+x8TJiVHysrwCTI/R3JvhBZmqpF+VlWzRW3FSJm3sOQ\n5KjDlAiCMd1omLBblmq546A0pNior5hWn1kZms3McuBc/Ie3nOS655CPu337\nnrRi3Eb2RGEaRwT8imNs7zk6rJGuZArhByGdNAoKhocnY15rJ1UFT7vT5Crw\nfJmkOfiQC0Yoj8EjZfYyBQZnN+PrjSMBOnRBXGWLv1MlAKjt2eJSlZeTfSFT\nB3Fyq8MFkaO73OlBMSDuMOrDAgE27e15M58tq2m3qWL4MOODsPYV/8IzJVy+\nndgsu/OcB+uWuFpr+clcyyPpE/sAOjL+8XLJ0Nn/YPufgzreimkZeki9mbkQ\nxfLmcTABxJQfWAPwamnRW/ft0JubWF7qOv0qda9ZZv3nksrcicshX8Ac8dqy\nXg5nQHSHW/u4L43jaIJL0x9QdABXToSqD6qTe3W27RsNKkIhYXtFJW3TxNQN\nX+NAVt5yphyproM+ILOBzOHZyO16Sl+f27Oq4cTfsFUVjnv7h4XYbrqZt4F/\n9qKsCCOlLwoYkOMPaWrBqDrlS9BZEb6ah3myDpVvPNRIqv21POfuvJB5Mdbu\nbg14xStFHk8w59bhctugb3M3H1cSdIAZ7I94zNKLttAXxD5Wi3+eu7Z6a/sZ\n/hcl\r\n=QbRE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.4757a16b4.0","@material/rtl":"7.0.0-canary.4757a16b4.0","@material/shape":"7.0.0-canary.4757a16b4.0","@material/theme":"7.0.0-canary.4757a16b4.0","@material/ripple":"7.0.0-canary.4757a16b4.0","@material/animation":"7.0.0-canary.4757a16b4.0","@material/elevation":"7.0.0-canary.4757a16b4.0","@material/typography":"7.0.0-canary.4757a16b4.0","@material/touch-target":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.4757a16b4.0_1592862833264_0.8485296217868348","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/fab","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.f8f472762.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c396d3aad568b6cccd910a3b90636087d046d21","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.f8f472762.0.tgz","fileCount":18,"integrity":"sha512-hm0jrl8Mq3XSGaUZe3QMENXrAFZK86U4iTRJDwFoqAaljlu30+gBwIHqHNxcA94xJWsnt2ooMmfQ/MVRSn14LA==","signatures":[{"sig":"MEYCIQDbHg/6Gk9iC0yJkwZ06VNd1PKZRRdwkcrZrjFpqE2xoAIhAIsVL3PBMYjz8N9r83UOd9kvc3uGHgoTCSHqjxLfrN7f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SlgCRA9TVsSAnZWagAAqgsP/i4rZl0wtmsZmM+BX+Ty\n/L+9d6E0nzvfsZ0pyBDYnljV4S8X9Rj/zg5KduqF2ALlvkpwUxxpehf4t8Kp\nghHBj+KeLC1hKfiPzqaPPEXPZiNMHtkoTuT4XUmsSzg9L2D7SxrZvWimA+Zd\nB68q2tILGcwSdJCh8Yjz41RB11jB1MCr1BPlAA57QbD3vz0kzDa6iVPu5ox2\nII9udNrggVS+hM3LH65/jBdemF61Oq4pMPuGKoAmaivZ1fw/3EWBxk5hhglh\n8e5m6GQfN91S+C+vTLLY/BIPv8NClrLmrZwZTNf47odGg3Fkq70VUC4TVdzj\nzKWd942xb5zQRjl4gbAVB4yDcnyOz2hwSihmGlVP09K+O+sQgk2TEeot7yPS\n0OK6P5gADXHK8MkPmYwRTmsncX3hI1GmLoUc1MbX+hIMZtVaC6bYHlCg5Uys\nON5id4N7U+w9/N6lVRsVxiPH21K9a12FJIKnWcytwt4840zcGWa+yl1+CkMj\nu+suGRw+5cWz1trVcZCvJ+qcUfzbtb1+p0Ay7x/QOmIaB7zCmcaST//sWf2e\nga9iMs5amXJxtBxfU3083p07LnbW2gN5aYnhsbQYJXWAyO5NEo4WnSsD+Zwa\n9aqbtxMWAUJlQO2+/AxSAqWIDlMBO4hiAVPuNlRBgQjL4as21HODXuCflpkk\nkAPW\r\n=7c+I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.f8f472762.0","@material/rtl":"7.0.0-canary.f8f472762.0","@material/shape":"7.0.0-canary.f8f472762.0","@material/theme":"7.0.0-canary.f8f472762.0","@material/ripple":"7.0.0-canary.f8f472762.0","@material/animation":"7.0.0-canary.f8f472762.0","@material/elevation":"7.0.0-canary.f8f472762.0","@material/typography":"7.0.0-canary.f8f472762.0","@material/touch-target":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.f8f472762.0_1592863072502_0.9763451259989766","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/fab","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ffbf451f81a6ee04c88d389ed3dca2c21b379e2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.7e4d55c34.0.tgz","fileCount":18,"integrity":"sha512-6/yG5wXSEyBY+51SlIPa7NUAtsSm1W6/BLqwwRSXDdmS+nxTHemE8tA5mOwT0kcMeejdS0zR8kNWTM/pm0u2qg==","signatures":[{"sig":"MEQCIErpG5frTWJkR7FLOhaVV01YMQEvaNecm5pdc6EH7UUFAiAbCmtfdtMRiH9+8ym3KdHloLE852lDCmVxhF0Vqwk+YA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TDbCRA9TVsSAnZWagAAMWoP/100JeRKbCugN1f+wD6o\ngdftaocBeUyKCXb0TCO2mTFdrWtCmATN3vHupcDLTZTm+HjOIg7FUKj8nC79\nri+wW/OJYWmjbbtZud4ZHvvAfWRV/zKYU1g5/9c9+f00oeFTXMfHpR5p1aSJ\nfTDq4qAJf2U2653AjmdfMzSPas/sHnbT385EoiWDJvAlA897K3esWDPAM4QK\nIFYvx4PwRhjUt00u0IPw0xHhRLlkFw+VcOUEEnikTjrZm1bUaPlPf5csNmeP\nm6b+xUq1d/8HeOorugnam9ZDJTOvVgz8WHRr3aKfEwbWOv5m476T2BxzUowp\nduRVHJ3AZkThD5uy5uY+o3cy4tn//s9/RqYAQWwNav6FeUmHlfGacUJTehiC\nGIqw+rCkGtjNnIh5ktssHDDeKXMOTpyR6iSHK7lZGclZbpNkMewqlxDTs/Fa\nQBRoapKPT5fttmGzZOvho4hAS3E2JdMQWxpQaJvU9e0l5lQSZjkkyApCii87\n0DputJ+REimQz5DcBb/0qlDHRDPXKBvsUm3GHaNETCU75zn8FqwyCOaAzBqe\ncMqbqYcWnQLkK4q/Tl/sktlRYRL9ans63jBGPt8cTgPw1EmS33jMXje6i99g\nnbd8+pLE2RjPMqhahEi1d1rtLL0bVZX3L7jXnyzQ1JTjSfmyZMLxU5mivdWH\nQxwD\r\n=Jm2B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.7e4d55c34.0","@material/rtl":"7.0.0-canary.7e4d55c34.0","@material/shape":"7.0.0-canary.7e4d55c34.0","@material/theme":"7.0.0-canary.7e4d55c34.0","@material/ripple":"7.0.0-canary.7e4d55c34.0","@material/animation":"7.0.0-canary.7e4d55c34.0","@material/elevation":"7.0.0-canary.7e4d55c34.0","@material/typography":"7.0.0-canary.7e4d55c34.0","@material/touch-target":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.7e4d55c34.0_1592864987532_0.7881779235143267","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/fab","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"922dac3e088678c3b9a5e6fc6960d6bb5e86291a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":18,"integrity":"sha512-zvKZlZ5JAxsWLB8Qhv5xMmXWX6BfHPkKJyHq6zXSxk+Wrm3aVNX9Quk/tA2o0JPUEpyLgf+59/4j+Pa6e4qZSw==","signatures":[{"sig":"MEUCIQDQ9X5axtFxddGJ8zm7l76DAQo8BN4MgU5/3wxmvgAG5wIgWxBMlJRxvouaC/bqsNOfwFZ8S+HOtyWOVRBFEEqx+g0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hGYCRA9TVsSAnZWagAAsCEP/0dU6eYlxsDDHdx3JDJy\nPOn+TCOk0g6nKm3JMDyK6GcV5MMpNS8qsfpl9OYShJmdgYYfEIlv44x22rTE\n7oOKjBDJHuriR4pUh1OXY5AHeX7nyPBlyVo64iJKtiZ3GkRkhiojMSyZ+sT6\nB4/pzbe+fZZtKNAkWB/SBOIehfTWlZdbZQOUW2+AJTMWVM3keiSr4ZbKXpIm\nZSOMirllRGLGg20mMI7p966pwcpuaz0cqWtbvkYlogatO982ODo0V9q7ocMY\nzVFLTypNBUI7tWJ1Kh/NO7yL5Re6ih+mJjpQSX+RIAmuWsh5K0OM6PkOoZHm\nExOFdxNqzLOYnAoYut3t4kFyjso8qWcUrLrTMlNZuVZGqxcetHiMSIFU3ZI9\n6jwhpMZZ3LxJxaYD4peiY33JhFvxYBgBDyiFt635GH/Yp61ysT9LwAZJSL6p\nXEvfNlOT/DZNAf4+QgnHvJXqkKfXPL82HQof5puqPFHNTxlmGMirReLAIlzY\n7tKvQzuD/WDFf7MtQruKm3dYzesz5onRpCxLnSafVW9GPdSGN7cnk6TNOjRh\n6ZeiIoJ0GOivugIw0QO7a0KPWKhzlgo+i9AOeCLtPH76GWAJnKqpe4E+sumK\nt4e2nw+m1unGjXqmF0FDnA3oXx293HAm23LYPihhP8MRDLxYtUMzQjhizjtL\n2mOm\r\n=aqMn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.bd1dbc91f.0","@material/rtl":"7.0.0-canary.bd1dbc91f.0","@material/shape":"7.0.0-canary.bd1dbc91f.0","@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/ripple":"7.0.0-canary.bd1dbc91f.0","@material/animation":"7.0.0-canary.bd1dbc91f.0","@material/elevation":"7.0.0-canary.bd1dbc91f.0","@material/typography":"7.0.0-canary.bd1dbc91f.0","@material/touch-target":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.bd1dbc91f.0_1592922520258_0.6890660898578109","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/fab","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.31523bc62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14cbcb5649a43e0dcd345cdd74041e3708c9d30e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.31523bc62.0.tgz","fileCount":18,"integrity":"sha512-3HsDi6iftJFSC4wiNiAcfB9LpkAxo7rn/+4JTB84JCPrKnzQ1o/UHPAJYNMyV9eqT133HF+od7qU0LSGRLkIhg==","signatures":[{"sig":"MEQCIEaGhg017H0pGQw774adQGyp703t4T8LBahAeAQj5sNUAiBxg3XF656aG6pXU0aPKJeVwEUoi77wHuHSp8DrxcHkCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hLgCRA9TVsSAnZWagAAgF0P/213PsxHi6+h5vgiwwBQ\ntI2dICtqWOIDk4fp+HaR5psDx6JGBlUho9LvawVrHwx5Von7FbadhMWWOTuw\nRe6vi9AhMJTDyeyZ0UhYEBCT4rQIdQrO46hP0IaVohtQv+zXWKgWc7ZKZQVR\nGoXVlGOWdDh9Vx9h5AJEUcZ3htFGkV4WMHxtDDXBY+nJvhc064EPz2QxdGi+\nXaR26SWjqs620tWU0mBjkJfRd/MJGJqIMAZ2VshTx3glWtIQuKXe0yHa7S/x\nU2uwxKEMjDIOwERCKpdLmlY9ijhG4ThUU/NxthN/BEQHuWSvaq3AJO/v1Tyn\nYEjgbBW+zj8g4eByzf7BNQWL36YtCoeeuUH3h8jT7F3GaL21LKn5PrBj0+DD\nEq7aqxsWyFce345aKVeKkvC7cRxPK/NI++N/Ab8Y3AE570G1MvUYBW3xdEGR\ncIufmyqY0egYf2vI0GmVGFG7dBK/xDLuZFym6t9VuVUNpnZBymHnPUbigEvx\n3CSGDZYND9u8vEpPAVFGIJaEU8GkkIXxLnLKjPMcED9Teec+Wjr8KCT8F1GY\ns7xyPeuuER12IVmuyVxrQK/mANm6F6rY5lnnwJ+Xp8xVPPoLdAw+7oQfiO5K\n6MVUzn8ViI2WVUnqaML/kBjn0EQ04NlBy1NGOVtp2muslktjx0QOdSgopB13\nVaJ6\r\n=5eBS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.31523bc62.0","@material/rtl":"7.0.0-canary.31523bc62.0","@material/shape":"7.0.0-canary.31523bc62.0","@material/theme":"7.0.0-canary.31523bc62.0","@material/ripple":"7.0.0-canary.31523bc62.0","@material/animation":"7.0.0-canary.31523bc62.0","@material/elevation":"7.0.0-canary.31523bc62.0","@material/typography":"7.0.0-canary.31523bc62.0","@material/touch-target":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.31523bc62.0_1592922847615_0.16457382221985672","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/fab","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81aede359b9a326eef061470ae2065e257dfc5d2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":18,"integrity":"sha512-fmy1ChIis4MwWFGyXfS/Hqu4DdcIZPnHosBwnlwyfDdy0SxAIwC4OSN+ow3O1WH646Fgx2bEWE7bSvrsXjl5Wg==","signatures":[{"sig":"MEYCIQC4p5ssJfcxK8HhPH6I2j24xthmRP6PKeexpA8dIq6QGQIhALnr4zu6yMRNaHkRT7IwQrALpP4Bgcvl+5njtAP7Ht1Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hRYCRA9TVsSAnZWagAAyiwP/iK/bOacmoErp9aeodao\nMuNZYbOmnUyfsNAtx9cR3KD/UpNDXNcHEpv+15lJiNoll7/yQNEpm5v5VtoN\ntinSzvmHsLUBV+UsORtdnTktwR50g2RZ0edzMAxI0Y7OAjHKU6MmCTLuMZP5\nx3i2IBAeEpFoJQN2S4J1X2SSTfEH+bh/Ao2lf+KYDJUOS7Zn0kzcD1VdlPuR\nYWX+6mwilqG/yK5W9mQZcnBx+fxnxCXvxVcQIOtCuI024Ilnr18sxb9n8LvH\n5P2wIpO0eBmdpaUdrCv+1Z+rGfWEB5d7Jq6pELA5U9jwG2n5Af2o0/eMFtUi\niCG6aw7T81ZRR0hbOHsrVrd5u5cwlD8Ubadqn8kqkIhIoZjq2U5lChyoBw5u\nshoGLA12nKUv6e6fTXsBEr07if6F7xlLLf5YZjLzcDQcWgh1HelwHEi1er9y\nxgvbf3KUGGeF5jdKOgJTsDL4bA7JNww+vs1jS8S4F7Ox4UD7Ru2d+YgYS12V\n1869Y2x6TCI/xO43v81A87q0BZcSL49YLF2BTKFXnTdbRMXC3Gk+qTBR8IkM\np0x9XPCJbKxMB/81fjPSwnoYi8fFrhiOcu02g5wK8Ewfvmg0tP3wJGhp/f5Z\nWNLauLazo8iY2wBWQTLT3TVnSlrVTmq9d9i/ozFJ91P9/1NcytuBPZyc/rk9\nWIn4\r\n=vqLi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"38539ef5e3142da419b89547f32399835fcc7472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.a96b6d4d6.0","@material/rtl":"7.0.0-canary.a96b6d4d6.0","@material/shape":"7.0.0-canary.a96b6d4d6.0","@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/ripple":"7.0.0-canary.a96b6d4d6.0","@material/animation":"7.0.0-canary.a96b6d4d6.0","@material/elevation":"7.0.0-canary.a96b6d4d6.0","@material/typography":"7.0.0-canary.a96b6d4d6.0","@material/touch-target":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.a96b6d4d6.0_1592923224305_0.9108398950428442","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/fab","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b93d4ce87e833c67d6abb718aea051af8fb3bcb2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.ef3a09533.0.tgz","fileCount":18,"integrity":"sha512-XAJ9r7cNedCl8Cf7vf3753DgIBNBl/SHFQy6Fs6KG6EyKVK2Rx8o+t2RBATEpQpO6OITwKGvQIXCjJOrtdAY6w==","signatures":[{"sig":"MEUCIQC6tIWZHxvNSmailBr+EHt+Zv867A1FfOKiiPsTGWdACwIgcTvVuKPsExaFezuhuYCOif6GY8QkVBndQ23QizRRQKU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hZMCRA9TVsSAnZWagAAr6UQAKSsj6jlu3FTvogIy+xQ\niG8n/KIFV3sXkNJbMOCJ3hJCuNqejJiWXukyfZnb+fmAtdIUXskKp/arjsUX\n+K7+DR6u7wSumSXq5KXqKRKt4YsXouCbJkHPEg3uqankMEz6WjW+Ub+q2u1B\nrwgge9M/EqQ/GMgPa/9yD6AfsnjhfH0bIDN1gdZ0hs++CMDKwggTxuW7JLSd\n5ghHpEGUX6Ib5fQn+d7wXgEQO9tFqODqXfJhkOv136vs36JwhMHLWGYSZKB/\nBGtwF39jG2oWiyfAuz87kaGkheZBy97YuK8EFvUW+Dr0gTvru2X/vIG0AmvJ\n+a5rJ3x0lBYmUNVxQCtuqKzHXIp4hxTX0KJtNzdzpeW0gt/sIDX0bZ3FEDOr\nCovTJLlP+BHdfHcFOLS1php9M1g1bG3yKIGxnvKPCvwZApln92tFRLpqcXZZ\nM9nj+i5YtArVhHmy8rdel7tz52bKXHjIRjapzdUefrnmaukccJHBd1GwBiKw\nk1mjEywdSKZMTy9FS2su/VVMhQq7RdegMIsh9rFHa96IS6gwLrcc09Tkshfx\n7SYfnrpiPudbhmmLwc1BF40eFGobBSSxujvXXVAj2/s/3uf08j/wsyjbr18L\nSybGoh/LZm4PdteBpyIOy1/0srRK3uebEAzmlgBDTSVfZ32/zBY2yzBiXliq\nsT7+\r\n=xAAQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.ef3a09533.0","@material/rtl":"7.0.0-canary.ef3a09533.0","@material/shape":"7.0.0-canary.ef3a09533.0","@material/theme":"7.0.0-canary.ef3a09533.0","@material/ripple":"7.0.0-canary.ef3a09533.0","@material/animation":"7.0.0-canary.ef3a09533.0","@material/elevation":"7.0.0-canary.ef3a09533.0","@material/typography":"7.0.0-canary.ef3a09533.0","@material/touch-target":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.ef3a09533.0_1592923724165_0.3599689892125657","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/fab","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.080965f39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f69ecf68b5afda342109043dca0126ab83e2b655","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.080965f39.0.tgz","fileCount":18,"integrity":"sha512-XIyXbZzBK1pg3Va1Xmy6TtMmxnUj9gT7qLD8jh5y6rwar8intF6yMNrSkMjPWq2tvifcaHYYXBwrQKx+sDTkEA==","signatures":[{"sig":"MEYCIQDLXqpi2pSTMYCQHtugc8zeH9D8jomcEo1CZZ7NVhSQHQIhAK9Xg/T20NjQcjw4Y7nkWLv4SAc7xEWWzAaYhN2VL6aK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h0tCRA9TVsSAnZWagAA8dQP/0cIBdnmCYKaJ1z5Oj0R\nHmcV5hCva/kpdaaLg4Ash2q4+8tl/27IgVmQo4rRTGSRIqfgSgg6iipXEJW5\nA1a6xQUK+Z3Nq8Af6D3R+KDfiPzVmN/PQSQXPoGQKnPy9sz1n62dAJpVMo5D\nx4klUA84rUsdH/79dOP1h7cg3Y99yEY5o/jx+0MfnuvFXdiW43LyyW/hsGbe\n+RlWtZR5VDggnyprpyi8kreLV+wwqk7E1ejpgFAnIbR3hJbvBM+DZ7DHCqFv\nCN8LwI2u7RVs3hcIweK/xNCMduCo9SJIYEbFwzREPfIpHYJ92u/w518zWpXy\nuCjju8os49WCVztN6jw28pUtxV6SFVQAy3trlO+oXyQpCNX3XZpZj8ZN9R+4\ncALSLIX2Qz91ZMTW9PW1eIiB4AqCYxjCj6LxretPZ8pIjPPPuQXjFOoqTcvk\nTV5VBD1P+UYCJ5s08yRxRs8EL3Ts3pVQT0l5CDS8VJJupIazoenVcebbFihK\nWG6ExOccE+9Fz1dK5j4UyYWBxLNGzcsDFVbollaGMyNG7qkMhprktffu4D8c\nThyi6JvKvWW1R3i/NAflxy8xs1iutC3BlIyAWMc0qd11ld0LcB3ZSR+fpV2A\nxB9MfmsaQMxyR8L2oqyo1AbG/A9pCLB0JBelSjia9b3+xRyXK/ygMCQOWG8L\nWLO1\r\n=u4IK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.080965f39.0","@material/rtl":"7.0.0-canary.080965f39.0","@material/shape":"7.0.0-canary.080965f39.0","@material/theme":"7.0.0-canary.080965f39.0","@material/ripple":"7.0.0-canary.080965f39.0","@material/animation":"7.0.0-canary.080965f39.0","@material/elevation":"7.0.0-canary.080965f39.0","@material/typography":"7.0.0-canary.080965f39.0","@material/touch-target":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.080965f39.0_1592925484783_0.9947633906340942","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/fab","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e32f9328afc85a919b689d8dd1aa3c3de600b2f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.1bd67b65d.0.tgz","fileCount":18,"integrity":"sha512-RkVHGnm/UKoVuK9z9IA2ZCY+Wqo7Go0XJHWTs/n6uyXRC53lf0LvYZligMzG0uINE8t7oLCN9h23PW1oVkAvmw==","signatures":[{"sig":"MEYCIQDN32ZzVDaxkOaMGjrD1s976LD6rXu8KM+Fum8NCED8YgIhAMyCjPzod6zOCFLSqsfFGeN3lqy12u8awLN6pzQ0NeQa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8icgCRA9TVsSAnZWagAAL24P/A1+6Uv7ySggN6fHaR6G\nejVfqOj7o/wG1b729pBGfdJ27dUyhu5UmIffOc7hgFGPRujxqnzVxGwaqwby\nrYTmNYEs49ej1nxwTB329a/0Cj497eWk4Vx+gXo+3tJ2aCCY8kG6XXk26FXL\nupHLGHLNlzCDLr4IwEq9E+NXcl3uIsNE0NRgW3cZmvvIHvR5pmbNpC/vNdtL\nAExIsBM/hUDZsW05Pncc4GQGM8vDOpCMoBIkkWohDk3Iu6KHNmhp4Hqz4CDj\nBp6tgdLGR+l3agz0rSK8UZCKLfg84ImRH4BVuawnxCGlYUowXc48Ko1RYDMS\n21UJJx7akunucgmQbnF/n3rbO+gxA+3BexyAKGJWTQPhboe+r/7hhop9YpMZ\nb452fAfdapA6GbrT0GyL/ccZ0InOdx7Z9/U5IfJccjbUwy9wPS0fiK7/ooTx\nK6SnyE0pNwVvQO8k85Q96FaFa/ciV79z3IIEFdw4Utl5o1RO4w5a1wEiwj5Q\njO2MVs9Q/ryGGNoQf5JJDmWU9H6Wuji44mUaRo0+OpOnwyuzi5VBEuZ/UolG\nXycnRUGR9JlCFTg+4UG5gdb5O0PU7D7sTWZ7rlIuQF6I5g4yj3mrNbN/G0eO\nNKucFrJ9BxsQUogXMsov48IMJlO2g7ezxFO3HlaDNg62WAR3eicwKtp0+ko8\nUOQ9\r\n=n07D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.1bd67b65d.0","@material/rtl":"7.0.0-canary.1bd67b65d.0","@material/shape":"7.0.0-canary.1bd67b65d.0","@material/theme":"7.0.0-canary.1bd67b65d.0","@material/ripple":"7.0.0-canary.1bd67b65d.0","@material/animation":"7.0.0-canary.1bd67b65d.0","@material/elevation":"7.0.0-canary.1bd67b65d.0","@material/typography":"7.0.0-canary.1bd67b65d.0","@material/touch-target":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.1bd67b65d.0_1592928032474_0.24754050991030052","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/fab","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.18ca31248.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a85021c6192cc99deb6bc1ef9ba83e55275440cb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.18ca31248.0.tgz","fileCount":18,"integrity":"sha512-9vWLNZqf76SzUbvD2qBy202QPmQwvJvf7rx9YvmI350vsZIREAugVTtUU/G31NZ8w9ga4KzMNB9fsg9DO/mLOw==","signatures":[{"sig":"MEYCIQCVmO3Vrz8o9VpFs0YEANMDCkXkKDlvQ8UH3SvU26dg6wIhALtyfLA3hyumBE/vZRNtMaJBOVsCKxdEdijCYIpRgN6+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kkaCRA9TVsSAnZWagAAikgQAIGbeiZJvc6JMOT5uT43\nOXm6AEVFNwR5dFPMeVSKLHNWRlDnEI445GiPaeS5+tNx3TW1z1PBSIldvIDn\nsOb+3HFz2w9sMuCwcMaIx9KAgn/KWLGeDWGUuQONqVid9C5aVqqP3P+aIjtd\nBjL/rksfNbUfp3OzhNJobIfzLeFN07cgXM/6k2PJ+s/7lfFv+8rXSm4gZKvG\ndjWv+aPmtofsIEGx/v7R659pRaL+0VtxcY98Ev2NRCj2jCrV/Sm+0AeDphiN\nzHYDaABcX1gGqsDDFaZQ/g7x55FSVl0iSQez8yLqzznw4HlX5MAUFGpc+kzN\njXPynxU7Y90pf+KVb5oVnz8PRgNPQwOrsCiJ7thhPNLrdR/b7BB5xs/bjAaV\ngG6LGBgzBIn8nfP2TkJgUQasUkqWQOxtDudNVe6wLYPSoWgyhFmE2taLxBug\nVOZHf6kGQbDu66nh6Oo9u7yHp8uPIvJZB0su3B2MDqCYtEkDdEoSIkAbLGAf\n04yfhzhVu5IzOOoVxEposEiHGFDgApY3VldyaKCeMuTWSrJ0mn5mBSqMtngm\nqkF6MN6Q0TtVCV0OcppgAwJdWU52+D2CerGYb+OIOjc6W0oPwRS+cbLkPZHE\nxC6YfvwuK9IwVzX/Hn7vDb5ZII/dRggI8iAFXycFdaBwk/Nvy57lUveriy/H\nZ985\r\n=P6zJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.18ca31248.0","@material/rtl":"7.0.0-canary.18ca31248.0","@material/shape":"7.0.0-canary.18ca31248.0","@material/theme":"7.0.0-canary.18ca31248.0","@material/ripple":"7.0.0-canary.18ca31248.0","@material/animation":"7.0.0-canary.18ca31248.0","@material/elevation":"7.0.0-canary.18ca31248.0","@material/typography":"7.0.0-canary.18ca31248.0","@material/touch-target":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.18ca31248.0_1592936729844_0.09979693549666857","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/fab","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.39cf00836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a89fa6587ec8f19329644061aaa9ad294371fc4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.39cf00836.0.tgz","fileCount":18,"integrity":"sha512-9cJzzp55CvqyRkydvBTWwrZZKPauym9/IXR6OBRa6oFkWqeLSUqNqBsaZEdiKym/PdLwZB8bX38Pg5adls4lxQ==","signatures":[{"sig":"MEUCIFgaD/SX1ShYvKOdic7q07o2h3nOG74J7hji/UTg+J3mAiEAjKCnj0GIAo3+Iy5iRW2l+j3VEHm/5FAjtdNmLYn7lJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k56CRA9TVsSAnZWagAAPr0P/23KQKkOjwR0Xd211O98\nm8yjng5ZoAmgamjQuu1DrSu90a/mYxKYeZq6oA+s7jb+lYtHxLSv6++fiwKX\nuBlcabv4IxIdGDfoB8A6CgsemfY9/0B7FyW2kUxKOMqF+h85MUMyq7dYwils\nNCeFtnaPqWnNTo+nHTP3CHGxNEaDNEfT0LPd550qJGocTW6eh6jqMQwNI0fo\nL+2LCwhLD2XlDY9Ipknz8nZ/jyhPPpwrJ3eGfTUxHGaEqZRT9bSGlO1yyx4P\nzdZ+k2bL14pjdTWvrkw6HbhehOHwEW8MuHoSYVj/jseWtIFvnL/g/IaY9TSk\nQNFGD3llTB2ZhYf9MJ+3fu6QEOmKkz5mPpYTZJdGM3BDfztqX0o5U7lwCU+o\nOD4yw+nLJupJzFbRdJ8ynxpN07xvBFUwRHlIcBEmuuadOVTuQwISn0kMo1KE\noUhi0tewTWuSUstr/M01O4BLvMHS7TtDd8h7P6Sk1P3ZjPVk5xxuQ5K8VSI2\nGCh1Vha/L2G0DxhQLW+NHuLCYIoPw0XDKRiNqj700jxcz5dtS2HLhbE26QF0\nxeJpwCWwBeRorI1LzhEEFu8sgKfsbi8za5fSKQAJWU8i9QsFIZNJGNOsvaaP\nzutGl4CSJN3gktsj9al043AXJBRJxyZtn8AHvUdSB/X4U+URGTmmRF7zhApn\nybBn\r\n=ilSt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.39cf00836.0","@material/rtl":"7.0.0-canary.39cf00836.0","@material/shape":"7.0.0-canary.39cf00836.0","@material/theme":"7.0.0-canary.39cf00836.0","@material/ripple":"7.0.0-canary.39cf00836.0","@material/animation":"7.0.0-canary.39cf00836.0","@material/elevation":"7.0.0-canary.39cf00836.0","@material/typography":"7.0.0-canary.39cf00836.0","@material/touch-target":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.39cf00836.0_1592938105968_0.7134289889188687","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/fab","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0de578ad466b5daf71257bd3fc0ff5fffd39d524","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.1bfda9e05.0.tgz","fileCount":18,"integrity":"sha512-FsB+33l6aSx7YSenyOGMOk7Czk4LM0o7tlrCGwtMPPkvufPMxJWX8ZbGL97oVEm9DuDKlqzl6R7GF8a1QhFwlw==","signatures":[{"sig":"MEUCIGpqrkAnPiRPFKCWFPOPanAcCIGccpv+/8ATWNEyQly6AiEAkpYUxxPjUaSOqoYLK2//bqT6s6YuW0ZyPN84m6E/EP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lFlCRA9TVsSAnZWagAA8TUP/2b2T/zYuUa7qXGBTjIn\nWVD/S4gdeEOC9VWPdWcG0Lsow+iCdjrpbFlC9OmXkC2Yikbm/50aM9L0+SuP\na+pIyY2DrCFbd8mSaJ14YQzVxy6WtEDDMIFYmVOwi/6FpecJEr0j0kh2rDbG\nLoEik56ufrbXtXG1KzW3Oe5Ox4Z1Gy+L3w7kmHf88SEyKc1rfl+wjLgX9q7/\nAstQmv91iLF84kK291COgseO30xNuMiIiOX5F6MApDfsRBiZh+9Pt2yRGf7s\npvy4lKJrJpVbzHqlqVa3sJQIm99ITaTMsSDhG24HAKUOhqM6Bl9YW+rge300\ntFui6piYhjZ6XL8syg7qELiqEFaPRMTXphB/jbNvAy/YGybbLDL5Y2bu7os/\nP9e+MywkZQorjU1qCMigjy7dkJV8GK87+L8lBZcseYu2vD0EYAjo7BRGafmT\n8+SwJTiTE9kXWsKEGp6G21dbspa1iptfKqH6zteg5kosezN64olMwl851mzs\nn0gDxTy6hLYF8bARmchywz/SOIP/Drw7BvUvrZT+VpBOjLnaqRTM2XOGTa0s\ndkifbmwgfN8esoTaJj0+QT2mk+k9sSDH6z4d/wMcnZBD8a+ZPmOJayng5GD0\no+UjU8lwg3fIo4aTwBB2rT6McYKMdcySV49RKsSGWALhSjghG5rCUZzAcVLW\nJKT0\r\n=PoPk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.1bfda9e05.0","@material/rtl":"7.0.0-canary.1bfda9e05.0","@material/shape":"7.0.0-canary.1bfda9e05.0","@material/theme":"7.0.0-canary.1bfda9e05.0","@material/ripple":"7.0.0-canary.1bfda9e05.0","@material/animation":"7.0.0-canary.1bfda9e05.0","@material/elevation":"7.0.0-canary.1bfda9e05.0","@material/typography":"7.0.0-canary.1bfda9e05.0","@material/touch-target":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.1bfda9e05.0_1592938852805_0.7612059141692837","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/fab","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0-canary.08731bd95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ada19382c48b9ae78596136654e00d10580e77cc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0-canary.08731bd95.0.tgz","fileCount":18,"integrity":"sha512-Ry7yDk3PqI1LyTclCZdGJb51ct0Y7ae3MVkgsgaBhw3/VFIloGfxK6zIqNbhXozT0HwCTC+KFibS+q8QYdE60g==","signatures":[{"sig":"MEYCIQC1/jBuogHLdn62voBt785vzYFiMZKHiBMgOmqKK4PnhQIhAIFdLjSkoJtAfy5z5ejH1eCnpi1aXu2KdGA+BjtOWx97","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lIACRA9TVsSAnZWagAA9kQP/R14CEArA27s67RbrN3x\n8mjg3d/qQmb9yhHiUqcmUVcye2NdXuNPXtgXo3N9kuf2XVQ2NfhNROqEStuq\nY2wGUqmWs3OUAsfU2YXSuQa5V4cT2lZfa0s8ZxsrJxKyiD13OQkk+4wOdzxq\nXLhgRV5vrAGY6v1ArqyY5CXLgCVVlHsXxG9/QfqGs09d/NAi1vD4/DaQ1+td\nF8m3Ug5OwI/vCFwbnhVJDCh+qR4alneZ8hEZumfp0NZh0xw8cURWSaPQr4Px\nKqAqCAE2tpUsbPy30yH9zB/pWz/qiyjKYBA1lKd9L9vqtgc+pcfK8lzKQayp\nsqptnzTjYDMXgJqn+ka3UoG0MhWmOnyaJiJBW82zGBNzlhuI5oR/PmdlgR9j\nlMgKNnh5i4NmOWr+Yt+2f3e6nKkMRFzzGgDiBNZ+xA3WQlbJsHonBPX7QT6j\nyZb6zXZTG3qDY7WIHWQLQKvaWA/ZsBSclRxfZLSqN9L6CLYG0iUxWXjmVmq/\nWKXrzd9XFoB1Iq8xundBMuztr7ilezPsy3IKjIrEIVkzkpJW52MsUQVWMzVt\n59QPuaETkCrYYHPu6rePUisvC3MUrsgVhre1/tcOQuifKqS79SwGVZy4WLqP\nbVzjFymQPtWSZOLlcXxN7sfijX4SBfrOenn3VL9FQO2g22sD8D9YFYRxtP6L\ncQKE\r\n=+0bg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"7.0.0-canary.08731bd95.0","@material/rtl":"7.0.0-canary.08731bd95.0","@material/shape":"7.0.0-canary.08731bd95.0","@material/theme":"7.0.0-canary.08731bd95.0","@material/ripple":"7.0.0-canary.08731bd95.0","@material/animation":"7.0.0-canary.08731bd95.0","@material/elevation":"7.0.0-canary.08731bd95.0","@material/typography":"7.0.0-canary.08731bd95.0","@material/touch-target":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0-canary.08731bd95.0_1592939008203_0.2098640412555728","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/fab","version":"7.0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@7.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6687e35b8f6b65e9547dfec09b6572848ee466f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-7.0.0.tgz","fileCount":17,"integrity":"sha512-KNnAEQ/YYc0aQrDI81Y51zVa35YHeQccHpG6NArGAr2LOAIwl1Y62EPzEw4pCaddgsBdqZwAqk2DXfjeUwZ0VA==","signatures":[{"sig":"MEYCIQC6NkFMsqUBnny+Xve3QD2oli1FSm4J/6hXIm1Jw7PgOwIhALXLaNdVKHJSEUZ1fmacPQpZhpe+rE3E2Y1qeSnAyUrE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPcCRA9TVsSAnZWagAA2FgP/RwelEtCBMjVArSt+ESA\n8ifUcGEEPGE6LSkzWAN+iIsBm6psH8prG5Keg4knnBteMyNzLjblbeIrMf9M\nZoR+OeUfqDKJsIdMp4maCF8OMrXzf/Y2ToglKu6Kjav87Drc5D+esm3jbmF3\n1QnoeVNVrXPWYd53lVggztf5ZpoJqa1fK1CoBITYc7TsIuY+TuUF7h9cb3WW\nAZ86+fntEw7C133EvNoZk0egUnNS2q37SC+YsrQ4WaZkK2BU13ZFQbRq8GVO\nStYGY3N85/lR30MSxfsCfOIXKYuPJLuPoQKqlMIBBOLlY7Ump7TlK69mhykA\nmER/xPIW5OArb6PJKvHlO/X3PV1JSDXrMhtx8knQwZKXGh+5MQzHlu6l1ktC\nkedxTUHBFvXsKcXlVLT3vSFgbOwPSsy6ETQabHus73yHVBYQHz4hHfvjXagp\ngOod8FvID1wuPGC318IpaDgwrQ2CF3bVvT3l3XXUFUlLdrRNExMSje6QD1rH\nSipXTn3Ad+kwd68v5l6WWvgg6VAhd5e7LME3wTZ5wZPZXc4nzu/K6VOmqqSf\nbupKHbbbr0uac2FxeUwZnvMbDDN3aIJoDT9GyjtcC60Iz/GBF7QA60BjANap\n+rD96LHTEW+XuJmdAIEOBJNt57x5mDRITtaULgY889cGWFHT4jmodgD0cVea\nM5ZI\r\n=vHAd\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"^7.0.0","@material/rtl":"^7.0.0","@material/shape":"^7.0.0","@material/theme":"^7.0.0","@material/ripple":"^7.0.0","@material/animation":"^7.0.0","@material/elevation":"^7.0.0","@material/typography":"^7.0.0","@material/touch-target":"^7.0.0","@material/feature-targeting":"^7.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_7.0.0_1592939483652_0.11868203255688092","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/fab","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.a3212b209.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f77b9abe0a8bf1c09b9166e0fead727659d588c2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.a3212b209.0.tgz","fileCount":18,"integrity":"sha512-6mqxi+qTrPRtFXqTqCztzj0W4QiXZuGhnn+agZYcKzi3QwFDBsGBEZcC7LDfMD/HBbjNPXKawvCJqV5+1ezhIQ==","signatures":[{"sig":"MEUCIQCblTtpgC8DMtMBGp3jq+cbbgtMGfqiaKR9Zgep69nH/gIgI5irruzp9oGNf2u7O13vwQRqoR4njemDlb/ZdJoN2dQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lQQCRA9TVsSAnZWagAAc3MP/iLQMco6Ai/qmuopPjtG\n3FYOuVL9hypxlSQrjJW+tPOpIF1K/DWTYsF6GS+/+MqJIv5KJdOJnAxUG77e\nQeoNEELoYT+O+oqYKH18da6anpW5CRoSXZPLHInMGsvhMJhx+w5A17I2HyO7\nXrmPGuxZZj7xU9j0/WXEAxe8jGDPSZWvjAEv8YcAfEhh1KTkBXAzN9WpzG1r\nI+/ysnG5GWD+Oun/nW5XfA9Sk4g4fKQ1C/mjxVf6JfwzOw7s4dQKwg1UCOrP\nx8y0GTFbCVBDE1ApqrOtGki38AllAus0v725gdd91kUfz5t22rJNL/AhvSaM\nE9cp5wSswI6aQ1N7c6XPzI3OTuC3LNcwkBByxemsa6VwggbQ5RbkRV3xQ4Yi\nTTbwdWq2jDnmJNhGgWoCCV/Pt6m7X2pqZ+k1tuoBTcKyLsNzkoLwab1tlAc1\nD5MhitTKdxk6hPzbOusFKykW+1FyeVE+snNcdukl2qSDfgO5j41timoW2jiD\nFak9jgP3/MLRtPKcsI8IjQEwpG24CZpMre1ho24wbfRvNebXw6PODIvKm191\nQX1u1nyxuhBO5d2nP2VIp6wU+2TmwJPy8dGDHvpzU/IV9zNa5MiFMVfxrlWE\nk4xsLbyHBqSq3JDqhGTVaQecL6yHGX4hYpbUdvDw4H+9bY4Wk7sjoku7HFaO\nmYjE\r\n=Pwp9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.a3212b209.0","@material/rtl":"8.0.0-canary.a3212b209.0","@material/shape":"8.0.0-canary.a3212b209.0","@material/theme":"8.0.0-canary.a3212b209.0","@material/ripple":"8.0.0-canary.a3212b209.0","@material/animation":"8.0.0-canary.a3212b209.0","@material/elevation":"8.0.0-canary.a3212b209.0","@material/typography":"8.0.0-canary.a3212b209.0","@material/touch-target":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.a3212b209.0_1592939535530_0.4957472656407085","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/fab","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37da7e12832420c0c362a9f57c6ec28685c6d4be","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.15e81fe98.0.tgz","fileCount":18,"integrity":"sha512-/i+Mr/N9NJ7MN0x4FrMSIwWdzPhL1tDI9TxBX9mMw4iP+7Qcqp19Dm4ss7Q5i1EVmUSIbeWeC5IMvD0U5Qw9jg==","signatures":[{"sig":"MEYCIQCql2yNULOWRnw7ry9IAXfwT+4XYUmyJLzk2j6vMJqEfwIhAKX62DtpoxYX/q7MWnOk2KLnBYzPGIWxBp+1M1hPnyHD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lryCRA9TVsSAnZWagAAevsP/iYQW/9+U9rrvWN0pS9t\nizas15U3BYEhJMXuqlo7R6+gzqw5oE2//zpYop9Iav/J56/YSvOnb5On7mAz\n7oS0mSCP/g/p0LpRTsgKhIKN9ENCp78f3Ln05OD1FSqYiEAQQ92Q/81G/8w8\ns2BxN+u30hCce3rHX9nNP2MhVRbN0jZFxxvCYA5QUU7apX1uIR6pQ6gvmWm9\nJuHW5o/JGxx6r2KYcjqwgb4vMRuZEzZtbgKGu8trCEWxh5ZPxnZ6+I47D14m\nBYqKgelOLVMTAHH4mFiXAHcfZmArM9uq9Pn7LnZYvSrxGyaOxdACQVFKhdJ+\nSzxPxyKWmpc4OhRyhdNJ1uqds6mxU+UZWxsgcOlFPdrE8G5nKjHnQ3pPVvzk\noBJRoNLyNCobBqAPDFZhqAjSMlDSVqt5Cah6Pmf0yF2O6Pt27JqODvGFWNnm\nFLizQcAcnoAIA/s5SG8AoK3hI1abkzWUqI8LGxarrKG8xEgOjG86OUZ3nIV2\no2/8C6SZqMKVf+ZNzVFYD/R/D13JucGeK3ZX5xSm5XSamSHp8nPyEmv6V8Vc\nor/5c5246+LloHxq0zKe2EclMANhFcLKdY+8i2HlViCZ5eYZcSkhDp5rHFHf\ngNhMxbuMnrNn13vyutFz1MZAHWKmtJuQzVHC7IkN0psrX5+iVj4AOFAfVQJX\nFZHL\r\n=tWfA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.15e81fe98.0","@material/rtl":"8.0.0-canary.15e81fe98.0","@material/shape":"8.0.0-canary.15e81fe98.0","@material/theme":"8.0.0-canary.15e81fe98.0","@material/ripple":"8.0.0-canary.15e81fe98.0","@material/animation":"8.0.0-canary.15e81fe98.0","@material/elevation":"8.0.0-canary.15e81fe98.0","@material/typography":"8.0.0-canary.15e81fe98.0","@material/touch-target":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.15e81fe98.0_1592941298112_0.3976635060502174","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/fab","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.004c9d392.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59ae759f431e520a007198d1c5c6d4d0ef30e74b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.004c9d392.0.tgz","fileCount":18,"integrity":"sha512-KhaOq+vgyEb+nPyAVmj/aVGd0zoclO/CzUNoLempX1oEwCMGWT3V6703LbFeFOPHYDuKl1vW01MyDYOhV/nkqQ==","signatures":[{"sig":"MEYCIQCHxCyF4y6+8rpcmxuu03vwt6CZYx5WJbu+hAOsKnToZgIhANljM2WH12P3jEjtKxMgRqg44IntLZ+2CpYaViuSreol","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oiYCRA9TVsSAnZWagAAxHEQAI3ZBlQWvyRgQlL1aITF\nTk4g1+reurfTMHME8X7YBvstERRfKh9SItaVHLHQOk9RQVD0k0fBUazHMcsz\ny/UChuWSHUb+P4a+ebi9xaGE+Vfw5yBh2zts3mFwZ+NdDnHho2RLLLpeS1v0\natqThiIHTuJlM0Cf6DHZxdp/YnjhH3/oZoSQkXTID6TnJmw8DGTKMzLc71Uj\nnDe5fYWPpU82bz3pAqgY5UEtQprpqfhUOEYIJAVrmun8BJdUlfffVjTaHfwE\nTv2R+R78di4btLKQQSbC503fbb5DCCEQs3Cn4h2Fu6fgh2HmJXGUNn6vCe6g\njauaBXK2hn5ovUuOukyfBMSSTMBvnGzyHqLo+LAGFFNt0r21uON/GdVnoXrQ\n+XV3yPziA2gWY6ywINHnV6UcCD96pDuEGJSmFNn4eKH3gAudLNYoSjGc+yO8\ncXPRtDbkXxHVrr9hm/qCceW91TEFVg/Hot1kr7Qlt4m7fQA153FryjVydXxF\nTIDnhPhS8tC7HFxmeZxLzV/0KdkokmnkmdvSgMk4KkeUqlRHXYQ4VvPQydVu\ng03c0zrmJJn7yOYUcyarZL7JNv3/Sm0dTXWevRU4g54NKIEdnS9KqNKKLpt8\naE+KsdxwI2JYwl83Xl+eY+iJAyFVb9+LrxlYAH8yM05FutLHcsaTdZ2bFVRJ\nsBN4\r\n=7xsi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.004c9d392.0","@material/rtl":"8.0.0-canary.004c9d392.0","@material/shape":"8.0.0-canary.004c9d392.0","@material/theme":"8.0.0-canary.004c9d392.0","@material/ripple":"8.0.0-canary.004c9d392.0","@material/animation":"8.0.0-canary.004c9d392.0","@material/elevation":"8.0.0-canary.004c9d392.0","@material/typography":"8.0.0-canary.004c9d392.0","@material/touch-target":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.004c9d392.0_1592952983962_0.8021562800555031","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/fab","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26963289cd9ceb456110babe895987aaac088e6f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.03bde00f5.0.tgz","fileCount":18,"integrity":"sha512-vYCrAuO0erswVgIzOGBg0ukVsSMiD9kKoT/ZfWvlmgCReaAiD7fTDIxy1uH7fenf6cMWdbPrJmbsvSXPKa1OVg==","signatures":[{"sig":"MEQCIDGSpXvbqJps7qBfRD2M+9TqD/nPoiEkiLwbnrnfIyOqAiAK9vDjOquBepJuod8R7onFcpP9pdiH9KZQj5ZpKxYayA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p8ECRA9TVsSAnZWagAA4DMP/Rm6mbkdi7dq5ltiOZXk\nwaghjkXUvvQwCsLA37ifQa1lFwtFqm3sLK+DsulJ/qB1OgMXuyTOhipWO9w+\ngbKYKDRn6U4Z8Brm58jxC7mszsXvMFx4tIoBlMUkfIBVfBE/gO+DdomlrBI1\nli82XDeYMQgDD9GDRBAFe9LMqDEPAuHBBWWF/+6XKYqXiPM3siCSe8FZd7Jl\nlAJ3hIdND0nXlkKaeOAwWp83f79oI2MFgwILDcjBlUiCRVpd4rpe8Z8PNKNb\ntVmlScKqYmEjD0P7B9htlH6ONgD0K/wo8j8yCZ5Sz68yqM1tEMTW+9YPvGNq\nelkabME57jNCPgroAtmr8GwEUXBgRMHA77AZNK9ojLglNzv7k8dJNnX2+xKK\n4I8UkfJ5g4c54hbpDdyttzg4/maIpBVR4UHkyNIs/arsPqggQ//xQJ350HgM\nvjTzMcrWpDshMGS9moc0nSGaEiN+h5CexSEqQTRVGjQaL3IngygFa8vnI27D\ngkrADmirBEMFqcUfOvYFA9fjKm1uW2JpJ2EU0rdTOx6uVDir+ldMhsD9v4Hb\n8199tA1ok1OdnErKOhaPPPJhNwO4pAF38m0zRunXmXuaAXXqawrp1orcrxfn\nDemlxPi4q3snXRpLEuTkdq9XvI0b2ldwNo53DkN8T1o8Jm2t6HgRZZ0pr8vh\nbDwE\r\n=lr60\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.03bde00f5.0","@material/rtl":"8.0.0-canary.03bde00f5.0","@material/shape":"8.0.0-canary.03bde00f5.0","@material/theme":"8.0.0-canary.03bde00f5.0","@material/ripple":"8.0.0-canary.03bde00f5.0","@material/animation":"8.0.0-canary.03bde00f5.0","@material/elevation":"8.0.0-canary.03bde00f5.0","@material/typography":"8.0.0-canary.03bde00f5.0","@material/touch-target":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.03bde00f5.0_1592958724277_0.5443627997364238","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/fab","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.599b8c319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b9e9860d3818f16d9a001c86d293a053b84c21c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.599b8c319.0.tgz","fileCount":18,"integrity":"sha512-CSYwJxDiDDFP3Shsn6Ludv0i5lc5fyCicRxM1FmlBDJAd3E955CflK0/vBRmXEZLKVv6eAgKXpy4pBHFmO1hOw==","signatures":[{"sig":"MEYCIQDAnF4kjhJLAbZJDQcBKUqitFSVADnFkDtXxD3yvi/McwIhAMckvxaFjY++qLtuC9KNVougdfRaTZBIwBlr0UDvNxLi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82nbCRA9TVsSAnZWagAAd3kP/jykHM1aPIIgVxFC/q2G\nL5y9zBQ00lecdRcILztNj4Ogu6y26U096qcI02Jy/6OuG7+AgWulJvhhe9rJ\nVYrMWYwArJpA2WVqhuTXS7Ehdsgv9axj/BcXFN9n+jmJGIrlntqU2hAvQJT5\ndiuaxwCumZEleH7D1qoVJFy6yIgmvhxPtXukl2OHrKgpelp9GpjpEtHLAFI0\nuFbvXoYLh/Sns87ZFKzsopDWeXqK4y25Bnpr6WbMReVshKDO0607/rHac3s0\nBw0O67jSH/0XEX9D6zvz0ZK7Dw4A10cb3aOGqyC/n1MTLK+ZaQ2VZhFjbH8g\nKGrWM5784wtLIDjrON9SD6iRNCacch02M5Eg/+BMne0chsMXrtMRj3G3wU2q\n2NJpEP3HBZuWO90A3nOEjLAb1hOuu7VUNoZ2btPYeLdYaup8oMlvmG4we0lu\ngE7O31wWY68KCJtSITFNpCOKCrAViIyRVy7gV6HcLDEnJFuY3oTk7+pDSNyZ\nWOBS8pfU9GcTZ6KJyEf8lDEJM1k4z/NqcJBArVVhi+vFEc1O0IM+OVum7D1z\nozQeAfcK+2al8o6Sm7jdM66JbWrFjlJO15HDdbhOMCgDk48plVwPVjL+wi47\nBEmsS7lSwCvL4qy3R2HbDx34Vp9LarFHpQXAyU9DaeEPAOBRUcOnIWBIFXt1\niQ70\r\n=j8M1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.599b8c319.0","@material/rtl":"8.0.0-canary.599b8c319.0","@material/shape":"8.0.0-canary.599b8c319.0","@material/theme":"8.0.0-canary.599b8c319.0","@material/ripple":"8.0.0-canary.599b8c319.0","@material/animation":"8.0.0-canary.599b8c319.0","@material/elevation":"8.0.0-canary.599b8c319.0","@material/typography":"8.0.0-canary.599b8c319.0","@material/touch-target":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.599b8c319.0_1593010650743_0.8037940042851897","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/fab","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.87e3be418.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a1ee170523ffda5c2ea056a74eefb21489d95a4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.87e3be418.0.tgz","fileCount":18,"integrity":"sha512-St3S7HM5rsUGxaYt1SFV4SPLouR/h6SAqT4/i8TTVdkmwCoZuONe5Rj8fxmGRyR/t2giyQeVw/mLdI5iqhqGRA==","signatures":[{"sig":"MEUCIQDxdksPhN4q5li/OnWlwwzVIFBSMcJrGjKIuRpWMpb5MAIgLx/6HZjB5Qz0SPVr67sQu5e79W5m6EeBFZdyfrep8rM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85MpCRA9TVsSAnZWagAAnFUQAJ/+sX3MdaQSmCBp5XwS\nFq9ifeqTYJGzwCqdlZaSBaa6c10MUzxVmthWpHkgdsCX1zZKBOY1F0RDLqG0\nqd3TggRu+zDCsyEgcwr1hjeHwsSC9rrDiXWgcY6Tuu0JjpHaSarkOLSXSuAa\nqW/LL/2q6d24AEedeWyF6/A2rP2+UaOf7cxKlOaG17fyEi4m+2VgaIBrutsh\newR7Nv2BJ9MW0WYoJKacoPFisJWC6NMpDPNZA6jLZr+UCqNa9av+H6i0aYtt\nv7sckLkF8WOzDuJy6H3hpCfWz/JMz4qy7IB2n/rj/5WQMm5rBnWJ//MIdphP\nRmN3ohfDm4PQGdap55pzTTH2qVgaFCQpq3nZFnBwgAV2QRDQHh53H7zaOnvZ\nNS221grFdnotHIH66795iGByIvqbaPl+84rDBnRKetDINtycbwFGrhctIkV7\nDKuQZmioZRS2VBNupcyhG/66NCG31OlDoWqfvaxr9ZuWn/e+9YN1prSFSryp\ngbpdMqdPvulYNq+jPdvPIVhjx/0K5kKy5xyqRBP9sEaF8LndBRBiV96YqWkI\ng9qNvXcn8/autTD64mDR4k/TGA3E/TYtiQ6pGSi+y6BmfAlvvzvHXpaLeMv0\nS69hNVhr4aTsSIq5nbKcSftw/SKuFkLcQ6bbJRnYOkN/ksKSpplL4mFyW/9T\n+ySe\r\n=SljJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.87e3be418.0","@material/rtl":"8.0.0-canary.87e3be418.0","@material/shape":"8.0.0-canary.87e3be418.0","@material/theme":"8.0.0-canary.87e3be418.0","@material/ripple":"8.0.0-canary.87e3be418.0","@material/animation":"8.0.0-canary.87e3be418.0","@material/elevation":"8.0.0-canary.87e3be418.0","@material/typography":"8.0.0-canary.87e3be418.0","@material/touch-target":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.87e3be418.0_1593021225066_0.11939538375964087","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/fab","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d03001a3ff3f8b551918da10e98a9bd62a9005e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.035cf2a6f.0.tgz","fileCount":18,"integrity":"sha512-GYuU3LzraFxfP2BVipaV8G/cc0oDee9gTf3OUicTng2twP+FD6vYnswQ13Z+VamNRRaci/lv+BeWQBYoy9uZQA==","signatures":[{"sig":"MEQCIFQHJkADS6FV0k/a/6+Hi5giUTIo/vrtiTcyfYTqKy3AAiAjtgZDLYeIhpUTtvX8x6yvvQMLFEEtHSRUDxxdDy4ckg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe853HCRA9TVsSAnZWagAAqPEP/1z0vhVZOf0Fb1KFOOnX\nzoXL9G9iHPHig2kPx6w+5lsPHgGG2vcAWZ5/ljAfq4Hv27BV/v8SYZd11PgQ\nTL24lSjqzYA1KNy+Ix283/OdinHHU+212AvhjY7Ng+wWRznuVEWgxCbvP2UX\nXYAMCUkry7xZuM5MtIsh3uIwOXCzA7QkYpvm+93dXcLB+05kTNy1m4PPJknq\nJwj5LjA4+rHgXgG3GUtnT1of93jgpsaw0Nl6ENYa5Z7jiyRBYlMOuUoNgGix\nt0ZL15NmeCh/Rx/yK2IT1/3XZ+ejTPqF/9lk1TGIQ17/jU7zIgqpnnz6lzzt\niW5Jwj59TsbliDU5Id6J8a8qtilrdzj9bl4hwX/lzroPa9KmEV/09onBkFDw\nV6yPhdfW/DlyEM5Jdumk095ha717TQ3PHbuO5ychv/IlyyYMyWLkx3Jf1Eml\nOFCowA77FP9Zb/TlI9+KYLKxPT9dsENa10UZgodLmCTslYbzqKJGsk99Fbri\nr6kOH/xMSd+kQGa8Oq7j5zhyjGUUvwH631+LFeaWTv7C1HH4YmINKHmS2F0/\nJCXQ0CA+3qn/2kUX3DFXPqQz4bUYFAupLN1iPUjLF9sp76Gbr0zTeSYTzHwl\nGlMT7x0towQBxdpPD/vpjHkcoxhkWovKukLwHO79kFLvSxrDoapbaAH24Oji\npcwe\r\n=pWzr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.035cf2a6f.0","@material/rtl":"8.0.0-canary.035cf2a6f.0","@material/shape":"8.0.0-canary.035cf2a6f.0","@material/theme":"8.0.0-canary.035cf2a6f.0","@material/ripple":"8.0.0-canary.035cf2a6f.0","@material/animation":"8.0.0-canary.035cf2a6f.0","@material/elevation":"8.0.0-canary.035cf2a6f.0","@material/typography":"8.0.0-canary.035cf2a6f.0","@material/touch-target":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.035cf2a6f.0_1593023942857_0.08806380304355077","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/fab","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcca61b29cd692680f6f22d4f55a87bbe5e98f95","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.2fed2c12f.0.tgz","fileCount":18,"integrity":"sha512-JSRUTNoGJOusYNCJbGopPU/uDFscYgg2uY+LNR8DOitZ9N9BSqnyXvgeDObRSsLDfq97waFbI55JuJgRT0zkOQ==","signatures":[{"sig":"MEUCIQC4ZEfjjNOmchHu00hl28YauJ689HRamBga6H2OuRGOrAIgNkGVic1gJ5ZpYjmfT6xmDkbumXpQV4grTZLLeAQMLTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QLICRA9TVsSAnZWagAAbTQP/1R9Sv/n+Zt50/Re2CNh\nef0dhFUzHfM2aUFTpCBIalfWw8FacM4bLnUaASCLkK07hpdr7bBugLgfvZ/F\ngTXIzQVSxSVFX50W2Mncxf9YGBZbOJcZbBdcpfjxKnup8lT42n5Y84DVpsuU\nTIWIkb8yEV+5F58h99k8FI6nPan3t8ygdw0IpVfyWImKSvMVx9jDqtgtlBdf\nxVJ991BY9ahRSloLh/XAlJuP3+q6GoGGoW0NO0+Ir3XxbZysXerKpBdPcHVA\nfWbpyDCRqIAxC6SAGql4Rkt4zqiaL3gOKL9ef3bLCvK2U2EGdgF3v/XDMd89\n/NqIjPulNr+oW53u/bvWFov36Wr/jH5MyrY+kTze+r0PXl6Kac2ewvKUslaS\nYlEHf60+do1f4bDjLI+aL0+OfK+hATVwvSsSPjobL06oh6gLjx5jx1Ji7Ve6\nNSHScqdD6qr5QvZI7bTLnqthhEV8ZEs2sa4CsRwRNwKAXGqcg5wsU+iGI027\nSR+POsUtqeohXishvCTab7tpDYd3Y4AWHknxCfwEWUAE57finv8Ak26dxihZ\nghuJsP9JGJRa8BJM+N1rfUeyyboD7WlVnr7m7DVQzW01U/Yn5QKdssQS8V6e\nEBfzpsdKTAbHNkoO5mBIE8t36LLLaifsQBylYIopoismS0WFJCxTsvggY3BR\nY++c\r\n=+12Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.2fed2c12f.0","@material/rtl":"8.0.0-canary.2fed2c12f.0","@material/shape":"8.0.0-canary.2fed2c12f.0","@material/theme":"8.0.0-canary.2fed2c12f.0","@material/ripple":"8.0.0-canary.2fed2c12f.0","@material/animation":"8.0.0-canary.2fed2c12f.0","@material/elevation":"8.0.0-canary.2fed2c12f.0","@material/typography":"8.0.0-canary.2fed2c12f.0","@material/touch-target":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.2fed2c12f.0_1593115336180_0.21018684177228275","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/fab","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.38197b443.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"271b0b4832df25d31724b6dee7900bea31c97bc7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.38197b443.0.tgz","fileCount":18,"integrity":"sha512-m1bCk6kh0ThvDr+WLp27nPjK6a1tDXrYSfmmBjyljTPDLFWszK7nY4X0q8VUYFp4Epzv3c2Frabh4DSBJxBeJQ==","signatures":[{"sig":"MEQCIF74mjFmHmGqMvhYcCihVG5bHeCCv/RP7BVwXE6Q9wfCAiBnYBE6HnlwXKCTcjAD//5fXiD5FSij8bfaUU3c6IAVWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RW3CRA9TVsSAnZWagAAnoQQAIWTlMRfEZCNIx/+zyMq\nY9FLPsMSVGbKvAeFNpVy9iZMsl4BO0EodeBkqM0KQIVvwFrDaX57bFYTMVR+\nXotfBnanGnskd26hYTZNyO0vbcgJoQWy1J8lXuu/ODCS8fTYTWYSzfAPDdok\n15NlzITTz7+XXtXUYqvHKUgs2iARFcqyYzm+mXFqHeNivQcaA+eh/pd5dj/X\nkOC8zMQ7ZF6bv3fXxl2NyCr0CnhKAlrWeig24mCBiNlOU7eJBtLKu6Ezpmop\nJF7XLvngwS+NMgmLXIf8BsibJE2nCSkjOUkIGz/ak/a+gEcDEgs0Ey2sjyEp\n/sVqoT5QyozWaGHFBEjXD0crS29aDcHpB5bCFP1wDwlBWfYSdeBZ4R2h6RgN\nvDeR9vDeKmzAf0BcQcXcgZ590WD3I8+dq+37JpyOCYe4bN7dAy19JSg4AAgC\ngWVTr5wf0eizZMbBdirnECHto0fBUjO20esIDZtKoLSVvrCF4ua/39tSZ6lc\n1htR6urkokq+9lFh2E1WLPZyXFAsw1ucI5AalRhsFG0f7YaNz41ataM0Pa75\nLuso0WeFRyadJSzC9Wv6vKpD3K7ScZ8+0XoU5lsXNQIX+P5ty+dnURGmCKU8\ny54trf16sGSne4zOhEuTGQL6p9V1/Abqbul2QcipOgQORKYAhXHRV+1XzrfX\nMQw/\r\n=nsl2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.38197b443.0","@material/rtl":"8.0.0-canary.38197b443.0","@material/shape":"8.0.0-canary.38197b443.0","@material/theme":"8.0.0-canary.38197b443.0","@material/ripple":"8.0.0-canary.38197b443.0","@material/animation":"8.0.0-canary.38197b443.0","@material/elevation":"8.0.0-canary.38197b443.0","@material/typography":"8.0.0-canary.38197b443.0","@material/touch-target":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.38197b443.0_1593120182517_0.5375333666184943","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/fab","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3b4fb4730c21730489aea8d3059b99aec5f0657","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.69a35e80c.0.tgz","fileCount":18,"integrity":"sha512-LkzAkUwV+TQ7Fmn4Ekw60phNOQFZGZ/ksbv7sUOAuW0zQmCDEhTcVPs4oymKvOF0P+GoYb8NdgjOMlCypC3UXw==","signatures":[{"sig":"MEYCIQDiGhsMNIAb0cNZNqHDb9MEOaHsNz3HLUcg4eEiyP2oMAIhAM6WE9XthTRMdagjvFouocekG6wWx+rxINWiJgAZlYDN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jLACRA9TVsSAnZWagAAJykP/ArSZ9wy3e5eK9srcFw0\nnuISUCmJqau1SwvsFUtW5vbswL+aogrgCw79VPMnE5kI+oYgC+vtAuHFpDbr\ndRjefp+D1mXt0KHy4TfoAIQZoZCzq9GxsP0VIxaLXZxJfjLHYoWFf9TpKcaQ\n77dP2MsxCbn9P+zhBQIiIwyFnPP2VkZyce42SFnTANWekad5GwFq+4xHvAIY\n6E24IFrp0Nrt8yTPvDTK8rZTj2kQIcoa1ZN1uabkf0NUKEa09pwfV81zdrfK\nNa9jwBfPwKMwrf6wYEx9FZBn0nGRh3kuasPhJMEBEArZnT7fqRdELMZjN51v\nQGuMEynWVOXgf/9PvWfqU9vCxRd2lw2Z1nzDKcCdt2QVeiA7yrNE/2J6Ub4t\nVUPGtjcmeSgSYi/SD/lp5dj0/6/OqGLP5uG2DBFDLEKBIVQRgUhXGUVgu6yo\n3Q3o33mdF5NSqUIIpXEtUGVN478kTxID9+uIvStEjXmofDj0uHDafaAoHCkE\nqZFEilvU/F/+crjoRU3Vwoxfnh39nMyEj+g3mT9xrTDxn8Mag9bK/jtlFd/i\nvq8cviVXUHT6tZQFZC7fd28BlgDzd6yWRTupvn/UrgAtZdce5fYiUDP2AGXu\nrCHWyF8fwrx2rUY09M3uT7tpdNg6LIc0oSjCNWq2TV1tJn+S5KO3PYRPnP1O\nh78Z\r\n=dhMs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.69a35e80c.0","@material/rtl":"8.0.0-canary.69a35e80c.0","@material/shape":"8.0.0-canary.69a35e80c.0","@material/theme":"8.0.0-canary.69a35e80c.0","@material/ripple":"8.0.0-canary.69a35e80c.0","@material/animation":"8.0.0-canary.69a35e80c.0","@material/elevation":"8.0.0-canary.69a35e80c.0","@material/typography":"8.0.0-canary.69a35e80c.0","@material/touch-target":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.69a35e80c.0_1593193151443_0.5927123224390216","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/fab","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c02980129f712327092b580b5003bb5342f87980","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.df7154fb3.0.tgz","fileCount":18,"integrity":"sha512-8RIX94jksQHDLmyzpjkIGnF02IJJQAA/diDakSc4d/kFHdVyNCy25ZnKyyDXbHrzbyi/oNN//BdxHmo9LP1cUw==","signatures":[{"sig":"MEQCIFropep4Nzj2PNicw8hLHtIZI+6LOfB9qJaJ9OUHOD7IAiBF8IMUekz8t3p0wGyLrQnHU9u5TbIoPJ+LjHp/Qi7zmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9juuCRA9TVsSAnZWagAAhjUP/R4Y8l/o6+ZK/h7JyNYo\nDjkc2d4nbeKTe9NtcZNwhrNObm35dcxuhE+Krf61yxdKpvhppxcEw425t4EF\nYXX4PvV/cjC3QDTwudU8BlYy0/OnWg5tG8+ify6/tL/8ofuXL5GvBU76rHPy\nwJ1UVF9dhG3Jh5oOsPUMPkG32+Heu7lkEQvLgcqPxIj76UtO8YxvbuKchkaU\nmjlBnzldTTRX2G4FkpkRrw5UWKZKXzn8bKVbTt6t8411PucGICTNKgvlnnYB\n3tpE0mXe+wu4K697KfvEqY53vHfSixAy8DB7PKwLC7871wnA57m8OvWEqYNa\neHhIMvvSwuV9xtj7+FTCoQH3OZqJv0TICmNaSE2sasR3ApXV3YiayXE5DNsF\nLSLqMwSFnLXuR7Uuw7ySpV0sHGW3lMQo0VOq0FOJ26qNbSL61VYxTC/Jj7F5\nRGKcF+/uyRDLqHjm4r3rPjeqdZ5vvxXlR9ksZLV9J4iAYcVIcnBk2vCYFUKC\nepjjcMFFXmwcWnuFVPqxvBm+BHCyZATMFB2JdWAm8P7+Px0dquSWTQVbMflz\nKtryU6P3wYYflq45iIeoNctnAz3nh1CepDMvhPRGycPWQ6lhOfQdJNwN5DZ7\nrTnz9HsrmuzdVeEsqC0d61j7rLIl59vxFJ6QuRiuS59ur3DcL+s9ASjf0r/S\nGk6l\r\n=QG9u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.df7154fb3.0","@material/rtl":"8.0.0-canary.df7154fb3.0","@material/shape":"8.0.0-canary.df7154fb3.0","@material/theme":"8.0.0-canary.df7154fb3.0","@material/ripple":"8.0.0-canary.df7154fb3.0","@material/animation":"8.0.0-canary.df7154fb3.0","@material/elevation":"8.0.0-canary.df7154fb3.0","@material/typography":"8.0.0-canary.df7154fb3.0","@material/touch-target":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.df7154fb3.0_1593195437485_0.47671415320766486","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/fab","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.d5618602a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a828d0ac42ea9714ec80c29c11574c08622e653","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.d5618602a.0.tgz","fileCount":18,"integrity":"sha512-EOkmHNg0iXEJASBGWm9T7z9inYOqgCMwVpd5CdDk5N0ydCgVzX4WImHZ/D5ITwh/Zw4Hl5er3F+TMxyc1ZRGEA==","signatures":[{"sig":"MEQCIBVmB7RJ/TrKR1FdbYhGQ1gqfJuVHUAbTBpIAd3+u5AVAiB97xaS6qCHYb9+ediy6DpgHXKsDcT5GnkQ7iPdjZ3/Jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m08CRA9TVsSAnZWagAATaMP/j+pnRdOj/QlgiAVVRqd\nyRswPLjKuflfSJW2ldd3GXdvqr/tTRnayXLuUTChhjz4OCJdCh+j31s4/CGp\n8HNP6RNvHLnKGvNtWz4zM+yRaecrVsTbZI6cUPdqi2L9Z+MUgjQ04S0918ij\nB1l37DNCsoVSelknExueuXxsbRYwJXyspsEm2+E2LZEJIQ34sEMUyVNqOhSk\nbYtZJsq9PqYdPGaWby02mOm+F9UUSUI53AWWZVrN94z7MI8vffZAoGfq1CgD\ncgpVp73z3woaU9LotlFxXHzDjon2ArPIRqWguM4qtmreCxA+XGzjxPLW/Rsu\niCCpm+xswEk4taqFJMIH5AVg14Pe3Ruzl3zzsgMjrx4WyMiS/BeSsJJY7zPb\nB96qNPPFZyWKX39VrR20Ef9Nog2UYDPwg2ew0+ftUgR81d+tUJEtIRH2qrzQ\nmopgOKOBQ3gayMnO/aXnWYTQKQJBjPejyvJYrnZNI4OJYI/l4gdOrEkC2e/a\nYs1RfOXS+C/BNMpqfeMvqvHbYLFKJLaBaxR/zpc6hlgJC0YXHPpAYhr7cvWl\nb0O6ZjD+6f7lj42Toa15jsH1davD5Uj3NhYYWAAf+kMFA3uFZtiLsn5KvBG9\nU8XifpF0os8hs2TMhwo5/VqCQkeONicJaeXgZXhzUFxC3FRn/j8Y42WXJCS+\nJ9yY\r\n=O7Gs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.d5618602a.0","@material/rtl":"8.0.0-canary.d5618602a.0","@material/shape":"8.0.0-canary.d5618602a.0","@material/theme":"8.0.0-canary.d5618602a.0","@material/ripple":"8.0.0-canary.d5618602a.0","@material/animation":"8.0.0-canary.d5618602a.0","@material/elevation":"8.0.0-canary.d5618602a.0","@material/typography":"8.0.0-canary.d5618602a.0","@material/touch-target":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.d5618602a.0_1593208123517_0.8711787792962649","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/fab","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.e590b376b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba7563163d31335caa659bfc6f1c692e5b10814d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.e590b376b.0.tgz","fileCount":18,"integrity":"sha512-lfy5DDz7MM6ETqZLELm7oB6K+BIad1XnjSyfpn/xUPp/XXOBCFg1m1Jo4WvggCB2W2V+5xq4NebrkuJn8rMpqg==","signatures":[{"sig":"MEQCIAhkzCx2c93OtmwlO70627cqm1NnYANrX8qq2Ia6okUWAiBBmjjmnh7DI4cERSbfFm1WdwW5ICW+m71FpQvIa1bfRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oOVCRA9TVsSAnZWagAA3ZYP/i4VnXCoa3i6CxuOPO+B\nJ8AFEHFfMGFNkiJmrsveP8QC3OcoFLAHp1rg3xY9jhJ8DSFO8qD6qG/Dp1PX\nVW752tnRUs501Egfyw+Vb6nctsPPXTAL1pjflZrWmI8QpUKHAflKnTh8jRrv\nUlLEOUV0i/uAd5L56Jc58qaoItRWe3BJbZp0DZONPhtNPcrDuMbyA+qAtpdP\nmqRrTNFB0tSJj2oqOQIW/+hQafaY22dHm8jWBBTq38M6DIwgqNOiCj3BeFen\nfew9I4kTa2560BFqBVrqBGOfZ2LQ9DWKlixh27h+dh3+F2dozv/lOvRdTXki\nBxc0oD9N++NbpGncQj9eWe9wt82PC73BXamOKNeL+RJH98HZStcJJF1XkAza\nZheLX8Jn7pB+F2FxwB0WyKiflgZLH8P1eQRQiWUFpd1eAgV3mIVXw9tWohy1\nxVTBwaIoW69FvYK792Mo4AwRGo79Xsnnw9ooai4ShxGBA0quBfTsZNY73+ci\njKTRvO/cOm2Cmv3vTLg2oe7sCRDhhLHUFYq8RvXWYLWhxn9KRJtXzBv3I2JX\nBQ5x5j8Qw2Jo/6x7Exi3OvBcP9V28boc06AVLNBIsryQoGinTCb99Rhx41P4\ntEbUQ0EgxkuabgpjhgNGasi08T3riVfOjqkTkZ/YgEw076mr5KGwIHQ2tTtx\neI/m\r\n=Cifa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.e590b376b.0","@material/rtl":"8.0.0-canary.e590b376b.0","@material/shape":"8.0.0-canary.e590b376b.0","@material/theme":"8.0.0-canary.e590b376b.0","@material/ripple":"8.0.0-canary.e590b376b.0","@material/animation":"8.0.0-canary.e590b376b.0","@material/elevation":"8.0.0-canary.e590b376b.0","@material/typography":"8.0.0-canary.e590b376b.0","@material/touch-target":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.e590b376b.0_1593213844819_0.9869338501615399","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/fab","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.0c9d6bd2d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ff08ce7a63a1be8c4ba2aaa8374279a8f176fa0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":18,"integrity":"sha512-g8tkRXCPjMiSjLWg59EYOuj/yBgT0n2IFD65PvJ/iZDMVniLhCxmCN2SP0TuO9rqrVGdiOJVD/0MjKHJhFqK5g==","signatures":[{"sig":"MEUCIQDr7HGXwIFJu7cLbjXQeZ8/DdaGhaAwfcUfbIF0Ld7GxAIgPEon18E4ujUldgh6DdIaSnKhy3OiyBBuXY384Monwb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iHDCRA9TVsSAnZWagAAvs4P/0iUSebz84X5MVgV7aGI\n+fwflC4ZaRgniD/cU/AexKSDHrijyKYi/ziFi2Sti4LtcW94+6GfMkZh8e7j\nnCSEmJ5NkSmO2t5hFkqGii7MkiF1TMN+HNc9d3B7qtvSjiBi3d6FKEgZOVE9\nBznBbdUQDq7JV2BYHKmReGQkxuJiAROIqD50WSL4z+AHkZgRxJXiijTivDCl\nmrwC00Orr41Tq35ZMkRgFBkeL+uECkSyybopchoNSi/ES0l3+k9aRktdn0Vb\n0U2/hkqRe6ojYSLIQ1Z/Tt2YUEl7oK780HYexSMXKUj4jOqaMxEaICkrWbwW\no1RWmPDKl+FEwy//WgQlJBlbsi4iBJJr9ImocZTmIROK9NZMPQyRGshJa90O\nyA0mywJpRCdwc03D5vwUFYNKTkyYNOmbiyCbDKQjE5I4EzeObq4rzYwvIbwD\nOEAJo/Y5FOeggIzME+4lrNV0EnbCEGmSpxRfxUmKnLM1avyCYPPahHvdJVed\nqcGNAEUKeYJcxsTToClYt9NPod00ZiHoECMwYduT0mSIjpRyKnRRv3NbzzyP\ntzW5IMjVLWvF/SIsVQwzhFMm+yZLDratTKsgnhI5EPIzg/gE/ASgOipQZO9B\nBKnkoiGRpJB7e91WbbzV3y6ikj1QvhEQmRDglC/MrkDvf+h707xHPseLQlgK\nnHSm\r\n=Wz8h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.0c9d6bd2d.0","@material/rtl":"8.0.0-canary.0c9d6bd2d.0","@material/shape":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/ripple":"8.0.0-canary.0c9d6bd2d.0","@material/animation":"8.0.0-canary.0c9d6bd2d.0","@material/elevation":"8.0.0-canary.0c9d6bd2d.0","@material/typography":"8.0.0-canary.0c9d6bd2d.0","@material/touch-target":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.0c9d6bd2d.0_1593450946824_0.322632727837064","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/fab","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.c1fec4246.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1290dbd0588a3c6521f103309eb3c2406ed5ba28","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.c1fec4246.0.tgz","fileCount":18,"integrity":"sha512-BvdY/qoQJXOybzsOBDufwyaLz/4tXsjZAdcQzpLYcImo7wuoH9S2xnxHMPk9bH17O2gzaVAbVSaS+Zm0ktn0vw==","signatures":[{"sig":"MEUCIBw+BdN9Ea4HLjeT+0Anzsh5iWXgN4USfSGt/mKx9BnvAiEAunkxoaVwKCzytfOzaMaDAwT+JFjdkJic6LxcFuGkQII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iVgCRA9TVsSAnZWagAA7KYP/1R+/X4arGYGFQB2DHVm\n4gmpOxPqQFaCbac+ywgvUhABssGJumcYo6KyZLJ8PGtCQa6TmkgTPP24EQPN\nXQxMmPk2sFGq4JGzZ3l1z0TccapBb+TCPONZAcKvyNtm3JMK2jp/12fTe8u5\nWy21CkrD8puDbeT4fJ+92Wl/mrfEUHgHFbDb5Wj1HT6c+RPWBHGhadoAxUtz\nxh2CLb0TVPULTLNtv6TqtPcyrJjAUHc4l44SPt9xOso90u8KXPNCzneI1/Fm\naQ5UdNyqv8teLrcqcrZyLqIJXdm/lJen0luiG0gzp8dbr+1ZZTdk7tyH8lpp\n5DcsQ98yNKGLN3f/GPEWJDru/6X5L1Ihw7zi/82Ev4FCVzVQXz0lNqNaCAiq\nwARvQIHSXZ3E/7qIpOhn14Z3VRpAyNZyDY+vaOs9AYgV47+7L+Yp7H2pxBuQ\noW9z+Y9ztQMSVjbbL/ecGa5uLKvdOpEO+raH7r1kzoIco1ZESLces+WoC3KC\najHgq9wvm70mg0W8jt1OyGzlUcwqNNdmNpkQhKIfWi3f3pu11wU7xtYa5Bn4\nYQ9ZCAVvD/5LF/0pEHKsJhzYYpgIu9TYK+yYN5RbAes7roxAX+RLay6aoauO\naHY2e252OzJlGku4G0PRQDxM8K7hmZaW5ISfN/PuBgYJ4MKOyzzknuYFS8u3\nocwz\r\n=Vy8K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.c1fec4246.0","@material/rtl":"8.0.0-canary.c1fec4246.0","@material/shape":"8.0.0-canary.c1fec4246.0","@material/theme":"8.0.0-canary.c1fec4246.0","@material/ripple":"8.0.0-canary.c1fec4246.0","@material/animation":"8.0.0-canary.c1fec4246.0","@material/elevation":"8.0.0-canary.c1fec4246.0","@material/typography":"8.0.0-canary.c1fec4246.0","@material/touch-target":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.c1fec4246.0_1593451871804_0.6928585879164295","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/fab","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.c678a9d34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d83afaa1fb5f43a7350262e1130180c56b7dc0e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.c678a9d34.0.tgz","fileCount":18,"integrity":"sha512-oG1RfHjgp4sp0kD1TKqQvtNQ+33jLr+j6imQfFAzLn9jjxugpoOowkQ+WdgaJmu722HLUpBzkY8oimv6mPy7sg==","signatures":[{"sig":"MEYCIQCjVX+PejCOQGUNVHIcWdiJjjuSz5ZiThU0trxmXbwcAAIhALv9b6Gni24JmCELlyt3Q0swxugxLhXQUYws77kuqyhA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+ipDCRA9TVsSAnZWagAAsJsP/1nQ06mDgozu11o6J/qa\ncgRkVxviRUbItBpm3cXwKIcybw8ZoQMJ9kbpSjb9KePoxCQsJ43Q8VebX+EK\n1F9mVW0/BWJxXzUtDWWS2YMmiqj/374qOiMFxU0i6Dv/ZVhWk29lrAbt/BjY\nLlAuLQrXI96KCoWDPfss6ib29UVUKICGqNvmI0b/Gledt8+dTbHRygQcRV5l\n8CA/1hZkDF3/hREs1Rm8Nwac/gn6bBxd81QkyyK7WKAKK4K9qJe4y4WATY8x\nAk6l1kJebF0CaaMeWz5E+mtbVrRgHXqzNFzflteb+6A28BVg/6V5al4uUED+\ngKxwBiU88EirwhDfsiStzYb/8+zChISRGyN0yTRZuQG3pUR2tTmrOFhVh9wp\njxdQ8f8jyxfSbEcnAljdswHcg8g3uFW9bb1gccrVWVmjl8i2uYHBsdlz7m4S\nnPQ4dBsljorh3BJVqBb+AW2Bqqrd5hj4bMN3WeCK0Hl28kZFSDFNzjxbQCa9\n2DSgZogrXKhorLwLHhbDWa3VV2JZIcbEb/Zk1sq/B8fzgp8ryIlK1HhLhgjD\ned/t0PtDK1h9ks2FTh9EERjtdaUndSd73p89ZRhINWrhMpE3amtr47AkASnQ\nwmXTa4WtWVi+ayV9G2klgEmOzgDjplMQPtJZ0YNiLNM89ohWXpijCc2PnMh3\n03Gm\r\n=FkCi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.c678a9d34.0","@material/rtl":"8.0.0-canary.c678a9d34.0","@material/shape":"8.0.0-canary.c678a9d34.0","@material/theme":"8.0.0-canary.c678a9d34.0","@material/ripple":"8.0.0-canary.c678a9d34.0","@material/animation":"8.0.0-canary.c678a9d34.0","@material/elevation":"8.0.0-canary.c678a9d34.0","@material/typography":"8.0.0-canary.c678a9d34.0","@material/touch-target":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.c678a9d34.0_1593453123196_0.12508464786211082","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/fab","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.521afaf6e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae820df5611815901c15bfd6824b3b7407b1d1ac","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.521afaf6e.0.tgz","fileCount":18,"integrity":"sha512-ABQKM9/7NU1WqIHJ/aPO5c8lrmCltWflzvmkbTJ74WWNDOSb87F0tVe2p5i0OfWL45wg3HaCnmuDPXLi4mhepA==","signatures":[{"sig":"MEQCIHvX7dIfdDRBqZ9RNjRdn1+9HGDCmcEJhn+T/X5t4WVeAiBCw3wN3USLx3wBFveTsRrByMhyNwYdjeFkfkY9lUoE0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1TZCRA9TVsSAnZWagAAgPIP/AoeX/TPbg3cmDI346wX\nwxlmTKl8dm9+A5jLG66gDEOSqyTCbL3afwnbvArpvxUNHI24rW4kx5JsUdqu\nBFwFBuOTOmPisg22MvwxAFaAXONZxgl8h5Jy4dx1/RGwvlvX6J6G2P4XhAQV\n95u6zTrLB+jVRBO3lEgUJGecVZYA/vtzObxGeAkRUOby1tGQIO6Tfb7X86bM\nvH637UYBLjftN/7XImFnlep68UlByxf/dx0f8o2WD1TBtcUcSgEB+XVHGUHK\nkwGybf71I8+uRsbjMwfeS0RMtC1QPqqMW49ehCvJcIUGayUxKsbtiWJZhId+\ndD+WdyE1MV7m68cCA3q+1M1wiSRH8kkR32UpnFnkfeRGhEry+4PkApsPJNFK\nMcF9nWtXU5UJ2YBvBSXigZlglQECrU59afDzIPE2PNIFyXzGOhJkVoxMhOOP\nIrdFAIIUUPmHd3Xk6KYkaEu10VAeiEvquAACyiJ+5GU+gmOXnVPhWua2CUWO\nDYFlfwvTNIqhJo8RsfrnlPz2tMEes7CIwxYcty3lCM1vwNoukUdqTzhBBTZq\ne7XmTEyVf8YDrQtkXcu4+6ggZu7y2nLz+N4KyAlpw6hIg1palC3zZ1P6tkyy\nH/LKbfddMGPguxWuvECgrRC7bzIyeEdeY3XmAo17HpPfKSy5N1PTklx8CVY5\nxDiY\r\n=FDxE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.521afaf6e.0","@material/rtl":"8.0.0-canary.521afaf6e.0","@material/shape":"8.0.0-canary.521afaf6e.0","@material/theme":"8.0.0-canary.521afaf6e.0","@material/ripple":"8.0.0-canary.521afaf6e.0","@material/animation":"8.0.0-canary.521afaf6e.0","@material/elevation":"8.0.0-canary.521afaf6e.0","@material/typography":"8.0.0-canary.521afaf6e.0","@material/touch-target":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.521afaf6e.0_1593529560815_0.4992914298725246","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/fab","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.a2ad48839.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10081c172c2df0336ad2df414740ec1fd548cb96","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.a2ad48839.0.tgz","fileCount":18,"integrity":"sha512-+hzd/Ys2AeudPVWxYeMdzwacxqo5mMN+atltVIgypaRN/0MMuurrWTuptpVaE3MSA1KYFntKDWuFSPvX5Yz+6A==","signatures":[{"sig":"MEUCIQDGTmkyoeBsl/aVv5Zhv/meYNhhaggpx8XksADHmOPNWAIgS1gNlRM1NeihagOaSNBxZe7L4uCv5yb1Vj3KsN5XmSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+48nCRA9TVsSAnZWagAAJRoQAKMvlbpiBMROB5Rf9kBl\nPp4BF8DdeO3NTyYQ9sn17kDumwk8i3rT62eUDjYIs4LHdlNbaGhLtlDJhlL4\n/rj3b//Cg/+cPtfzYi/U3Ajqcq6NX8IgSeP8dU7c4dPCak2CRGsedm+B4cJH\nXBnLrFZBmufDwu+nJiHWCHpt0p/dJmg3DcU4nC0TykGaWwmZrABHaqyIweeC\njCyo4Pw+evQu05n6PZc1J/PP7+bGiHhR6fHnGVOUa02HRCV4X3ncAjLs8SLO\ngAqOOrO0nkj+buz6sxBwbNFQ4SnN5Bmr/lORKlL9yqo+Hng/KAqhTdxfZGQ4\n1zf5UrVs5bjldgE5tm2fBmQiLqVzciWES7Om4ZIK9/0LiFQh5tu3WCm6tMIA\nlJcjz3X+wLNLeAU6bkopEs8pcnHoXetj8QpYKvi2nde8jLpOvUnd/pEhhxuq\nNj5b0dJ8hlCDH7Q1hNpu12rQR+nuxO4BJ/j4NHOSFSfpxmLkI1JAxltySsiI\n/C8WkZSHKkwwZrdjsm46FjsBOGI8JNuS6e7F0ZehnVk3tRuUTOGtI2QWh4Dx\nQwS1/6PzEgxnKPPoXDidX/8DKuO0FkGom0l1+2ITBC83IyoAsCv/5vej2MbJ\nvK6J8NtFnM+xMElJO9FQEIDN3L1pxNFNrPiELeDLSjuNHZX2KD8vhljD1v9w\nUVnc\r\n=ETx5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.a2ad48839.0","@material/rtl":"8.0.0-canary.a2ad48839.0","@material/shape":"8.0.0-canary.a2ad48839.0","@material/theme":"8.0.0-canary.a2ad48839.0","@material/ripple":"8.0.0-canary.a2ad48839.0","@material/animation":"8.0.0-canary.a2ad48839.0","@material/elevation":"8.0.0-canary.a2ad48839.0","@material/typography":"8.0.0-canary.a2ad48839.0","@material/touch-target":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.a2ad48839.0_1593544487207_0.7712435790194265","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/fab","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.ec2385881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ee328ed0d0dc6e976e1f0d621003684f6460c90","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.ec2385881.0.tgz","fileCount":18,"integrity":"sha512-TAon1zFkj0ZHCrtv2s3M4HfrCDuXcBbS3x6VWjyQJGRY3Jzx66f+lY9bFip1nql4tvdiQ03jmXrsOfQrgb2msg==","signatures":[{"sig":"MEUCIHqs2gNMePhO5+tG36rYJlsJADIy0miP23aWGfyD5NYtAiEAjmLZOuviVzh0Vau9wNtQRq9mG4M2pT941ICLEgrcyKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7LvCRA9TVsSAnZWagAARcMP/3QkE5IQIf5oRAEslJ6G\nnaaDATe9BqWMx6QXsIOdpuVLRoD9DgU+sma9ze35V/ywqXcNVkWAmtJP5pyd\nJF1G5Zd7IPY6MzXT5AoQ/YTYBQm5oQHdk6ncEVBmLDG2NRh+he2+h0hTr4lv\nJsOdN6Ke2aJvr9NIMFZ3Am9ds/VGAFhtL/apRNZ1CEeICI8Z7pUDYzuOU5iG\nqFGSpLwnp0d4YnNR/3ZxIPqZovIATVWJjzuU9jvJKdzXJNJJJxUUET2TTmYl\neLtbFiKy9L3f9ok9oJUnjuJkIVUmb9Ar3eQbr6s13hIQKx/vevvg0ahzPHTV\nIzSWeqvAH6ZIUJ1lhbh6UUflOcJwxk28Z/GKUBNGc7OtVnjCgjAd0M4qmUN0\nxyi0yEHxxrIsMYy6Zvz09MHaCqjm5KMz1bmdlPv4m3rGWbPCQPvxpMU9L8H+\nq2O9JFMdrKBJRA/FXbyQx6L1mnaIIWfFRoX4xFB+s76MxA80BTn0FIOgRbnZ\naQtaLRQEtB3IOX+i8G1hr6D30GGLwQguJDJu2RUBpimXxSRgkwfhNuTVgccg\nYsz4kS3MsZ0rsCsKsh0QFHt58nBN1RisjHZav9fQZHxyLU7Y+kh5rXxHrOEm\nZF934mvokpq9FNZpfzX7wJ62Mq3F/DIoHDRRo10LjBbrGRbIltURVz7fpicq\n6O20\r\n=Ak6x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.ec2385881.0","@material/rtl":"8.0.0-canary.ec2385881.0","@material/shape":"8.0.0-canary.ec2385881.0","@material/theme":"8.0.0-canary.ec2385881.0","@material/ripple":"8.0.0-canary.ec2385881.0","@material/animation":"8.0.0-canary.ec2385881.0","@material/elevation":"8.0.0-canary.ec2385881.0","@material/typography":"8.0.0-canary.ec2385881.0","@material/touch-target":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.ec2385881.0_1593553646848_0.8101081748310437","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/fab","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.610c26c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45e9ab61cd7d63d54131c50e0421b6e4cef95fa0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.610c26c4a.0.tgz","fileCount":18,"integrity":"sha512-ttr/tolXtjzPGMHW8TVWFNcYKEXBJfkNAGBcCHgNbyB43lM8Q9QAes1Bi8y2j2jVd25j56+S5g/MfXTzoj7zrw==","signatures":[{"sig":"MEYCIQCJmfCgWXLzeIweca/LCcuf3axtIgvv5TG3etKUHFMabwIhAJ4cuJwlEw0xWMrdjaMDN3o9//P8FWAkyyEXpgNSQ3yF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KQsCRA9TVsSAnZWagAALqYP/3d0q9g9fHNL0Tu3g3Fd\nze3/wkHtbabecv5lpklT/nxith6GMm3sCaupKK/i5A+/6p8IuxUAxIYDOUHn\n/WR9xXiapRPvbJqTvzJBWFN6XqQV+GRhW3uvuyT1P/EFIIjntj+xxt2fUBMh\n9nEwoVmlwU8AkKa1qFxw576VjzEJ9AcAjAbip4oqIywsEGsitBikrOsIznE2\nRgOXZ4xMeG7rKFKE2Oi+wrZWLqpIwNOc/tZs/gjYHywvHYz6RcFFB6N3IRiV\ncMqJXp7iP9aRV76i40U6c541Frle4xqZOFc5FdFLrYym/1Jci8WI0cSZebmb\nDZGl0ViHniPhmbGoZ8jMh4PwqjFyJ8D3Kyn1FFW6PNGed0GIHWdXd1Tc82U+\ndaIjGQR7IZH2o16WrGrAQqAOxM5ZhF4u355qllywFGgBdL9ymR7tQDTIBxR8\nftWFhjTlA+9HqTSV3rP1KUrEpn51Jpt9N10j3YcToBnzncLHUos3eOeqAvxY\nNsbxwC+XiTe2sNuLLF7ZpGjS7TBKHbLqnmll/jQKRqasKo6toaXwZFWm9S4f\nbAK4zJ+jRF5sgjidjDSVC3aZN1VOWoYHJPRogQj2b4ox+mQ58PPUyax5rb7T\nPAqBUvbT9icopC7vre2M+1T3O6R6jnZsWLycdBc0rymcVvOhjhGWtupPhBXd\n4i9m\r\n=c0Ef\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.610c26c4a.0","@material/rtl":"8.0.0-canary.610c26c4a.0","@material/shape":"8.0.0-canary.610c26c4a.0","@material/theme":"8.0.0-canary.610c26c4a.0","@material/ripple":"8.0.0-canary.610c26c4a.0","@material/animation":"8.0.0-canary.610c26c4a.0","@material/elevation":"8.0.0-canary.610c26c4a.0","@material/typography":"8.0.0-canary.610c26c4a.0","@material/touch-target":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.610c26c4a.0_1593615403799_0.9448357988857181","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/fab","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.e2ea4a99e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2baadebadc08aa6cb087a62e61cf4d124df4378e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":18,"integrity":"sha512-Ta6y1xK/kXMR0GIRU6eKrNON3kK7LiJQ2FqZchPEm6TEqcUwPUs+nE3tKlADud5t3Mxuw9fMePZItNsUN1lzMg==","signatures":[{"sig":"MEUCIF08GouB2KpKYgHlPMxP3C2/2PK54wXRdqA16FIAIfuzAiEA7Dg+UJ7EUSqbIIcR3aeWUSujIclB9AMajRH4ZQKRTFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OOsCRA9TVsSAnZWagAA7swP/2XPCWBKVu/+OmUL/da0\npzmki0iYTd/Sr+WiV2Uuxbgk1kbaISYDR1NdtTHKI/Y4ALCLYscRKjOTn0XJ\n39O6NyFRfWsBjJAGDdLN2MayMxAJ7ND/QmQDCnbhN6fnECdgoJgeZDdjqYEr\nwqsNlkjgKQjsQdG32zY0gCEyTTy6430YeJE4bllZiqlHK7C9DoXDcnFJsdb4\nfZkttUQ924g9qlTodulaczscci9oNz63dJLgdxh+aDEIbga+Gz5VGfmV1eR0\n4AodTrg+YXIs4HZhdDrrkgW9nxpY28X6Miur2N8oZsAbasNl8OEIeUwjWbkd\n5EOQIhBur2QsHCLL9h7o4JDpuhTT6cbv4HtIqCsCM50Jf2pwIiEP6ShrNdG5\nVw+ChAriIiPJEXKKhbYbwrwfjqH/0mt0y2HQ/mt8KpFrepBwD5CAeQJ8t9us\nZDu/7kDySrIG4cwi+n2IjduJJONgvwzDD25xXsF4KZndnfka59dSaLcqFQ1t\nEsPzC7Ab9Xbu6acaCXMxo9cHPBNaiUmRO7kbjO8cPxVcpm0ee6clf0SXvO8M\nCJOSPfXC8vw8XUK1s3yzQsweQm1/xJxkDs3SAOOr4cGkxnGYy5h4Nie1A99i\nm+C7kAKcJOr3JwrIQMkuC39j9WT1MCP7dOnRkwq5/5x2a5dnVJ+ZHO3iZY50\n2sfl\r\n=bXih\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.e2ea4a99e.0","@material/rtl":"8.0.0-canary.e2ea4a99e.0","@material/shape":"8.0.0-canary.e2ea4a99e.0","@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/ripple":"8.0.0-canary.e2ea4a99e.0","@material/animation":"8.0.0-canary.e2ea4a99e.0","@material/elevation":"8.0.0-canary.e2ea4a99e.0","@material/typography":"8.0.0-canary.e2ea4a99e.0","@material/touch-target":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.e2ea4a99e.0_1593631659741_0.26025314988851145","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/fab","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.a78ceb112.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78069b91b4d6296883cc0d22e388b97e9436ce01","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.a78ceb112.0.tgz","fileCount":18,"integrity":"sha512-f8fNCldbOpgoyo/vO/wUpTA91CuzCgHhPS9gxcQDB9DAmseSLF+gIs5QyVKVOzAaBDvBYeFJtQ6a1OLv7gLA/A==","signatures":[{"sig":"MEYCIQCUkT9blQnTUtfkoVEDsc5JEj0naPIxlLXJMyJ4ixFv0wIhAKKoNb+6cBUAwjEDNg9UMuAXasuYtZN20azLiA7HVPLU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OZsCRA9TVsSAnZWagAABDwP/iyafNm3D2HWRiWQSvmT\nU19PSw0haozns8/+K9MIeBcPCZGA7lMT8iZdy1TQMaF8gm3q4H6tkfGrcJmI\niHFLpVutah6pqxD0kRl87kx0wsmUG4ECwFH2jXC+oY6NCri8rVblC/egDemZ\nqAngpJSpCA4WJe+/B68gQgZMfjOLFtkryc2PYSwOqeDpvjVn84AvLbsd5AeL\nHvGr2V/iW7QmVeFotlcI+72W2O4DftLyHQO5ePq8ri2XV93xnjxPhm623sl8\nt/zCLEeYXOgDsYGQ2G4Ic2zXZdcybDG2LiK6QkZ9Tye5q1F5Hs5b9u3I3nYv\nEpi9RS6SLJ47K1dV/8y6naRPE/O3azqdrLgL4P7eUBOA6whsJLN7DU5epuGd\nxU2c/EA6bEhk1RPOFMAoTgAHqNybOsJuH/hNOL8S/6tYNReLzA/Nktu/FVsX\n9oHPaLQtqE3PsFjwFvFbtJHjDg0oyb7hOa9QyokG2EQDbMQtxKCdjwTMwhtg\n6KQxzFCGE8+YKu+eNAEWhOGX0IjrqX85gZT2Bn+CE1JY0KsTIZW5gIEXNRI9\nksZErOCzObcaDSeEK6Z8jhAfGxRyf2bBo/ALogdFTHqC/ahJuBDc9r4RwQNR\n8KnYxa2MhXD9vjoorcvEZ2Hhsbr0jEJSjhHeaY7fZSVPsRv5Gw2n6iwRvYga\nSMv3\r\n=i58F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.a78ceb112.0","@material/rtl":"8.0.0-canary.a78ceb112.0","@material/shape":"8.0.0-canary.a78ceb112.0","@material/theme":"8.0.0-canary.a78ceb112.0","@material/ripple":"8.0.0-canary.a78ceb112.0","@material/animation":"8.0.0-canary.a78ceb112.0","@material/elevation":"8.0.0-canary.a78ceb112.0","@material/typography":"8.0.0-canary.a78ceb112.0","@material/touch-target":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.a78ceb112.0_1593632364257_0.2768778508013827","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/fab","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.b0c456d33.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91c802f1919a4c31d06bca8d8ee0c1df7f72df20","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.b0c456d33.0.tgz","fileCount":18,"integrity":"sha512-7rC8Yby9DiZ9kKWu90BvHWdR3oJyzgFgvyqaPru7f8kANdRNeoGoOqtshTKh10tjaisJpoGKrEVKQBnu4MEYDQ==","signatures":[{"sig":"MEYCIQCd6NFHQajCDZE+EWFfCN3Avdb9WMtrpxGt4G9IO1q47QIhAN7rxv9hVOjUdjXr+WiggfrfSkRoxt3dhFsm8KGMIlUj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6i2CRA9TVsSAnZWagAAO78P/32LxUjrbtjh5ucQC0pE\nqO7JgCTuOGcpq+pqMW22RX+PB+95I6QV9VKLNmiXKXajHUnlrgCs/3v7ukSq\nqHJ10U0iAP6K+0rWS8UNvrxnyQlof8ZLmFTfQxxsTH4FSIj2Xtn3azUSt1d0\n0EFFmqimPrr3pSEdmpNTWRalaAm6kYNP7X2sly9sD0kyq6pSGnyFtHsTyGWz\naCa/uw/ntpTzF2uY5DNVHFBgIYiMCbqnJu1+86ODsxPS+292tMHAAuH/B/0f\nTpdY3U6ZZZ5PoCcBDwZqZd3lUJ/6n9P5gvZltsbYTSFZVcuu9qLStpg41zZx\n64ruwKk64CqXf3Jiq2rVFSNaso1gx5gbncK7Dp2ubuA3uSaz/x+aszPWnoIU\nw+8trr3YcaXvyjWtLuDGrOt55HpoHWk1PlAoF3/ddDW5e1IVba/674yAKgDB\nOeWnoqBP+QE/EDoL9yGXp3FqkJI8BYWwDtjx7tOwZQpiWa01dw+HW+Z55ils\nIDvabet+rhrywyItfg4F4VytlT5yVK9H7N7lyU3muxp23R2DWD7OD4fBSEb9\nSeCOit6QGVvLA6QAgWrGv4M3ASJkUqjd/vL/UEy3oabdhTkwkjdXwpRelKc3\nRf0BrGduSraQfgfnO5DhUl23D+KEN9y0WOx9Ia0cAgcS4SS449j6lYSc3H0x\ne/i/\r\n=lDHj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.b0c456d33.0","@material/rtl":"8.0.0-canary.b0c456d33.0","@material/shape":"8.0.0-canary.b0c456d33.0","@material/theme":"8.0.0-canary.b0c456d33.0","@material/ripple":"8.0.0-canary.b0c456d33.0","@material/animation":"8.0.0-canary.b0c456d33.0","@material/elevation":"8.0.0-canary.b0c456d33.0","@material/typography":"8.0.0-canary.b0c456d33.0","@material/touch-target":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.b0c456d33.0_1594075318035_0.08833238329984816","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/fab","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.2e5711e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"985dacaa964883e3827eba1e1d21be0cabfb4742","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.2e5711e04.0.tgz","fileCount":18,"integrity":"sha512-HSBmjkMqc9j8BEQ5Fg4F+r5HaFpvy1bUpSWZq6Egnf2f4mLT7jkelb3iOKMaB3aMbgRQou8i7zh/v9lQokMiEw==","signatures":[{"sig":"MEUCICNyHOyXOuH3SnqQNmkSmSsYJTAxVS1dc27AOdo6oFrRAiEA7yPdIEM7X74DHK/IzG2UiYBdzaDVqTy2SYtxWvwRtgc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfjnCRA9TVsSAnZWagAAt4wP/0oomPA6gbHFWSSR1rUu\nlTWZjbYtk8GVkiExyQl0Fo6+emk8/U9eppDb84WTomSxQk4dMQX2IZgKKwe+\nQXeWHBOcwbP40CWTDZxOuw/QrwysZJ2L1Dvw7c5o4mYgPFYqI4LX7KwOyF+s\nHTys//WhLNOiGonXe2cuffxdEYndfBh97dtkxl/cU0VjFcmk26+d8nO2fHT2\n8Chv5WHhzIxfXNTZBb4LqeU6SByKczq7NtbgDflRev5OFi+/75dbD4C3/5vX\nkrFqGbHwYEa7GA1EnbvgNMvqX7fsspZnNC03P3Q24YJtsFubnpqie6JPa33B\nVjhMD63dfY7awjY9nslewWMA5wDUTsabhp7DCOOLWtx03DQTkm7UYEaejMnG\nx1TLVsGpn+NXp4A7c/2dqCODCzUBVPI48Lpv3XnsaONPKix4lVrLPNPEi2uB\nVz4YucjA/IGx38I70oZAdNACSKEgFyrTwqyG0m45aoMuMTgZT0mlSKZ7KNuQ\njBk6UsOd/IC6440eWxWRi1pE7T8kv5kv5P1Ztq1CeRSQ0a1vJayYBNYlY3i+\n201PLv3tVlHeO/c/5B084oXwYAgorbHVXxtR6/EXRhs1O4AjybLS6/jdooTC\nIaWny5xk92HTqjP7W1Xs3Di0m3C4l1RhzAamRRaioO2s2RRH00HG/LHtGn2J\nKwOg\r\n=VCLo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.2e5711e04.0","@material/rtl":"8.0.0-canary.2e5711e04.0","@material/shape":"8.0.0-canary.2e5711e04.0","@material/theme":"8.0.0-canary.2e5711e04.0","@material/ripple":"8.0.0-canary.2e5711e04.0","@material/animation":"8.0.0-canary.2e5711e04.0","@material/elevation":"8.0.0-canary.2e5711e04.0","@material/typography":"8.0.0-canary.2e5711e04.0","@material/touch-target":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.2e5711e04.0_1594226918922_0.6791597060505972","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/fab","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.811fc5d24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62d325022fdde9d414dc7001f30e34d70eeb1872","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.811fc5d24.0.tgz","fileCount":18,"integrity":"sha512-pIoutBW9C8axA1RyYNPw7BDdyDlMGACnDdeER5QzpeBz6EtPM1mQIJs7/lpaqpnBuSXFlKeMgTEU5hyCJge9Ug==","signatures":[{"sig":"MEYCIQCaBx5M1u08+PvEH3fWZ4I08UofTYGuUJek+sQcUPgAwwIhAO5mSvVQ+hbdVUBJcmXWmtTfcyhJElCtpn5IG0XMZPhK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf9eCRA9TVsSAnZWagAAnwUQAJ5g909jh7IJsPQ/21bd\nyAspdXnzqHlp1OVNCjDTkVLXB8o1YwbFW5sfTWmMg6BeihynziwVVAXAPrIx\nIClgcNnMKbx+bseTBNP5H4taSBC6y3S8Je3iTLk1+QUbdWtl6Oju2Dwj1Tkg\nQrVukIbwEQqXh/dBPd71mocXwgCiX2YnXicUfboHEcfgA5YTK0d8LjgGLokQ\nE9rxoWWfoQ6JhnIC7LWqpvpiRjQRaI07tVnbLQdZrxi7/sMC+UXo7F+f45Ar\nwRVW4r0LTsRqnvkIJEABTRiZ5T1ulkPXW3u34Y60O5WOxtTp4SajE46ya9gf\nqqLNul66/bkjCtiDfs64QYkSpJOyEnyh/TX9MSeEwNVTn6E6Nj06F4VIcdIU\n/AmliLmmqyx712y7DLdZ7sLZwS89OwNUUFXF5H5AOzYrj23OcmM2ohfSyh0s\nHuJLa2WjvR0xY1dTCpd9KBf0dDf24I5HgyRo8Orjrgkijm/6pFUs1GyVg7Vc\n+wemq5LRTXbOJs3yDQfhC2s/cd8DQNKirnm2qa3DugD+PoP7LnVIecsaYhKf\nfMcL5iKN4gA59Q3jrftgs83S1l3ivJRViV8Dntk9iSHHgEPKU79Pk2fkc8qN\n7yMbUkiCixWnpuI800i66vawo/QRQsE8cZFpFbX4ClUZSBi8mkuZJ77augE3\nW7cQ\r\n=JbLM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.811fc5d24.0","@material/rtl":"8.0.0-canary.811fc5d24.0","@material/shape":"8.0.0-canary.811fc5d24.0","@material/theme":"8.0.0-canary.811fc5d24.0","@material/ripple":"8.0.0-canary.811fc5d24.0","@material/animation":"8.0.0-canary.811fc5d24.0","@material/elevation":"8.0.0-canary.811fc5d24.0","@material/typography":"8.0.0-canary.811fc5d24.0","@material/touch-target":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.811fc5d24.0_1594228574346_0.17013370569149577","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/fab","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.6ed717ddd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3464992452a805ba1fc7f241969fdcc8b623512","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.6ed717ddd.0.tgz","fileCount":18,"integrity":"sha512-PBzCMX/6ENjQ7LbAGw1ImzOaR+uhU+jkPdcU2V5kxOXtGzkvwIrkdtJY+ZA0GtRXdTI6doywyoCzigWezxEzww==","signatures":[{"sig":"MEYCIQCb1ZeIUu+A3xticpayRpaKy68DxhgCgTCPuJZzIV6dLAIhAKxDKpaj1ShBhU4bMdLuoW6cvdZX8dlqyfvTSZlinWKR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiIlCRA9TVsSAnZWagAAquEQAJe0Am6v48SjMHR52uAs\niYhbp9ZgGq/4Y35Zn27hZKb0p2nilT9CBuwhWb6L2f29vzkriGHLNVveOqMx\nBqFaFWf8TCaxkyparl5v+Rl464crW9ynl7DI9Pse4qPAhioNXAcg2aPnm1Ji\n1gssYi0G56l0PxpsbpyeOCgCBPgMqzWl10sGmfvi6Slv+P28vymNbPGOrhBY\nfKRpplEHsP8udq+os17OuvBlde1CxqPdBUhVKGVkcWytudvlL/Mu171fK1dl\naFY8LNzVb0FPCCfioOxNovOq7fNz5cKc8x017yiqoj/UtwMMHdOUsJnPgOn7\nyFu2lTfHFppaZzyUu/ApyDzBT0x8Zb3AT/39US4JidXdbMGupdYruqS4LSO5\nSXp1Sbi3lb5EQpAkmXlSVjSxUCb5Pm4tvVhSfGlFToSYa4Dxt3jP86U64PKj\noCfwyQp2dC/zunabfl0Rrh3HWDLgx+i7bDSON7oUw2JDoj2HKZyE2D2LbSqY\nvsLPeHIZgkXwoN4+hUkbfP19r4ab5/aDzwR5nWPKwh51FFl0KChyx01qYdl8\nUw1d7KnvxbgGP7THcritojdPUyOiaOW65Gqs8KrosKmYtzuD8nXzzVUsyyLR\nLy86UGmCFsCPo9dbtOI1KP5W28MiA+efvvzevl/xZpsum/IPg7ujeNU6uwfB\niTMP\r\n=6Fnb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.6ed717ddd.0","@material/rtl":"8.0.0-canary.6ed717ddd.0","@material/shape":"8.0.0-canary.6ed717ddd.0","@material/theme":"8.0.0-canary.6ed717ddd.0","@material/ripple":"8.0.0-canary.6ed717ddd.0","@material/animation":"8.0.0-canary.6ed717ddd.0","@material/elevation":"8.0.0-canary.6ed717ddd.0","@material/typography":"8.0.0-canary.6ed717ddd.0","@material/touch-target":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.6ed717ddd.0_1594237476873_0.4442939850849308","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/fab","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.d850de590.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94b846aac2842d041789e136cccf08fafa9861ce","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.d850de590.0.tgz","fileCount":18,"integrity":"sha512-4g7mYLnGhF8LCapGsgHu5DWOANfcCPblgv1K51AYPXu+Q8Cfp+a7st4R8WKGrK39dhlbFwosu8ivpP3vQDI7Eg==","signatures":[{"sig":"MEUCIQDEfsgstxY+uixAHhj9VhtOF5WfNuljLa1CrOVz8Fq3HQIgPxuwlOzCAt1DrTCqGhPzC3blb8AryJCSHBEP4rXLsv4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1yJCRA9TVsSAnZWagAAVQ0P/RHHb/qwBFerJiMr8oFU\n1tVHmuUzaPfsrmoV4F5KLg6yjjSNDbwgDrvO4Y5hqIHH1b7FGcy6IBz3mE4/\nxFDzrtAOXFyKvlK0VCX9jl66ZfPj6zaJfUDlWl177CTH9LNRNGXObeAuLkJa\ngXbWZ9bB35h5n7P522V4XGqu+f5y09KO94uSknVDJQ0FilPJnKg0/AHxzLbF\nERZocJr2Vu9d7SiATLGtDFdafAjNtmUJw4+2M5Tt2VwgVcWcRPpWy2YEczcf\nNWwh9VfdlF5EB6I3QAQB52VfitYvTVpW1fwKBRhwgcc6b56t/GHVLs90o1cn\noTvPi3q8jupwK2dLjPcDDdpNuvq4RZIhkn2hHknYF75aq/wEKdd8lmIfiTiB\nBkZBswcW3w940SowpnytGDOYAV6+NFjXGMP+tIvftX90vvP1iyfHLpBB5FJh\nIJvrQJW1l2BtqObLJILr9Rz7pzuRtVYXJTEgIzHN7mnDpKmkY6wf7AxVVQ+4\nSswQIyZgdPhoahAE1v6A/h1RroxZIm3ejvRrC68N2XqC0zYcN4XZic9nqFTf\nvI4VMgNdgKV7iRomAwCeyGpScfv4Y7bvsnkbkJAsu8oQ6NLz0h2ciQt7Va2o\nkF/NZqCCzw6QTze/wxvsYhMUtdPwdYSmH7UmK5iFkY0qoWG7bUYXvTRzD63t\nooiT\r\n=4vPg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.d850de590.0","@material/rtl":"8.0.0-canary.d850de590.0","@material/shape":"8.0.0-canary.d850de590.0","@material/theme":"8.0.0-canary.d850de590.0","@material/ripple":"8.0.0-canary.d850de590.0","@material/animation":"8.0.0-canary.d850de590.0","@material/elevation":"8.0.0-canary.d850de590.0","@material/typography":"8.0.0-canary.d850de590.0","@material/touch-target":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.d850de590.0_1594317960769_0.9034482147489231","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/fab","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.e07a70841.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3de73ba53db03d2ef794f26575e5b1d5a55e23fb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.e07a70841.0.tgz","fileCount":18,"integrity":"sha512-trlcN6DphFwf+6DIIsNL9rcNio9TeahAVCGdDfpcFGtMFwkGudAkMVVWZfbP9IbpaMF4YSqg7Pxdmpu5Kj1egA==","signatures":[{"sig":"MEUCIGcmhFj8xj9hpw0Qa9d3fsPhyDIVsD9q30tkR4C6BDWoAiEAyCaBnM0Ztsa/1ixiqTnm3A5bASpDys6BNWPXAcahFTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2OBCRA9TVsSAnZWagAA82wP/3rYOilDQ8DRjz4AhKJX\nUGXmZhzl1oAvCfwpN+T3GJuq2PQg44O3A88et1Jio5FwODvq//8eBYMFqsTp\nIDH1XQlBsMWQXALTw8MjxpWOhM6NbXbatJwLwv7hA3M0sHCLYv1kua5+67Ks\n30Au54bdVEmgf5+zrfcBl4+aCREwe8gYnflnLJSf4rUdFVH2sJsPXkmjULfJ\nMSyyp9wRO3FuHqSKrAIgmRhypCWvmq7f8ODTCdDFbCF+1WHPP9UyYmENjAir\n2/j5AHMKq1uydf/ONYQYPxTr/735qUSHxRk/XmPeCSz0AYsKPebmTOlSt7uW\ngQ0sa0XXOYhj5BacMbfYdESIkCS6kZ2MERpp21UBwX7x4lHkVeLejofvmuq8\nrUabpeYFH0OBtT+IlLcpCKDkA4lUL6DggqX0J/Iqofnb/KO02cycF+M4Xoj7\nwk6VVz70h9CoB90mNdOmzBW2ZmWE0Ho/BGOHu4dM42Bc+MjbIyEUR9CMWPOm\nvXPFgyMUQmk8CcdVcu2m3BukcNtDePG9tsBoqL0VontojVJKfD/9cT/xE3H3\nsBlUl2fjuFKdmfaUJ+jy8SCJj4Hskkk8aMvCeOpXSWEI2UNWDNVtSQuAT+Ik\nYlSXsSb3MuWetgApkPTid4I3APR0L0RxZ5zNOMzfYp7CrKDSoL9Dvjc5x5bO\nbKC7\r\n=gdez\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.e07a70841.0","@material/rtl":"8.0.0-canary.e07a70841.0","@material/shape":"8.0.0-canary.e07a70841.0","@material/theme":"8.0.0-canary.e07a70841.0","@material/ripple":"8.0.0-canary.e07a70841.0","@material/animation":"8.0.0-canary.e07a70841.0","@material/elevation":"8.0.0-canary.e07a70841.0","@material/typography":"8.0.0-canary.e07a70841.0","@material/touch-target":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.e07a70841.0_1594319744836_0.2215726279723289","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/fab","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.37947ed6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"377b4b3c91f38820212cae46069ebe3e0d27ffc1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.37947ed6c.0.tgz","fileCount":18,"integrity":"sha512-IisVO3mU7pqSEE+UDYJttDzOmHFVonZPbrSbkQjEuIOgREUMjJC/CKzytOaQm/wx6ZtDAWYd4FTso6JCxMmDGA==","signatures":[{"sig":"MEQCICZ3Na3hZmHu85gPSCkYSDaai0bjLRTDAy7WTangyRW4AiAmUGbBFoviXF+n/vHtMwd6b/sG4cD6I6/ap5nQuetd4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3/SCRA9TVsSAnZWagAAuZcP+QDGT9kG6LoPj9YpS5hc\nfihWbO2TMBoVRpVq35b/mTPpfqp3sTyPh5dvWvXt5as0vUfLQkTU34QTwZhi\ntWB6BH1P40JV2mqC9QmrBVHKWqhuSv3oa0B3UDXy62jmSJardOKtQ4kXKmUQ\njY5l2p1yO5msGEW+KTteo6msQV/+Q/tE5Fg9Mgw7MGlxHYBqSeP/5mh4LC8S\nJB+wDlwkQ/WtEFgdhvVyidzXiaS7QP3QvFOQZP+F2j7vozGqvAJIqa9JRwo/\nXdm/my9SXfc77S2ZKeQkpfulYyj5Onz5t3Ttdd2d5K9EQd90hFCPUjdR0/Rv\nq90GmyFsRVG8AjDPMR7Z+dJ72vpyuuBiavPdw6t3Nrb5JGcDn93/iFfuLkB3\nr8aJ/kvp9A+ICRY9olt7LJ1+56oJOvFpzh2pdrp4E5Nhchtz6RcxXIQvT3Wt\n1v7oUvKqdiDUvfCr1ywr/ncS2dW8lisOhTg+YcKDsCPmPWBk3OruMfmFav+Z\nvtaJ1WlYZmr4aGYamf6Tb0LvATNrqq1ZRV61Jwy2UytYjFwoIqaqLZAA9kWV\nht/FX3gDlwLAqo9hPOC8IcGT9XdyEVJ3aaaQ1g+eYYr9pkNEN9NxBw+IGwE1\nsrMI39mugMAWw1ksOWiEfGLtFdtduf2hgNB6/3KM5wYAWuSJbAdhj/yTbPK9\nq73/\r\n=rFgG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.37947ed6c.0","@material/rtl":"8.0.0-canary.37947ed6c.0","@material/shape":"8.0.0-canary.37947ed6c.0","@material/theme":"8.0.0-canary.37947ed6c.0","@material/ripple":"8.0.0-canary.37947ed6c.0","@material/animation":"8.0.0-canary.37947ed6c.0","@material/elevation":"8.0.0-canary.37947ed6c.0","@material/typography":"8.0.0-canary.37947ed6c.0","@material/touch-target":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.37947ed6c.0_1594326993541_0.43869963084596764","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/fab","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.5d443afec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea59323fb61419d69358ad287b6d0558aadc917a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.5d443afec.0.tgz","fileCount":18,"integrity":"sha512-vb9kTLoj0jCQW3KEkcsnZVDmRMA5wg7PiUhdYGBjapFJM/sdqK1Ugm/P0bN9SELgfC1TjCA2G0Kzu/K3S9v7Ag==","signatures":[{"sig":"MEUCIQDaVh6dsa9pvWrdTOpcaZvMNLJ4nPhQdUrfW5a9utNUQAIgPCV4G0AIA/6Nm3fmlP28L5wew1H14Cyn7zjXq9kT7CU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4N9CRA9TVsSAnZWagAAnOsQAKTqAXBcsJF2wkNl0ZEd\nIn8os7JgmBuYOZdxPigt1STUtthkeWkkHKSjvt8yi4oU+l+R5u0p57C3oVcs\n4RJJD8GnO7KV6bKr3nObNSiffJGToeZBA1lDXJVPSgv1ohDUdIVwoTejdXka\nJ7sudc7PQuUfDFfkvnPvP2YPtpnj8swie8nWJs9Ebe1xWxNtG1KY704djxhr\nWslxbeget+AY8qQrWn7G3h3SiVUjghXkexKzcXWNGt3S3/VptE0EJmcK4i9V\nYfBuTeOZKR9PC9gIuQIVHcSXww9QQ1n9KW5fJHYiDKlUDyKUsSZ69nO2VXoM\neAwneFRIlHJt+2hHe3t8c+NplhX9s6mLWsfJeP+nEvBG8AnJxarf83VxWJpS\ncl4GnBvgTEbgpjlwsL3zXdhNz2Zp/vy5apfLxqXdTpR62aKRFKekFuxgh0On\nwu6nIExF7V9Za/rEk8L/1IqN9rtgUKIcKaW5VGiW5CtFQofHGcYqc2nGIdIw\nQu0wzrs5JeOUbK7y+h+TnuSTqQFOy3u7lzepwBtPmV6aI7Sj2KjkOgMdj8Gn\ncLsiiyBHYBn1SgZSqVkda01OaLExTfbZpSQbD4AXGuyIStfHW4zRkxYP4xXD\n889FVzNw01Ke/sduMBBZrsymurV1ySj/pwpekL30MWHm0iKs1Q/j06Oca2XM\nb9f+\r\n=sLhD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.5d443afec.0","@material/rtl":"8.0.0-canary.5d443afec.0","@material/shape":"8.0.0-canary.5d443afec.0","@material/theme":"8.0.0-canary.5d443afec.0","@material/ripple":"8.0.0-canary.5d443afec.0","@material/animation":"8.0.0-canary.5d443afec.0","@material/elevation":"8.0.0-canary.5d443afec.0","@material/typography":"8.0.0-canary.5d443afec.0","@material/touch-target":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.5d443afec.0_1594327932991_0.9871305781600046","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/fab","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.9ac1ed914.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1595e83f103645c2def2d11d3369f97264f6a138","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.9ac1ed914.0.tgz","fileCount":18,"integrity":"sha512-R3FKd5XbpQZyuVcUVJ41SHYmOChZ6kyXnPBvDBzhRiwWo/mLthWJ1aLZXI1o0fWcjYhywVGSBm+U/KKyDRqRpg==","signatures":[{"sig":"MEYCIQDg3Ztdcim++mFpTlwxf3qwEIBYawyHrAI5FYwOR7EX/gIhAO/4DCH2y3TokGml93Q8/KpjxCu7kUAMJe2jWqYATAtS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4pBCRA9TVsSAnZWagAAobQP/0rvPAB7zHSD5XCU37Ob\novO/nT2TsEV5VmC+Frz50SPaWeonUhl3jfnx/kn9vqSviePOVk9TfKSuoePJ\nfivQ92X4KCufWJlWe5VnrSDMG1kCznSPoC/Xn07drJmyxPne7LbBOA4XxLio\nnPDICg8JDzcmM6qakV7a7BvNVaP0FwC3SHJoCRcY2vSbtJv13FtEi07cdSf6\ngUGTKTR6bLb8G8dQAqKtN9SWTP+/ZkF82kTgQZuBwMEb3IhC7xbUxuN73iNh\nDgc113HyY6Or0kiYccrFpJxllIAl++pPMWzt4nSG5kSF4bsiKQnSUVXQt4WI\nJguRf2aOx0pZ9+bceIksWVgZ+YuYN006l098nFiR1FYwXKHOMxPngX47DC2d\nyyABpXowfGYK2kG2v0BButNfr52TiI9aXXrUJottvSyFDEyCpn4wrATh+7OY\niwFCoIpnAvdv4l48wyjqDYcnFAWSSKYPQH1NH1//9hvix8Lc/navdkx5XHRb\nU7StzKD7OT6oF1AILExJyBG8GFVRrPYh7SklC3kCoWdVd6q4dyC7cy2FF0Zz\neq6ze8FRElsbHhSxcnrzcevF3VNVruaMH9JvlmJu5SA+3c0w603fS1IRmIwy\npyu8Y2Y5WzFB0y49rpv428BNo1bnskvxIqLN66suNqHPt+ZbxoSVBW+3O+ch\nZov2\r\n=Lhg4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.9ac1ed914.0","@material/rtl":"8.0.0-canary.9ac1ed914.0","@material/shape":"8.0.0-canary.9ac1ed914.0","@material/theme":"8.0.0-canary.9ac1ed914.0","@material/ripple":"8.0.0-canary.9ac1ed914.0","@material/animation":"8.0.0-canary.9ac1ed914.0","@material/elevation":"8.0.0-canary.9ac1ed914.0","@material/typography":"8.0.0-canary.9ac1ed914.0","@material/touch-target":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.9ac1ed914.0_1594329665320_0.794376703135538","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/fab","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.1e7cb6198.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95739968f531ca872efd80e30524f2bf5e7ea2ee","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.1e7cb6198.0.tgz","fileCount":18,"integrity":"sha512-54MDaLRsT5In9/2RNeeJ+4/riiPLJooaOJazd6CII03GIioIcBshGeMoVgQbakmRYjBGKFkTk+ay2mY1NSdxsQ==","signatures":[{"sig":"MEUCIDOenDh905F2XzaNo0BPQFwcjialpzUM+ulPRwp7C0w1AiEA3E6qLviMoqJdCmrvGty1yNC25L7E1D6trQdBry7oQ3k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5ZoCRA9TVsSAnZWagAAu9sP/3+M12J8KSosnLaLj/Lt\nbMQw6AkSn6INIi1XdUiOnXN6k7mES0rJhcZpE30vjcaqb09D32mXsAh4ldfB\noIYddPjFLnOpCsoTGoXKTlZ0w9o4OZgBIS+ttLfsY10W1wFDVlIVw35SaUQo\nMliBjsAq0UD+R13rkTh23Y1gzxmSH3LZ5McUwWqifYq5JMKTzInabawcI9xe\n/UTl8agzUM3s8dNTevULOASYyFDWYy9nljAK4E9ptq6Zev/kT8YN7g3Eyk0A\nCYuHCuDkcTP794Fg9soM4FC7BghVxN0/OZy0K+bq/C3lcPyDw33MV8cPvDtg\n6jRzty9zlLYJ/6spZcCfI6e4FcsbJGkoqMAK1VqhO/ByXdxZC4xuK45vJSvV\nduhn8HPDvlE760OlfOptJGQQi8BrYgL4tClnncetYIIKWZ+U4P72UDGF+PrM\nhqlQRZeGdq5ruV2cK08aq0qlI+dD25OPozhoeC/9Vv5NrEwhOCgaIetqKFqY\nXaGQrYK8j8xiykvMclPxZYHuQDGQmBmoVynTrZPYgw7nj50gaPijUh3g+CI+\nLhw5AjmrDYyAIkA0h/WQG/SHuP8OpHhOyOo0sz0v/LsBf9atlRPjvtltOZWP\npVgxJA9YjgTtul0Ek9ya8Vtm8ypSIphREl4nKvAe+KGbpKHqwV1LifRdlzk7\nVXSI\r\n=x2Vy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.1e7cb6198.0","@material/rtl":"8.0.0-canary.1e7cb6198.0","@material/shape":"8.0.0-canary.1e7cb6198.0","@material/theme":"8.0.0-canary.1e7cb6198.0","@material/ripple":"8.0.0-canary.1e7cb6198.0","@material/animation":"8.0.0-canary.1e7cb6198.0","@material/elevation":"8.0.0-canary.1e7cb6198.0","@material/typography":"8.0.0-canary.1e7cb6198.0","@material/touch-target":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.1e7cb6198.0_1594332775814_0.9935145321401879","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/fab","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.843f636c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"945caf4fdbd34f79beaee44693bfdb1bb4fa969d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.843f636c0.0.tgz","fileCount":18,"integrity":"sha512-Vc0C7F4/PYMoOjeWE+ILt7e77cvZ3LuvxQ/YjKKGSHWWd3Avrb9tPUvkDn5CT0CMXO2RxxUWNLCybBHtBE5soA==","signatures":[{"sig":"MEUCIAMH2cBYacRNBJ0EPgx4H96LTIvr0jxMtbdxQjMtjF0sAiEAwZ0C5tMllKQJXfRRb/xpJFMFjXvVd4XznUjV+GQcprc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKi2CRA9TVsSAnZWagAAZjMP/2QTqdIbFygf4wCFFyam\nyJcxg7UaopX0J2KU/vPoZtjirjg6g+g6aYe5Ey2y+EUB0Mxm1A7hetpRjGca\nE0AvNS9ey9xikCsXt+Rw0G9uXj5g40yO31qXU7ueeXpNjSF3hHnMYcGIHj8I\nra6FELuvDljLTLEbKnCkh36pqlj6Nk2mjFiXGjAWdfHrJgrofWTOx+qfmYuY\nrH9FZIdtPfi2l4jNipp0IMwvN6Xy2QQCk1VQZCg5jXN3ULQ2mpt5Wpc9OUty\nWNStKAXALyl8WYOP9etcGrOJDaH0Wvxh0VS6hFNXQhq0N6GkFr7ucfH6H2jo\nI1IrQCAiBvZfXhyoJ7Xz7AgWS6qoIasB1RSCHQ0w8sYSmpy5H8JLbD3R5SrD\ns8HgQoIPDFEDnBQXiodTcK/9xw6ztt1L/z8Vp57n6Pv0fsCcefUiT6H4xJ0+\nK/PqelGPyssZb2UbWYoWRqckYBtM7spdExDq6MNnxmln6KEst6s1taxv8lVH\nPB64DXawbyHt9vrWyy8mkGSwiO4j1qzMzPhDslLuNWzjZauaRgKm1psB872F\nivsL8948jEfYl1whp9VES2Fl8kr6dM22PhaqBLttdN1M9hzgROfroEtN8Bhz\n++Dq+bOooqDJaafeBbo6QGJBR6x9Kk05rr/p9hPZNr7m47yug/dGC3f7Iafo\nQXZc\r\n=oQy+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.843f636c0.0","@material/rtl":"8.0.0-canary.843f636c0.0","@material/shape":"8.0.0-canary.843f636c0.0","@material/theme":"8.0.0-canary.843f636c0.0","@material/ripple":"8.0.0-canary.843f636c0.0","@material/animation":"8.0.0-canary.843f636c0.0","@material/elevation":"8.0.0-canary.843f636c0.0","@material/typography":"8.0.0-canary.843f636c0.0","@material/touch-target":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.843f636c0.0_1594402997967_0.7386080156155848","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/fab","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.b2edaeead.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aa24e5d32301a7d3f08a6d9cbc9c74d6c8ec0fc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.b2edaeead.0.tgz","fileCount":18,"integrity":"sha512-fv6eWIipYQ0i+mTEa4tN+gRDZpkcIY40Ake/CTsAIn6TyY6Q2Pblul5nVNDp0XSp7VJGoEsMJ6/K0V2DpHQt6w==","signatures":[{"sig":"MEQCIC5Kp4w47aSvjVEctge2dowRckAFYwfCw8YhmJbK/UFtAiA3aopQIA659Gzkx0B3i3qvPjJ01m8s5cDPqELAVtsMKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK5vCRA9TVsSAnZWagAAQEYP/jGj0nBKeNMDDJT8GslE\n2CZx/Wt7AEFbkK5QdD+DlwwoWjWQQ0jwCFeGlxCvK+ePLfbHSgJxcc3VBAyX\ncPO5+RMyHxrssQ9ONtGfzGuAm+e5J2ywmzrGr547y3RGdoElZRE/EdS1k98X\nCr331vKx7HpEunp5dB4IrEbVnOnfSQMqNl/qhVxN6LLzPvI30DMDQbiIgoR6\nCpVbZXsdJ5ZPWCrNOzL2QqzLe59LPw+4A9ZIPNkhlxdzoe36sBIkpCd7es3M\nVJAH5Gu4s1IIVNPBoXlnuR3Ga5VgroQ8ef60D5qjiC3H9Hj2ly66vEMY8TVv\n3fC+LtKW6x7/BV2CLdLfBRz1tDuzThIuPeqSBIhEmRqor1eaGfF+yt9kxqNC\nPFWzto2CyglBgvRIvhSGOugIFViSjovIp+mxSlDGelF1vZjIXn7p5KZOqD2j\nOhfCsWoobyEUiOsffHFxX4SpYBL8QEG9TLIzhfhVLZTiwvU1ZVI3diGO/JeB\n72fNVT6u00J4QSl3k56nSC/bN04fxLI9hewsowp7XE4Sk18RvLb2IuR4ZN8p\nWJk+C9x8jg+k1njTEYokThsupvynRV4U3pCLWtgVOV4yOBQ3ZJsHY/hzAl3k\n3/T4t1BsWzWhD35wzUITX870EBAUP8nncQiGgsGDrw5nXXo5gSsP3BtZq3Ox\nUqqi\r\n=tkYS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.b2edaeead.0","@material/rtl":"8.0.0-canary.b2edaeead.0","@material/shape":"8.0.0-canary.b2edaeead.0","@material/theme":"8.0.0-canary.b2edaeead.0","@material/ripple":"8.0.0-canary.b2edaeead.0","@material/animation":"8.0.0-canary.b2edaeead.0","@material/elevation":"8.0.0-canary.b2edaeead.0","@material/typography":"8.0.0-canary.b2edaeead.0","@material/touch-target":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.b2edaeead.0_1594404462822_0.4135231664017691","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/fab","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.5dac1f624.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a2e8a05e05826c28ed4452ba1cdeabc8ee54702","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.5dac1f624.0.tgz","fileCount":18,"integrity":"sha512-G1c5PBpwFOrSIn5rGWvimH/L0Ct4SHZHoNCgyc6xFOX5pfqCHwMXRA3OjoAAmwlbZAgDk+CO8GA0UpMBfgNQCg==","signatures":[{"sig":"MEQCIAsK79SASzv5liAYGc+FeL4ldE3fKjHprdxBBV3EtREFAiB8a/l6/AYTQ46RC/8gHgJk0odBCRK20yrK1fpT4dMH9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI0oCRA9TVsSAnZWagAAufsP/3tvzFJEX73dKm1TrZvI\nhcnpm/iMOcNmVt3WJLj/sDpNlzkht3F1U86s+11GosrKsz4hv5mz6e5ROnDg\ndDwd5TPWrGDzgr/WK4Vmzf97Jnqgs75A9sOlStTREDVilKJZUpxsMi1lp2CJ\ngd/OCxOSnSWylTnZ43qQWyrmlG2Ra7ZxeG1LObJmotdXZG/OdegTLlGP5QYq\nP3wGFhCK1kVreOWG8MZsyqzR+DQf57A1MBemteQp0fCQxqN1bso2ynedoqxU\nMv3hNllGz2Y5QbUQjeB2YR/oN3GedkKtUh1thCnL1UpGjv1HQGSuqebchoZ6\n0CP9n1ZOorIYwHDLxuKOTXJOScfSbQpth9rILka9ekfQ+vyHANjKmsbo/3xD\nLlWtZqAZMXUxCjBJNKaUa5P0GRGrYjrI2K2Kqb0rsfGozaRdrAo8S7n4eH37\ntU6+YSGk3WUBnhzqfzF4IDjzU5vgOSTtx1ykrGTQr+ZKn17TcZVTdkHdlF6t\nGFzNUPsns4vKmB7cUA/Q9Y3+9suDR245eRKzYJPaz5zFYFerHwWfMyaQw7IE\nPve6BjM7GRVbDSoQGfYti+iuW/4tAsQVGG5iEU8w9sBfadloPq/nBWowqjeR\nVxO8sqC0cwTOBe0XYLNcHWOkyoda4ZD3aL7cx+q4a3bX4QhsHC0vs4gZMuph\nb+x5\r\n=7Bvx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.5dac1f624.0","@material/rtl":"8.0.0-canary.5dac1f624.0","@material/shape":"8.0.0-canary.5dac1f624.0","@material/theme":"8.0.0-canary.5dac1f624.0","@material/ripple":"8.0.0-canary.5dac1f624.0","@material/animation":"8.0.0-canary.5dac1f624.0","@material/elevation":"8.0.0-canary.5dac1f624.0","@material/typography":"8.0.0-canary.5dac1f624.0","@material/touch-target":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.5dac1f624.0_1594658088377_0.5630077137080289","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/fab","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.4497acef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd8c3e86e6b4fa49263b1522efdcfd279390164f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.4497acef8.0.tgz","fileCount":18,"integrity":"sha512-Bb3rrG/KCwuo8ImLiQVCR6IiYkAkzjSv/g0sOulapv5OJTNqiJXTW///QVZgf+2g6CQiZXdduUp9rOzmJQge1g==","signatures":[{"sig":"MEQCIG/7PlOyMrlTu9GVN0VdC/l89DQNjP4XxfxKajYWqxYrAiAMFAM8ZswhrimUCQYelinQ/D9LjYVLDoGza0kBitSJpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb87CRA9TVsSAnZWagAAeTEP/2bAGf0pWO2AoWrdHciU\nHAXKNiGDsE0NXXHoEl0U544YE/s5TPlNxodwywGKCfim3mXkHPwSD4gD/oVs\nRBwEdM9hPuTq/6B2wBVuvjeRMk7GM9q/DAKKMDNnzqQZZUUOXUeRZ3Om5QvL\nd00ieE908VWkOw/8DQPS2Rjb/HoIwOrIMiC7M+GOtaTM3/jzuAec8h1Jt8Sp\n/Va36RR9T2/wS3KOh+OgLStHU0M1qvgalbEvoswrsS5vsRrSyv68Bd5Pa6CH\n5ZCkhTBKqLIkSwb1qeJDpLuvUy5GAluXyc1s+MlJq2kQ8zJUREeJ6fRW/ypF\nF4vooNXVDDbelW9NSybtAyNVKq0jd20wv953hNtG9uDEfKTQxgQe+XB2pUQg\nDYBELlAXfhvGFA2GOiTcVnGP6s6QxsuK/XTNkRWto5E4Txn6nEBG7NVw6bvq\nq2KdxTWGnXMVjTcm++lHuNtzW7MslAHzpSrYtQmsZyYuzXHXOn2uNBpyqxWA\n82VezBVb1kV2XQVv6aUiZ1CagNu/0PVrXctBHf9VrofOn8lzGjpVLsPUSgct\nefe4AIvyD1HHf+LaMnSgUugus1RojIuzXjkadNi0vGNLh85dkCwcGyzC69vb\nk7LjWTg6nkaFzNpqmVSVq3a5VgTB/NkZ3gMkpv8gJyRH7Jh3BzgGpZYbkVIw\nrx23\r\n=SnSS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.4497acef8.0","@material/rtl":"8.0.0-canary.4497acef8.0","@material/shape":"8.0.0-canary.4497acef8.0","@material/theme":"8.0.0-canary.4497acef8.0","@material/ripple":"8.0.0-canary.4497acef8.0","@material/animation":"8.0.0-canary.4497acef8.0","@material/elevation":"8.0.0-canary.4497acef8.0","@material/typography":"8.0.0-canary.4497acef8.0","@material/touch-target":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.4497acef8.0_1594736442762_0.13858524742973244","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/fab","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.e6e23019d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"534de6e5538323c5a3cf72a8ae7adcbf47f50cb8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.e6e23019d.0.tgz","fileCount":18,"integrity":"sha512-pkV9P97APY5dL6zgxlrLgLZbyjU6uvRD0Itb+1MGqU65DfWfGkcnRGZSP2upLllFcTZIso2lHTFdls74xfflww==","signatures":[{"sig":"MEUCIQDPDZWQ0bOZKfTL0S+j1sVe4pM34q2tAYaPjUmacz7cVgIgectm1rNJhaxv5zGC0jA8QNgLCBKXBRP+VN6gygCDzVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhFYCRA9TVsSAnZWagAAZzgP/iS52KB7yD4PqKMwvFJ3\nN0olem2202oEGA5kysdbYjVAJ3ZtYYE7SwfE2l4t0XOevTmDhbzb5xp6ucfX\noL1fdj5l8kDw6s9o7qTc/Odvm4LCp9n4M+NWBZY1Msaj28wlvngvj+QpIx6y\nvAuHwQcsvYvW+qsLxx8RayFlDGIfWVjDB6VfxeQFpDH/xdgIQFET2YDCwl/p\nAn6QYywkMyYboUwEw5N6eFgs9lurb2eZIAqmnbdtNROabLecZAVkXKAsKGl/\n/m+zphf0XHvUB32rHFA/wHZtU8wpjfLLFeVILU/nOXHQO2JUl72zunDbby76\n3phvq8N+mcaurJmt2bbtEAJ8gADZmvdrBaIPTwQSxuDQo/OW0p0+Od6gEFuE\naG1FYYJlo1HcDQeEjov8xPt+htNP8OjHNSqQYWsujRfLYw3qkXVp8f8eu7Jr\nvMEDIggF4/7MLkRru5rmv6xsoTK1On4EvwVFFbj4NnFkeq+CA+xVwFVmQ4xS\nmSNxh3u70VsrNUYrCs5TtQ4XqmYQFCNm5tAVnLqS4wJv1yBWgmc95PAFKiLi\nM1VlMhsZskVxpkPsulZgSqRdQOiS8Lu1WfL1uGy5IJi5rk9xY4CfySvmooqW\nNSStI7yeUoeMw/rflrqDIbAf1hVDsaLzJ7Iwv3eMVgZY/baXgscTqu9tpzOO\n3hme\r\n=L2ou\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.e6e23019d.0","@material/rtl":"8.0.0-canary.e6e23019d.0","@material/shape":"8.0.0-canary.e6e23019d.0","@material/theme":"8.0.0-canary.e6e23019d.0","@material/ripple":"8.0.0-canary.e6e23019d.0","@material/animation":"8.0.0-canary.e6e23019d.0","@material/elevation":"8.0.0-canary.e6e23019d.0","@material/typography":"8.0.0-canary.e6e23019d.0","@material/touch-target":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.e6e23019d.0_1594757464068_0.08403214507564871","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/fab","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.d548d7a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8323ea0f46f171cd4706a096e4a458d2e0b799db","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.d548d7a92.0.tgz","fileCount":18,"integrity":"sha512-Yiv6vE25VXws3OdvrFva+bwcslQEN/SnIpdrdAwMBjuF7xwoU2nd0+EOE/FgSdFUiG0wY7z2XdE7GslZa1S5NA==","signatures":[{"sig":"MEUCIH9CtxNaqceYPgSMNWIsBsQbH5xXqLOV1mMwLd8McGpqAiEA39ADO6hHI5jZ8Xiro/8u2LMsT+oFLRSMIDq35K0BSRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh/5CRA9TVsSAnZWagAAgvAQAItRQ7XdVnXXOjaOrFej\nAXQyy/l8fJS4+Dqg+2LHDbAnetLanQN980wy1NgZQGS5+YH5mliyeaKdFAJ7\nlyrXFMEDOe/GxcO0smAGPrIaOdkN7QC+1ee26Jkt0pUAk4R4xeDx0AtISP/c\ntoE9TfQKCFTAQBLbxBGe/j4dgNZu1DpmooEqOT1au7hTh3xPLWgp36+WdPaF\nszWvFnGny5N+USLwy88kumEZvZ+AKSjcgXkuXUaCGocidT9bydFXEkccNtpC\nqeRpYOnghH/GS36LALjDHFRlkz1SBir4eJtZ8zrgUxQZx7sZoN8ANN8RuS1z\nlFTDwQ3GY0ipSTGGu8rPgX6SuJT/ihJHlNvBLVjVgsaCZju/Kgr84TM77gXZ\nksOoDvl0DrrJ6Yde0AOElknOEHAzGEXrVwebOUY0hv3s1vhpGTuCugKH5L0k\nQXnDLRO8aWT3rcAQi4JLho8l6UwYxAmz8gw+KpD/oaa4xONQcTlnGUjPGn8i\nrrWSUW6BybwFwin1266R1TxO2M9xSX7J0L27+lv7iQc+92jK8LVsMBYLq07T\niz1JtVOqjAIHK4BJLiqtdwzE1QcG5jGuzZUIPtkjFtfpY45vBkXf4CZGw4Hm\nMsBxt2okQFhyIjKdA0MKGUHgI8vcEN6AXWvGCAbLrwkmxEh2JywuksMAHc3x\nQyqI\r\n=gHri\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.d548d7a92.0","@material/rtl":"8.0.0-canary.d548d7a92.0","@material/shape":"8.0.0-canary.d548d7a92.0","@material/theme":"8.0.0-canary.d548d7a92.0","@material/ripple":"8.0.0-canary.d548d7a92.0","@material/animation":"8.0.0-canary.d548d7a92.0","@material/elevation":"8.0.0-canary.d548d7a92.0","@material/typography":"8.0.0-canary.d548d7a92.0","@material/touch-target":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.d548d7a92.0_1594761209435_0.2733340528811481","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/fab","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.58ce529cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28fd3a49735a1bffe05e92e42f9ef6e102da4b06","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.58ce529cc.0.tgz","fileCount":18,"integrity":"sha512-LJGtDiTNyOoyaiAEpQ1GGEey3OjX/OquGmGS1dgWSj7w2/4hSAEh/rIuAEBlttuqf41dYLjtztO4L6oQFqjI+Q==","signatures":[{"sig":"MEUCIBNtaEYOUVCvMqTgiI9U4aHe1yEV58rm/+k46ivCJi82AiEApFWtrOl+MCSNl3kTK30sin7K4Yv1SVOYaIGKFrdGtlw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiB2CRA9TVsSAnZWagAAiIgP/11FDF07cojgU+WnjxsG\nN0IOxIjz4BaUj3X7epA31ayZqmK+3ubbNA7hCLsGGXi7LUkzQPIjeVc1fMHI\nE1QsCh6uO5y4X6AfnDQaWmWfpn1lN7sN/L4YPgyjYyY4VM/tWh3t+m7qsNtz\n0k4c4Ygpp9EhIOnYaSHRx+21TivWm9EA27Mt58pdHYzGAzC4VACnxSAjV107\nyvdyDYbZw9JDK9xANZfU11B5kGu6TTj94PA6GZf+mJ9wrv0mISnLzAPtonfQ\ntlF/IgmXE0qMId49DmErpfuUgPZE5mZ9q1kPC4p7AbZRoJaNGgvykTgWBIJP\npHzghiHMQ1XRoF860W/7aqud0pHXTpT4rv9wKXUd+r6CkTwFI/tWAKWK9NSp\nGqSoUBbxDX3E/F4SFGOrfKK5vYLWlSTh93q4EABnD5mD1MWymRFx+anBHqc7\nNXsoqc4KdueLToGr0Fgf5ranj+j8ZVMLAAuMCmLd/4SJag6HVM/Z/UlrMi7P\nrfiTlPvXR24tinOtVH4S1+K649yeVMP1AhOIFNxi4SYku2Ttga23ruCaCZqX\ngiwOMpb+bLRrarPWcMuXPWpoq0rwg7pbQxm5KH7Ib2gmblcmUcmJ0nk4L8YW\nqXYjaBA9TIWqX52EeugUukNlnoiGj1vgehMA+9GVhpEPueVMq4dsSxTHjqp6\nrRp0\r\n=pp4s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.58ce529cc.0","@material/rtl":"8.0.0-canary.58ce529cc.0","@material/shape":"8.0.0-canary.58ce529cc.0","@material/theme":"8.0.0-canary.58ce529cc.0","@material/ripple":"8.0.0-canary.58ce529cc.0","@material/animation":"8.0.0-canary.58ce529cc.0","@material/elevation":"8.0.0-canary.58ce529cc.0","@material/typography":"8.0.0-canary.58ce529cc.0","@material/touch-target":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.58ce529cc.0_1594761334429_0.16911987120420924","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/fab","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.a0f1202dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf0271d71bfb732eaed2a566fa13a871d2309e05","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.a0f1202dc.0.tgz","fileCount":18,"integrity":"sha512-fiilLHnI83A6q5U4oTlgNisdmF/CChXZ5rucopW9jFHAXUHXeMSTWQXczGT03aYm0kAl/wyrbuC5guAfB8vn0A==","signatures":[{"sig":"MEUCIE6v/qipdW+H+mP6JrjG5uObmMdhCTqYmm5PPL2CoIHBAiEAjJ7WyY9sfr1F7ZqMW4mdjwD4sD4fUEf4yc1Sim4yzbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiUECRA9TVsSAnZWagAAohIP/jBXYwsycZRXFSG9BaqZ\nkA21A5QyDqEy5BZPDstECaEmbeiCYrDV5tUpP6Z2HzO93AXM6VTJMzM5Owcg\nkqZgj5dgJ/o3nxegEfd42AAsY4Be5K5llnm5DpczRvReWJ7fsOwiot7J8CvA\nPu4wxX3hwikI3aaFXJlhaINLfnl9x83/lPEi7hX79OuSjti9xb+FAsOI7pEq\nmv/Oj2sSQL2AUW7G3q6xSzErKmym8QUyy6UQ2iotFt545ZumkCiWuvLt4BSA\nkxQvEIjHGoNpYllVzIh0nrJUNwshVr2EildrZDVWsCNk6RhGPXU5cych0n0a\n8qv66KcKtTBft6Kv+fPj4wcNOPD01G6RAkV0Ry1pSEcGdPH1Fx6romp8Qep1\n85MD62XyUPce2KRBTYiZpHq8aCeViAmR5hJflQGXYCnZRHYJiUuiS5ZXuTfD\nzWUe5xamcTDPemc5diTZKDiMWsvkCs8SAtAnO2uHiV9CoEy4aealxfRic3Kq\ngWy/Q2ObZ/amGL2MgoFPaUOj0wJDisTdwy/rki4hpEqTe9twh0mSG/KLNjTk\n/CEzV6wWOrhiv4+HXSnR85WDF509tmk22rR+lYAWOKns5KeNfJyRuH+fxfbs\nacAY69XCc54QbbHySkS35hzjYZ10G/PeCpCHBk8aP2hbTcPfDJD/52QXseSq\nb/vk\r\n=cjQG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.a0f1202dc.0","@material/rtl":"8.0.0-canary.a0f1202dc.0","@material/shape":"8.0.0-canary.a0f1202dc.0","@material/theme":"8.0.0-canary.a0f1202dc.0","@material/ripple":"8.0.0-canary.a0f1202dc.0","@material/animation":"8.0.0-canary.a0f1202dc.0","@material/elevation":"8.0.0-canary.a0f1202dc.0","@material/typography":"8.0.0-canary.a0f1202dc.0","@material/touch-target":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.a0f1202dc.0_1594762499797_0.06930210961738359","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/fab","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.ad4df58c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe73b954995d970e725ccafc4d7bd43353dff118","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.ad4df58c1.0.tgz","fileCount":18,"integrity":"sha512-w6WCfDMaRa3oJLR1BQELSC7jcaVngz+urDAO87P2h4OE/0tY5oiXRlFevgDFP2G1M4qXmPqIkTGgbEq8ES6g8Q==","signatures":[{"sig":"MEUCIQDNT3ZPQBjJ6VZpEZqAw9lj07X0kvzvyKRZfGZHREHLBQIgQt3xsVut4mx6rPI/6cXH5qj+LEITIJbERj9JjqlAh18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDklRCRA9TVsSAnZWagAAgxgQAI6Tt76qkmox46bwLAfF\n5JH9iEEwBnk4Kn96wpmfYcbsrRDB3feOZtUciGytqzLjgAaV47Jy4cZz3mfX\nynYiKVc4UxeblPhRVE5nTdkxNsMDmMxJKh7I51aNCaYvRx0xpW9gAHIpb26Q\nxv0Q/p2Z+xZQ4MdaYFEpkyKbe5B+/w9kAp02bCpg2cGOoFEKi9kt76o6yl76\nUEmqHQQfu4WIMg94aQFv4XrMdw6/enWzJm42/K/ZtMFi17Nhkrt/0djrMK6h\nWpMmi9eSt+MJ+lfVkesfzzyP9Iz9GwwQ4SR0xhxT09V1Rledw76IhOZTczEq\nrw7F3dqDU7BEDLuAGXz2llKOfxMPXbo6BU+oGCc5vcSwHie1E7qMvJZcT0mV\ncCOA6c5D2iZKiXLzxrVQ3kZGVjxT+FeCOnGSiR+6Q42ofHi6LOPBuOU0h4QQ\nfiltGBRjl1sIKUEKrIG4vn+pplRxWVY2teknx/WGxJK8ca4MSJ/S3IakSyiG\nqbIrj5rB1CBX7pTG8Zx+zFkLUVlXKQ7LKFHZecdi8Rtj2xMaZL0irMeo8/zu\nD4tiIzJYwKLJRfhmzJUCZmI50U/NwvavxNWeV5lWYsRFKS6fgEnhDS/bNTqe\nbBUD0aKHhve9S6D/JiVNq2EEGQfVkyPUbNAWcxwUIgLZFDOPdGQnOWQ8RSvD\nZMgE\r\n=xzJs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.ad4df58c1.0","@material/rtl":"8.0.0-canary.ad4df58c1.0","@material/shape":"8.0.0-canary.ad4df58c1.0","@material/theme":"8.0.0-canary.ad4df58c1.0","@material/ripple":"8.0.0-canary.ad4df58c1.0","@material/animation":"8.0.0-canary.ad4df58c1.0","@material/elevation":"8.0.0-canary.ad4df58c1.0","@material/typography":"8.0.0-canary.ad4df58c1.0","@material/touch-target":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.ad4df58c1.0_1594771793487_0.5255312679878266","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/fab","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.01db89053.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f06ae109d7db5636696f980dce204694ab895271","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.01db89053.0.tgz","fileCount":18,"integrity":"sha512-fNnXQ6Th5sDBxJcthtdzwZ9HT5yuzarn0GKzd7vV3HrFFhgmH4+6vLeLzeubrCTB2tQmdlBXiqefxATgbFJ6dA==","signatures":[{"sig":"MEQCICJlsQ8CjTWsiF8YapCaGHr07yr4iTXEHXipslj73CLJAiARmvR/Hg5gu742AcMwtYYbvYqe65rC2h4YRXoA4txJlg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":275600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEILmCRA9TVsSAnZWagAAVUUP/1uxcfd0YRco5lwqqepr\niQ4ZNulBskoEyPjHuOvzQwMsIyqCWp+SdkX+r6vXHFplHy3UxTRiZDoizeH/\nxFq/tjTvAs7MHkWUox9RVqUKGQSy553OyHDr/BnKBOvsbhQXIn1wWPLFY2xz\ng2qpLniG0WM9zF1EEa4WbpzQuNBEc+UWlCCQpw/UOFvbioGW0LfHL35eIkAl\nhm5Hyiii0H3c3tduQ+frEclnrZfNjWK80RuVOA6q7xNHQyF/OsmC/MfQuEsA\neHKnY5z+IopPSw1wpQr2i9998BKC45XE10Ij2aEyVArQmAcbmLJZqDYFa4Vg\nE2ldPTqvF+lfwoaPa5G5TGXpwtkzRaCs/e6ZFW4hwpKdXfY5QE9opfDPQhch\n4CpE9mxpDJnoofKH7hPDhZqoDC8BRDlIVR0Z7YKpxqIzAj/mtR4j3OoqSxvN\ne/RbjsN7wh5dTgGsPV/KL2HR8lTJXd2Tlss0CoOSZw3S1cJqtVWcssqaYJej\nk/FYApM/7WHCBif6vflDA9X3qBHOJnzosaJMQMQzGrWbdV8KrLUyzTdb2xT6\nx5vMp5RySVK2IWueAHzcqWaFJ3E/WnFjSVzDOszMAc5yMCo/YimjjktC5l/7\nHVNYpSq0xzI9LGo0mYErdgGnby6giffYbAv66mH87eb/s1DN1jLiLUzxTBZU\nciGJ\r\n=BBgV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.01db89053.0","@material/animation":"8.0.0-canary.01db89053.0","@material/elevation":"8.0.0-canary.01db89053.0","@material/typography":"8.0.0-canary.01db89053.0","@material/touch-target":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.01db89053.0_1594917605821_0.3311692855583599","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/fab","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.fb5a4cdeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15f92de753a1972c3a41da459daf9a867109fa60","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":18,"integrity":"sha512-pVoaonIDW5LAvwIYcAVLCI3nivHPLIeS8wxxZedXtbvHb1NsAicI2LgDd+HUMcRXi/wA1Q7M1vFfJEbKCoEiPA==","signatures":[{"sig":"MEQCIFNV52mkNhP9VQyRQe+8fSfbeQXCoimLm1OzMso7+lh0AiAS+uhe4C+ByUpH8C9XyhUEsbNJIt6U2hfoEDbMOL591Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":275600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe5+CRA9TVsSAnZWagAA9HQP/iza30O8eP4zKTq5gsvk\nD5Vybet+YVTSt8F+1lvsB7oW1yEqIN8ZtxagfNaSJO58BShiOiECiu3GoeKz\n3M89jSdBaLjMFHsN/bkwLjygRyAAT9hvVrOR2yVvyvUwDJC1SfYlBrI038RO\nAdnhxe6ftpFraAe1D3XxfMkk6uaR1aC7OyF2QqytruOXeFEYLws4KBFzVgg9\n0z0V2VyT6SUWo5Y5UJEqo/GOZUHeMVvzXrRUJcprwH5ywFt2TUkr9Mjnqbcs\nhsyERUHMZ1gytXuXenEoYIV55Nyb2omU/42X3A4UH5LJuG1PtM+clD70o9dK\n/iBfF1oH9w5pyzd3at8q/wzIadiuyS1zEbmzPksorSpOXydnv0RYukFCDDe1\nh0Lf5xGK2gDMV6SWPEvpbniyL26xPWg6tLSqstlI0ds6IQnyVQcDRhfXTa7e\nheKJdG3gtpiopeFfz054bO2V2UzGBOSS6hnPj7YHFsiLp53kjXyHQi2rBIv9\n75EpKUx9bhZ1bDk5IcCWRL4dokecgP8hvGKNx0Wr6MbAZk5unf3znutQT4Qk\nTFEgmznIAb2Y1K22tBL+f7GlXr1dBU/xf8RZJ/zyoM2WdfHbLGyjdaClSLNG\n4Sk5XtMnUYVeVPPMH1pbEX+9Jl7k5BwzmBcJio9pbox4VE8qGuf+bMYGrRuB\nnig2\r\n=Wi/P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.fb5a4cdeb.0","@material/animation":"8.0.0-canary.fb5a4cdeb.0","@material/elevation":"8.0.0-canary.fb5a4cdeb.0","@material/typography":"8.0.0-canary.fb5a4cdeb.0","@material/touch-target":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.fb5a4cdeb.0_1595272829875_0.16697752822227963","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/fab","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.8df0f517c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1426e48a33e2b5b3726d088738fcc3cecb9994f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.8df0f517c.0.tgz","fileCount":18,"integrity":"sha512-E2RqtFcH70tuhPzNVByZT/76Qc1hwAsOVlpSro8sSNJNsY5DH3HXvDK+nDtWoRl6DqczQZ7cPYt7o4saTvnbdA==","signatures":[{"sig":"MEQCIE5BxtETiqgmI/gBoLty42wYUgv9s4DQ78BVhpSNLbFuAiACv1qHaYaHuBHEhEGzN8f3L7tBdBgICjvwSO3GJpLvdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":276366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi8ZCRA9TVsSAnZWagAA54QP/2sNbjASo3+35e3p+eH8\nn/yNxdXpR5yUdolvYeDq5MHCVhJhmzxeGXgf25cpveAYhtlzC7v9x+PS9HQe\nSJjn69VDcPjpcJQ6mqakDUbcVaInWQHpMXfQC5pHvYGuBApN+VmSpMjc0uBu\nFY464pLtYJsijE3LtmL1Jduw7vvziA2K9PaZNuNbxNT3kOEiCYk6T9XZQ+b8\n4vuGFL7772Nhp5VZ38SQ+CkFH/B7wA4BYJF3bh0Q17t+j49dhrjmu0DCbRdY\nDlMG194G3pwf5DTWy1I3wlRHpQt+IfGQVOSrUw6XbBZ73CbRGn2sdcjQABe3\n9YPYPYAjuA2fCgLhg13HlC10xGjWBFjHwqauJsj7f8w6pOv5pXbQqq2Txa7z\nx6OfRD6xs4KJD2JP6U+vH2g6x26sJ/jIOfh+V9g9zrZob11/DhG34OJ15PMA\nChIcGyGBmVOzvQeEEnbDu4xZysebhDUWhqSeYp9kDc9eCRLKUraKKui1vdsT\nswgJcHafejLrXGHjob4lFaaMGnbkrZ+D1zunWmF10u+3u+yb3W89XwWxuHkb\npDZoSAbHgoWGdWRSuR6v45/mMBZjSw3RgG27snJJBMzBu7/VBmnTzYqt14Fv\nLZzoKKDj8bpUUBCv1dkC25g1m1c4V3EGclopShLfnLvDOo1Qrv8QS7XmrZ+C\nxGRa\r\n=WIvG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.8df0f517c.0","@material/rtl":"8.0.0-canary.8df0f517c.0","@material/shape":"8.0.0-canary.8df0f517c.0","@material/theme":"8.0.0-canary.8df0f517c.0","@material/ripple":"8.0.0-canary.8df0f517c.0","@material/animation":"8.0.0-canary.8df0f517c.0","@material/elevation":"8.0.0-canary.8df0f517c.0","@material/typography":"8.0.0-canary.8df0f517c.0","@material/touch-target":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.8df0f517c.0_1595289369173_0.06761819288999349","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/fab","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.abcdbcfeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b22456da4dc5aa025fe3d6c919e3868aa71893ee","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":18,"integrity":"sha512-zIdi9QGe47Qn3MyXmlkL67dqTJIepy+rwaoozrgRxwH7+HiXDm+qy4i+yzSF0m/RAIyI5YqzswXP3KyHZQJA3g==","signatures":[{"sig":"MEUCIQDewm66PmVjGkpkVkLO5QQhJew2Y+ibajpKUDNC26OBmAIgHy2qTcjzk/7ltoy+nT74/tExTudE9pe5sh0TLoeFQEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":276366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjviCRA9TVsSAnZWagAAgzkP/Azbotcs7vD227CWOnD+\nzbli+7u6ip2i6bRFKxIxi5ixiHqk2TSx2yNTP0MLaskXlpcBJ3M7jZNf6K2G\nRHFyVnBXSQFq0fxhkCjR04zzKZq6w/4i4X5UqB13YiT4Y53N9S5wNfEMMPqT\n130D9tJ1GSu9xRZuAkz1sVne+CFVG1NF3zTc3aflkgzQtG4E6Ya7p6ANtyCt\njirYPANvjWhmIF3YvubKNjwlbjnamazfylEsOnV1i+K5RJVFJdyvPduVmdvG\nZ6bpCiu3fpkcWWbWH7j7OyaNTIK0n4daKoARn0md1Cz7HeZP6FETxZVlVvva\nD2fLvvziH0GoySFvI/5WGmfWvYP0jGVLZ4LokI+/63HliTX+Loo9ij4TFRzN\n3h60/Gu0/vCBKOKeBli2oCUIb8XUvDNxjgqXAxPFqUjgq3vFaOjVFI5ZF/Cc\n2PcBpNuViEdJXjZqNtIrlj4h2vWg9D68katoGEAYFcMGU3RPIt1DDbt/tOFt\n6Uj78q12KoBvcKTQtV2u0206QWZCnHXbMshyAcDNVC8IkcMA6SLy+LfFUlQJ\nBUV5mnlGAsB91xSHlW2KyBMS8lKzclybWHebqzxIdmF2dGNH6RWPbnX1Hg+0\n+hpzNMgi49Kn7640Og66JamawlKxY0ZkxCzWoZO15YAafl6/DOC6KfXFeiUX\nc+EQ\r\n=8S7c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.abcdbcfeb.0","@material/animation":"8.0.0-canary.abcdbcfeb.0","@material/elevation":"8.0.0-canary.abcdbcfeb.0","@material/typography":"8.0.0-canary.abcdbcfeb.0","@material/touch-target":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.abcdbcfeb.0_1595292642246_0.11554242782238444","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/fab","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.7bd5075de.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2a3c11ee8d6403884b2d3ec64e98ed97c44ee03","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.7bd5075de.0.tgz","fileCount":18,"integrity":"sha512-deNAZvVtQ8UXBjI6lmw5HURa4A6qW7dleHztC1A2nR7FLVNQAuZE4RZAYaHQmbTQqeWyGew1UEzfgCkjpZK+OQ==","signatures":[{"sig":"MEUCIQDuzEdM+g/dl3puNWdnSRsdShMwZji5mb6cin12ZzOkiAIgWvVvLQgBip8uPHJWQM0wzyTx9jySBLVM9rNowYU5wh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":276366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzhPCRA9TVsSAnZWagAAFsgP/3DIz+ZbH7zlBU8VPhQw\nUwMxKd6YnGleQsEiOUGsST1wXfMS39RH189UtyGqsMIJRQFy+WxV0ozkE6zx\ngzpAXkSVMLDQCtcY/p18RtQRPn60TgvZR2+I1B7Azs7YrZ5Tdvwxx49iCyxV\nVO7myrW5UCGHgV8BW6LBFAEKJp8Ap+p+hRPiEw2g8LmJWuO+gkideJJXYaiP\nIJKRd+/mmswZBZJA24aCoS4pnBcl0Lus4xXvhSH2ABbEQA8CQZXYKFIBgX3x\nsW5smtVsVcznJm4ulC5PJFqQWqsWGzfZ+zMl6aq2hDbxHPDryveV3iqteOIs\n1N1CP/jXdu6//ARs5A4tp8mNJMMfwAsbzulRadwHow/4+bihSdT3tPnRbKqI\nrk2bZV6aossQ6YGMo43KTa+hUsWMMU7fgFUuwkIF91HeKVRETkpU3QYoniUA\naFGscd6kt6q8KyJzZSGWGVu9zHP29Jem6bIZcEmW1MmU4D/BG4FXJrkbL8HL\n5d17OvFaXCUL/8WAeGsFyMFf8oXTaAD60oebC2qerLb7hXwPTjxuC3nAwkj5\ns5+gUpr3fkmm50Qtry+uc3I5+GbWmQ8dSUIDMmfAGnMX2rfdxSyqGV1JB233\naQ7EXVshQ1bmNjCG7P1SGRm6NR2qp8kuFy3TWOwEjrPbwlurCZcLb1AvEefp\nu0PF\r\n=WIuY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.7bd5075de.0","@material/animation":"8.0.0-canary.7bd5075de.0","@material/elevation":"8.0.0-canary.7bd5075de.0","@material/typography":"8.0.0-canary.7bd5075de.0","@material/touch-target":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.7bd5075de.0_1595357262370_0.9956966981610176","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/fab","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.405a29a20.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea35eeadd3744c8aff4cc66316a158936bde02c0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.405a29a20.0.tgz","fileCount":18,"integrity":"sha512-movjFcnusmWmPh0sUHNo/MnwTEmHgwxJwKdZOrftlAktw9sGuqR70Ph9klwZNePRuoZuJHdTOxpnuq1yCO/5jQ==","signatures":[{"sig":"MEQCIBlZ8um0rxed9G6Po5tpr3GKbdCUS5NVo5xCwqHjJBhKAiBCvs77lJWKgMjOicURImN40mTccTSbfEoVCM5VxkZoxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLxzCRA9TVsSAnZWagAAnsgP/0Vzb0CkbBjECAZzNYHA\nhd9llGVcWtgx1gGmm4Ujs/4U0OS1bDy0OdzW9GVxkHV3FcSw5QamylwSWH6h\ns49MteMLvkP+Eqps92oAdPWNnD7UulTa15VJ6+q6JbPw9DzLxMK+bU+L+jpz\nRu0R/aaHLX801DwVsicR1nL5rPjbka8nB/QIa9NrVzJryrt9eb2Qxl2mxhTZ\nWZXR/Qr7zn0tuLWsxGZtpgi9bAbxczicYS3L+UzvOJEHSg3mnGwXF4pV+sde\nxsklTcyksLscsmj641D+ATfmV+4TAPflJFe1kmhRztuUxp9CMwyQ2SGrIcnW\nIboZ0B3adkV/TPU6i3TRJQWr/WavnkbUahK7ITG35p4/796Hfq+mDFUTaVri\nbKxU9pvKisTFoXJJe31umECNCCLTcaWBcHv1ikrtztlYgCle4StwSuKOoS0R\n0tx3igt+HVm/X5Tjo7PeSPoQJjoXdTdC1nB4IMowgiWtNUUoMpiOYGQfPVmi\ncQjZP5NMrOHL/I0HBxPsV1OwUavL7MwzikmVwK62df5QP6Vs1E55hq682g89\nBb/1iapO6te3uspWwfpstTCkBQblbOBMUHXa+0VJSzD1exLNh2QQanieCSab\nDg0kUpKDqHZGW+YLp5X2XClyyxpQTUtz+CgS6os/iBz/f/4cUEvXF+lLpL/o\nIEKr\r\n=kW3x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.405a29a20.0","@material/rtl":"8.0.0-canary.405a29a20.0","@material/shape":"8.0.0-canary.405a29a20.0","@material/theme":"8.0.0-canary.405a29a20.0","@material/ripple":"8.0.0-canary.405a29a20.0","@material/animation":"8.0.0-canary.405a29a20.0","@material/elevation":"8.0.0-canary.405a29a20.0","@material/typography":"8.0.0-canary.405a29a20.0","@material/touch-target":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.405a29a20.0_1595456626443_0.47758358484476804","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/fab","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.f3693ac4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b4abaa16fb78d7ec68673eaa6ed6b43489c1e9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.f3693ac4c.0.tgz","fileCount":18,"integrity":"sha512-KV85aZiWkbq5U+PLe49PZ0mkFfb91dNbjZiKc4wWN0pb5zaDKnKPv2lReois+4izy/cQVqQ4FM88TKx/xfmZ4A==","signatures":[{"sig":"MEQCIFhWhbmBfflmvQeZmkGRM/taxkumP3bkJ34Xpqt4TNcPAiBr8tss92QZG8GNXmuYkouxf7YRS7E76xsXh/x+xoYG2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":278528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL7pCRA9TVsSAnZWagAAHW4QAI0dp0cvtdpUd7j7Vy45\nkrMfatTtcAFFSsNU8ErLmdgZt+laQOBymXhYui9JT+oXP/o9bY6R05yxQi4I\n9VmQPJwU5umNFgZqj+u/Twjyhw/qIYcIjCDECmRWOngTeMm2TJ4bg1l16P7V\nCCN2SzdBNwXAXsmQne29n8wHA5EMkzrwbRvVzc3MW1bO+Wa5BfnX2l3Wu1yy\nVZMixL3Nppm1zhYqvJ5VUQFsfIPVhjKwtA3HNZ5z9J6aSJfTfsWkCNHzASxW\n0e/qQ0mTkD0KLxrhyFZVSNjneWMtmvDk5YcKKoQ5v0YBp+yOQ6Tnq/H5IblK\n9bnL3jCjqmZusUTrJF4E2SE8eFOqo5Gyvt66Z1e8k8jbYhr6O9uO485vyA/j\nlc+k8tdtbyXj44W92DIxtbxZccfeGN+KKoUJbYAexBWqAP4gYKNt7eYLxmsa\niz1tFn63PCNwPjLwxS58RcUMePcSQSPF62ls/U9ASsR4jrPOxxjSfTzTmxHS\nvJ0MaTMfUW3AAYkzn7v5nioT9mahO2H5ceQUZk97UgHRXYJyqnntvLz8LP+8\n0ugaTnLBvZ3tPqII10oOYFkDsjO/i1dVr6FiAFiAoczL1K/6jOL+h05FFVAk\nCcYG4VW5S22DpPfmxV4PSfzeI8hu5we7Q9lUJw/cVPnhUpozUE2WoOR20KOA\nun4i\r\n=T42e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.f3693ac4c.0","@material/rtl":"8.0.0-canary.f3693ac4c.0","@material/shape":"8.0.0-canary.f3693ac4c.0","@material/theme":"8.0.0-canary.f3693ac4c.0","@material/ripple":"8.0.0-canary.f3693ac4c.0","@material/animation":"8.0.0-canary.f3693ac4c.0","@material/elevation":"8.0.0-canary.f3693ac4c.0","@material/typography":"8.0.0-canary.f3693ac4c.0","@material/touch-target":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.f3693ac4c.0_1595457256736_0.29541928714781496","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/fab","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.12a109680.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bccb990665ce9b0eee9e66aad6c21f56f893d71","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.12a109680.0.tgz","fileCount":18,"integrity":"sha512-oNMIoI/bui1tbi1HPAhR92p/VSDlQ/lttKeqgKj9jWm8lD7NOs3a5hD/MRtToTJuQDxS3oJP5OX38Kgi668IcA==","signatures":[{"sig":"MEQCIBly1VS1EH2JQfEemV01P4tvZylpuNPCIzjsllPcebAgAiAgB8KSfQjsFlV3F/Vn5P2HQqwDK7uKQpZF5Lk7PCO0dA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":278528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMXiCRA9TVsSAnZWagAA6JwP/3WUa8INLcGI/DRhj0Cn\nn202IZ9E3sjKWJf77L3W7zPwntqbogkVGbC7CiI5GmeEZCfo3D9BqEOFwpp+\neQCBv7P4OV9A68zjMZxqTJOmG/syYL9KmtXF9Wz0RRW1l3C2/FfVcjskYjgl\nzRiftqVd/4JYoLekxpnHaG5CFWfWImKwio20F+lnafQ0Y4OHmryLX4Z9GaY+\n4Tn2RMH7/Js6OLsiRlOCQcK/29To4wC4gYz9Zq0SikwvSfFDZp+ty8LgggTv\njuO1utIKXh/eeDkBzoKmpUalGiOYCJtprb1paytxyIgBZrdB9zD0p/5G4dt7\n//kvzzJ1t4RAUf3jxmEo6r7CbpgQ+7tGeIvPThHZDILbAVduQd+wRRDJWTyS\n4p67k/0dZ7w3tybRPQ7f/vrEACXIl0b+/dQGnNHCzLQxsgRuzKMJy0PAKjng\njGMWeE7JY01Sx1/VHQZ2eYSNhFiCvQOfTQIwSG3RdjiEjArN91n2m844q/uF\nIfUxDY93VoNW04LZ6rsKacHsxNnoa0e477Z7koOKPSDRuSu0CSwzTUkchHmP\nNGXeOdBEvMlCdbqBkFxG4sIdlpZyoQJMKFooIPL5nEUQSJ2xrV1ClukCIMsu\n8MWq1qpT3M/5C/lpxY2DZrgiGQ0fqh8U8yGO1wKJbdCEUn36z+h40CbG90vV\n9yqQ\r\n=a6Ms\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.12a109680.0","@material/rtl":"8.0.0-canary.12a109680.0","@material/shape":"8.0.0-canary.12a109680.0","@material/theme":"8.0.0-canary.12a109680.0","@material/ripple":"8.0.0-canary.12a109680.0","@material/animation":"8.0.0-canary.12a109680.0","@material/elevation":"8.0.0-canary.12a109680.0","@material/typography":"8.0.0-canary.12a109680.0","@material/touch-target":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.12a109680.0_1595459042108_0.030679725085676735","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/fab","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.bbd06696e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44311426f80fdb678b6ef2dfcbd41425738697b3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.bbd06696e.0.tgz","fileCount":18,"integrity":"sha512-u4mOsiEIhjKovGi1F3zNupBp8jW0FMco/SeA5r2anEQlp2nWLkXSCyWL5VvTfDuZmZLIO76S2kqWp2phejfqDg==","signatures":[{"sig":"MEUCIAImNGIdho7T+/2mBURMcBZ3rGxyparb4xjGlyDzQgBeAiEAkthg1C0xyWsMIXD5sQdtXOntu6v7IeoYMiYMaQw5xm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":275578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNF4CRA9TVsSAnZWagAAMHkP/3H2oE6z+KGFWrisTrBq\nxyqFcYAp/R3sRi0jl3/iGXtP7dFfzFF6bkVpANy/oQ8CWUVEzcRlI98tQqP+\nPWBX/jjr/ca/YLoW6Q3E473fWQnmwYTJT0vhsxzrkWwAOfY0l4hGr5kuKAHS\nNM7u51A+GPF4jzyzrn4EWvkh8kowapeSHqEfzi5kLfsGR3qVJ7kYygreKcO2\nhc/BHj8iwuqshWltrov/s4dk/Mg8VoVD1j7r5+JCP0OxSrFAQNDC8K3tttIl\nIuZYoGwRH87MfO9PqUBhJ9AZIBQZNWqBnvLb3jC6q7D35PrwVhW47HYI4ngZ\nFO+fvdQBKumkMvXHEve4aKr30jza7uBnHAlu8dmidGzjBfIHzIK+Cu2q/E/F\n2o0Ymy7qYJQ9j6ClPUYqzmH8QydBIHiKymYr0/JsUtfQ8Wvga7W33ZyLCy/w\nHPdlZURTrIdUE9IFfBggEGJfo/+wJrBvaJw3r6jBBlToiziLD7xLpFXQCWlH\nEqgxIifcKZB1xaZHc6cpeyVLk2SmRF4casbv0Bt7/gb84FANjOvBhpiZfXBc\neHwoFt/7UTXfwu+ZlZddoUb4EH4HQX4lnYPoQqKyA+Bt4CDGqbrY9aXB0bQa\ncZ/0Bluok/Y2YRnPu6HXUZOhVarsqMCCPGzTDgYX3DGNmFu/0/ZLcz+Z1oK1\n/5qy\r\n=sTSH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.bbd06696e.0","@material/rtl":"8.0.0-canary.bbd06696e.0","@material/shape":"8.0.0-canary.bbd06696e.0","@material/theme":"8.0.0-canary.bbd06696e.0","@material/ripple":"8.0.0-canary.bbd06696e.0","@material/animation":"8.0.0-canary.bbd06696e.0","@material/elevation":"8.0.0-canary.bbd06696e.0","@material/typography":"8.0.0-canary.bbd06696e.0","@material/touch-target":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.bbd06696e.0_1595462007745_0.5647917532761624","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/fab","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.4951e7651.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f67d14b5714509de9bad8eb88a4ade4e4b3bf898","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.4951e7651.0.tgz","fileCount":18,"integrity":"sha512-LPPHBZq57WKu9H8tzK0zflamI4EvIPNBTtlF7g99elQv82pF2mEwYbMJhRyNSc+rd5r4orBdf5pqAZ6Bx/s//g==","signatures":[{"sig":"MEQCIBsRzqs81VbrRLg2tItVfAOTU9zDJnxkC5yq6ZyHENC7AiAyz85zeV0iUABOE5zGNuE0jezmaoxLDEjbkmfEtBOFCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":275578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOzVCRA9TVsSAnZWagAAb20P/1KuZNBwVFVeyPtpEBNq\n+04GTUynFflUXyylR1Hqnn/TuP5nhzhW0dRkiBNPPfIO9nZGL/2MaxqWBHPP\nfX0nz+Ro7qHp7hEjpshQWN/vMUgcwXsRxobSi77gj6YVTLXbrUwOQJaQvdDu\nRtxFYv/5TF/JkgqXVibtx9db2GAqS9HzmMrwDfxmMRARFue7Kqijq+8WkjNL\n5KTDrOKKV8V109Lr1avjrlzxMURoOHH8lQIpRQ9/3ZLafwfAnqjKt5wxvqpz\nenqcpfPYgUULeUecPSFLpifss3q05OF7HZ6K+fYKRgcs1DpyFTK87a8XY68r\nSbdzFJB3AHGW/OaDkLPJNsAmWLQKtV75Y5bKs7Y9eOMHFKmizBbyXH/VA7JK\nU7fD6/gbFL5W8gjI7HwD86pSMFmSl9EYuyfXMIbltE1iIhUf9qRzRgB0T/W0\n4vhvYOxgGWu4uujKyGouyhQ9dwEdq79NgaW9ZPAgEDsPodvrqG5FYkzDwlcy\nvxnD1m+C7lB4shefelZ9xZtGFCK4RKFK7wgAOnNGKU8X8QgeGW6MogDa1X04\na0l25JmvCmRpefpfcNkF2WobSPmIgUVhb8k/8CuDQvAV4ydItR6oBuxuZ6Y9\n/G1o+m31ZpVHHowXZNT7g6lUL0nBhjL4GrMVGQ/fZ6dzc4AI+LaVKPOzxNua\n7M15\r\n=RfYd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.4951e7651.0","@material/rtl":"8.0.0-canary.4951e7651.0","@material/shape":"8.0.0-canary.4951e7651.0","@material/theme":"8.0.0-canary.4951e7651.0","@material/ripple":"8.0.0-canary.4951e7651.0","@material/animation":"8.0.0-canary.4951e7651.0","@material/elevation":"8.0.0-canary.4951e7651.0","@material/typography":"8.0.0-canary.4951e7651.0","@material/touch-target":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.4951e7651.0_1595469012642_0.6857758951782027","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/fab","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.75deebbef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e26c26eb8e803ba3a789df126462b64cdc71502","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.75deebbef.0.tgz","fileCount":18,"integrity":"sha512-uwLoK5iZLZ1naQdobbig8dp3k09IAqja4vTtYqqiPFFSdrxBneW4fIZDd5KhYxIaHfmbSLsIdPlQD4eVU79jAQ==","signatures":[{"sig":"MEUCIQDujQ113luD8Ws/KffFcuLcXXVv1Ik1cLFzKFg8CzpsqAIgCG7oQU4pDFa8uDkBtYGEht2ibd43/KHZNnkou57Gq8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":275578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGc08CRA9TVsSAnZWagAAinsQAJhhSvLW2SJGBydxQ6SQ\nY4CV+ubzGdar3c9JjUnGSOcyAKGEkj1pD6L+iQSgUEU3Mj3ED6VxQoZDRrIu\n0oSKkn0zSxEoGp1QVgVjFrlKSj6gIM8fTzkhWi8GXtssSFsUuj25l8mT7V+k\n/flo0Kai8R4VgWZkM79Z3NEnHStw0m5de6KqhPaiesYnXKSv0iqoalIvSsI5\nUSxzDrLucj+R0iqTfxvLAdDkH8DgrfN3qXA0b+s5fJoDbWTOHo6mU9Q39F58\n5HryDX0TozZF0kMVnhekh1xP4H1paYxk+oLyO558NZ2YfYNWDdp7k/dtGeaA\noHOdtUkVTtYe5djuT814Quf/pN4EFkmevFLb1aeNwOwHT6vyWuPdBIIydbQp\ncWpHiudwJOMmIHrDMvtKUvzNRu9pq4IgxHV7CB+TUpDCgydxtlUzvBUALg1h\nYuWrb95HNyAUhu7T40vli1b1nVA5LtLbbzORxOkL8PzYI588eybZcEW83HoL\nwvO5zap68Vm8WB7TryeTH5gnHPkYMxxTj8J39O0g0x8XcxLnZCbnFqS6j7la\nDd8e5zsSczQf8ifXOWQTeiBEh1856tk1Ahm8CWVgsdPAHsADxf59qdqpRwbI\nBN2Rsr3F3sG1uUD5Z6pxqgjOKE4lcY2wohWhccsKAU8+z9u7FiyoM7Sl9ofM\nRSyR\r\n=177W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.75deebbef.0","@material/rtl":"8.0.0-canary.75deebbef.0","@material/shape":"8.0.0-canary.75deebbef.0","@material/theme":"8.0.0-canary.75deebbef.0","@material/ripple":"8.0.0-canary.75deebbef.0","@material/animation":"8.0.0-canary.75deebbef.0","@material/elevation":"8.0.0-canary.75deebbef.0","@material/typography":"8.0.0-canary.75deebbef.0","@material/touch-target":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.75deebbef.0_1595526459572_0.2050259747413734","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/fab","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.95aff33ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff99ab40a3110aad028f4bf53b8b22830bd33e83","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.95aff33ee.0.tgz","fileCount":18,"integrity":"sha512-r8LzwH4lPZzuG1sEdrtorVQDrgEguBq8gvtLdARxJZ/Cp3ipKctMF8PRssjGYSyGEtz3I50boBCpU9TdHGHVtw==","signatures":[{"sig":"MEQCIG9FynjCYfQ82tclD92OMMb4zJUYhTM+eH19ut0+4hiyAiAJsfDcMtn9t3zPlez0N9eL60HxpGTylgWOEDxYUxZJOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdteCRA9TVsSAnZWagAA5gMP/jC50q3mZY1+/vu+44rc\nt4NsGcbvsCFaKF4wnrhOYt2vRWEPlnmxmvdC/1QfGpA0qxsFiSH+0o3Ta/E0\njLScwfEecdNDu8yZBxAXgrlE0cWJtNhBBKVsylU/HxjwkLQC96XxaSY2eKyg\nNOM1+wsjgqyt5IKl+aHrDtKYR4drGgjfhechX3GyNQUC8elxyZc4IHyFNpke\nj0cM0f9C0kl877k8EyKKX5Pua92P7ItXfDfpbA9UfstCMoN96I1GjDUmu3KA\n7YA2ZULDqvm8Tmd1CIGi3zt4DwOK373BDi+m1bo4C2wC0xZtPGLZhm+XQzOG\nAFY4CiI4XCP7cUg7W7HwM7hnRl7NUT0w8WX2K6F6MJ6mj///WDhVBwhd1sJV\n+9XNOgfAN9NSVPkJ9AK8EAWJKQzfSvrPMXtUqxwRs3tF8+rlGqIv8iuvDaMd\n3zrZwmM3rTZQmlYKvMTeukPs99NKa8m1B091tmKJ+GW/UalD3r7KVY/Svr3I\nLjqJZKBhGqOJ6pfASEykKKDmAFT9DP9StpF2eaWz5d4H/IQqgZCWFdCUjTN6\njcOvDKjDvEBcuWsphW8x/hFIlveVwMU0fluQbkZweZBiU6RS29Xcgshn0oFY\noKVT3mkV2o2mYsJGclcX2hg5xo6zaC7gB6pkyRQGxclYJB/0RPHW5RDqyd2R\nbp7U\r\n=cM+m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.95aff33ee.0","@material/rtl":"8.0.0-canary.95aff33ee.0","@material/shape":"8.0.0-canary.95aff33ee.0","@material/theme":"8.0.0-canary.95aff33ee.0","@material/ripple":"8.0.0-canary.95aff33ee.0","@material/animation":"8.0.0-canary.95aff33ee.0","@material/elevation":"8.0.0-canary.95aff33ee.0","@material/typography":"8.0.0-canary.95aff33ee.0","@material/touch-target":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.95aff33ee.0_1595530077723_0.27729245888675713","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/fab","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.9d9f47473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33f55120a6d067e3945543d78ef8eafb8b4d4f81","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.9d9f47473.0.tgz","fileCount":18,"integrity":"sha512-Bhfq9MKtSko1j2sxbZCY29UFQCRjQ3Yn4FPUnDPPfh2XvvSNU6e/kIPd06VuDGEWL1drI2JOcRbIAYxVLzd/+Q==","signatures":[{"sig":"MEUCIQCx864/o4/9DkI+PRuqhMF7z8VxD3+io7NVgnTsuZElswIgIXGd8og6575O0nS+UtJhV7KGaVE8OvaaEtU2PNiPkSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGewXCRA9TVsSAnZWagAAteYP/3NEdV2qgFOvzw1/b43M\nKCMSbrFAn+4gYxis6U5GpOvnnPvWecXfEuS3E3OVqbzkpydFGbsesifkJzkN\nV2skzcSN+UidVDKomEGzxzAO3aWcMoI3ubV1lKzrvKsgxpexBwuPSFQokhya\noTLM41RQvtr2hrAswuX8+e/hZzoXjaKlxaWG38hNCM0BQbAfKzEzHiemDWBC\nSwr6Sf1/nCQrRDOT0PV8ZjwAMNbnOcRfuIbT+HU4HHX+Sar4SwvmWi8E6V3D\ncsk0u5nXXBXD+5VbFTT2gmbkHtxMbB1EFY9SLRjl1v/TmKlzkeyygqKLHeBl\nJFjqKz+nuKmg2bIK4c/YtcCd1PEcSIoeirITB90qeIXBI5Nz3P2ikVhWFkxm\nSm2i6H1nxPdvLX40tTPK8/URQs0ChZXPBfTGLYS+cH/9Ulw224dzKdXoyR59\nre5kBASRx+tHey+zOIxSr5D3+0IzHtEEiii31laUntLhY0NR273AcPgdA73N\ngqomyWyZQe/eSBNgVWR/UDPOu/OgW3qAZCkJb8f5l52rY7jH3XViq4u5e5Dx\nFRnFX8O+VPQ96ivyMVK7xGgZDwzz/gdA5PjYLtWyaR5CsK/R+pIHNv2f+/Tk\nWCGJ+LMyYMmoQmJp6O+jajtPha3QBrSoQV81yA8+B6JKJSgDK44fP0sa92W0\n4YYZ\r\n=/htn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.9d9f47473.0","@material/rtl":"8.0.0-canary.9d9f47473.0","@material/shape":"8.0.0-canary.9d9f47473.0","@material/theme":"8.0.0-canary.9d9f47473.0","@material/ripple":"8.0.0-canary.9d9f47473.0","@material/animation":"8.0.0-canary.9d9f47473.0","@material/elevation":"8.0.0-canary.9d9f47473.0","@material/typography":"8.0.0-canary.9d9f47473.0","@material/touch-target":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.9d9f47473.0_1595534358855_0.4450440974171306","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/fab","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.00dfbf6be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d2b0c14435ba028596817af67e925567611d73c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.00dfbf6be.0.tgz","fileCount":18,"integrity":"sha512-iCQn1yTHw9eeoHJgwDqYgU0yd/DUw3OljKMxxNH6SoYL11BKJPkk/TEac02oW4cx6zpKAYUM9Tps/hv+r+Gxuw==","signatures":[{"sig":"MEQCIFkxG0r9rqkPnPduaCbXwT2bArSmFZfX8yLzdI+7omAPAiAqt8/MXLrrufg2A/GIzUgKIm2UHFU4qm9coP4d82F1Mg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfpbCRA9TVsSAnZWagAALRwP/j84QGKC3VjT0W6srDLU\nBwLbogcsmRiWI1BvLnWSpPnw7WdbloCPsDNHZcA+rBAJSGC9zF5dF3LfL8T2\n1Zx7I9pZai8eWynMISK80QhtCBcHO7jw3mqrR/9V7/Q/P44K84LlCIoeW66g\nOm9UWrMjyoKqh68zsbnBxPifZDX4R1ykJtZP6Th4wgTP+lb7KxjPffMTs3MM\nrHC6xnChXOLWOhjxK3XP7wzwuU6CrvvlvOtx1ijpTcQQovRocvupBsQliAjk\nCESt5XTU8EwxWBdBM0ABj+UCRB4gqyusZLzrGw5NSPq6fWxhc05atQD6hvog\nxppfiCAoCJhtNnH4MUKBuaM+xLjLh9hoIGFF2El3MLcvN3X/T0ogKIKDfWND\nL02M0S6+iftIOljUDF03SWuQ+B+mU8Vrjmw1/ylU00S/HZBoGQ87vfhCey8e\ntadjZU/7LftNIXG+5I44TXquHhP15LcTR1Lcsfq0Fl/cBqWTLmp5Xihg9ZAG\n+zvz5RydndRx9/OHYG5CLFAbDhsjOG0mrA5b36nstFGnjgycjnhbwHotODzL\nCiuRn2wtCJKPleWCw5WgC6NiCn8NYVMIrl2zpTvuzq9Q/zGrftPTITgUTQSv\nl7YZzGb/XJBnk2z4MoIPot5MHh8w8LcIWihzcWCY4uHphQyvUOPfi2lpMI+x\nGKUg\r\n=f5m/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.00dfbf6be.0","@material/rtl":"8.0.0-canary.00dfbf6be.0","@material/shape":"8.0.0-canary.00dfbf6be.0","@material/theme":"8.0.0-canary.00dfbf6be.0","@material/ripple":"8.0.0-canary.00dfbf6be.0","@material/animation":"8.0.0-canary.00dfbf6be.0","@material/elevation":"8.0.0-canary.00dfbf6be.0","@material/typography":"8.0.0-canary.00dfbf6be.0","@material/touch-target":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.00dfbf6be.0_1595538010684_0.5613488444945796","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/fab","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.b87e522d2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ce1432317f274c1e3530d7520da1b005389fbd3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.b87e522d2.0.tgz","fileCount":18,"integrity":"sha512-HSfzHL5aXA2Q12slzlFblQZ5gn/u4p7caU6mhusMld0pGutHF6LBMMFfMmNA3c+a3iYyggS72a2F+7PB5OANpQ==","signatures":[{"sig":"MEYCIQCqwPrqr2JFJVA2ukKJdMp7mo+15jtDRd3I9ZKJuzLYQQIhANq9DGFC6W9zK4YgvbB01owoP0eswAlFU0TGdlojoug7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf/7CRA9TVsSAnZWagAA640QAJxew9OUxMIEGn0gGIlx\nU0V5qbDQNPxxszKn3cVGdGpgaZ16iNhiI2joVx6cWtJ9PvBuZKO19myYy1/a\nCwKK9YTMDIgJ1481IPymYNLSeH6cn/S4Cvsb+oZtjfMVZBsinDFLMoo7j1iV\nZ07EBAR1aoV6IvaDVlFsh63zc4zx6FxUiGMCzM4yTtOJzv3INUNN0hptjYP6\nfz64TyJTDRwvyzsbmqbPaNOa+DJ0/ZW3aYKZSnIYBwgDTbKFDguYDNrVySkv\nYTzQIslXcRasSF14a9nXlkb+k3+al7UJTEwwR08B3OpT9WgdJLK0pXKSXzwO\nDWpoKpJXoEq8JZN3iulvT0S0+kATFkki/5Kc/CLGpPtLQ0WK/7SKj2w4c1/7\n/wBdbvQuigHkLXHdFXTsQtxTWMzQzeQKGqhdB7GFReT+FTd27Vl8wrZX5cgy\nId4GOj3UphfvMCbpnnzSdg/mfJBjrIvMCByewaqzPoSIl0XotwctANZ1HkFc\nuzxLLMX7I5i0q/rEc+9wo2Zqkf/pXqklPKb4JjIKMs3/aD4TttH2dJBwXWHy\nWH9Pos3S6bhVnqAC+94+8DC8AeZKr79u5AYGQw+8pyALLfA8QQt7MU+p6MN5\nBWqQLU6snJIgVHqdLHwRDw8OGC3V2d0658nMow0qWUflTV22l6kPUZ4Yo5L0\n/0Ro\r\n=pgzE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.b87e522d2.0","@material/rtl":"8.0.0-canary.b87e522d2.0","@material/shape":"8.0.0-canary.b87e522d2.0","@material/theme":"8.0.0-canary.b87e522d2.0","@material/ripple":"8.0.0-canary.b87e522d2.0","@material/animation":"8.0.0-canary.b87e522d2.0","@material/elevation":"8.0.0-canary.b87e522d2.0","@material/typography":"8.0.0-canary.b87e522d2.0","@material/touch-target":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.b87e522d2.0_1595539451378_0.04345920937142411","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/fab","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.5b3e150e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31dff4770b46c5a5e8c754bab5eeef47b21c4439","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.5b3e150e5.0.tgz","fileCount":18,"integrity":"sha512-sTkBDHG0bXWy9OxR1GUgL1AfpCYMJdFxt/4w+uIVsM2KYOlnKPLfA/yDzsptX62Mle+jgCg4OPCCP5tRxWXFUQ==","signatures":[{"sig":"MEQCIAowgZKYL62eU1p1FNs7eDvrG2Kw8TwcWFQoXdlyRUz3AiB3/+2FIbyfyICVYvrVsljm1+GXE85HhMbfU56gOVEAsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjhPCRA9TVsSAnZWagAAo1sP/ih2j0n5M3YJgiBBqWDG\nDYP6iaDh871zagZSdPwnL2ZWakMACMjx1eLJPzVlQz7rcwsdJvPqs0SViwD8\nia4eHacnMnwJPER4Smyr0x+11y868hv157e1ZrdqrGksFKTiVdMXej38NSrZ\na3MRvvk8Q4sjd3G6XDFPgbvTZ2mZwBM0PRuEpiI4EDCxqPfqXkFMVVRLkQPW\nFA+vSAJacD2Mj4xQqzRhrOwOtRnHNqbZDOmyPaR0bCYxLrAWw/YH5bhqdTn5\njzjhs+GdKYDkAttbsxaGwhRK/ohgC67mRycj0elVb9gcu9rrki1WTnUbjjmo\npfy++14V+t5gyVdEt/ZtYaykPn0H98ZPdynnXWWuFfRssFUkk07+jiVkOZ6o\nVbgv8BFlWi5bsgMXiMuTLv98zEQpQMRRgEg2cENt0Z/hKrj0B6LYir9oC0WF\n+zZ1LdXqADpN/UUV2h/z/FBKDNo8emm4Yj727VBCAsmsnu4SC/1FoeYOFMbF\ntfmmnB78+Bs9AguGYdg1T+A7u5rC62YDsJcMe5J383zOM/AJcHYCz6UHDlS/\nKT0KvyOVmveujcMTKHB6uvm2SCkbILCAGU0Z8dp/aUb5zAbv7rYZns3XSY4m\nWg695eI+Md1o5nO9XWWtUhFUoqqH87x3IpJ2aThpCYqujg2zHHdH5612ErtS\nDvqA\r\n=1yyB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.5b3e150e5.0","@material/rtl":"8.0.0-canary.5b3e150e5.0","@material/shape":"8.0.0-canary.5b3e150e5.0","@material/theme":"8.0.0-canary.5b3e150e5.0","@material/ripple":"8.0.0-canary.5b3e150e5.0","@material/animation":"8.0.0-canary.5b3e150e5.0","@material/elevation":"8.0.0-canary.5b3e150e5.0","@material/typography":"8.0.0-canary.5b3e150e5.0","@material/touch-target":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.5b3e150e5.0_1595553871454_0.47467873489855283","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/fab","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.f0ae11786.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2fd12af6fd94f56e81be707a9878d0f7131f854","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.f0ae11786.0.tgz","fileCount":18,"integrity":"sha512-/jBI2Lt/WMw4m9iOyqCl4g1I8ivvi01p+rgAdmLYq2/LD96TroFRzuwb1fIzlivioavQSnmwX0OOCRywHbcO7Q==","signatures":[{"sig":"MEQCIFwupiJjd2atK93s6TH5UI44AbLpGrIFpIIL4jv26/yiAiBrDFyL3SUz6QRg0kC2LVP2+Zop/NbgWuVCyenMHVP6JQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjzsCRA9TVsSAnZWagAAEQYP+gOy5K05Lo0UUYJeFK/p\nDxrvQfHl5mv/ca5XruT6bEQnupkWpElHcIDsEptx5/Vr+r142lzp4UiNUCR2\nnQJyP66TAVrQ/wuEqjoxC/Mfa5tdTNDyExscWmqYKD5vy22qJKFnvrs5l+P4\na1tN+bpDZSb8nYCB/he9r0rPYJ8FJHuuqQiNfQ9wZZzYF3iGg1oLLUTHThxz\n3u7TtLUO1jKM8g7ldtxTPo4SfC14RCTy80zARdZQKoCDGrJHhCMG3JMmcumX\n+Hyqv7nemJEo6yXN2pKYGo1Tpv9pyFzQzJyB9pjDQeisCLS/YpakLwbYE4Jn\n9zzGTFiPiNeHEhMCfp4abMhTkCtxFEJqEcudPCQkywDpIW2Nw1tPsyQqcP1z\n/yqadE7ub9t+nNNrhFXqr1JXNN2OEbZEYkjRkhgLCvdxsOuqm/WMbqqidDac\nkufhiKXEQ6+e8weR+Zc9a9OTi/n4OjTVRjIAJuyHuwu9k8CC3loI3qBigtIr\nbu3n3Mz4VWvfKk69GSHSsi3ogisWPaZPMD6I3RUB6e9IqCz9nlahiTgfsRF3\nAYjPtdbCa5mqsQ+Azf9f5EDH3tdoOHMGqQC7gz1kHRZQMXmWs+S7iP9vY4b+\npyaB9TpyTQlYmxGJTIPELU/g3I0dxa2flCpWV4BpVcIWV0cdStiiZFls2A1/\nooiA\r\n=yOXi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.f0ae11786.0","@material/rtl":"8.0.0-canary.f0ae11786.0","@material/shape":"8.0.0-canary.f0ae11786.0","@material/theme":"8.0.0-canary.f0ae11786.0","@material/ripple":"8.0.0-canary.f0ae11786.0","@material/animation":"8.0.0-canary.f0ae11786.0","@material/elevation":"8.0.0-canary.f0ae11786.0","@material/typography":"8.0.0-canary.f0ae11786.0","@material/touch-target":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.f0ae11786.0_1595555051735_0.992480954710721","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/fab","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.fb4ee66c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"196c5541f7eed5282ad59fe2384ff8e330d83b66","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":18,"integrity":"sha512-AgPlPiwMNq8mwuMdRjYkzMYBFG1EeXb4SY612sYKQ7EItV2OSYBtUTQ2U6/+ZKXgYitGFtd0VEhcQVqVaNvzpg==","signatures":[{"sig":"MEUCIB59Sr4FzbyNBk00K6s5paNCF1Jm05bzaXoZX5tw32YXAiEAwbFrnmgAOtvmHvKr7h0yrv+ObTG3YRMtWXFzziT4UoE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkNGCRA9TVsSAnZWagAAVrMP/0/5bd0jrQzOsX7Kqwmf\nz2vwtuasuLMOpTKrVGbpQFRcM571lOYckluDJnkBO621jMLSQOKxfQuWVkrO\n8fCtHc9fhC7QpkD8N/6YBWonKpg+bam+LAni4j8A1HVW4vsLc1ZrVXLT0dQE\nkMT2dpb4VFhrYQ4CiYbsDl0H9M19Ej/suVcWPl1/KueK3uVdJG3lctxgdvs6\n7HHO7wXY0MGGSgMPZ6dtKNnGsmEqVZsRyGbQAYRw5pSFfkrGi4brB1Gv7iLV\nfAgHdj2a+STetovJOtntyQCyZWD2lKvjDOZoN87a45MbjB8bi5JLLuLh8199\nrHFOuLUQRkb2WDjQRzmHaXGLEDYnzJAvGWDjZltK5WnlfvvjEX7eR2LJiGWz\n65FnwrAGUU7GgY2auz7cD0gYyuxHA8xMZgvvSVZSWRVPREvWy7jZBVabaehW\nnFDGABT9rmkLvV9ZXHlnbN6K4qNVw+TgOcgQLil0qYDlxr51M4fRFaSjxZph\n3PrY6GXknjnilF15jQA1P/ILIJtVmf1cXUywbU5q0JkUb6Xh/dD8ORH6gqlS\nJLYnw29ANS4BPJbnBx+pjiKfsSlNaG6KZNOQW6DzTuuFXVQsSmG5BfDexCVB\nhttQVJKJ78p63gWP9dzT7z5X3m1FGLxOaq6rVSec88bn2NB1Z3AjivcZY1JI\ndSr5\r\n=/8w9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.fb4ee66c0.0","@material/rtl":"8.0.0-canary.fb4ee66c0.0","@material/shape":"8.0.0-canary.fb4ee66c0.0","@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/ripple":"8.0.0-canary.fb4ee66c0.0","@material/animation":"8.0.0-canary.fb4ee66c0.0","@material/elevation":"8.0.0-canary.fb4ee66c0.0","@material/typography":"8.0.0-canary.fb4ee66c0.0","@material/touch-target":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.fb4ee66c0.0_1595556675795_0.7755970110634047","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/fab","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.5511e0aeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cff3189c0d77862384feef46ccdfb90d24fa2e7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.5511e0aeb.0.tgz","fileCount":18,"integrity":"sha512-vJ/7Q/HNOXQJBfEE0oUAFkqeX/e4R2YwcMNDfQhjAFp6gmVwvDZePYkg0m+kTu8/E2irYK2M7I7Js4fiof8DFw==","signatures":[{"sig":"MEYCIQCbS+k6RCJWXr1slHjYMf1NU3spcaiMkJwpqlz8p+XfvAIhAJ0BYpoeXPthDG3oIqxA6xDqdB/FLUYnj+BJoGkN3b5f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxLvCRA9TVsSAnZWagAA0bkP/0pGL4xQTXcMscwhjWMt\n0YMGilr+J2bt76QlsuvwDbMSXtuespOtTxXy197Bbik/MX61hlePp4Pvt3ci\nc13appzsqmaGUXxJGB39TF1VwFhsDaBKaFGsbKMTABDdT5/U0THZXw51/vd7\nzXX+DrEp3NWFLuuIznzggMR6pLBNdmrK2UMOlgzJRMDxAhWeL5TBvCKyj9zo\nkFDW8+bW7Elk5sn1MmEDGfatjJsEvygsN61U2HaPuRxSM7mYwnWOta5gB04V\n1tp4qSw+1cVnZwDOXnqSC/7rVJzA9bKXWEySw8JX1ZMkTcwEGVnTf8pPSWS9\nkaokqf9xzvu1B2ryLAAFj38zVFK9xlOJO0JyrmjKaKTDlI/OnVtGhJ63U7X/\nRGN8dn73DsK+T7X3w2GhCQ3xBHuqzmUP85e2pV407cpQOB2ATV9/CJQrafwd\nm+6skm31hEExWy7GtLawVThUVV/kXyRqd8Az0qIH+K1jOVvF8Dq0URSxRWDo\nppkR8iXNcrWmle2CI8NUx/WkBKKz7vv0+SC+xc5bHAP3kITY/ZR6fKwGnafy\nssW3Pasa3gb0CFnf0YzzWuxEtq8jf+4hhIACBIMCQKEzy7mYRLhaUIxzKi5q\n+w5n5s1PWMbuqXt24/QtU6jejN5mDeutpYfPPhswQEps5zJhsl0bhyuKRGms\ng9X7\r\n=yGl/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.5511e0aeb.0","@material/animation":"8.0.0-canary.5511e0aeb.0","@material/elevation":"8.0.0-canary.5511e0aeb.0","@material/typography":"8.0.0-canary.5511e0aeb.0","@material/touch-target":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.5511e0aeb.0_1595609839143_0.530608753671244","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/fab","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.8388a9bf6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52bcdde262bfce897740ed7f1623531644b56120","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.8388a9bf6.0.tgz","fileCount":18,"integrity":"sha512-qsobJbJvuQ4ls6z1Ozx5VRPKKaOP/yriSq9tVCj9rJKo5eEAIZQl03mccUTMnDTnJD8JCjyExZQNK6LmijSTCw==","signatures":[{"sig":"MEUCID8FoZd7zG6SWAa0pLTW86dXBqjnd/Wj5B5Fb8C0RY0eAiEAhJCqIF+oZW0Z07/APDc/RaA9F1/g8eZMfOGofzdMLtw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0EDCRA9TVsSAnZWagAA9EYP/RkxS8Fsekkxsz2zD3DN\nixBJZ9wH01L86TMaftET4XA277j6O0XdCnUmXSpE29Ay4SwNe+6cgZXfMs1w\nR19nRQkUO/ZB/myinUWAOIxtQ6aysHUGlsaCwx8b/+fhlBMmvyIxfKJvXUKe\npk0NQSusIzCiviC2PVvaf6i51+xonuSeNfRsVqGXfF/ofF1JGwaMtiZw/F7X\n26qYZwu7Y4/S+intvDyG2fytMnjyEaLkPe/ac9PARNxG0+xHlokgEL+IHlCH\n8jI0EvnpW9NMpGosr68nV1LFQJKdR5XOfDENhn0jQ357LUm9RNAOK9z9kIIi\nnnNs6aElaq+/oTBzzfQhFjgpQvSJgKRJ+ybXGloIjNxQCtWHyMCN5RgpJUYK\npx2Kb9lK8OIWTY6HLkU64l/Y1niQDSTvlEhVMHjlW0JJBDDsxT5p4uKGraZa\nTh/SaIM0IkxIr+ZBgiW+npjJ2HSGtSfC+MiH8B1ytDgHsWORSPKnMx9UEpIV\nSIzzn2K74FWfy/9EEjLmkkRMhRvTiiLIen9gK3LRDduPDFahSo97udMMO485\nVH+CHz7WnD+kfGYq7aFQTX7LfOgQZrB6BrvhTr+mQOtggMJyYcE2euhTE9Bt\nJfNmJmFSoIv4pDOgQuxCKumyfeh1K9XKTr2cKkAqKXOX0v8MV84yN66kNIhb\nqLBb\r\n=B60l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.8388a9bf6.0","@material/rtl":"8.0.0-canary.8388a9bf6.0","@material/shape":"8.0.0-canary.8388a9bf6.0","@material/theme":"8.0.0-canary.8388a9bf6.0","@material/ripple":"8.0.0-canary.8388a9bf6.0","@material/animation":"8.0.0-canary.8388a9bf6.0","@material/elevation":"8.0.0-canary.8388a9bf6.0","@material/typography":"8.0.0-canary.8388a9bf6.0","@material/touch-target":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.8388a9bf6.0_1595621634689_0.1304030827997904","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/fab","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.ac405eae1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa80ea506d2636a83c15b63afa7a6c483f4cec98","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.ac405eae1.0.tgz","fileCount":18,"integrity":"sha512-7mu/eDPvFen2jBI6qXt7bx/C1P+D6vgsu2QrpI6sLL2IPXmkdedpkTr24hbRcPXcW9bY+cm/4QYLxt+EEfq7lA==","signatures":[{"sig":"MEYCIQCyxKzVI6hVcV9jWn0TCnGWymCtx12PwtwrusQelM3iWwIhAKtSSp3eDIn82vXOwYlrkz4BYGaYn4vp6fPxZsrfxvyI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu2ZCRA9TVsSAnZWagAAXdgP/0RaoLNa37ipkKt0VD8K\noWGwcJd7/9mhmxDUDveaRs318T/RQ/v9wHVNZ2aE4H/brZ8/yaASUI4yZ1h7\nNH9Edt5nv0kTfWJ01JKOTpqvr1XDzrwg6wkeFR8zMQ2M0aBFDcrE2mH425yj\n4As2TxAH+PisurwrxzSH9UGCZKR4xOix1yy3BhPCAZRDOOT+PUXLGKo5AY7L\ndjwEUfZfHwzfjgx2c6YMy+xzwH4eUMlmEk6nOK/3Vv6hKdbwssCZBUdHsFm+\nnW12jNS4Gi9oGSLx03aEk9A+eFrygYQkdNbaQgLjZPsUCr7YtexrJqDB3uiZ\ndAXplIs3Z27zZ+hq9eduAjhIc8AjZJ+8IM0GoLrfjVSnhU7yJHlSLPMoVO3R\nMrzokt8BZsBsAZgcQVamkEfAcu+NtzJ4YCeOikObLAqM7AQjwMzIEGycPCn5\nroWzDfzPM0eCuOgUazSX8k7zbUYtbZEEERdxT4HvnXgGpKcxdqIOk5qfun0N\nbPlPgDTgw7dMuKMNPUu0Ytu1Y6jgjqcCZ3Pm3qTqTstMBCLeQZmu9G01Ai+u\nW0ZCcH2MHAb11wbgRO1DR2flSxX6CpmHSkigsaIRtGpKPZUpmXWKc9rMTAZ4\nnJIdlVXaVp3ZLwrvy8P9Fc1JdnA2CUBDjLNrzYRJFjcSX1A3s9dYZfODOMDk\nhzF5\r\n=nogm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.ac405eae1.0","@material/animation":"8.0.0-canary.ac405eae1.0","@material/elevation":"8.0.0-canary.ac405eae1.0","@material/typography":"8.0.0-canary.ac405eae1.0","@material/touch-target":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.ac405eae1.0_1595862425276_0.7733725613375064","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/fab","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.75553837c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c1652fda59ad83b0fd0c3ff7ab2aebf370d84e6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.75553837c.0.tgz","fileCount":18,"integrity":"sha512-eQC34/6YxORGXRFzlj88jTDoFM1i7qMp2sQn8czbzhYrRI0xzLaP11n1j+9eBrtVYEZKoiVJRnryx723FE5hag==","signatures":[{"sig":"MEUCICwYRX3lxwhWDE7lyavTNTEib025n3q3LBiyExHrUZEyAiEA8oD+7POR+B3co11V0ROHZa1Lf1lXIPEN8q5hUT/4g8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu7/CRA9TVsSAnZWagAAiMcP/3vBJYKvKaQyqLJNHn1e\nEHeIjR+ydvadw43wTL5E97IjBcCALhTyZU7KIUBLHm7Nypp0Ypb/HxWUyq0C\nPdHOMILM2fWeksiw1ZAxBwauBMnCo0NCAZjveP+LdkjJsJUQG76Z76hPs2ii\nZ+WOXS7X7BSl5tPNLo1Or5TfrV29pfNu279EXc47wVkbJLgxpMDXqpyb8l1k\nC+pNjnjwXP1qtRwXEfvdo8OAazGr6jwg30lzpuL+CmluN3u6Fjjx8QCrfklR\nM6dbrdTMUH0vb89+2uj3nJnOwLTtqLlqpGv5c4VxWuxP/v1JgHS26DClT0i5\nMsdYR2OnsjKGOVVD6IG0s5S6Im1rnxWHbRNAEwKdkPza1jWHMFu/Np4PeSIL\n5b8+ZNKUrnw8ShPGu0n1SJeVmKZS25dziaJy+OZ9o1GGjQd5XQnzA+7JAdWQ\n9I/9Ykm81QFLKgx785qNWUwHAij+5yVQVkMpoLMNSLIPxfULmsRhJZ/R2tWx\ncgae4Iw5inBuxHtNZav/upkFzoiggo6lPqazodr6ExOtLfKSARw8z+AYDnbs\nCXPeRQn+QcOXO2Ml2laB75iIg1dEIMQZNc3HZnw6lFahN81AjKb8kr7BBBQU\nWHYuGfJbCAsWolnontQZYyyRhelHhG0JyF6hQDt6n49ot/AhYFF9YISBLnMN\n+7SJ\r\n=jtg8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.75553837c.0","@material/rtl":"8.0.0-canary.75553837c.0","@material/shape":"8.0.0-canary.75553837c.0","@material/theme":"8.0.0-canary.75553837c.0","@material/ripple":"8.0.0-canary.75553837c.0","@material/animation":"8.0.0-canary.75553837c.0","@material/elevation":"8.0.0-canary.75553837c.0","@material/typography":"8.0.0-canary.75553837c.0","@material/touch-target":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.75553837c.0_1595862782786_0.9763646562849246","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/fab","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.b96fbfc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1c7f65f98b2686fbf27a569fd9b14b1de83d48d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":18,"integrity":"sha512-WB1iuvDaKmIgV3ENDoaCRrcRDueUDGtjjhA97IhjEMrgtdIcFhZ1oDBOd7aEbPkeGFEyH6CZJLU6RJpdkQbHQQ==","signatures":[{"sig":"MEYCIQDkpX2AqzZ3tdZ+uklH7ALSDOi73GdID2OtGMoLAMqHbQIhAL7QD8uJQPQErUShWS57WCdD3tk4BcRuH1SxPEJ+dKDB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvT+CRA9TVsSAnZWagAABkQP/j1dCleAHrEdtDmssqRu\nd7vvNWCL2tUxna90X5KMkhcn4ZWtAnwMaCDK0UJT+01LpBDjrqJsazA8F7m6\nO2atsPbTA9FjpOHqs0p49LL1rdLlDvrOj5L8yzXRlAoJWeUdSplohkFQQNgE\naRufhIZQcDpZJJfDWLxAhG4+9AqSORccFJ+TxgArfg4H2yqs9B2BTUGpJocw\n1/epU6+GMhCiO5z3HDm+IO6wD+gw8WUOyXwI4JpmNNc1YolPY9K5I1isbhYU\n5h/GPmZOFrfcko98shY/QtsTUMYurNEVRzwIclV7AgLEgT+9w8RJ+Sk/2gcW\n6A9vzqW4SIqGxQt7r/yjgTB1WBgQvaKgeXv02GCuRWd2Od4udK/MjCP3sVQ1\ndd6Jo84w81ugTSxcVYSITWBqozGSh2+RtCUnqOpYYzZhNpVQJEzqBc5BhCq2\niCk3t25VrAL/SYXyqZl7JQVUHGf/kAOP00Yo7yTXZvo+YRrCbN6lYQGWKe19\nuWiBGHZmqEfSaHZhrog/GsEsg8V209K+t3fGrsC5Nev7UogZd+ECqhaCdk7u\nBfXPHzeciIOisHaoDZjiUB54OcqXjXzSghS/5qMV2OoE/sWPO2nbmClxzsn9\nN+4fNTx8tbtH6evSW84N4V0MI29hVjoXTv1Y+CO8TaZcL4r5r98fi08mfDap\nze6p\r\n=+8iU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.b96fbfc7a.0","@material/rtl":"8.0.0-canary.b96fbfc7a.0","@material/shape":"8.0.0-canary.b96fbfc7a.0","@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/ripple":"8.0.0-canary.b96fbfc7a.0","@material/animation":"8.0.0-canary.b96fbfc7a.0","@material/elevation":"8.0.0-canary.b96fbfc7a.0","@material/typography":"8.0.0-canary.b96fbfc7a.0","@material/touch-target":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.b96fbfc7a.0_1595864317918_0.2808584348511054","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/fab","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.61f1a8d85.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6d04290c1ce40ac4b1b240f24914fd413a3549c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.61f1a8d85.0.tgz","fileCount":18,"integrity":"sha512-iq+ciPkhatqzkG0dJ95G1X7Coy5WqxfNj3RNlw0pjEMIY6xLsOo5Pm6lSqF8YDZ90TEMurqEx92nAIuZG8l2mg==","signatures":[{"sig":"MEYCIQC/8BQl3A10QhTXLSfu10+TDmNWG6u1I6v4ljQHYrReowIhAPckTwOhg7NH3ERnkEr70+skJnKK1V6trUbWSheHOQWT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvcdCRA9TVsSAnZWagAAggEP/2Un39aE6qwe/U23JMGB\nkGtXy75zMs4/XlNq6kEiWjfYxkeRgCK6VIqUaPg2J/N7/CtcPqkwdt4ZKBze\n1KZD32dHPeLkaBP7IDltmaMY97ey1bek1ADO4OLzMv6S9Y5ZaD7c7jubnzct\n0xP2NSPrXc3k1nZYGifq6QOn4Fw0yk8N8evREdetYtAnbgKhJqnlHlehrN7X\nVjZSyKR1AknKmpTxoz7tR5BoS5/VLs/9E2EEOO/h0Nqk9lVts/2XQvAHxhFE\nf5cMKm1d8kdGNaCwGtVGEQYgo2C8/QASh+vzSdZk2K7fEePTzoB0Ya9nI5p+\nFzNhn9UIoA4q4cn6K9Cla4kfhSylJ0NF2P0TrvszJ1Ly+ZcmnaGEsxj2a1/o\n/U+rKv5TI9qVDoP8Ai+/rNdvWJdAiPWXH/8u4VxFjpuei7T4pzhYNB+92Olp\n7/2kGdX93/1Azdh0HUXjstsfzs1qtPR5Zok4cRolyoQJ+Ytpu11VndiUeH8+\nLKxNuLXzM4lrVI9Tiusr6Gd14t8DMhsqhFmjxBAG4jwyErXljtjdq28P1UoS\nTpBk3x8e0VJz1XFoFMjiGDandh1S6cAdWpBHm0wf4a/ocp9qJHrH+fBjI330\nI2+qwOE5hz8P0u5kYRKq6Y8Ha/faFMcfUjGReTnkV9YzOg2DVt11F7Wfh+62\ncX5x\r\n=BUt8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.61f1a8d85.0","@material/rtl":"8.0.0-canary.61f1a8d85.0","@material/shape":"8.0.0-canary.61f1a8d85.0","@material/theme":"8.0.0-canary.61f1a8d85.0","@material/ripple":"8.0.0-canary.61f1a8d85.0","@material/animation":"8.0.0-canary.61f1a8d85.0","@material/elevation":"8.0.0-canary.61f1a8d85.0","@material/typography":"8.0.0-canary.61f1a8d85.0","@material/touch-target":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.61f1a8d85.0_1595864860579_0.9569873936599684","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/fab","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.81dc33377.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ed67e048ef82268d39ccaa6288637074e76e27c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.81dc33377.0.tgz","fileCount":18,"integrity":"sha512-dA/aRW9742ya0al/VLNnWKkM7g5lhLpsiiAiHOJZqxGutwB1X3DNX7veD0Zgpvrin0M25NvcgfDz9j/pmtF86A==","signatures":[{"sig":"MEQCIDaY4KMyThsVl11kShWKFBf9PU0QcRI/cJODsUTBYti3AiA+qm1ZxBqWfGkjFPxy9YkUoMWMyT2aQoYFCbQ3xN4/PA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvn0CRA9TVsSAnZWagAANKMP/1XpF2WkWy2Th8cV9nvf\nAnzBlKF2rgloB6/yKJQTnx8p6wWJ3imsAp8000muuY2oy7MKmfPU8fPMew/Y\n6SFGRnGlNoqIalmARZ9hz+D6hXfMf4l8ulkv/MNKwJ7g9DSgzsfaBdKm2Ulm\nf8oB/MUxcOr1EvLctQuYimBRwoE/2gUfrrmXMVs3UqwlsaAQd6mowhj2IAiG\naK1k0AzL4bnyzTV8S8HWjqTdjjH8637TPgOFx/8xr2ZiX4eDBXPirjfXrDlg\nUZ92NOri23rwypLYhSqqfaE3oJFtI4o8rJIJ/g6SLuEaPFNQxYTmXAg1H+/L\nZ5t1ZF1AV092yx3tbvzjZHt9TEN40m3zj3pVBWpqL5ohs3Y8yrNGTEb5bYKv\nU/tqtrewLvsqDcXjAAvKc8g3fz4u/isLeVuzUwflglNdgunLXX1PT5dMnRzg\nOtdAAxXAOhemZ2m3KrAHObKlxN89tQVd96NaMLdfumxPTrQDEhXkyngXarKF\npwy62i213KYT0yM0AEeKzbsQP9klrxaSNo0vrCW7c5tY9jUjJqyMrXhwnlfP\nuw7vsfGa5jvFoxSuvTGMDpQ8DeLJ7R26E+v6yQ75GHDxKjejnTBfBKweuOtk\nNwLSlfFxi1LqSKToU3VnP16tSTUfVg+Ka8a1eQ3ePDe2DOH4b//I8LrZd7zv\nnbWW\r\n=x5Qb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.81dc33377.0","@material/rtl":"8.0.0-canary.81dc33377.0","@material/shape":"8.0.0-canary.81dc33377.0","@material/theme":"8.0.0-canary.81dc33377.0","@material/ripple":"8.0.0-canary.81dc33377.0","@material/animation":"8.0.0-canary.81dc33377.0","@material/elevation":"8.0.0-canary.81dc33377.0","@material/typography":"8.0.0-canary.81dc33377.0","@material/touch-target":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.81dc33377.0_1595865587622_0.6499502704177884","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/fab","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.ffd9ede58.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dd764d262b6863751a567b67f08faed1c151ea8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.ffd9ede58.0.tgz","fileCount":18,"integrity":"sha512-e+BPb7GjwhEJjtnGPqHvY8De/nzN5xLHgFeAe9psV+8ewrQgNSOnXYgrkwPXMKwOHTmMgD5yQxsRqR5YbXaPdQ==","signatures":[{"sig":"MEUCIAIOlMl3CwvPbjuRT9Xonjp6+X/3+wPyMzoxMCKhDh+dAiEAwxBGd993XpXKZLEHAS50d0m2TfSjvCslcF+AVVYhqcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":275899,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwHECRA9TVsSAnZWagAAcIsQAJvmhbGkpr7tWJSWc7qm\ni8dgI2gaDoHfLscbS9PDBQZPtE0ciwMq8dlAO10KHuenKeuXrsTd+J4M16LW\nsBBOaCSvImmF4HKJhji8Grmw3UctSQTY1bQB4+TMNGG7SNFpdFStaLN1t1ky\nEa57k5k/UAhitIXa5FUIsPJmZP/8DDM4g3WZ6JChQ23qWdrGXYR2Ta7/tyH1\nmj8kxKtMN1gpsiovnmAN4A3LJ9ojiTAZRQ8sfMvDjTu0eBYdVhhpFOe9IdKW\nS4BFgvchv26ZYrsnXf0oqQgepnrkYpyvknNUQMLBoTw/37o1iXD51NyfiTw2\nMJPBndkpAVjBuESa6BNt/j+fh0VWDV2eN69+EWdqk2ScwJQc/JxTwg26iKTt\nBHlcvoGV7M0WYoeuWoWhcxL0GPKqzpn3fkJMyL7SNZBz3kwu5MC6zrWasZjG\nDiATqlGFN5R2G4wkSYLQUz0ZiyQoVZwow/TzZEiPO/ZznB9JA5I7X8HGdeM2\nk4PxsgteCTuBPfAsjEqPSVlODsngX+bIWO4I2ZFJZUdujOOXMy/C9qBNWKw4\nR3tGiN39k8+a4gxZbbvTwCKJpC8xahH/Qyyr7dpYUQN2jus3ZPIMHv+ViA0a\nC8YTJBh227bip9Yx6febSZuATuzPXDEvmILnrqeiYXIDirGAfCr5qFMQgyAG\nHJqz\r\n=KH7k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.ffd9ede58.0","@material/rtl":"8.0.0-canary.ffd9ede58.0","@material/shape":"8.0.0-canary.ffd9ede58.0","@material/theme":"8.0.0-canary.ffd9ede58.0","@material/ripple":"8.0.0-canary.ffd9ede58.0","@material/animation":"8.0.0-canary.ffd9ede58.0","@material/elevation":"8.0.0-canary.ffd9ede58.0","@material/typography":"8.0.0-canary.ffd9ede58.0","@material/touch-target":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.ffd9ede58.0_1595867588109_0.4117003875784655","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/fab","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.52dc55acf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50cb8e1f15864d8586bcd76abd27ae36e87fa4a2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.52dc55acf.0.tgz","fileCount":18,"integrity":"sha512-CKB/yLQa8CexyYUEWTQsZhL9IOydsS1bWSnNxgpIx2lqgQ2i561oO5FYnj8bmmjZByfzdD8Tass3MG7UF1vVTQ==","signatures":[{"sig":"MEUCIQDXHntTQg647+e1xGu5vxTlZPviiEuOF9FiFZOVOMnRcgIgItgcojCppYJIFddVf3QXKygv0ufD35aM0rEoZXtEtb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwoyCRA9TVsSAnZWagAAz78P/2cYmpNKFNdc5Ui3gW7U\n8ugX2a08CCFe2lRu4P7siKFtHN2qnxmyIuGqirnIRZuPVesX3m/7R5gx7b7s\nHX/lBrHE0BNE2slCPDB9XNqXG39UqKGcO5KntBvLRUmkaGWHvdqTBCNAZ6BV\nVPieIGb3scFDifl2ZL2FMJmDqWudeTlcuF433oosB+l2uyiafQDCceo22P8Y\nkmwpZeqv7t2aFbAk8WSn7A2wrrUKMOxbpms7q+Iy9U8IiCdTnW1E2/NLuUJO\ns6oLS8lX5uk7phVUPBsJd8nqEaQ5NTGT2/0I21oqxPHaAeZeao6fMQSogvnI\npiQbuXNKieaVm2Xdr5hL9HQC0VGMWEUjgxKYhW865mpg6KFoZ9tisaNPXa0l\n+1GV157+KhMHPuH7NAg4SR2QvJnn9C7VFX5ejanaQqoVmeygHeEdJm0VH+gk\nvS/jy4G+uMJzJXxSwMbAnJsxngl32AJyKc5OIWIT76n9cLDhMqDM2aiLvohJ\nLN2drY5Yqb7Pi5woRD7m+3goMxoIECm8cgEZGlA5TeYm8S/z3lcA6YoFVh+0\nDT+iW8lWjY8FIiKbuGuRbOvrKtAuK4pAVddDU/Jc0g+Q1L7Q/DcP3F4qJvJc\nRaVavcic1gsyiGgRDzQFaFZemcIH1Uwz2tnQcnJPquJjU0KPxgoJHJV2srrN\nTB9Q\r\n=KvO6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.52dc55acf.0","@material/rtl":"8.0.0-canary.52dc55acf.0","@material/shape":"8.0.0-canary.52dc55acf.0","@material/theme":"8.0.0-canary.52dc55acf.0","@material/ripple":"8.0.0-canary.52dc55acf.0","@material/animation":"8.0.0-canary.52dc55acf.0","@material/elevation":"8.0.0-canary.52dc55acf.0","@material/typography":"8.0.0-canary.52dc55acf.0","@material/touch-target":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.52dc55acf.0_1595869745679_0.9500209383245486","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/fab","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.d4274ff05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3495a6641ecf047291afe24b0f6e7d522dc3f2af","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.d4274ff05.0.tgz","fileCount":18,"integrity":"sha512-AYi8EKR9UDZ63w8P7bJ3aENRlQjUiJh/wPcxpielswLTBAtc6o2nnm26hm2YCBgfya7+c/8ygrXFSOzBjP7tdg==","signatures":[{"sig":"MEQCIHk9He1fAmxN+Dv0JJyNh4OJ/VM2xWcAJ7I0iF6EZp1zAiB/AcHAn8vg8cDhCsakYMh20SltFQmeGSZH+e38dKIklw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzBoCRA9TVsSAnZWagAAt9QQAJtoMZq/IWR6dYo7i6JB\nvr4rnpkuYv5iq6OLvGcPnA9s/ZfNM6lnjnESV6DZvQjDWXKNGIzYXLtLM3Gj\n6NS5V1gYnHOjUTJssvqcflwtP1qXs7LGkaLI/LuCSsgF65umvKPDpsVyMM7L\nwRs/l8LDLoNgUHJ+gusQ2N2xdjwyNijMSUldguBoynLgsSysCVIG7RIOaxVA\npKnowLeppv7kyzYMramV7xtpECrOE3tg9lkFM0ZwI6QHEPRKSi+hKp41xnHk\n9BzY24gGyNiA8ZYbBR1kYsT7eYEwMfWHkRC0EeKtv7vTtn99PE/sQ76bLdQr\n5KLkXugv96ky7NVOTFqNRJsY7RZmxOP/swvBvhNXj1TrJbQsBtt8rEPwjJ1j\nFnJr+n0Mdr/AeVCS/pSdAo0s2VILFYpay2cpKnKd2/hQKxJg2PyZnyvkelR/\nesNxIvnDh2+JTgToqzRf8A6ZB3RPuIvuynRVBMWc6xReObzQtJYH6N9DHFlv\neP+h9cl3BCJVWbB8hv6JQYytKVZxR3rp0TbjZbeLIrS4/RQnaEDxg1GczggC\nDW5+LgZ/w4u3HlzHR4V9wuMx4O9QwLvGGu9HGgSxsCytO8fLTFkeSA9L/844\nFtaN3+B7K3WygR2MTJ/Fr0LsuI4GIL8qfQTsh/jsQwT7vHCa64XsSDUCA/6T\nrAYC\r\n=nNZ9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.d4274ff05.0","@material/rtl":"8.0.0-canary.d4274ff05.0","@material/shape":"8.0.0-canary.d4274ff05.0","@material/theme":"8.0.0-canary.d4274ff05.0","@material/ripple":"8.0.0-canary.d4274ff05.0","@material/animation":"8.0.0-canary.d4274ff05.0","@material/elevation":"8.0.0-canary.d4274ff05.0","@material/typography":"8.0.0-canary.d4274ff05.0","@material/touch-target":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.d4274ff05.0_1595879528102_0.00504507569603363","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/fab","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.b82d0696d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c810e52e5285f2dea7b7e7836120970cd7d76657","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.b82d0696d.0.tgz","fileCount":18,"integrity":"sha512-dclT8+BqpBbDoGnuoW+Iq33ULsjV9Cx6OpyBNvNczqMFA+YjXi+s0OvA23jTDsMJ4NhnyIG2KgRYh3ssEVVKhg==","signatures":[{"sig":"MEUCIQCyzgKnt80taQpZBWQO/kOoVWGN84C6Z2wpih323Ik7lwIgcEq9koxHiT5lW61pODjOUwAx4ro+YcP0W9oBq8+APqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzHzCRA9TVsSAnZWagAAxqIP/3qnhjU6V9Uz3IkL6duj\nmiU05FpfkthozeZ6YnykmBUd/puxmhjyl7MwqHL6Q31IqbVKXFt9CEYvyE50\nnz5si3d5S0668hnn7LwSHzMshXNBLsj9NWnKEumoG38LEcHBpebWB9G2Zgl4\noAz0nWrgI4Z1reRbTG+/JBZl3fDHRCaar/CEiwiFTsFwCCufgQ0IKOSkLxIA\n6e/GyB+e66f9nF0UtlLnivGcINA38qHn4hPTRXz9nSzI5vkRR9tCBdkIyNNF\n7QW4M9Ma/vbtnqftLM9e5HO05Iux1XXfN0m8iO+Asf1dQ0hxlqaMGtC3mwTB\nPxIn3iahOheEOvfaLYIPJdMgMXF7z9IVnm2nLZ8jyU0tmHDdbWbvmqsTylhH\n5Lr7HhiIfQeNwctFZWrXZOvCxmJtIo2Vu4yl7fTOxGG5PGMfrOSS77U+IVsL\nR+OqHlgb19HhYuuTcezytuPsdQGpAEk24TMG0PQVkRIb0lfVttiwuAOuZSwE\nHPb+ynCpuk5FHl1FFlWlxV69em3lwUBXOCdEpohVt5KBvYbRePKULlvYRy+d\nTJinkP4UMOxFEvKmpYLJOVgiDFbvhejiG4TfetKUFT6WCUuC2vFsSFVERiWV\n2Lg8fc8cpub3jah0y7x8RqPahWXNPm9738BUW3D68//TudvNLoflw+8SVeQO\nmEoa\r\n=MxQo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.b82d0696d.0","@material/rtl":"8.0.0-canary.b82d0696d.0","@material/shape":"8.0.0-canary.b82d0696d.0","@material/theme":"8.0.0-canary.b82d0696d.0","@material/ripple":"8.0.0-canary.b82d0696d.0","@material/animation":"8.0.0-canary.b82d0696d.0","@material/elevation":"8.0.0-canary.b82d0696d.0","@material/typography":"8.0.0-canary.b82d0696d.0","@material/touch-target":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.b82d0696d.0_1595879922960_0.7803713705017432","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/fab","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.c2852000d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6c44133537b7377a2066a9bad1cd57a4ed50a15","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.c2852000d.0.tgz","fileCount":18,"integrity":"sha512-XVNFkrRnIU4wufOfgB1KNEC7xOB2CdTI5yNzO7eNRKnv5VU2Gy+yrH5csYPxVtL+hPvzVsrdsEjcTG4waWTqlQ==","signatures":[{"sig":"MEUCIQCPvWhlUdCP61SGr8eG2F0GFqtnaPSIOXctOlugozCnjgIgUSZ8SYE3Y67OdVAyh5JOG5EbMOhRgXbe5k1/LIlJl2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0APCRA9TVsSAnZWagAAJgoP/1S2XNEvQ+bxDcL8YWvj\nv9gTakjUrwv8CX6wlT/UyzKJLsmtwa+5I2QW23WFmNWvCXlXeSvLIv9qYExm\nmz3VykUG9yZ0DHpOvuaBS++XuhWYaYKVQP+xbXrnsOZLjENYfS6xkF46obD3\nO9OD2BlA+vf3u5Nqb6bycy4MP804K4qat/85Jbs4QLQOYS09YePsBA2ap3fv\nvLaeuXnKLLkPU/wbKECekPU/jmD95xsMAK40bdKbTWW4uY8118WYhILoNh+y\n8iQ2lNwAk8NNXGmQODoPglB8s0ffxi1nciIZyxO3At4d95WnAqOT4Bb6ODj4\nfUtI/VjsR7wELEdoEOhPWCfpE0um8UBBEMUU8D5hKs86jLaNUnQBJWmnGEQd\nenCiysCZ8bknPsD/zNgmzWXDKvwm5RZuJdex5wEEdb2ZrQAd83fkVeERzp5E\n2NDEmNZwlutzaSqnZ3RcoF5mFJ9rkFv2SgES7PIliefI62J28jQ3Uc1X2xee\n3Yj62XdqkU9mxVjDwLOHcOUuCFGhG+GtjW7owiwMGBDYt9dZ/pOmPIJQHS9k\ncZc9w6i+krnOf0TP9eznyigdi+TM5v4in1nMlKel6RZLezTNR0eTMtGh6xLT\nWWJXkYFZospWpOFRnDG7FT2zMIq5XDIf7xQAy2cp1liuRM/kMgmc1rT9CaOV\nB3Nq\r\n=AbrJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.c2852000d.0","@material/rtl":"8.0.0-canary.c2852000d.0","@material/shape":"8.0.0-canary.c2852000d.0","@material/theme":"8.0.0-canary.c2852000d.0","@material/ripple":"8.0.0-canary.c2852000d.0","@material/animation":"8.0.0-canary.c2852000d.0","@material/elevation":"8.0.0-canary.c2852000d.0","@material/typography":"8.0.0-canary.c2852000d.0","@material/touch-target":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.c2852000d.0_1595883534553_0.9327444775353504","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/fab","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.f86f83f54.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5f7bf426ab0b979c3a1280078af8b985689a99a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.f86f83f54.0.tgz","fileCount":18,"integrity":"sha512-dhonO5+pZ38Mu3VjnOzpPyMZddH9lMtZ1jr9VrX0ok9CL4yO2XEt4NdO/abD7u7SGLvs3D826oYwc4ZJGDOHzg==","signatures":[{"sig":"MEUCIQD2nTnktY0cwxsouA30bEt/bTT56PWQbL3pDzUm5sgGHQIgbSPkymIDZ5Eyc4M1oGL6/m0rww019JrSxTiLu5Dfv+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":274631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH00dCRA9TVsSAnZWagAAtIMP/jVK1xHzYWulaoc/po+n\npUHiO8zG2euuBDAU460jP4fjJcPjdOHbp4m/4RPqjJ0li+wNqD4p4bj/fu3d\nxEso8l8rQXZYYTwSaieTk/vdHcttc4bE1xd48gnPPnhSsyyqD/YfgSIJ3UVr\nD0YSF8rW1NWjXa/f5yPZRBW/IaR9oJQwtqwjLC4MNJ8FB8dUSwftlgQ8FluH\nkhjNzz9l79tDebSkK26OyUeAeSH6LWR9qgyG/P+5INc4fBNkAsfGOqASnq/5\nms0z+s5hdR051B3//x0pJ0v0gxnfTvUaronwRdhoJXNWjwNwjudL5ra5WOw+\npQbuifUhmqfdHaoO9/nPRHtj9cT9NhvZkPmce4jQ42bwzta1DDZhjpRNfijr\nFxn4SLdaytVvcHyMDBmedRCBI/NsyOmzgU/w1AIViN5fRbe303vZiUiX9eYd\nnfvFGZKfhSnITD0EqHUfiSSykweyeYXMOMrO8O+/GMta320FTlPc09s4megJ\nyUEqA3FguYG7LqjNKJGqhOYwXIq7VLP3DJeL7uLbeX5wAfByelUBuZCRCFnp\nqVNyynyWRI1zKnKASGxD8l5T8NKqo4IQdbVR3VggosJvPBljHWKUAK4uR0GB\nG85eUTvGhOJz7gHdqLa5uxX0/AMhGS8R+UqNdTXfagoVKK+LUEOrdalNgr1h\nL4kS\r\n=v1CI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.f86f83f54.0","@material/animation":"8.0.0-canary.f86f83f54.0","@material/elevation":"8.0.0-canary.f86f83f54.0","@material/typography":"8.0.0-canary.f86f83f54.0","@material/touch-target":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.f86f83f54.0_1595886876734_0.20701515179326258","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/fab","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.41eb1684c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2759d9faf687a00ff1b1584ebe640fcfdfb28a9d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.41eb1684c.0.tgz","fileCount":18,"integrity":"sha512-QduG8HJPPan+oAfvYfdktP4rqdEecp8uz5CCK8aNT2UtV6q7pN7IDMi6d8hennb/x0qK1jgApeMH4T4rOUryug==","signatures":[{"sig":"MEYCIQD2RqizHj2NYSdY1l3qfxTWkQV+3Pi3YX17IwCnsff8BwIhAI9iQNZtulLKSCvtiEIwO6tecgSDZSW560/wZQpHUa7p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":274631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGWECRA9TVsSAnZWagAA/bIP/Axlj/VwbJ7EoyOOJMq5\npakxc3eALPCDP20xyUBUBoQdesQ/fKj2pszEnt/fBhkM/ou6NaQkU0+FHygZ\nIfOzskqMd1JElbgDo/g4LHndM+HtQgXQVprjtBHJbEkiU6uPsgHd7gZTu0jG\nyzHDW33ftdgmDZ/O8u1eUsz5b09PVYZxyckbvlRa28tSiCBQH/v8PBlP0l5F\nXOwnbK4LA9tj34alHsYi7VxTmvtaefugzcmQ3fm8UfrI0NFCiWaIbtJTN9aU\nVCId6o0N2FuMGFjvio353ilP/nyTNgnCJiLZr7Jc4ynUlEhckuFOKOfXeGYP\ng7vWlqrWrIjZWKJNcbc5itjjNPsdC4ycatZ6J4pbnAzw031oaeNbO24u2wSI\nOXkF2X/0SrMB9iwQOLuvUNUnLkMEicuchRpZS47ZUn0n2QsBqjPVyBDjXC9g\nvusMIVJGAhHwFKwXaEH/jTvMg12qrSxjq+RSUmOaEyKxaqkdStrBg40CqAxl\nSENUyyAbP7zZJ0arqy6ehNNW5YhDOkMaDoiIJHwh4XOsffjLeN0YRPFHCI6u\nR1LqH1y6fwr4egJIbGbWuXqd+zsfLujlIecVjO4COlJXCyDDefEfGZjc97Vd\nsc5xyIZj4PUIDL+iblMptv8PELOeJo8qYYdbmNWhv3nsEUCQfPbDIK8HkotQ\nec0n\r\n=FRsC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.41eb1684c.0","@material/rtl":"8.0.0-canary.41eb1684c.0","@material/shape":"8.0.0-canary.41eb1684c.0","@material/theme":"8.0.0-canary.41eb1684c.0","@material/ripple":"8.0.0-canary.41eb1684c.0","@material/animation":"8.0.0-canary.41eb1684c.0","@material/elevation":"8.0.0-canary.41eb1684c.0","@material/typography":"8.0.0-canary.41eb1684c.0","@material/touch-target":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.41eb1684c.0_1595958660118_0.6975298043496636","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/fab","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.9e2f6c450.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65aafe6bc377deba81ef84e3e702c1cc1fbf06c7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.9e2f6c450.0.tgz","fileCount":18,"integrity":"sha512-bAAcLr+JKdSadGFl6aC2Vr5UUH55q1pK+Kaz+owyh3yPGNPaP+nKi9s/Tc35I2CD1OIE5XEhJScvHMwt5SJOsg==","signatures":[{"sig":"MEUCIGH9sbJBqJLmz4HtezaZH47UPpPGm8ClFijqRaNxYtPVAiEAw3li73Br3epad1Ptkz2G6ge0kVwf9yVaHwRWrXLmvco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":274631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKk3CRA9TVsSAnZWagAAQQ8P/1ViK9l9I78TEoBGg285\nGGBjCzcP8hHu6PHQcnlpaNDEiBoDBz43bK0mtAzgDSxAF8RMVtgc1VGOdiGj\nfcnrhYNnRbDQG3UEuqPGz0GHT9H28MdeRHnWTV3+VVRU/2O7ZEOn5p62uIUI\nyjjuW8BNsGPkiUyJglgXeAf7ETeSiEq9XEXfCIHEk++zaJJJfNxyovpeMIB5\nE9LkMFLna12HWRqMPEqK8BhiPIwybzDf8R4fu9gVyvAlFAv2FdWotKUj2wXO\n7vZJ+DAFTvnef7huIj0F0cEOlRSnoy5U9kHASK0cwRsp02qFiQvExyaKM1e0\nTvyfw+neb1sk7FHAq2Rf1NUi+xAzH0i0qXCEe+afnDJnQmnY3KE8oCHpIFXh\n/LVqseJoyoQdOJYyyN0STbQkHKOzZeRIDDJ00JAHawKVlGgleYV3HMhyR070\nffEVw5xUBU0Vzuy/A2xArSbw67mqOkc9Dn6Wl0epeIkK9paNNaMIMWLmkUCC\nIJapXgftAFD50wozRXy/VsjV+8WcRH8rYyp1bnmN8bXnkVHjbskpEIJtw+sm\nPPQZLb32vGoYdmr4cgDBCjHEKwppQra2Eqs+t1pHSSiu9R7XaC9m3oR0gqcM\nJVNX5i09zk1RvSLZigZRH5OoWayNi8oQY8qKw78By/CDxWFqneh+vskZhNTf\nxdjv\r\n=Avza\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.9e2f6c450.0","@material/rtl":"8.0.0-canary.9e2f6c450.0","@material/shape":"8.0.0-canary.9e2f6c450.0","@material/theme":"8.0.0-canary.9e2f6c450.0","@material/ripple":"8.0.0-canary.9e2f6c450.0","@material/animation":"8.0.0-canary.9e2f6c450.0","@material/elevation":"8.0.0-canary.9e2f6c450.0","@material/typography":"8.0.0-canary.9e2f6c450.0","@material/touch-target":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.9e2f6c450.0_1595975991368_0.5885889347562869","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/fab","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.e6950b55a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ec6d83972be0308d33037c44c58c58593799f23","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.e6950b55a.0.tgz","fileCount":18,"integrity":"sha512-DK5+aBKcdNoL36IMV3wLkctkhKAwvCWpv3VnwnlqrwNg0iseaP2R2J26WcUVg7rYIP6SkJfsW1GDPghujZg7rA==","signatures":[{"sig":"MEUCIQD7Nzs1ctf8aoZ5AhF7XdGRjXwynNJRM9CsJLLujxwtOQIgIl1DA0ryZcvGZZea4aeaYg3C+O53LXG1xvExtveku18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":274631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKxSCRA9TVsSAnZWagAAvqQP/3iUTkyg7OPW5NZNiGOB\nV30SctFJYelb0nCwyADxEbvi4QUob4aWMqETsqu1vc2HDt/ccuVffzyGjSaE\nwkdtzYwAc65e+KG02729SMS3uF5yKq8Zo4aw4XcYbgRkjeEX62jf9YY0/AO2\nw0xcE4D7qF6eCIqtulF54naVvkbk0HXVis19dcpd+N7NeXXgn8rA3CltnAFd\noVmxqxX10enu70ofrZojGFuE2cqvQR1QL/Iri9NV3tpVM+o45hVXYqktklVx\nRRkF/5lgL7HBJZh0WKJJlYL9Jrrp5FFFikKfMCsmNQHXiqnNixwO+cmRsx8X\n5l8WVQNfwRFhkiiCIDBc0QLHwwWI6miCkN6+WWNdd/rLaC8wDYBFyqmXHMdI\n47+26Y7oyfhjWgjS6ySAaU9EayroOYE3U4JBd4wJ4WgRD9GmDuU3y0g/GzSj\nyn4kHQX7/+e946hQ3UwmxQYgjkU9urlgkClrH99sRzeMrFWWx/I0n5YjQyzx\n7uU9RHbyjXdEPI1q84rTplpdslJ0hFJbapcAWBEEFyAMxzXseDkzpp2Rf0gG\n8bWAYdyStWBPzpDFn89/19SJczBPDCz7tPzx9AZz/5FBpbr2U/oM3pnCt/hV\n4FlPXFK2JKNveUk2nQG8VnKeRA2HY+xIe/W96ly9zVaodQm59MYYiGmRWDwF\nHT68\r\n=Ks7c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.e6950b55a.0","@material/rtl":"8.0.0-canary.e6950b55a.0","@material/shape":"8.0.0-canary.e6950b55a.0","@material/theme":"8.0.0-canary.e6950b55a.0","@material/ripple":"8.0.0-canary.e6950b55a.0","@material/animation":"8.0.0-canary.e6950b55a.0","@material/elevation":"8.0.0-canary.e6950b55a.0","@material/typography":"8.0.0-canary.e6950b55a.0","@material/touch-target":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.e6950b55a.0_1595976785928_0.5743347754563621","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/fab","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.5e51ee38e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed266ddc3bb1a3b0b0b4e20414b3f08e72877657","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.5e51ee38e.0.tgz","fileCount":18,"integrity":"sha512-sXMBpmR95m5eUA7Xwzz2In6fRppSj+7URfO2tIOp7AtfTantYR3cPcy2l3NBgdahIll8Iq+ElAZGQIndh1HgNw==","signatures":[{"sig":"MEUCIAlSShAWFPa0sMtX2AIDixHkN80yldjSwtAz+w8KXjyxAiEA47OR4kvcr4LMOSTWp3JWl0RU04b2JqdK/GL0RnxalF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":274559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILHTCRA9TVsSAnZWagAAN9EQAKIJkDjiHZNa1nPJHy8Q\n0cr6PMJ6gGnxh03pMcg9kKxwbMCW4z0srQcxH3EPm7GOMxA/TXhHM70bdLsH\n0fhYDU68XuCHurbemPcdfv3JelzG6LGEm+AQSWMcAZ4HDSDicF8YAy7XZTX1\nmH1/5HDtnOCcFHVqaHlI08H7nhBatUmWV9GRBXEd7/3FR3odgUIiuPXC2Hv2\n7/7ov2uofs+PrrihW6GHYd4g+N+YHCokvAEgcWzkslysetAMUApBFDYyhW6S\nVMeYwkYPhjZkwQt5nh52t2A08EWnbNwYSVSLRNL08sVuPczm+3+ejt6mQlLx\nuPdmqJzAmUjLMpL+cI9KZvrzVVVl/1xJb0omjklRloqDLClGZBfp9epmp7vO\np+rcKtD9oB6DwO5JixO8OcX88JAko8JI4Qn3atIMXqNf6MflgTNBEpKxY3Zr\nwvbYc4Q73DooOEy1TghQun8Iw0+P18JBqFibfQZBHgePaLOSUoHVRHbwP/+N\ntb61JVjS8/HY1050q+pUNF0o/jm50CZGVVWCubWNVLNJj9bSu3GAxsVoYenC\nC+A6/GW9QkE9OaC0Pvs7D8uJmriojJ/UaKiMUTg0TAJpJXydifyjNk3TaG7K\nio/S/YfgIUqkE1moOOlaixwpd5cuXBltWAOwSORgDmxwzyvGxXW9BJBpxHt2\no465\r\n=f5vE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.5e51ee38e.0","@material/rtl":"8.0.0-canary.5e51ee38e.0","@material/shape":"8.0.0-canary.5e51ee38e.0","@material/theme":"8.0.0-canary.5e51ee38e.0","@material/ripple":"8.0.0-canary.5e51ee38e.0","@material/animation":"8.0.0-canary.5e51ee38e.0","@material/elevation":"8.0.0-canary.5e51ee38e.0","@material/typography":"8.0.0-canary.5e51ee38e.0","@material/touch-target":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.5e51ee38e.0_1595978195271_0.24225367150618626","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/fab","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.a3898ffcf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"096a8bf8008ced0e9ee2805c35cc8b117182eddf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.a3898ffcf.0.tgz","fileCount":18,"integrity":"sha512-aW9WhQ2wxasumym9M7b6fVrkD1BQZ2jpMm7bUHZnq9fTKpRhuAbThQ0/2Mnw3Z/OTE66o2M9Mmj9PGL2vDez1g==","signatures":[{"sig":"MEQCIFl6f8QO9Y0fsare7RmT8zfU3BGIMMLbPuHwOzXp6A0yAiAd9/WeJVLDSQde8OVHBFrRmiwM/Zi4Bdo3Z4fo9BYZfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":274559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMSsCRA9TVsSAnZWagAAhmMQAKQBQkXlqvL66FY8F1VU\n5VpcuED3eTuhpLzmC/mJCJrc84W0qykmcJrmSVE77OPQYRfdhO1JOCYbv1R2\n8U6OozvZSG13+NnK24tmuWfyC33pfcHf+STeN8mOVWry8bARZ7vs1e8h0YR/\n2/Fr4dWNPCXaCWM27gV7KI2dhunrUgC5ETvef9TICsb7BS4IgEtX/wKdsjAH\nQ5bapcJSZKox1MZ8PxLaNyrhneZV8nqw6WIJGcWj9DqUfveg6ma/aPkXom9y\n8rHrzo6VwEUFqJ1KHctdzrb4iXoWU+gqbLZzDy/rXWm1jzNZ+tbI8iTFeWVE\nseasieDHNTta5l64MC0u4xVGDBpqB53ONLwOguTj39qExgus9NvntqgaRz6k\ntlNRLmC8C/yF6MzwjYSAYbJ/cnHV7EMA0OVp7YQVhceYPQRLU6nFAGbWXYA0\njceA464aZOkjsbWwQjdvHcISDi+2mzu7hGJOvv53dZ2WxVbPU8xUD6bbnMvg\nuFpBLB/byTxS0HTkAmWPq7AiNbsHdIl0AtsvIGKW/zy2mPM6f9BsAe3cGP+M\n55u12En7elhr1ALpCgvzqdjctnwBQRdJtVqjmKw+o7T5N8MmlmPzmJ704gDc\nCymKNtEEQZmI6jXA8sCCO+pKwHF6s24B+ymR7tJlezbAHEGxGaV8lsuOjv0U\nqS3t\r\n=A8zN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.a3898ffcf.0","@material/rtl":"8.0.0-canary.a3898ffcf.0","@material/shape":"8.0.0-canary.a3898ffcf.0","@material/theme":"8.0.0-canary.a3898ffcf.0","@material/ripple":"8.0.0-canary.a3898ffcf.0","@material/animation":"8.0.0-canary.a3898ffcf.0","@material/elevation":"8.0.0-canary.a3898ffcf.0","@material/typography":"8.0.0-canary.a3898ffcf.0","@material/touch-target":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.a3898ffcf.0_1595983019515_0.6915070925510298","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/fab","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.bc5cc6c96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d64de0dd12b0d73a6c5010594c189028e94ee16e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":18,"integrity":"sha512-nEjn6s6Scgb2E0QMs2GJOUchlqyJaY53zOrySIHW0od9HMeZM2ETq1PO2QEVPQswR36Ra9bzxmBtUYB7xPpYew==","signatures":[{"sig":"MEUCIGIQlzYsTxw89tXvyN0r5Jt6DqjMPsOGs8tK6tnDc22UAiEA2fr/J8CshyNTZUOhg0zU/nfupkY9JmWYBn824guD0bM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":274559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMerCRA9TVsSAnZWagAAxg4QAIHH85+ej/cuvMQRUNMj\nuaqOkdU9UAPHyywjtGR6jpJMZPPIJ/jKyXKte0nRcPhW6rz5snMJLPAzXtok\nihHWXfAvcyaKSIvRPMRVo3oaGW2OPEvkgwPKiQGMBw3e2PwW3TqRXgDNt/mf\nkk3C57xBJDi0Zoa0zO+nQFXfkk5nvO+QPtcT8WQ7KJAlS70MnFIx+cJ8aDQl\nqps3N5NcqHkYsF8hK44Ka29FT9fC9SwuoP64/wjhn+UVPU6+9M7xW2mDbG9w\nEUzKsZGPhUGLyi/nGCcJxd4AakmyYE6+jacjg9MIFENuNCu1d2/hRxJkxB1B\nypTcdfOJ3KgGGFjJZobTZ2uhp5L0fF8u5KwxyRV/CE7Yj1GUxmjtCb5H5Nau\nCwlTvyDLqYWK5QFnYnmOCOmkTjXm6L1W16/T/6lQAr6TGViBZe8NyNkyrAip\nipRQJB98j+xh+Lcymu5j4tK0Zlnq49Afz/e2ioX7Hn8odpOW/AmWI7jP5KEB\nBAA5zPGKuZRABxWZ7nJKZ8GKdUsTF1I52k54xvpxd9AuZtcaifPjRsVnMomo\n1EHrAL4LsriuWopPqLaApeVdbmHV6LBAefvLdaetQGx/Fx7aUfZxQogZuwXY\npoC4lz9cl23A+zxsToQxiN2DZmGdBgBGkS7nlDIET2Pzdlvxf1xmU/SszBnU\nWTCH\r\n=TGfy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.bc5cc6c96.0","@material/rtl":"8.0.0-canary.bc5cc6c96.0","@material/shape":"8.0.0-canary.bc5cc6c96.0","@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/ripple":"8.0.0-canary.bc5cc6c96.0","@material/animation":"8.0.0-canary.bc5cc6c96.0","@material/elevation":"8.0.0-canary.bc5cc6c96.0","@material/typography":"8.0.0-canary.bc5cc6c96.0","@material/touch-target":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.bc5cc6c96.0_1595983787208_0.5005130146980119","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/fab","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.9bdeaf928.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b9ddc2d602ae074eaece937d3c2c3e8c40e8768","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.9bdeaf928.0.tgz","fileCount":18,"integrity":"sha512-Fr0Ilf/KTXeoSRhOHSDIZ6oyAR/z6WzXR6gzs1U2N02XbSJV/3HOH7hj3CoHsbKwsjWUCAL6DSSJciidt8EMlg==","signatures":[{"sig":"MEQCICjGT2Ezi2//5ShkYKZrh+vCmufkC2vnHaMTl3Vod4sjAiBwi5T2oqMUqyaeX/9FWUgrC3ltcUlkT1CzHQP9m/QhZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM8OCRA9TVsSAnZWagAAz4QP/i4xZTaXS+td3AIMB8xG\n1cnMszeEanaT1oZMXC+WkFrlj+DQnxDN+qwuUSfHBoZmQJy3VM6bGfKCrOns\nMd+4hAz2EY+Zzkw+LokLHXqxbK8sqWPfLIDG5ro2GrpQKmK/unKPHy8yT+yg\nu3jGTh1Wo9zPb34MXnx/dT+6wcv1aZr4vbsKHZqMcb+oR4CjtzaAR2AWJnbe\nquS3zu9/XZ/O8fDiT0T7U/CxsMlh1aBwh8pZYxTLI9xBNB2Uy0QkqyjncBlc\npmiMUKGzEwKrR9chHZMnCKcJ55IPvl/paa+by/Q7ytIz8N1MRZYdnj02O5ck\ndl83sv36V0PPzpGiTtUpl20ItIqbKjqIoaqFUiSUQhYOBNIRQWaqsDRMR4Yj\ntI4wBWyzZGma0BtSb4xTO7ZMr4L1Z/i40D5mobFAn+BAXaJCSFu0Wc3SHpgP\nySwfm2Rfs9TpBkP4zLvAyam+36cEskZ2RmJ5J57DKPJ0Pz0TZ9d2FQ3ZAL2I\nDrGRo5eTzQz7uWj15nEZ1c+MJ0fwSOMPNX4PfBk3kxcz5KuP8TnuSI+LRYYJ\nOEBkEOsZljp66YdA3/1v7KmsaXe5y2uc9W9ENBCKwyiFwlvNhmmgrlXfObX5\nDdPPK7CapeUbrSufAPEUHKtk8GRp+Gy2vutOHR3E2eEjdGOK8icEO/n3PAKJ\n7XtX\r\n=ypm2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.9bdeaf928.0","@material/rtl":"8.0.0-canary.9bdeaf928.0","@material/shape":"8.0.0-canary.9bdeaf928.0","@material/theme":"8.0.0-canary.9bdeaf928.0","@material/ripple":"8.0.0-canary.9bdeaf928.0","@material/animation":"8.0.0-canary.9bdeaf928.0","@material/elevation":"8.0.0-canary.9bdeaf928.0","@material/typography":"8.0.0-canary.9bdeaf928.0","@material/touch-target":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.9bdeaf928.0_1595985677741_0.995402770495369","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/fab","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.fde2c1f9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42f59104d52f9a8538a8fe4abfa67755beb483e9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":18,"integrity":"sha512-t+KierHPUl5+Y4dJ0dTjwIuxuJ7Ha8XhNgrDfHe2W+grw4atwjYtQMdUmlMEHwlZ4fswnE1gIQdoYaP+MV4aoQ==","signatures":[{"sig":"MEUCIBPwetzOlW5kiHuat+Sk1bQPbaZLu5YQVBbAmMjGLpkSAiEAv/9yfBSELgeKqs4O/Zi8QypUfElI6FadOY8TeM36Qsc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINJkCRA9TVsSAnZWagAA0NYP+QExXskasshoKo3hvOQ8\numa+Ol6MCMIuyZnYHZLe2pl+2zU74whEQwDR0GkBraYM5oXgFmZRkM7tFY8y\nPH7u0WKt0YbiSAMCOK8AC9qioz6IGgtwdS6ILoHGtsHbrxv5mD2mbehBQB+V\nmKuw7pz0kIa7VtkTZuRDYVoZTWkHuT1dtewNcMF/Q+T20D1a41Qp99GuAok6\nskhx6fS5AvnNr4Hf+NkSHJcAOxeoW6ditWLpUfDm3bfoQmYkdrzvTG67SJ7p\nJ0RcFVjDhP0VDZX2APBM1BUtQDPUoA71zXECkymKqg7IQgYLcm7YqL+q6Rgl\nnWU3dzgxwEDT9lvDDvdiPWWHtXll6Rh/a1wa8i/LzXqg3ioC6r2haNkJuZrW\n7WecqcxwA7vSVcrtl9HhzUlRgLCndoRFZ+zdfJ7RsJ6GsRDe4N+6mCopRalq\ne5S+W062aKhz+PnSqg9ttRlT2REGia8sr+hvvEWmc1MVjaHQNGGKdNpxLWni\nd3n/91iJaQ/Ri+0/wU+tIScqCcf9ALRfkf5VEMF3NQ8kYY9Dxzlz8bgWKs+4\noXhhh1OQ7Fa1htLV7+mWfp3iFSwiP3GeYaZr2BXio2hJZLBb2gSVE2GBrHAW\nDraX3DN1NPVhNjXeOsmnok7wcct1zOtVR+XKaiFIjXsquoUr2TRxIgIGXXPN\nMTto\r\n=OYXS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.fde2c1f9d.0","@material/rtl":"8.0.0-canary.fde2c1f9d.0","@material/shape":"8.0.0-canary.fde2c1f9d.0","@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/ripple":"8.0.0-canary.fde2c1f9d.0","@material/animation":"8.0.0-canary.fde2c1f9d.0","@material/elevation":"8.0.0-canary.fde2c1f9d.0","@material/typography":"8.0.0-canary.fde2c1f9d.0","@material/touch-target":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.fde2c1f9d.0_1595986532253_0.1034761635413135","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/fab","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.6b3876d5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1c2adf220d318753979e3c5c786554678c68693","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.6b3876d5d.0.tgz","fileCount":18,"integrity":"sha512-ZNRYp5sbKkiqxNjbkLuAvMJU7DH5sUYJYtcNYgKCoBdx3WBIEbUVT1EVyOZcsNczHdPBCpxLXk8S/h2iJ2VZrA==","signatures":[{"sig":"MEYCIQDez2yGkXVJOFdPvgr1+irEkeWncsscwbmYdYUm5TOXRAIhAJX4Va61+bI+xkvlBTPGPPaIs4PHVMQgLh6PbA98jMw4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINNJCRA9TVsSAnZWagAAXycP/A3T1pxGRM5Y5vWMfC/6\nrZmRxpxX+zNGiIpTbcgAmTwBjXJF4dLVcB8py7+FMrEOD4x2MhzhtbZ+YpxZ\ndPP13jqYSdYcu6Kh2V0/eBHJN7AWcwozMxoYlxKOLvsLG0wJsWtEF1DrOK0U\n95/DUJJqI+iWQOe5R2t1w7m7Z1TA+m7PGvG89FF4flAMSuEoaFSKoXSEooUK\n+96ytwf/NzPiCU1EKhuGn8MFRCudQF3MHZEMcuvur2+Cl7/baY+ifKMGPFpI\n/YpGW1kYbnoljvP+E8EBAvUUHuj8K7C9LfnAb6B4Z8+BxTll1+aeSHKWnqmk\n32Sau7X7FnAignb3v4dbVjqvFqSrihniLeZCJR0wvYXfpVdb3XV/qKha7A0n\nWlDrJdxL4uasyFnMSw1BHSSdQTNjyoL1zj0H2aL2uP+Q9TJ0G0A2ZvxjLrBs\n7FHSeODKIfOs0ARZwmsKW7CE6qj/q25p0IPCQA4v0lQ1jnxNIZ7HtfJajefi\nj4jpYEeFYNHS+J4G9eW0geS43bTGx67D5ef8twaOOgVXVxKcKs/UDV15Vmvb\nskjSuIl+FATjtXgpnwkyZn0vnaaNKovQpgANrMQidaQdO1FisqLPI237kH/U\n9vB9X0PB0J1zQ24l9aga8id7Gz3O/GdZnXs4FqyCaN0TDh7/PRDaycElPsar\nD5o/\r\n=CHEy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.6b3876d5d.0","@material/rtl":"8.0.0-canary.6b3876d5d.0","@material/shape":"8.0.0-canary.6b3876d5d.0","@material/theme":"8.0.0-canary.6b3876d5d.0","@material/ripple":"8.0.0-canary.6b3876d5d.0","@material/animation":"8.0.0-canary.6b3876d5d.0","@material/elevation":"8.0.0-canary.6b3876d5d.0","@material/typography":"8.0.0-canary.6b3876d5d.0","@material/touch-target":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.6b3876d5d.0_1595986760610_0.12161539565578483","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/fab","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.30ce17873.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b4844d3d2aa22ad6bc58ed435168960c287cf06","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.30ce17873.0.tgz","fileCount":18,"integrity":"sha512-eSv2CDMwzrgvVNrbUs5WpGTmiZH1Zk+ptV80ianpARbZ/MuDWNnUXiy0m8+2Y8s9YTcsqI6jo2n1yRgRZXC5wQ==","signatures":[{"sig":"MEYCIQCc6UUwnIs0PuM8g4vNmo0G84u5apt+cPtqC5LlubrUBQIhAOQ4dhUby+hZK9/oUfGWHcMSiDrYCK5HGmCskSeUKdyx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa60CRA9TVsSAnZWagAAwasP/R51blHlC3hblZqhsLw+\nTPYcJkTFqYzj5MGRqsazO9d7pwknVxOe8N0yaO3p/g7jbgq3RibRA4UFZpKa\nSn+POdzJytMwchu1N3ROscE7WFMiflLxw/Z7CyW6tlY8Y1F3emz3Tp7IHXOw\n7IHcmFre/Sm2WOT7Bo6DKwpL/8Oj5GrP3wlQBH0b/dnW+hNCZjt8Bul2XdEa\nmNh7wwV6F5aTEUzG3TjfKzfdiV3c0Kw9aSbalcBOspCwQE9EMu8eXUgltoSA\nZjz0QvWpex2pJdtc/rifpilHfLoKxF1hsT5prtoTCNqxkWzG44TTl0ZNafI9\n/sQAMULH/D3WcIPDzM1k4EybkInEIY6bLSjNdi8gRqK0kEqpZ/z656+7yIz1\n62g834XPgU05OvaNibKFd5664AX98jVe5TTOaLyoTxPq54KJJV+XzHSpKwNo\nkeivfpplr5pRbNUlVL0qO2TMcfD95/TgEAUND7PwuRjCyHjV7vZBXd8wsWu0\nD0+eKgx7tyuU/jtZ3fFgSt5Rn766SwKejY8DK1Wtpsy0LcijSxtOYV+BW8id\nqRhqV8mc0MHRV4Olca6AJ10xPpsFPYsQ9kIexhrS7aOtE9KKgt9g54CXpMAG\nmgYBQIAWsP7fMiZKissNx4PSvV5CiJRwNyMwcZIsMCOJf2fMa7xmw5c0rlfL\nfn0D\r\n=6WvZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.30ce17873.0","@material/rtl":"8.0.0-canary.30ce17873.0","@material/shape":"8.0.0-canary.30ce17873.0","@material/theme":"8.0.0-canary.30ce17873.0","@material/ripple":"8.0.0-canary.30ce17873.0","@material/animation":"8.0.0-canary.30ce17873.0","@material/elevation":"8.0.0-canary.30ce17873.0","@material/typography":"8.0.0-canary.30ce17873.0","@material/touch-target":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.30ce17873.0_1596042931692_0.17411091168286474","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/fab","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.f6bb43bf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df254a4b2f6d4e6c7ab11de1c33b008888780d5f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":18,"integrity":"sha512-pBYsqo2v8vxN54/zXT2ZCiTdH/GeBltxUQPvHiv//p6qwQ0FHmj/RosZZgpdDpDzIS9/jvIW4FgzwZHQwG3yTg==","signatures":[{"sig":"MEUCIF4L+OHV43ZyMJEXN2V8bwe2xAJz2NpiXXDLvtkiNpSlAiEA0msI3YMszjfGLlXfW8kXRm15Z0BiQgxnG3/5AFWP6SY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb88CRA9TVsSAnZWagAAlskP/iit70pfvVeErCzFUp6+\n57k0Ke1XQpaWRV9KwW5dU04um6z351XoPitsewS9M4md3Abb/qg7NG45U1mL\n8KzBiF4BmayzwHxNwvqdAxvw0PeaJC5Z/2tAvhF/SFd+mxv8RD7q6qnHv96E\ncwb/4Vy8NuFRupfIfTNXOTC1XLA+UhC7rqhjwTAQbdV0t1+vQi9BnA4Djshr\nZYalzBkb33Y76JPd0YWYrxDDyXaEvBE/50yDjuwbHPIDPMTBmY/2c1DYsxdr\nmgSk4C513DHmUEVybKsTngtTxodpPP0S6YVImrM1E2M/ARoIDd2u5yVGdhv+\nP+qf6wVOz8wtNttW4Z2UZNiW9RBv1N96Qf+fd8/KfqDXXcSBaU4E7fws1VFH\nlzfSVrZFoCWgpuSad3JjgVyXjfLvFwJ605gKPrO4u9qO2Pt8v6Vb3jLCMss+\nuMMbR8wkuLK7MZVBOjgw3mbDe2RnMGr6QmmBZQY78M9+68KRsErirK/3Xwi3\nCxwlFRq8oYODi4u8OV1ee7dVqA+fnkDoIA62rBUE8R7cK48gdtArOHjQeA/U\nuJkGKQsl0I0e8fBTDeSgisRK0OakFYzhScTcSRQHFocnwGeybRdKYzHr1FJm\nM9mlO0+paevQw2L0BkJUiPFP49tTI7qYZ1XSNBmjavqqGjMZSDXHCCiEc2RQ\nrlRs\r\n=oJTW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.f6bb43bf0.0","@material/rtl":"8.0.0-canary.f6bb43bf0.0","@material/shape":"8.0.0-canary.f6bb43bf0.0","@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/ripple":"8.0.0-canary.f6bb43bf0.0","@material/animation":"8.0.0-canary.f6bb43bf0.0","@material/elevation":"8.0.0-canary.f6bb43bf0.0","@material/typography":"8.0.0-canary.f6bb43bf0.0","@material/touch-target":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.f6bb43bf0.0_1596047163501_0.5362295492889095","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/fab","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.6af75f6ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce693311961bd621ba55014472924e924043d64e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.6af75f6ab.0.tgz","fileCount":18,"integrity":"sha512-MxLDufsdp8AaCVf3Eevsn2Zw798Kc8bPzMztzllahQ4qbaIZyjILsYZT8RxZn4iEG+Sd/HnXgNIPeqV0g5D8RQ==","signatures":[{"sig":"MEQCIGwK7MGZN7DGR4n6yRjrxLGz0ssRGUMuhWTUaLg2JgjsAiBrFQ2O5aLfb78DfgxyK544WNtxsrToatAA7sOJRmvwTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg36CRA9TVsSAnZWagAAqAkQAJInypcItMUjuo/1/Xtp\nZ0UuHktq+MfUPL6hroIVimzZe6dKEKCVEna2JhVcDvFWI2sQEvh+XemgOp4T\nwoaD+AoQmao3HQ0NvUEvxC8mZJmJcHTpRZQ82x6it4PGdmdKbPOL01BBwP4q\nCnlpBIzkpUC4xMTktVwniCpNJCE5ZGFzGdFNaPs/oH7tKUWF5FFzxkiNGG+u\nKSHwsABlhDq/akWIl7UU1WZXNt9M4qskqpymcRk6n0TCdm1z7Eey20dolWyE\n+yewfSD1AaP28hgvX7Y1qpNUnY67LBknLa+h8u3UFc7icgADnGHTJa9pYkL0\n1uy0VC0B0RMgtT+e9dBHsk9JM6BA5WVuVtXoSB8uaF2LUiNeLSfF/OSk4NnR\nP0Qjcf1XxlcxTPKF4yRLjGzOiL3maxGgsfaEazGBgvHgXAJMpTnnp4XruERg\ndV8HILQyzceWlkb/TKj3FNCdXfZHdv6ssSWQEIK7606/GcMlVSUnuwLppY4F\nCVyZHKr/vSQqstd/JPOMfxGeMxVt0xp6ElK41xdLNCZ/2tU7EY90MAzssTR9\ngrj9ogpI1X2j3XpAuG3FCTnJo05UBVM3LNAUL+S21PsJD7j4/JKp8Z1C53fS\nReKX+PERreBV6YmP4C5Ev76zdR5Rbn2UFtv3vh+K9m3s6oTUJyE/mQDhOySC\nF/pM\r\n=tzur\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.6af75f6ab.0","@material/rtl":"8.0.0-canary.6af75f6ab.0","@material/shape":"8.0.0-canary.6af75f6ab.0","@material/theme":"8.0.0-canary.6af75f6ab.0","@material/ripple":"8.0.0-canary.6af75f6ab.0","@material/animation":"8.0.0-canary.6af75f6ab.0","@material/elevation":"8.0.0-canary.6af75f6ab.0","@material/typography":"8.0.0-canary.6af75f6ab.0","@material/touch-target":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.6af75f6ab.0_1596067321650_0.2246696267873325","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/fab","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.42d7a65aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"930e3014a5dab52bd8254a0bc1bdecacc3350304","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.42d7a65aa.0.tgz","fileCount":18,"integrity":"sha512-4axYEkFXQiLK2vkO6B8pfae9lz4YScFv4agN0F80CWEHlSUviSMiw+R4/65MfR8wdSVuV+HQDkm4Q+YlEgylXg==","signatures":[{"sig":"MEMCIEcCUfvTNG1tsgEiXbgf+MOXBFmZ6o0jH9cbkEed2306Ah8QHNJnl/Re7juYbr4Gkr5Bs98i5cjvqO2jouzEWsg1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhAdCRA9TVsSAnZWagAAqsAP/3o3us0gpTrHkCdSUzD+\n1NGlwwmN19SSJqwVP+SgSpafRkc6eIgzP4Qken1zdMtzsusZ+OjzhBoo3vCH\niDUejr1laScKT2gTPW929NFW5e8RC6Q9kbg8ijtrObZ39Uljxq5LsjbB+FJp\n6wiCJXd2K0ZUiA1HtRwwB+TyVsbTLsgi2uwEQta5VBfQT0+wCYCdhu3w71Fz\nA54idv2TUz5jVD4VWhZ2DraPNwQ2DY6aDNBEcuhH6VDBMhC5CMDX746+DQhR\n07DwgCTUEXmwiUX+df0I+GKL0boyS9RgBfH0Z4nGhOYU1czd0dDQlIppXERm\nuNQjl6HXh8DMutyEABWwsy3UTwmwhtEcV+zE2zMAlmNuQhLhhzFTPHCMusWW\nqbIuknhEUdcdTZoWEgDQL8JCN3yKkyqY4pgjsmekz+zitIKLBZ59kyyhaOGe\nJEaL0uDNqmJqoyQGeKtGFp0pAQPNtEiPVueY+UpobHVGOUaTbbqjcCVGrZb1\nqihevw4Lvt5k0HB8Gt+EQesZd3Zjv+zLCA8+bi2+Ek4an00FCPhIQEDxJ51/\nS6oJdml/Vesg5cNGpROOVXRhyeGZq2e3+D64IduTGdgosUqg+IeeQyZnyPJe\nuT6YM0qNtGQZidNb1swR9DYdgqqhLYsqFtOkz2aJsPh6gDIcLi8HJz1ry7Bv\n5lCY\r\n=x93U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.42d7a65aa.0","@material/rtl":"8.0.0-canary.42d7a65aa.0","@material/shape":"8.0.0-canary.42d7a65aa.0","@material/theme":"8.0.0-canary.42d7a65aa.0","@material/ripple":"8.0.0-canary.42d7a65aa.0","@material/animation":"8.0.0-canary.42d7a65aa.0","@material/elevation":"8.0.0-canary.42d7a65aa.0","@material/typography":"8.0.0-canary.42d7a65aa.0","@material/touch-target":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.42d7a65aa.0_1596067868482_0.32463603437873245","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/fab","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.85abdabb7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddb2f3056bf97d0ba8095583a61e808d451cfdc5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.85abdabb7.0.tgz","fileCount":18,"integrity":"sha512-h5RBCUu+UIkoYmhb8XEPnt/P0P2HF9ATCw+yRAvfDlMtdyQNZoI+bhJxr8+ORNypAZktNS4QXdpNmqwn17h2Ew==","signatures":[{"sig":"MEQCICg3o1SfxOqxynrwF1T4t5Te6WAheGjE1/xZJdIanMP7AiAO/xvkA6/eEHRX8BZCaOg9Ww+k5AeeQMSaoobGAZ4nxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhE3CRA9TVsSAnZWagAAQLcP/R5lmj0XU6yRxzcsoH/Q\nxe1F64swFZwimfCYoTaxW/j5ahLBo28plYqTVeQXsCYz06eM7IqHV5Mdzl4n\nadN0i9OW4jj8wQJz67jf/UnK5RixKFgE/iNfoPqWNPbN9xGlirXlNpe80i8T\nbhe8AV+L+Ke+mBNmnxk8uX8hPxFl22us72zqHL1JX+Jy/dg60KZ7x3UagopE\nc562bnR0ogDnOak7bv6/HxdT6Ql2Pvy1tEKse+S3beIGRLNsPrO1B0JRUbFD\nHl2nN+KWV3xLQOubGaOtjqmkk7U9Y11blLq+MTpj1nABm4AxPDuQjIhrgYkl\nywTnCDoAoHxguhm4hdt9+y/dXrAJW+/m1vye2IV4wZ4YwGVBoLqXoBHCFdSh\n20bTTTWSLdoBywlY5+NDBkoI6zaTP7GQrg/ewvYcAdesbZoBRTZjPBfhrYd/\noalpNaizlZmJe7vhl/fTcRhqYFRs+1vQsw7ViV/MyxEzcbpjCaS8R/n6cRyl\nAflNbPDRSyzxFEb/mlR2BOov+oDMvw6fMbrTsL9JRtaV0CYJ0yOVIaKGLshb\neLmoy6KIBWk76hk3Bl8RrsC2hrPFCndSxmSqX1R2n7/gGbA5B8OGPbCmd0po\n582Hhok54I15W5u99HX74muor+KjRxyvw7VRwl+7Qs7JTWvIDjS8WnuCO31l\nlRL7\r\n=XEsM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.85abdabb7.0","@material/rtl":"8.0.0-canary.85abdabb7.0","@material/shape":"8.0.0-canary.85abdabb7.0","@material/theme":"8.0.0-canary.85abdabb7.0","@material/ripple":"8.0.0-canary.85abdabb7.0","@material/animation":"8.0.0-canary.85abdabb7.0","@material/elevation":"8.0.0-canary.85abdabb7.0","@material/typography":"8.0.0-canary.85abdabb7.0","@material/touch-target":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.85abdabb7.0_1596068151193_0.3058343350902484","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/fab","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.49fb20ca3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1f2d6577fa9521cbed5ec2fe781521a5c522c1d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.49fb20ca3.0.tgz","fileCount":18,"integrity":"sha512-T5uzkJ6gmQ/rSLTs+Fv/YpACXCfMX5XrNneBR7mFqX+ZqfspK/p7bzngtWKOQCQbW5R4wHYHwMYUhVxHy+2mWg==","signatures":[{"sig":"MEUCIQCE281PgD5FHikP8b9hRBtlmKvwJsQYAPVG+BaS4T/5QgIgF9eq952TGppn0XXHp0o13AaehF282t6nKA5vsllH5Zk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiIqCRA9TVsSAnZWagAAwiMP/23SORGy3Mz0AMnpko5Q\ngTIX4qgUkP/SWwCLADmDRhC4dXMhzvO3sVU5irm4BbunEom4Pn7Ql/FH5amH\n5HIHvQQJ5LwhSiu63GGaAwjUDMLZ+amuH2k4agU9qT0YeBBRQ0rd6nIo6dQR\nUWvJNgmUnIQebL1ddGrPs/22lpYXLbmLjCvjBTE9koNNqSeXyi2A8CqxnVqI\nSO8aEKpk7Qv0S1eJ/+iFG9dNwlyFyVs+HAAp0kTreAlc7HlkRa7S83IM0vh8\nFG+yWuIyO8sdIA1MQNmjyanszEnUEv4NZPG36BNnK0bXlA7+YSqsxX7tZi6q\n71O1kWHCUR3zWrURmSJKTGLqOYynBUi5z/wfIJc+09DuQmPsfydXyrdsHNnM\nuBXlChysWf+A0+mbM+YpjhJklRZV99WpOhAO368eEzUgH0QFxTalodV7SbDs\nS9aLq5Cm6kegBFMMnf+W/4Shmtz7uaianYoMdN6SPInTAY4RHmCMQMSXoYNK\nHNwZjtVu7cz3aHETpJdHxBleXq1+F+0B5r9pspdRmZpGVoElBlKxhhWkGU3o\nH16STUPe543kgVNiaqkovwVBMsQapc7MMtE3qrq5oPxRfndG5L30BuXlJt4m\nbTkP48joGV80DDqHl54CMzLG15hg1uPStlr0x+e+udjKI/1QsexJwz2XA+Jl\nlzU3\r\n=h9+b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/dom":"8.0.0-canary.49fb20ca3.0","@material/rtl":"8.0.0-canary.49fb20ca3.0","@material/shape":"8.0.0-canary.49fb20ca3.0","@material/theme":"8.0.0-canary.49fb20ca3.0","@material/ripple":"8.0.0-canary.49fb20ca3.0","@material/animation":"8.0.0-canary.49fb20ca3.0","@material/elevation":"8.0.0-canary.49fb20ca3.0","@material/typography":"8.0.0-canary.49fb20ca3.0","@material/touch-target":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.49fb20ca3.0_1596072490222_0.048341446293860724","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/fab","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.962d4abbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2144086d4f0d2e2f05e476f43da93ce0e87193d3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.962d4abbb.0.tgz","fileCount":18,"integrity":"sha512-68kH302dFCQArq3HNs+H3pn5Ul3FpNfoC226Fo7n/yVFMZ0FOtKSuyHsM308YRFDdGt2R/jo2VmpW3JXPRdlWg==","signatures":[{"sig":"MEUCIEZJlatpKWBHnrQj4YZ0f3yGzxkWxsMmErFJM9Y3jebTAiEA9wqFdTOBanhKlz/eM5OP3hshZnTrQzZVa0FRAsdBAIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvEKCRA9TVsSAnZWagAAd7IP/3cPRPRmaTJufRShUlbi\nEHv30AFeu8GjCkWkANn01XfaDwZF9EXWf45OEBqGzsBy3sNA0jm48HWmdxhG\nyS6+hhqCwMcXJE7OgZg0fQqwDdSqR4iCJRgvlSTR5Ed2/qGbNX4zlI8yIiHa\n9lKFyhCSPbL71Sai8tTlIKxgTV3m3NHcjvRZ+APQIq6BaRnxJ29CjCJkXnnq\nUln+OUbj0QwhUGtvITUWiyksJ2eebF948AA+QaoV9coBjXWJ/JYCQi471XmZ\nVpeaVHJsirScX0xx+62h6xBBTyGnujznVbLdxbXYdkvIYAZ69fONcunfuI0D\npTkCPySjtHfszDUdWqIX7zpo98yU20Bv10IWvtQs+u48/Hd8MGfh81bHR+d0\ne7HbgaaSSzpO9tNf4y94q/sInS/fkFDnPG2/YBSM2XDqJbL+9qm9btGkYOE/\n2DlVFUAjYlWi9XsWqGKxRDEbZ9wEjxfzBnUMszFt8RLg/hSTf80ymQoZAAV3\nJ8PwvIcVgg1X3eD5/xxVW/s8v4/8qEc42lUlMivnAecPvp3xesZFh14gdPfu\nsOTcnBWfhgFxDEpNmbc3vgTg6M3Z/kUcxYH1jAoB2wwGefhi2Qk+EmCROu0o\njScRThqN5yCcB606oAbxe7emxgHL1WzAEhGMckZ//rmBgzeJSAtKjQKMjNJh\nYhat\r\n=kLhd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.962d4abbb.0","@material/rtl":"8.0.0-canary.962d4abbb.0","@material/shape":"8.0.0-canary.962d4abbb.0","@material/theme":"8.0.0-canary.962d4abbb.0","@material/ripple":"8.0.0-canary.962d4abbb.0","@material/animation":"8.0.0-canary.962d4abbb.0","@material/elevation":"8.0.0-canary.962d4abbb.0","@material/typography":"8.0.0-canary.962d4abbb.0","@material/touch-target":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.962d4abbb.0_1596125449734_0.3411162249886901","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/fab","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.2fcee40cb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daf487ff9dce6e228c0ac450043c39ec8cf5a090","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.2fcee40cb.0.tgz","fileCount":18,"integrity":"sha512-0+B5G2koU6c78k3GypjRwkF8dbiZS3ebNz/XNUtTJBmN3Mh5yzLqQ4avQ8usSvTl8cDrMLGB/LfzkU1eiG7hsQ==","signatures":[{"sig":"MEUCIGB5oWfYCRn8TNX2GQ/xgqPGT/MLUUStDj7PpgMzqkF1AiEA1kANXDOcqC4IkVJKPIYB9JPv62FRtL01fzrkkdpXG/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwG7CRA9TVsSAnZWagAA3pUP/jG4jLXlw0jbfxE6gSWN\nroOwmMzs82EtILa/IJriNqlKu2D/kFPtu+Qg6WtNUZyfnQlxW8Ubdx7E6GyU\noX1Ue9OaFNceRpCv5OFhHtNusFMQAgifUuFZPusgbivS6uqEM7ly3nZuhIaT\nNadc2MpbnrCxJV4UrQz5NmZ5uqx4qdVP1NAx+RvAt3GftbcC4rsTzfrcUcgV\nyBtk1aHC0TQ8PYU2CupUmnYYfezGbDz0Idjg+DLyKuBIgfLTmBy7hEU3P3rB\nnKTYoG107xfg0mHhavgoGxrm4m55mD7M5sdZWWXJtjVrtXR4ZuDjezgF4G1/\nZ3SSCgMHM/tTQYy7Ka/RJ52ZHFWuYpc6kSAKKFIARfLpDVsI6cNEebmf/wnJ\n7/Zlbpv6xvxF47RF43J/09QCzMgg1ZkETTEIT0CpCQdHE2Mxf+Niz1gbuGft\nNLhml2RNXPeWpzcDoAVQsZ64Ceqtq4C3QxNmUDF+5DhM/bh7X8DVpKc1CLcS\nqpK+6zDcz8ZFP/rG8josyBwOuSRUv0furhoJOQQ788uRqukfu9f24CJpmmmA\nMikrCWP+eV+4gxjzo3eNmKllwdZ3EyZOJRDE+qARZ5uxVWT91qiU+fu+IIJf\nECOU8oC6B+gU30XjbSfgJGqeuPu8xi6G3SbbXJm0Htg+YsquXT7cI54NojB2\ndUXx\r\n=x6eG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.2fcee40cb.0","@material/rtl":"8.0.0-canary.2fcee40cb.0","@material/shape":"8.0.0-canary.2fcee40cb.0","@material/theme":"8.0.0-canary.2fcee40cb.0","@material/ripple":"8.0.0-canary.2fcee40cb.0","@material/animation":"8.0.0-canary.2fcee40cb.0","@material/elevation":"8.0.0-canary.2fcee40cb.0","@material/typography":"8.0.0-canary.2fcee40cb.0","@material/touch-target":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.2fcee40cb.0_1596129723209_0.6132049322435469","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/fab","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.bd5987f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f674c04e282ae3619e7efa88898a5554613972d8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.bd5987f5a.0.tgz","fileCount":18,"integrity":"sha512-8D5Tgp/KSJnDJbstZzyZs0SYiuhyf/EwS2CLtFMqp2ddzQEYXawZzIITuvMcfapg8Bc2YCi1WRVi43vVisKP6g==","signatures":[{"sig":"MEQCICLiYQ+cI8NhCHgCxv+U+rGPA86hNtlJY3sQEt4ISt7gAiBrM7uDdVFJkqmz1KlEN5y7qpc1MxWUryXmnmfIQPos7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIweDCRA9TVsSAnZWagAAmWAP/0e5MQc3+xfddaxcJ0k4\nO/xnhn188iE6bGmgjbSyc6iM2ocZhMsyfDQzjm+IWIQ1cORAkScWlI8aexkh\nfYdBRWPN/R1c6vBGks7xGN8Gcah3QOoMHO1nI+xXuiYbnFssnP0t+v1F0u20\nPQcrBCQbjAKOszzHEr3iBsVXC68zxRE+PmVfFoQ/wQjk2RLtpQko/uClw9vy\nAqIZxVFKkS3GnzdZDVvxTSo4ckD/0DX1fNuEG/6wYI3il/e2Giq+8kl+reBN\nD30iy5t9szocOzwnI8UQVZ97TdqBfQLP+nFqt9fwj9c2p3PMA/iANauYzW03\n+WsQYsXgtxAmFgjKfjXTNhWdG1yBjfrwJk7km690cKmAfIs9hWWLb6vm0HpT\nQ/U2NNjaDvMUmA5iY8bfdWgxzKuGycrEtnIlyeuOgVCLU9Cp1Se0E7YetgSC\nh+jYfD9DS8wbck2y/dQshK6uHajJPZ2PxrY211drnzdV4LjG1IORztB/24Rj\n7+6yovOeGzwC9wS0d4WmLuo4ZQlggfyEqi9WX6tSqEIuWG3eJnzIygUtXWIl\n+tUqxRo7KL1NXYnOfY2XhxPAk116ZgO2KGLOIvBi+y8V1045WFBKIb7/WHKA\nT8bZKtiuSaapUbh0XQfY7LKP86/YxsFX0Fjk3q42en7mDLMILyw7JvHlplxY\n05MA\r\n=/U0H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.bd5987f5a.0","@material/rtl":"8.0.0-canary.bd5987f5a.0","@material/shape":"8.0.0-canary.bd5987f5a.0","@material/theme":"8.0.0-canary.bd5987f5a.0","@material/ripple":"8.0.0-canary.bd5987f5a.0","@material/animation":"8.0.0-canary.bd5987f5a.0","@material/elevation":"8.0.0-canary.bd5987f5a.0","@material/typography":"8.0.0-canary.bd5987f5a.0","@material/touch-target":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.bd5987f5a.0_1596131202698_0.7708877671691827","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/fab","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.005e86a9b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ce71a65e44712040ba29a3659bd156a344d0896","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.005e86a9b.0.tgz","fileCount":18,"integrity":"sha512-HKAKNv4qZ+I95SMgBs490fXk/H5HRFXCVNY8KB87rwRJkyCn0CnLBDNavfvfTu3NHa647FbUGsC/Ztr31TolHA==","signatures":[{"sig":"MEQCIGQtDEUD04yYdu9Fq87IIJz/CjdLL4Z2PD7gZT7v4euAAiAN1GE7DVqtCO/hj1sfRRX3XvMQo+u5TMdRHgHxTmo+LA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwrDCRA9TVsSAnZWagAAHrMP/31+3zIKQx+d+6erYXsh\ncKVQ9JKONuAiIW9K+nSxLIGvLe7qagvaTze40c6Abgxc3EMMygfHB+AVmhSo\nXWa1TgQHNeoBItzntNFycACLaUvWeFGtEFWnswDfNgWFJPasEyjZ9G4FsBv0\n0LMbWqsA5x9ouuA81Iu2XWDWwmZjzbou0z39uGDPbFEy20P9i8Zm1jfSgysO\nKhB18CKh0aZ1vIaSxitIr4BOq0SxpfxUJSyUOj1uJd0IrbF+0qcjRWGdVX/O\nOWieyFeDMhhGlWQEMBqLSXq+y0pIjbNSOedQPo90j9xfx0kdFQaVPypOY5SV\n+49N+U6I7XSRrsC/K2xJsOi5H0bGNJ2mmWgOky9HGialUu0oSLXnt7t46cln\nwXTfxoV+pgmAAbiUZIe4NW7JlhxmG0A0TAnuflhe8Y+IsRhmz7WN0cTw2/gc\nX++VxEm/r50BrY7UIFax7WqfqvhOj+zLQx99vO5VkNxyrlhf8BYzuJeluZmS\n58qkp4/Ty+CckVeW4FrwxI3TVi9ZbLOuQ/I3jkMfY6K9MUXQAbmWtPMQoVUh\nEaqCQ2sN7J5B/pnByI6VtK3JnHBoZk3v4fg89N6Qrfd431sX3g4W/E+K3U2B\ncVjx/qYYtglaRems3gMoFnKLhjOJsbGXPBFBb8mw37Y48gvrmhD2U6WS7s+h\nDi58\r\n=IQJR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.005e86a9b.0","@material/rtl":"8.0.0-canary.005e86a9b.0","@material/shape":"8.0.0-canary.005e86a9b.0","@material/theme":"8.0.0-canary.005e86a9b.0","@material/ripple":"8.0.0-canary.005e86a9b.0","@material/animation":"8.0.0-canary.005e86a9b.0","@material/elevation":"8.0.0-canary.005e86a9b.0","@material/typography":"8.0.0-canary.005e86a9b.0","@material/touch-target":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.005e86a9b.0_1596132035323_0.976914067053203","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/fab","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.e309c7c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b859183ecf85e3aa516562007257a7e06296ddf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.e309c7c68.0.tgz","fileCount":18,"integrity":"sha512-QClaDQq1GGV7usDLULdtlDInfNTnSB1QayJvLPJwhDwuZ+79sC3kf6JdJJNZWIUl55uxKE03NTvfQcxCXpwKug==","signatures":[{"sig":"MEUCIQCajRmTb13S/2jXj/J2YBqq7QHY5t1FUFIZs+jwCPp+2gIgfyVEEc3APvFkLec7sZQMamPz5W7YGjBXvdp8xUFYD7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwzDCRA9TVsSAnZWagAATxoP/0ChVH/Radi7MxQSa1nK\nh8Vq4wuSL1EpWXv1a0nSrChFxL9PQ4VTY35RcnikrAnZQoOY2yYYYsJhta23\nmCotU+DIE46gcjrJaXPLwf6YGssRNQ2jOPbEmzclWw2FXvPBsG7Wo4uymWaf\niyFzSe3ZrX5B3l0u3tqsxTAF8cp6BhSLLAOTLYpwZFzasxuCJVRIXYrDENvo\n1hlWw7WhNEIQDKAKmZcke51W3zVJn3RYGKqN2UK1jwp+PaBBOyl1/7TjOVNX\nwm5IiX5Nj81Ug2yPxie8wluGuiWYT2ZMfeuX0WYYqQzQteXCFU1/Kbi3hiwG\n6IVYa2eGKS4b090ExqpSgvIcc7KEWwjw7A5k7oS7SW+8QZTLzxnolNkwP9UJ\naF4pQjfthLXbexh/B7bzOu97HpWlIEaKHW5nO09Q6eTTqMoohJPl6fDmtOW2\nBAXzgBDuVZa1Gc87u+EV+BD1xty7DilE3cTVTUsAbg6eag3lXN3EPDN0FYss\nmdPMgp6AiElXMVrYNN5im735m1+GA3BVZ83Ujq7j4nN/ChkdNBJeFw8t2+jF\nAZqFYa/kA+5/NTinzdifihtEu9wjKQnTjh61n4/DzKr5KK8otgnHrciy8adc\n0SvIn1DeKP+oJdDOgPw6pRrw5/TKFo7QeJYTOjp6FSqU4E7nRYBGMPw32GEA\nUFaq\r\n=zpyZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.e309c7c68.0","@material/rtl":"8.0.0-canary.e309c7c68.0","@material/shape":"8.0.0-canary.e309c7c68.0","@material/theme":"8.0.0-canary.e309c7c68.0","@material/ripple":"8.0.0-canary.e309c7c68.0","@material/animation":"8.0.0-canary.e309c7c68.0","@material/elevation":"8.0.0-canary.e309c7c68.0","@material/typography":"8.0.0-canary.e309c7c68.0","@material/touch-target":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.e309c7c68.0_1596132547376_0.27554389768371723","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/fab","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.935a51cc0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f6af235309c78abaf68c52b3d977c34f8d42ab9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.935a51cc0.0.tgz","fileCount":18,"integrity":"sha512-yH0Zdm1g56+QOBrCBKzG6tBqU9lEAe9zIPYsawTXBSG/f7bbSXfnJt1SNbBupuXMFyjwRDiPmoVNjSOtxKH2yw==","signatures":[{"sig":"MEYCIQD64YV2LMg8xSgR5jQVnJrJzLR+ABcCZv16UsjGBZGXRwIhAMLbbc/Ot1BbgHcAVG9oFZm6a0WhF/SJZYxWrlDPcMBZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw+LCRA9TVsSAnZWagAAj10QAIgEFiyt9mLCqO05gLJs\n4oEmJPL29iBCuhctcZ1nwSQFjJ0Rij6mtWaQnhLUzsP8+/Szh2nXbicakrEt\n+ydPMo/+0lcprlcnHUqaPIAcntv2t3fGj1WEVOnocXi7nEOGbLoh3hL+MIHr\np+GqLdlUSs62tAJbVWUUDGxA1Ci05/Aao5GMsXu44SDtEkoX8qRG1NaEzE90\ndo/5e5FWxseHeg6vD/rrGWSUMjtoaWALOpwbynzmKk+k7Psvis+1DTCoZVz+\nKvrfXiRl5wwwEH/5z4fa/MwdQ17RrKOyQtdQjv+tq+C6QPXToSDGByR5HNqQ\nAZ7OJatU1ad+BIVN0jUjHWUdQ8A0mIUAHl1NOmUJKx2dTkxnroShIKqOecFG\nJqPXvSJKLxKrOczeCCBKDW/bckd5pLHML/pilZ2bxnrUL/PmA66kvGlNDJ9g\nCQ1s/j6F2hMY3QrbW7xTEqmoqOvXXZ0m8W4J1WD1OLFX7conc4zyYObrXV83\nG02fWggpDMhufOrd+4emiHlE1l5zMM926qaoXvmZpBHSPk6YiGAWnXuJVxHP\nhnywIlEhXa4UQsIFEwLFSGUSmK5PX0W3isMPNfOmJN80n3tKpM7RO/vQfDb+\nfQqvLSxnUAM4w82HyW5OjzoUvGeQh76nOpk/n8PDqCh1szt+RRSsygGOk74G\nQj2O\r\n=RILH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.935a51cc0.0","@material/rtl":"8.0.0-canary.935a51cc0.0","@material/shape":"8.0.0-canary.935a51cc0.0","@material/theme":"8.0.0-canary.935a51cc0.0","@material/ripple":"8.0.0-canary.935a51cc0.0","@material/animation":"8.0.0-canary.935a51cc0.0","@material/elevation":"8.0.0-canary.935a51cc0.0","@material/typography":"8.0.0-canary.935a51cc0.0","@material/touch-target":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.935a51cc0.0_1596133258538_0.701082934475306","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/fab","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.74839da7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95a2663624695c51958e4c0c34227db8e7ce9fb6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.74839da7b.0.tgz","fileCount":18,"integrity":"sha512-XXx6TZpjXnUjVOtRoSEIBO/x6qfvnWwWfvvbxvvWpJ6jrn2f0CVQplrn160rZ2kswBqOA9KbWOsQMy9/gOPk8w==","signatures":[{"sig":"MEQCIFmr322mQNYB2bcmVFnZCH4WJb9MEfGytBG9H3GILA0OAiA09h9lVw5w9GCf0zxOZMVn15LuM8jXK1y9sBcll3fVBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxIjCRA9TVsSAnZWagAAFUgP/i1DrMan5m6AOeSzDYne\nOh/tvrTBU1FrXy0a8A0cIvlWaVsV6MCmPKx1SKVJszOYbPYMOkx9Rlz3DjFz\naLCzN2CjKyMFfn86BxTPHHcrbBzilnPkaNk2V/pmBu8iOPACmB86+e2JDhMQ\ngZAEBbFHyYtRZdLZ2B7OlOvu7LZa21Pzpsq4rq98w0CYIBHjovs+sJtkncXl\nRaoKCj3jz1GlUm3vVYR55jrWjblX5cI4YfX1d4uFpvNruOmWVPzjiYsCP5jM\nc0M9jBi+iqbmlI66xs5VdF+JB/H1r805LWjDYGF9kdNIdu8xnzT96WdC95nh\nep/vhpCOBHnhlHF/rSOkoAdOi966xY1O8Ikga+UQcNcAKvWqobQW9KZPnGgi\n1GrEP3xxC2BxGDGgo0oSd6CiWBNkw+OVpxR8QuLKi/HFQEnceu/xGZUyHMeb\n0cIOYScwXQn98qtE9xtSwxyWJaAlfm/K1ewwKz4xjL06ddYiODF0r9U8o8xt\nnJ5ENo/42wZmaVGTdnmzSwKXSppFmnMjZaHlS/Aie6RKomJgvFNaIvBJ38rX\n+tG/PLIiMT4sp79xaxaET4IzKRTNgT2ZYhY/PdmghPKBcQpGLUVTGIJk2JGi\nV77xZyE0gPbEuAv1jB4bypKGFrX9yo6kVtXReR3l5uV7AEWyvQxjgXwxVUOS\nR3Lp\r\n=TzCY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.74839da7b.0","@material/animation":"8.0.0-canary.74839da7b.0","@material/elevation":"8.0.0-canary.74839da7b.0","@material/typography":"8.0.0-canary.74839da7b.0","@material/touch-target":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.74839da7b.0_1596133923416_0.035716423323530755","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/fab","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.f041a48c9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4b1fcf0f1eac8f5dfdc140849a8f1f8894f1413","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.f041a48c9.0.tgz","fileCount":18,"integrity":"sha512-epkps51a4kTZiy6CzYmHF0G4zPlve9ox0F0zjgPs7XXVhWPvQBbVYq0sYhDVHRbPtC1p+l+HPnAwLUxEn0hPSQ==","signatures":[{"sig":"MEUCICeLlowQhKLruKavjiN1FCCBBAwxKNX5mvSzOT/Spw56AiEA0YKL+6nH9s4lo65sN6dv5QdNgrjJi765k1D1ba0Rb9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1EACRA9TVsSAnZWagAA2WMQAJUDbsXS+R+HQvYfzgU8\nTOw3h1ND97H7hXgK80KoJqsog/WYTBCNNkzm/tu+Dxbx9PM7YaMyTqpjLe/o\nBbjPDmo86k4Mau7P4BC4miRdVjF/+xHh373/YpxY8LyBJuFrRdovGhVU3dlY\ntwT6PRtxauo9X498zAeopuM3xly+KWMhkiKIYKUJc/pLZ1XnyQu7jInG/uHv\nPk01C2OfRqeP1QlYlbrxVH14fR+3n4SNP2t/8Rk4QWfPGQSTyKuhnlVmMjaH\nP+DC9CHpjtvo19w5Q7HpF8ams+pxi5MYvwih6gO+lXNlmL5rBk55ubfZfgsz\nCtPHhZjvNZosCMdgKDNrfrjhafF/x66Zz8VNJg2o4v+5KK0lVCeEWMoUfeBj\nPPZdjfCTQhTVuM+7mXSqaG78h82KQ3xB7UOuFkW2LZ7vi4pBfK0EXYKNrbUM\nLktGuAek08CJicKoHJ5IqfKq2N60LcyUvOvN9bzkA0ZcFcZh56H3ExXj2Aa8\nXp70GoaqqgpXr133y5WtBm2DHpn+6pHA3AP7/Zn8pDAD5gdkiV721Da3QqMh\nL/0xiYFKwLLMolECzCwS6PWeNnq3340BvVeakEjiqXTkszaUqcUHf1gbM6fZ\nUKA+rt5A4e1vMMto9BvwEMhC8fGe3Ly+JrvZZskybPoqeR7BoZHo3Tvx+DE5\nWztr\r\n=+6Tx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.f041a48c9.0","@material/rtl":"8.0.0-canary.f041a48c9.0","@material/shape":"8.0.0-canary.f041a48c9.0","@material/theme":"8.0.0-canary.f041a48c9.0","@material/ripple":"8.0.0-canary.f041a48c9.0","@material/animation":"8.0.0-canary.f041a48c9.0","@material/elevation":"8.0.0-canary.f041a48c9.0","@material/typography":"8.0.0-canary.f041a48c9.0","@material/touch-target":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.f041a48c9.0_1596150016039_0.5759684762396113","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/fab","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.fbb1381e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e69a6293fa4cd094577f960e4d9d9ce6c2be3a38","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.fbb1381e1.0.tgz","fileCount":18,"integrity":"sha512-Tedd1k0lATr0ArTVQNTQmAR4V3d18/ynE3kY/Cn+T3TmIKq+riKtg31b/M9fbF1t1tJDY6Vm7s2KtWVZtT/tjQ==","signatures":[{"sig":"MEQCICs/QVyXg8xb6mw07NWf1HlnbWik3cK2oKHlBtxkPxNRAiA1LbT5zPaosZJ2pYSJkjSRfaAa/OUeG9VqHyY55fY/Gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD3kCRA9TVsSAnZWagAAS2EQAKPdn08JCKMEPfUWl7o5\nXOmx8x9m/IxWC/MCDqzibxTNENYjEpO+ZH+WrRkninHcWotG4Mruss4N+tsR\nTgtcStzB4YrJTXAnDtbOLw1ICA0ovAE8XBHrJi9vioUoj6GkS2Lb6xBSEV4T\nkrcp7fIPiaPYKwc3Qd7JIpXExG/1zKG5Etfr0TONfDMdQgtFK3XSmWOvPeAb\nemgTcLQiav9EweEyGYWIwwHhm0uXQSzwf6SCqeEiGaKm90DTSZgUpx9oQd31\n89BdtdeJyfsfDWE8UVS8hj4HSmUQdOrrTqcp8EcwFmbEpNzSMebzrhx5fLo+\nW9nvbfIsaRkXw5/rMZyYmYWnGiLogWLCdVHIbsVmQlkT/233B+cVomL48nqQ\niPtD+NATDnP6VFFJhm4CGIaz4iPVa0gpAqHedqn/CMGL+MDHQ2Ux1RSs25g6\n3YIkew58w3YK2lHD3jqBhU1R1xyQ+aNwTP7upWE1fnte3fNS4J8SN6gd3IqP\n/hZCncjw1XXgiwzaIvlHAO4J8D9KJJJcSWuhBlc+2yeNcsaNy6fDPzVCAxlU\nQFN3/k9xE8TI9pJX3xR/bqq8IMVTDvAv6WUIFiCvyoXcK3mG2HuvclqZ7svt\neeIVRZiq2fXaJjaz57lsx/rtqKxc4TjcO0FlYAJ/KrV3yWvCWYm5TIGkNHYS\nsLd9\r\n=cgDg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.fbb1381e1.0","@material/rtl":"8.0.0-canary.fbb1381e1.0","@material/shape":"8.0.0-canary.fbb1381e1.0","@material/theme":"8.0.0-canary.fbb1381e1.0","@material/ripple":"8.0.0-canary.fbb1381e1.0","@material/animation":"8.0.0-canary.fbb1381e1.0","@material/elevation":"8.0.0-canary.fbb1381e1.0","@material/typography":"8.0.0-canary.fbb1381e1.0","@material/touch-target":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.fbb1381e1.0_1596210659710_0.03526442937988761","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/fab","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.7f61d5785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8bedb633224992b84905ed8ad575d7ab22fdc84","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.7f61d5785.0.tgz","fileCount":18,"integrity":"sha512-nQ7G9uR8wn8KX1GnPx6OUSkFJlTUftONTPSTs6mQf7fj3/+MW62R4/99r4IlYK+QkIrg5yRNO+0skiwVFjOJiw==","signatures":[{"sig":"MEUCIQDOb6yTonGgoLF/x6EIu/UiZvsvgE9+W8QyqTfMqfCQfAIgY/+QDf9R+rsd1HlSt42489UwwePb457ACg4ohxBaea4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFOVCRA9TVsSAnZWagAAo3AQAIJ3f5uwJ/vR0Jtxvd9C\npe71Fth9X7VlCAugUta91MRBZX2zChYlhfPH9wwtAD7ylQhurM2HtA+lubws\ncGQ+bL/S9ysbnwSuVmtOd/ktrrYzafEJHSHiEhL5/f/Q08SLswf8/B/weK7H\npbA4RfWw1sRBQwGK5/H3Qqj6PyZHz24z6uTxR7r9je5b7XvAiwPMasKedeHE\nfhhTE4CjEN2wAMWOJVLoaHouogsEa+bJpwWyDSokNViPUUN9ZITnHa9xxrJc\nUPMI0PcrAEgF/wK1IXl2jQiCvcYpRIQr9qi7NjXS8Laa/uOBiTM6f4v0nb6w\n2XaQmKtB6XL4zw8fTF7/QBhxcJpM7QeRmHas1LZsJgBU9Dbwwzvyfw3XXPac\npcqH0ck0pAHPiDlsit+/OY6ksS0I+9DMAccUheM6Un8TRHFiv83O3k/8gTq4\nvi1D+v77DbLOHy08iT7tPrCL85MDRoEG1gOI6wgC7QjTsz1KECFxoc7B9V0J\nFHKyXAiJbhq1257luQRIbUxl4cnZ6XoFK04mSfklUIIiVeB/xwQe5ZFJlY51\ngCw+anOhEvxc5cHcQ+gb/VLiuzxHOw5vaBDCjoBfkFbYMIdTF8iWkGriOwGX\n+CGkDNZ16McdNO7LEEINxubYpPMcGxK2cTmtRmDoX2DHPmQxGijHHbenETWS\nbtAa\r\n=cMBj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.7f61d5785.0","@material/rtl":"8.0.0-canary.7f61d5785.0","@material/shape":"8.0.0-canary.7f61d5785.0","@material/theme":"8.0.0-canary.7f61d5785.0","@material/ripple":"8.0.0-canary.7f61d5785.0","@material/animation":"8.0.0-canary.7f61d5785.0","@material/elevation":"8.0.0-canary.7f61d5785.0","@material/typography":"8.0.0-canary.7f61d5785.0","@material/touch-target":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.7f61d5785.0_1596216213415_0.789499404020586","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/fab","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a031a10aa2606e3558083fa1b4ca64186bb25b87","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.e1bc84d10.0.tgz","fileCount":18,"integrity":"sha512-hZgXbdOeMgx2l5TorqZ3ULcT57dk8tdfce+GcT+u5vzXsTU60JzkmkdFPFt8ImdGzlxIJ0hZJXT88mngglkzDA==","signatures":[{"sig":"MEYCIQClLCRZCQc34CARA1kIcJmYqCzbM0LHiymRmlP5yhrBwgIhAIbstx9e3OPB4tp8uU5u8uLD8OmKTqwrEpUuHO02AIWz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE6TCRA9TVsSAnZWagAAZoAP/iNZqb4hcg3eyZwgImZ3\nvHYmN+hWPvzt2hDP5z2aJS/9YdD70DbQtTI9iX/H6+UewtzxUlWuhtrL9ntz\nfLce+unHrYHQFXsvUA+KEs5R87UwCxtTKPRlQ/BsWn9bm4dRfft8ksOiLzeW\nirH8eEKuP1ZCtu2zQYiyQIJEMVQ9fqcATfoYyHTKs3YsZ47+OFHEiMCaSUPI\nqlIMbV4YrugYoh8nBBdZCWWCcKIlHkWAhzgTHEn+ittNr4EppMfGuYBDhcOt\nyFDPSzO/ss5h7YDICEIrD0e5HJdS+dhGQLnRhC0pZXUcSUbE4v0cJ0qI0qv5\nGAsIWcHxLlERCTNmHbfhaN6Nyiv1mqtO/QOdrAHBOVToskIgpBqDKr5TtR6z\nH3otb54n59SPYds7xObTQlQQp41t/I4+7rhI1HCKVcWx93Bu9F8CSiOgtT9O\ncnvqD0pg4haen7I1LQAbgcPSPFEAR1GQ63Rbc9iBBiP6pzH2q3fPcMqCex1Q\nqiom5w2G/wyVyr8e1tjBIZFWAIugIxd+P4xmH0as1yf1bmrDAKs7VyUMMLDn\nqLvsdcwK/WmFoGFJMeVgWOq+UcXHQTxtvdiKEIFWRPXJL+hPZjcGge1hoNwp\ncsZrdhbuhmnU6r80dydv2uSwCsiLd8+YRix9qTdMHk7vC5Fkc6rUiif3Nrc9\noNZs\r\n=Clcu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.e1bc84d10.0","@material/rtl":"8.0.0-canary.e1bc84d10.0","@material/shape":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/ripple":"8.0.0-canary.e1bc84d10.0","@material/animation":"8.0.0-canary.e1bc84d10.0","@material/elevation":"8.0.0-canary.e1bc84d10.0","@material/typography":"8.0.0-canary.e1bc84d10.0","@material/touch-target":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.e1bc84d10.0_1596477075357_0.5039531929109347","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/fab","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.096a7a066.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddd201449cf0d383b99b2859d688cab52da08c46","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.096a7a066.0.tgz","fileCount":18,"integrity":"sha512-D9zd/M/b38cv222XpDT+4Hrzw00lAdITicyRaOg4Ey3w16P/arp5c32AcuK7oesGNA9/w4fC1pbTtz18HKvlSw==","signatures":[{"sig":"MEUCICBaGLgZpuN4FqrcP3GGqoFCI7MN/UCtREcAUpL9YrVFAiEApQFTk0nyZqlevC3zSuvq3XASo4Ux1zFk2jOtamLkkTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9QCRA9TVsSAnZWagAASgEP/3AJQ8JQG9MzOII+cooU\nznKt6pJlQ3uKY3xBLFc6U23eb6vddXtTFxV0mMU4/A9LbMro/rTJSaAv3adE\nqCCYLmElzqAj2mXYLA3lG3RcAN4mDw0aGFRWtIy7MPCSgx2d+VkXaa1CK69f\nt3uHt83plwIfGLgxUFeDpH6th9XFbM3O2MZ5E6I4tvZbLoZDewUMxYUz1SHd\nFL+x+Ggt+Nx3Fm7zmtRrdUub8T9tEf8DKBoe4yPq1J6WBc/gbUqnnZ91wxos\nlqgUFijz9EGK1essVYXClpLdY5lPrs7IrxkEV9VxDPIAVn6uFnTtSYj21adI\nc1YXhTnZTjvt0rYleei5DUoSKF2ULjdIL2VB/EG6G7o45CkUDxqz1RiGSTRc\nFjcYNY6ZpoEbuXm20NvT/uxzzhIKc9vfYHa1hdHMPLSBP+pQLmHu+OMLKUxx\n0rc+hntUQRJ0k3lHZs+eG6ZfzC0l50lfh+s13u43STO4f5MWP4Yz9NBgGd7/\nrCAjfS1UwQsNXaFdTDQekba9jgGf8GIjDFdba050wYmpgrttf3iT8qI7kXal\ne0pQS7dOjC+1C036Q0oUYIgiMCl4NSMX4otcwik0uP8/H5btpvAOEqSvafwY\nrxXvczYJvsXQb7wpd085ECtnxJOFqIaPSwEsAMcTTfdM6GIzySCJika5jdHe\nIrny\r\n=ALVS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.096a7a066.0","@material/animation":"8.0.0-canary.096a7a066.0","@material/elevation":"8.0.0-canary.096a7a066.0","@material/typography":"8.0.0-canary.096a7a066.0","@material/touch-target":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.096a7a066.0_1596477263660_0.4419267262075348","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/fab","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e90e1bfce2b72c49a2f0c1fc729f4e8f3af37def","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":18,"integrity":"sha512-fVMPRrX+rpB5RBFiX6LngAUkWiYpgk9hzTNsNw4v0serQHMBG94SmZdF5mRBHx9+EPPKTQ1GE3d/RSTAKG/DBA==","signatures":[{"sig":"MEQCIHsAomrqa07cudQZbXahyXA9PY2O7qFfL0ORdTnLxw3wAiBQXqNc6KyYmsyBliyMfLaH8n6tI8HWicd0cs7bExd69w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE96CRA9TVsSAnZWagAAXf4QAIn4BO8c2JNGgs4Ddb19\nosSXzZ5u6muxXsBoafQkkSBkrLOFV2zrzgOJIVg6RSHuuxPQ9O4uHxkgrX9g\nHeByFVocoVz/m6YVuuGu3ziZWmYBiak5rv0dWuG9J+lcpAJrVE+1RB3o7y4x\nD5z0gBTXV0XCy1UswGkJ2e1XvBhLXMN8iTHky3ZlMD9o2E4hxL9HZbIBLrsh\n9BydpC+gCezLaIstwB7rjxcFVy5DeAaafOSle2v9CYxVXgaldjt/vaz5nyQ5\nG9396QmcRYkb+mI1/cEpgP0XB0Xy+UvitW7244r2ZhiPcZFwMfdX0JkqdkUN\nL0vxsdR2l9oROP5n1KVunALKR6mHKiTywZlsooQzlHJ1YBLdLQeU9eYB+Zen\nuj7rmrHuCLvnwr9ULlZmS0cTyhzhEs2K8qBKD0SDzzLThTs9uaawtoT18Cjz\nc9vZgkyvouGfyx40iQhqufaFMqgBfYNfSJQ69ikgpDG95K0PlG9opQ/ZrBjn\nbNl2Q7LQQz76dBoUAE1rvp5g6Am6RcCgRoMK9aG7Wk6CFgqUUhmQ66HESx3x\n9Y7kp/8jtC6dcjJ1LGVGr4CvRr9vN/BfxWG4c6a4ROp/S/H5DYExDRz7/j57\ny2pxRqAIy7RdWI0fxzLaSmz7VY++JTJyj1b2rCkTMkhdp3E7niIehXxTsgOg\nWqEq\r\n=iIzJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.aa3a3e5a4.0","@material/rtl":"8.0.0-canary.aa3a3e5a4.0","@material/shape":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/ripple":"8.0.0-canary.aa3a3e5a4.0","@material/animation":"8.0.0-canary.aa3a3e5a4.0","@material/elevation":"8.0.0-canary.aa3a3e5a4.0","@material/typography":"8.0.0-canary.aa3a3e5a4.0","@material/touch-target":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.aa3a3e5a4.0_1596477305421_0.6520724515834104","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/fab","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.5903d39af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf5332c6d7e1c3773719fe37d84817b9a6309146","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.5903d39af.0.tgz","fileCount":18,"integrity":"sha512-Ui5Ol69Skv+7lcsFM3XuIDkVmEoamDF4f7LvRnA62UOkNyGAd1JlRXjbYHMuslMXnmqG9A5L4oiixhmuutOpKw==","signatures":[{"sig":"MEQCIDAOngzaB5bTSHGmnWs7j/24eyTTA5UU379rxUfvPT6NAiAM/O4M/sf4rMcNte7rncLBfp9c1aogLt6JQr7HOkPtEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+CCRA9TVsSAnZWagAA2YQP/00kRcabuIgI6JZD/zOs\nXJyG9x9v8Bjg+Y204G+kty5ZO79GZc8CSRHUlrDOWC5S10tCxyzLUihD/57h\nhURxkDr//eF/TmX3vPUttTQcB/7HA0XYDrU1/5ilka3tg4eYInQ+EZPRBisD\naHThN3E6Rp5B3B1XXoAILOlvU/3mMQsWZn/yg7W1EanjGDPQgBxqE8M6B98c\n/5Qa88Q7/Qd1S/jclY9KhFfdPdfgtFgBYHysZbsw9vkwOIQUki3RaJfR7IlU\nQR7qBncmQo59TA8EBsS3k9TySblcGFn2vQkLa98n+Tv06goy4j4IS8YCjJpA\nzUjzAtyibI4q3LfgCBNV+mWxczCu/3/y9zQVfea/N/sLo3elm0NCk/RiyhdW\nYrpu75UWUNvg/Hs9X8HD+6I2k03NpfSqoDXz6L216TXWtKM1odONFUOAqbT7\nGkiziVyWHaUduVLaG9Dv/0UWMoFR88iJ+mh6NYAxAb8ESI/aPNEAbSbMP9kc\nqaIfObE86eQ/N8H8/pOV9Q9XYgKqAO0rFaNRyQ5/wvtnsdh55+uZHXQp+lB5\nyBdEBAm18Y0EvIaZa6DmVYVTUXUNua1cdvDgF5ixeYIsCwFhemed7T87ShOO\nrUBPoVytTgIG5aMNjh8Lp6wUkbcctsCGtRhMaiisA110lQ04t2mdedm6RvgZ\nETij\r\n=MQWG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.5903d39af.0","@material/animation":"8.0.0-canary.5903d39af.0","@material/elevation":"8.0.0-canary.5903d39af.0","@material/typography":"8.0.0-canary.5903d39af.0","@material/touch-target":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.5903d39af.0_1596477314205_0.04936258807582372","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/fab","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.72258f898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20c4c1bd65315da809f26b4c94cb2add123ff66f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.72258f898.0.tgz","fileCount":18,"integrity":"sha512-VfpbGuuBk1v/LQEp174a1WC5FGfKL+xyWxaZPD9ADbeUBzqWnSRv6msmc1P98r1MJVOwhg/jvZuSFMeMv94BjQ==","signatures":[{"sig":"MEUCICSVVApLeWHSSXs9xftCcwZzKCnJboXBwbHVRtzBGIgcAiEA5um3ukxvAFYanEVHr4IHEM3ZuFIs+jYjmfe5kFVpCpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLdFCRA9TVsSAnZWagAAi58P/R2gKZK1lSvHnKXJ2+UD\nFctNz2zQp8z6oKS46D9T3/ro6s/vMjR1bbc55MTjIyy8i67MiWi1jmi/PL/F\n+i+XG43x7ybhgkGJzu/yhhDhVXLss/HlJgsVG5qt36ZXzgE/PS1HrEWQLwT3\n2ht+4CwDbT6dt0mvdtcMpr/hklUJeak+S2IzHRFpJ4qOFudRALI1rEbNm6XW\nPSie9AFeCa5nzbKoyF1oBtwRO6Ezk5d1hTpFnMTUmikaDaqlI55wLDGz92kt\nAPnyeqBB2V1iwU6qeMjxTTEPrWiVi2K5azp4BKzGaH2Fv3YXd+fUpsdFnKdY\nNu1VbaaIp4jvbxDMViJdZNBcbhPpOP5JHkZOrjApsDtWLKTc81qjb/G8bqr9\ny89i4xmaoR70oJ+YAGWSIa8OWERi5wFphIfqdqLLHcE5K5TyEHXH34QvvU/L\nWnZFWVQOsd6JawMGCs7m+LwpjuLpe6TA8N3XoP2QyuFo1Rus3q9ZCZ1WHBKG\nJGtGfmAE2t9qFaXjxuNiQ9S42F6eqU9OSKVxCIDoZ2CCC/dBQs2CcuBFy7xf\n1V4Mb+g/wMqw40/TbGHqjowLhxjwz8Q6HJhAFapDtUH2a9pDcpR6DBtP1Lpy\n4/T23GWGa4VKXLAz4UkA3ptAHUrSVjg+Afexxdkyzm9v5gRO98/lch4GABbO\n3Euw\r\n=JQII\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.72258f898.0","@material/rtl":"8.0.0-canary.72258f898.0","@material/shape":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/ripple":"8.0.0-canary.72258f898.0","@material/animation":"8.0.0-canary.72258f898.0","@material/elevation":"8.0.0-canary.72258f898.0","@material/typography":"8.0.0-canary.72258f898.0","@material/touch-target":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.72258f898.0_1596503876751_0.5804214026352119","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/fab","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03e90d2b7b7054ae6926759989734a8553aa7336","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.1b44b43c8.0.tgz","fileCount":18,"integrity":"sha512-bE8QD2t5dR9QbPebY9QHvycpJzb1PBOJLtGnPfDRiqUvaeToPdLzci1D1xuEPucYQhWWJHHLO3wJXtfGV8R4vw==","signatures":[{"sig":"MEUCIQCqxmRfnm/Yef0ZTn+U85BWPAvt/PvBoSzVxbTpmDmz4QIgZY9G+UCGzuCUWaxUdAaNJNThIvYyNo5bWSC+ilfcztw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZF6CRA9TVsSAnZWagAAfHEP/iZ5c/IkCGGi954oSUx3\nD/93z1R6f60kf53NOIQajfzJEOJYLEWFoMC26A5QuLY8g2PTZMzWjUr6Acyf\n+RD2tDwCuQabxGhhs23TRoUmGPQcN/HWPYFTt5NNbaN2ZFVvt4GTILEm++cq\n3SUmefjtlY5/DX6JiHY6pJxnrgt+1fImqnmmgsY1nBedsm1BDBnbxRPnPIgm\nJ1i1m9nhOZ+iAYhwHo6CQiDEv1cZURpaie9ufKiW4aCVodEpmvmgJINbeYf4\nArFi4a0sFUUiDRzf6kpqRI7qrGgfnfeEMqnLHh14LKlcNoEXEJkHK8COJnGn\n3Jnik9LMGeXV0LNEL36Ncb/iMD+5lG2gZYQB4wr8D0iz97gExfQM5iXmNJ6g\nmvfNhp0tVHB+7jAJGMNdzjoU1eGvNYUfgkasMgPybITgAudw86VPy2DA4nfg\noOaZQ0j5b0Ar9SrQm+PsNyDyr/e4eZHf6Q9JWMAWlccE2Ma9Z85tV8qECDcd\nL0LlrfCLPkzAkKJCLJtD99demc8+hLpC8XeYleHiCN0zZjOd1E1WIm26ljpX\nKVkuUO919x+k2eq8VIu4z9PPSfVMxkvZCzEVzDxlm6iqXibEJc2xMQqdyVe1\nfS/wxm7rkn3CtxCWE72tcYY9cOcoh+kf4B25c+Lg1pn2JfW/ChQUJwzUW292\nl+gV\r\n=oDty\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.1b44b43c8.0","@material/animation":"8.0.0-canary.1b44b43c8.0","@material/elevation":"8.0.0-canary.1b44b43c8.0","@material/typography":"8.0.0-canary.1b44b43c8.0","@material/touch-target":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.1b44b43c8.0_1596559737695_0.12045766307485928","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/fab","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91a62212ffa033f55f6a59a7a97c51ee73143e07","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":18,"integrity":"sha512-4nr0sUJ9lik2ooL9NKjE+jAmEn56o2aBg3bNkyjuHC0lYyGzCeXw6bzWRcVodYZrdsiDo3MtdLMw65i3l8Id2g==","signatures":[{"sig":"MEYCIQDhcAgGgwuNcmLKgZuALEaFoXw1+e21s/yM35lXH5r2uQIhAI5I+o+9RKKunwi8G+VxhoM9eYxobwYeArAGyUZBW1cq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcQRCRA9TVsSAnZWagAAiykP+wf3yuTNTbtLl5+1aYdq\nLhImPPFIgAwOkihrMdwtdX+WfqbPqHRQ5vGy/TcyEnAd7mjNXqWjnhciW8qD\nH4otc7bTieiKoTXrvlou8ZgGG65bUy11NX1DXr0LhG1rGKne3zk9dU8XT/77\nL67c+jmk+QnrwqjsOFsapvXJjxR4V/PjIdrkkglW+yQekiHQBF7TGlz0EqLp\ntrXG+JUzR7cnR2JDVBZTQMxeHr4xNjhnL3Go1K79DM+g+VwET8nc0WCAfp6R\ngCUAUzbO+E0MOQ9DEj/oJ/Zo8d9cQq00Z+KHiVwgjZABiXz9f33bZRlDbO7X\nGU1Us4SZBJ7dAXtuN/2rzOgxOhaEnR75vTWFYy4vuAjo+YR7zdnA1CZN6JDj\nU1fJPCTkxax/78Z5r7jCOu9KAU24yjmJhKMxVIyrLGKsFX5J+2oZ1S0utOL8\n7hRAdYPzV4EVVGIExiHr/dH6x1dpDlJtDmqUdyj+4S70qsXIFvFaflKWfklt\n1M3m1VYmbVTCllqd/mlbyY0EKE9B73EEr3M1RHao7s53sq0tYt3xy5WLKdVx\nr4LIf0PGPnBn3IDko4wTz5YGQYPr804xBngJ9pC0pFMd4e+EWBZ+DuH9036V\nrVuCRTVbLzWdosgHAJPgVkjAM2aUzpBCy+0fwrXa3OudRqzZpnDzslmPmM6L\nwCn8\r\n=KJcf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.e9d2e2f96.0","@material/rtl":"8.0.0-canary.e9d2e2f96.0","@material/shape":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/ripple":"8.0.0-canary.e9d2e2f96.0","@material/animation":"8.0.0-canary.e9d2e2f96.0","@material/elevation":"8.0.0-canary.e9d2e2f96.0","@material/typography":"8.0.0-canary.e9d2e2f96.0","@material/touch-target":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.e9d2e2f96.0_1596572688795_0.49899135518306936","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/fab","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f5382eb301f028624b7da71384b902329e99dda","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.b9dff0a19.0.tgz","fileCount":18,"integrity":"sha512-awZh295s8sr7nc+PsbHCFJcgDYJbUVpy3lThii4o8rr/IMLFcLadPXHQDtgELz3NHdl1X9jyFkRA0hndL5Z36Q==","signatures":[{"sig":"MEUCIEL8BXdffy6hWd4svagxBqo5dhGEz7wFfXB0j1HkpEIqAiEApnyVvdkf/rkdDiDEfqaIPRjMMdC/6guFJ3cX0VcY2dA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKixDCRA9TVsSAnZWagAAjSgQAJfhq7STXk2dEaEFK/zu\nNmIOKjw76rP7IMo5SFHwHrsyOAtn3kFWxC+59F7iDmgOSwyYj6CYhcvhLS7B\njvqtRd2r1uyljGCatZZVlnLbjAp1Bi/b8CUFpSzKpDBCgsYIJCzaoNf4Emkx\nGHFsFtqB8TJX/kQSQUgnEBhMNe7o0XLZo1HmWBKuvGMFqbGn3R7kS6cgPbo/\nG3/VBEcqJVBDwVHL/aCugbKychhM5LuEQ8PVp8iOtlcRPp4vP2oOSLEu7EPD\n/j0xN7CvXYHJGv7P59LHb8CU/A0BKIrm/9hj7JpziQw6ltS9DmvTKlOCHJUb\nb3y8ke+gTsEWv2besyygKmID2vdTxKYo7oNZyRL+WB3MEMHHlP5mKwpaliOF\nslLnjltn54+LCLSBu0hrYV7O2zAUUUYte1zSy5mqcWHjE4BXWxvajMsgHfuq\nOtPpl2NwP6zYb/80Ob/nqN48vEYIoKDic+CRqgMeiKsNnTRuTY7XYgjWk4iD\nT0xJIMWLbppyPq7aO4WJ3M9E2qpOfLH/miZ9aCHKK0RWVGd3zq6gxoIfx1YB\n9b/OG2U0K865ZZPhAvastK/JKKtGCDcMI5odGoMfgYvXjknPGPr6+o6m3KIs\n9Yicz2t+nJ1vrLPKNYaGxXiWrhxWht0XGJ/kUBuw5oF5BYQRiE21dAbtZoKq\nKqbq\r\n=T7Ah\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.b9dff0a19.0","@material/rtl":"8.0.0-canary.b9dff0a19.0","@material/shape":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/ripple":"8.0.0-canary.b9dff0a19.0","@material/animation":"8.0.0-canary.b9dff0a19.0","@material/elevation":"8.0.0-canary.b9dff0a19.0","@material/typography":"8.0.0-canary.b9dff0a19.0","@material/touch-target":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.b9dff0a19.0_1596599363030_0.8553210419680135","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/fab","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2d898268aaec552ee65caf84f48f81b64bb6856","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.2bd09a706.0.tgz","fileCount":18,"integrity":"sha512-ZIa0emxTUBVlrarEmWrmHeZBXYEBqH96FMYhbEAEulD22o9zZNqoSN8BPtoimEfrfn0JQVVvulRZeVtz5jaTqg==","signatures":[{"sig":"MEYCIQDKrq3uEz4UC/G18//ekoimKWHqdWHSMEW9vUBGwoCMeQIhAKRRTk99RMtGh/LAnspliVmlbaQ0WGquoV8BQTCWsGac","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi17CRA9TVsSAnZWagAAsRwP/j8O+VeJrICI3DBvsEVB\np3tRgDn+bWOvPbHwpXFdZc3qE+rT4lcU+KjgqMLB4bicDlRoKfjSgy8ZSlgf\nSHC5WJkMY4tE/7drEF+8+w+IR71Wk+pvOIDAvOSBrrfVXIM3dWqfpo1mD1dk\nVtQhtIGFOLWpBRhmQTHZrmJ2EopnZeVeaX4rApL7qTpGZ6FQFwucgsaPu1k4\noDwiz476jbh8qnTBneJFYuvZUX0wRUiAV2ePYhTLLgHKSPQCI+BWaf1Rrohj\nj5EEu0UUT7hbpmlF6IHmXsBsFIWxGPsvjWnGZSpqnI/4ERa4OxQIVlqaPNU6\nlOPFz2xCB7LzbhP0OYwb8KanxXFQ2Bmx1cp5PwJEOqASzMh/bTB6N2iF0Eu4\n+1x7azA16U0M+u0gKjbUS5cetvsOJ2dXCki4wJ0lDgVeoflKVlV29rHfzAdO\nudTWHmzg7T9LoIr2ezZ3Fre+XrQ0apJFVV8lqVd8WEfi4SqbLL7+k96Tl3Im\nbctwe54+F2MOvuusjGKHf1qBpTg8M4d/QqbdBP0YelpVLgbdVyeNb0wFfjof\nyXt3EuB6OyQwt2YrGxOOWDbS+wAMy9YvWHdHWvHKpUVriD2MGfCpfpB1csON\n2zqNI7HnlXwJvLq27kFpndYOKLwgHxUQ3fPr2vwVnpsCFLTn23UKkGUdIjO7\nVvQh\r\n=qNWW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.2bd09a706.0","@material/rtl":"8.0.0-canary.2bd09a706.0","@material/shape":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/ripple":"8.0.0-canary.2bd09a706.0","@material/animation":"8.0.0-canary.2bd09a706.0","@material/elevation":"8.0.0-canary.2bd09a706.0","@material/typography":"8.0.0-canary.2bd09a706.0","@material/touch-target":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.2bd09a706.0_1596599675384_0.2187848076467389","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/fab","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.e0560522f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21b30787939bf2baba8f215b24dd554f18db7fc8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.e0560522f.0.tgz","fileCount":18,"integrity":"sha512-LjByRE+Fgudc2hvk79wOULsOzl7N6DymyJmEHo8o9AduT0nXUBLd+4conbWTDBK2h9oVwY5+vAz6r9UGzoZQOA==","signatures":[{"sig":"MEUCIESqFcSxPxRHUibU/eVTc1hL1pR+NMA1YxFArwZLfpXzAiEAuHpiVAq2Bqx6SLjDC5tPwU4nA8ha5ChgB76vxnfRdNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKupiCRA9TVsSAnZWagAAcWIP/jTWGBJak8idwqMytCuC\npirjP11pqTYqfZ9Owwb7tww4veyaXYSuULPW3DGi0K9NU+C9Rp/q6dCbexvv\ntbF/ns7oKnbiywXaC6NoqXHhHxDcZsdOfXr1R+LKepPsV60e7hHIllh8Yvq6\n6zL3IkUfTXJ4zpxpPO/IGRctOBPTTW6olw8mketbgeGl0cB77qJqrr1fPCKk\nOvBvad3C1II4rvwlTqUIqZGeNdhIywt92P7L1yZWBITG8w9O99K67PEhbqMe\nKKt2sleK1Ti8vDqx42S8fhUn59cRQhqJQ74FUiAiz8uJPsDKHuAE6DQwktCX\nshcCbkej6xmJouI8KmEzF+MowZQIcyb/eDrr728gTdLciXLdkp3KrvPHZSjk\ngk+3Dtw8rX2j9qxbunIJorMt/pelFD+8yty8Sol9F/80V/93Wo/UMzaNLNW3\n6irC3gYhyL+a3z3T2CjXUH9+rQkSy2sW4xR5/ztkDtaK4vBlJZwryd7OIc01\nJdN06/Osa92GPV50af7/59qMOBuFD59D97LBfVKDt5439NL9AXwUROPHFoc1\nHVdsh74V+S8rjDhQwETQ/VTZjrRqmTbsROe+y9Y+7xJfrEX9yA2OWr4qzBGF\nUAM25AN6ALwrZ4R4j0Gc36BO0OYxYE4kbgc6+6252hCmWuoE7hyU86MbRSMW\nUsEt\r\n=Kzfk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.e0560522f.0","@material/rtl":"8.0.0-canary.e0560522f.0","@material/shape":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/ripple":"8.0.0-canary.e0560522f.0","@material/animation":"8.0.0-canary.e0560522f.0","@material/elevation":"8.0.0-canary.e0560522f.0","@material/typography":"8.0.0-canary.e0560522f.0","@material/touch-target":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.e0560522f.0_1596648033978_0.0494594517666509","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/fab","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d95d72df0e91c89b96e8bd20a01a2dd453ed722c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":18,"integrity":"sha512-Do8rQ+GVutyBbWOHSD8TYSml52yNMEV6ZsKNWM+N5XEe3xruQcHoOL3UFGVrxgEVuN1EZZEdDCaMfC5xBplvrQ==","signatures":[{"sig":"MEUCIQCujPVcbQT04EiHeV4jm2PY0XyDSpVj57FN2s8ZFQeSWwIgSuAroPKFyuNKmpteNWRqzkhadZqo6QM6kcnEiIGmzqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu7tCRA9TVsSAnZWagAAqyMP/RObPOpUH8wIZnAayOxf\nucnOMbxPOvISKjZA/ucRIm7BiPH09wqYW/z6lFmaIxibOtyhJPQiL5Sy583/\nj8Zzmu1rNMjb62tAuqGDwG47t6zIV9B+XQ5O9C+qrDRE62PiT2ZtJN7Zkijb\nMeNGk/1Ng3pV2mbteUt4C/mSUsD0RNqLK6cnlWPlRPgytTloMziA7MylxKlH\nebxdqCokAt6FO1kD0IxCY9lWOlxkuvnWCY31sAf58gR7nGYNgcM6jk/hgmtr\ng2sEreyQ6mUbpYIEFr1amSVMTLeShoHbgrbBkZnB1zaLeEq7BaCeHbVWKIRB\n4XqHkYTmZPeo7aqBMmUXCmyw0f9XMwb2+/iBEh3pA6I6odZFlcoWxVROSEVz\nJBxB9VA9aO3Z5P/kxBELmdpMqSEz4fPjFLsKJ5h0/FHjSqgfDBchOEeySCjW\ndViDvSXejpgc9TKP7WxwWV0TgcOJ4B4WVbwei9N5L+8wZDqIzmbGDxjeB6QW\nZizGqycgCEiqPVpr9jHYdrzpkSza+bL0mKexn+2TwMZGJaMsnaBFbWA2zexz\nO7chSXbHJpHOMcDp6X9tLq9nn+Q1aWRHz3zT4no4r5EXBpPIV/P/+cIP/PXt\nmd36DH4nocpyMe0EYOW6Ao7oDVXPEJJfDzfkXTsh1GlZycRoZXky3h3IBrSt\nF6NQ\r\n=d6t9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.08ca4d0ec.0","@material/rtl":"8.0.0-canary.08ca4d0ec.0","@material/shape":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/ripple":"8.0.0-canary.08ca4d0ec.0","@material/animation":"8.0.0-canary.08ca4d0ec.0","@material/elevation":"8.0.0-canary.08ca4d0ec.0","@material/typography":"8.0.0-canary.08ca4d0ec.0","@material/touch-target":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.08ca4d0ec.0_1596649196765_0.5005628888357532","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/fab","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.08090126b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b4024c1c80fb90224130f3fa7aa18871f078369","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.08090126b.0.tgz","fileCount":18,"integrity":"sha512-yGqiDBFBmGKuzdv8jVmgZ4PQuSsgo7vk+0K88QABmm6XoqahrwirhPjg1k5lTn1vVlJinlHIcgAlCv7ThXgDFA==","signatures":[{"sig":"MEYCIQDkCrVSXSExRVOgvA4m4op3Q+uFhaC7trgaVzL8pCmtcgIhAL8/NVSb+o4KxyChRreH1KCIgNqvk0S2WO+E3qLKaBDd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFr2CRA9TVsSAnZWagAAsAYP/j85SX2gEGk0QmFjrQn8\nY+onIUWRaKCJMUPo7OsWHRN9LsJ/bQaJDxsNd6el5y1G1ELhPwY7mKngxUr5\nbfWi1n1u7m7SVtLdMt+2mlY0yBB+8OdeguUJ/bGKKE9bwda/vNypvCSJpsu4\n1J2QzoEYGFR41tQ7KY9+Njgs5TOH0J5ioBXFaasFtMydVPxsT7jYP9uqHLJT\nK1L1Zt1ocWtANdpSXQBAizNDeH3C4iTOBuexNhM/l+gf5KvFWZjTZQz2kn7i\n3AvBzgh9f9SWdUkrvVR5gXH0g6RRU7NedfAIete+EIgjDyf0ITaUeYBl8ghJ\nmeuScS0WTEbl/fFYzW5OMat0+yNvb5V58xRGtjzzrSGc4KwiIUaUvQKkDMtB\nfFj7ZU0dBnyeYQBe4tBrwSrwa+q/Oob9s0nTnftrNbJQjEh+cSGDM1CDQOnb\n629tDQQjjPG2CbeGXrLX7Wptfi/PjTxoWg+G8EXrB+MCLPwA7uJkaxX6p0GG\nTCeGK6wuGVrUkWgzArZanz33onlKmKppcIubWUwGel44IMax0ZaICEyyHd4a\nMJgN7X8Ot4xAeGyxPwsNa7cydBfzAIOO0X7fv1sKWmCWTSEFDOGIQ4gVZoFU\n7hkRAne3Dpzd62E1j7qEvND2WCvQ7ZvomQpaZyRfFdMHshECjH0VW26b1mpY\nvSYH\r\n=gz7c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.08090126b.0","@material/rtl":"8.0.0-canary.08090126b.0","@material/shape":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/ripple":"8.0.0-canary.08090126b.0","@material/animation":"8.0.0-canary.08090126b.0","@material/elevation":"8.0.0-canary.08090126b.0","@material/typography":"8.0.0-canary.08090126b.0","@material/touch-target":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.08090126b.0_1596742389477_0.9110117573102634","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/fab","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab069e65f28a1e2ba504a1e604c761e71e40a819","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":18,"integrity":"sha512-8Xv9U8bdCCOC9dw6HgCcExG/2lGS5MgPAeIg0nBSiVA+wJYJF2Ot3bl5HwECHQgFElVYnud7sN1ybWGfJMIBQg==","signatures":[{"sig":"MEQCIAGV61Faryf+Rd2UdOwuOSuZ/tg+gzKo/kX1DScZ8OqpAiB/XXgNwVF234CGlBscZRmc9S4cHXTDG0DbCWqW8OXwqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHstCRA9TVsSAnZWagAAdmkQAIjnQflQVpYY1G4bE5GM\nLfVkXupPLKEWGEJ+4ywZENN/OS+oLqtTGhtnjsOInZSI/p2LvhkKjmRD1TiY\n0GxpC/mPyn7ovFx/NFJHzv+jYh9hI0CotCM0rW0ri3wmHoZES51aI/goWrvu\n/4K8OpZbJN1yo1BcWzy3tmD4r11feaVpeA6fJ1riigSiqCc2PdqNSCKr249S\nc/NvAXCjLm4fM2pYdllCCbBTqhkTxVAfhcChmaexb+ymrxGhbONtAVh7M0Qt\nCe7HWO46hhalOZEbPT1KCjK5/nGR6vHbO18zI2Go6//+hEzPBlTAifF5T2lc\n2v1WE3RoD0tfkgrL5QW/SdXV+asTJuByo83JlqSZhnukXtiKZlSCovcU+UTV\nDNho7kO2gDELjvqglQBJkUpO/ugTwiPornkLhVj4xRYNb5Rbt4dW5LjjIpbw\nwI/oeJImmX4zAmQzxNcz6GgeC6XHJ+Vz9F9csUKmyDcEljUCYWCq8vWQ8WQA\nA3C8ne94woxtTSLU0NEgmQ4rKJTblV5+uBWVUNRJlUI88J2VtJJ3ZfuGi91A\nrwWRanWkChFEKM8+/QNJRKorg49m46mUnNEG4QPc71oVLLtfPMa7aNpEzMxv\nub3NNVvnjjclkRx5w92bp9Mln1ZtdIrb9lojOb5MVSd1xF8bfwlLTxghGki7\nsg9r\r\n=gKbE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.e8bf5b2ac.0","@material/rtl":"8.0.0-canary.e8bf5b2ac.0","@material/shape":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/ripple":"8.0.0-canary.e8bf5b2ac.0","@material/animation":"8.0.0-canary.e8bf5b2ac.0","@material/elevation":"8.0.0-canary.e8bf5b2ac.0","@material/typography":"8.0.0-canary.e8bf5b2ac.0","@material/touch-target":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.e8bf5b2ac.0_1596750636809_0.5538784237041277","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/fab","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.e3b746208.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7996247cad999b8894eb0280ca048b56d50086fd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.e3b746208.0.tgz","fileCount":18,"integrity":"sha512-A//o2LXc6Mnt5ni/H1ZQJoSiD4TUj0UXVXsfYADNr+Fg+oVR1pO6GDid1Et82Dk6CfoqU5kIKhHt5X4hXAiaOA==","signatures":[{"sig":"MEUCIB8BA1vO4EHvIL8fFHLji2AP3sLeSDGHWgHsduNfOu4zAiEAmbJEPXtrLUKiB5ll7gjm9s2ZxTjcL7DSompus7Mdxr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIPICRA9TVsSAnZWagAAAE8P/iRsUovModPrl0BRH3kQ\nplkwKnW5CnUSNgM+vIGMvXlcdzmPuEASgdgjhuaU1+nwMsEH2olfOyUBzf5/\n1NbmZo/mLEVq1cFcj1q+IJgcURV64wmFmLtObYreu5miOe/xMkxKdBw/qNcf\nDJQvxoNhlHmyZLIVvWUY3TbcegDLnOGO9R/CYyDWa/szkmW2OTTfbh9+FYnX\nCM8fMjvEGM4mA5C68yxw5WU7fZdFISxoQzbppn66Mk6tZDaUrbdEoS/Q2Z4A\ngbmSLIkmWR93B4UTjWaCsjmSaETmLYQVakxmkOV287gPvkAVYQwUQnYQFsOO\nPvRtn0UsZ0JOqOtRPOLxXhZ9AsZqK7VGqObS2Qvw8CHjljYTke2QHvkxBPcA\ngQkaelRTXIJESe0caYERUajN1g/8eCS1R9kxNVCtQpA71VMxSS9X/iWYFsQu\n9tgq9sQey++KzXgFQkUpjDcyql9ke83vZwDocLpOpUZc+fbMaolOKRY5X9hP\n+TEefGdcWdhHfMTw+CzOPByFnSl9g44zs2R2F4MW7I8dFLQDY+H46XXiOGS3\n2fw4ROyme3QiOkeZd70sDSYETCNWRY067PzE9ER4f0V8Jlo2oCyhvy/ULLPY\nY9zX1Lmgk9RQhc5DKjmOmQjwizTQfSj/c4uf4ARUgnjRtaGD8KhpI68g7YHo\nHAa4\r\n=7UnI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.e3b746208.0","@material/rtl":"8.0.0-canary.e3b746208.0","@material/shape":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/ripple":"8.0.0-canary.e3b746208.0","@material/animation":"8.0.0-canary.e3b746208.0","@material/elevation":"8.0.0-canary.e3b746208.0","@material/typography":"8.0.0-canary.e3b746208.0","@material/touch-target":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.e3b746208.0_1596752839826_0.7606905247733373","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/fab","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.96a640534.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8fe9ac770042d64d2d3c7458c77835501532ed5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.96a640534.0.tgz","fileCount":18,"integrity":"sha512-fR1Bgu5wzWt55Ikx7SfpJBZ+MJpOmIoxKXruwZJgeaUUWeFSMWqehQPjYfZ11e1VE6yxfcuGRf0ift2FhSmDvA==","signatures":[{"sig":"MEQCIEjshALMpOTrWI/H2bnbDtHdi4vPR1ObvvmF/YgHUiamAiAxi/hY43AHmQWfzdj3kbIwX+ZbaT4bmDsflm97YMdIHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIc8CRA9TVsSAnZWagAAc9EP/0laVBsGdjqasw6kYqdG\nbxx/yWAO4rnJmPE6FHWwNQvcZyko1VUigwUJwhiIGaQZXhwEnZl3aIGiIpQ8\neGPTrXAu0UhQ5h9atZ3a3ZQomv7tJWzZhOPr+cyPqX+JlW3zLy/3vrf9lMhP\nH2ldltUKEFIGhwWxbg4b6AyEKm89hEb+m9oIaLElRNIr59NKjLApAioEMyY1\nmQigcTvOkJnFEaIfmDmoReCIYBmshQzEoP4WkIus0z+63Uz8BIBBTNGwsS8R\n0oNwFdBrYQgAuwveCne4bYzW84UrvY0/qUh/HDt2KGkHn8h11YH8t5onWAV+\nZtTtbpBQZ68AXxvx8eZykAdVwAA5Q1UxoS1tKx93t7TAOsSbWuCPBGJQ0grZ\nPQtdPCkyDsBRXf4bKUapnh9EcAAJPCMrGhp6fOEsjsLXdfzbCkmr4Fb6eDzz\ni9sxp2MugFMTx6HodJu7qAcQF7WJ43+UB+wNaZ355e09Hqr073oaiShpYbAC\nMx4ZcqLl+lLLwWRTEpsADeumEMBgfha4PAKrCIOYQI8DdzDJoWeyi037nl7G\n+IW17gJLymDI/eK7/Ivfssu88AIfx2oF+ZzE1XAjEuxnTyTymB0h2MP9UGVC\nVryRIOZ2X2UJMWzq9RDMyDgaBJV/B630hfKBbYLpklFoONvFy3KcKejDn9W9\nkDUb\r\n=Mluu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.96a640534.0","@material/animation":"8.0.0-canary.96a640534.0","@material/elevation":"8.0.0-canary.96a640534.0","@material/typography":"8.0.0-canary.96a640534.0","@material/touch-target":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.96a640534.0_1596753724011_0.17162211604528355","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/fab","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7454a457d7d9c1b3223bb09c82224d507a14d7b6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.9f9aac825.0.tgz","fileCount":18,"integrity":"sha512-hD27/Ao5QIvafR3d/kGkLYSow0B2CjaCocXAmtOgm4+slQ5U72AKlSOjnMwzntFsrBBk+NZ0y/DNEE6mUnBWxQ==","signatures":[{"sig":"MEUCIQCvQ66W/Sf20nN458JypHN+zoKG2/X4FhzqGP1Jw1IKxgIgNoyd55MhgQB1A4RsrORr8By0P4vrNJ6umKARx/KuhWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb7rCRA9TVsSAnZWagAAurMP/3TLYBM7Io3ng9O6GwgA\nkIve7jxCraaVwRNK3ax5NDzEghrwo/xSyvdbEQ9KEmad1Mcs6xVYvAQiUNCQ\nGza9yss40ZgvarL90O/BzWLuP3EYEvPgwLUuKNd6B/9DDQ7u4oV+kBpquhtB\ni3pJ2c/1trKt1ewx9p6lVn4VvZpXXYTeuuZeXShALnV4KzDiH3nYveGhBIk+\nCp/H30ngE/Id+nR11mIh5l8HcZFEmISns7RrNXvmru33RKqXTkpvE5/ldARj\nB396rDCbejG6W5UyML8oYf43LkfASOTSwIYXkNJOQaO3XZOdSI8UrQb+JMMT\n0b1oT3/8Qb1v8KHmEAs7QAZ6A9jPNQGt8tj1PRaXT+yraEOGvo38SC6bboKH\nDHzdqXhLH4L+8y9yCGLYoHOpoYGaqoIRvqtaKavrMtaS35EOm/RLSL5Ne7AR\nGjoCFKmOE+gIajl4by59EETRpayogHXQuaCirKtDkfkapXjanwZFqrwgjTDk\n0yTlKmjY1OL80YLUjK0Cbn2rxmvz8bcvaM5ABaaIl068hp+C4Bw917lW3yj4\nIcK/8eUkdfdyVLgP9gjh3fQ+f0AQRVVs4rXXull34ikOwk5ut0vra5zWtplP\naLxhDpkEP0Ym2I5loG6omhePqe6lUnfvXGvFVQEmcX7wAhEq7dCe2PNstfJ1\nnRhh\r\n=wXO1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.9f9aac825.0","@material/rtl":"8.0.0-canary.9f9aac825.0","@material/shape":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/ripple":"8.0.0-canary.9f9aac825.0","@material/animation":"8.0.0-canary.9f9aac825.0","@material/elevation":"8.0.0-canary.9f9aac825.0","@material/typography":"8.0.0-canary.9f9aac825.0","@material/touch-target":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.9f9aac825.0_1596833514834_0.7315377272563879","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/fab","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36baf786ed8d32dfc5e7f7f41c708e6989b5a737","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.fc65fd00b.0.tgz","fileCount":18,"integrity":"sha512-eyP1/EmlJmZxeQckh7qKzP6AgMeDWxetFTNq5SV1jjjvEVdZOKYEHrD/eCcTW00jms7Is+sueKg2/LVxB3f32w==","signatures":[{"sig":"MEUCIGs12KsR+2psePZfdKeKuTnL0QWboeIH3fhbwKdsFTTQAiEAtWH8nL/k2jKT9d5Lk0WjoWldKj+IZx/qpmObiKSGi0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWXoCRA9TVsSAnZWagAAXI8P/3x6ZjI1QCMlhLrFq0Lc\nJy/2hMzfxKVTWoXrNf8cs3Vds+qd6MizeAggxdEbdfmX1ppPveGC9fvWQNgk\nxkTFXSEsboGzaTjvFsXikx3VeVvDmZQx/+1JXKxSHcLGc0hn29iCZyjx1UCG\nJrULURYHzrtKsctOehBUZ2HZKxEsTWDBqRxKKtpS8m3as50ATwvuGVxi9d4i\nVynVyw1e7z6FVYIpzY7HwM/4BZi/HHIuHtiXe8HPgHCgt2XTCN7Yhw7WbtNj\nOK3csYIczDBE5kj8PARnL88a/yH0+pftfTsRDIvdbBzPyJYAQVqJIUHybJJ9\nELmg5uXoinAIVLGk+oLE96hKICt9166dNiZCFI+ePQ+4Db2K+2DKCD3shio7\n+P6wPHrX6s+h7+rjRb5c5NT8DBy8CIxk4ifwdungzCzEee5WbtGScu/pv6T3\nOMW6KcizNSw/PjHPMIbU76ApLpboAoFszaHb7dWJE/S4zuxdkXcYYA0QBSke\ndFSIihJr5xQYdmEWag0qJH8SEBafosbfHDsO5Yaz6fIQrN1PQILt97QHPNkx\nvusU/7c1Az+CC6AmMdRfltsrho4YXeD4+Mdtrbm7rdVeodyKFWDzFNsTWP99\nVCSrX71Qoqn0qebFroEI+0PvLQL4Bv13xXmsVEuIH+owH9CoMifD78Kv++z+\nVNb4\r\n=UvJa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.fc65fd00b.0","@material/rtl":"8.0.0-canary.fc65fd00b.0","@material/shape":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/ripple":"8.0.0-canary.fc65fd00b.0","@material/animation":"8.0.0-canary.fc65fd00b.0","@material/elevation":"8.0.0-canary.fc65fd00b.0","@material/typography":"8.0.0-canary.fc65fd00b.0","@material/touch-target":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.fc65fd00b.0_1597072872313_0.1653520008635927","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/fab","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50127cc734a42e09f8ad94ded1d1640af6c62537","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.02e372c5f.0.tgz","fileCount":18,"integrity":"sha512-NhXID25lFYY3feHCsV/zQYUSq8L3uhw3EE0S44XInUbRs0IpXxXpYq1P02w8huf89aRGpw6m9G9E8djtb7hJmg==","signatures":[{"sig":"MEUCIQDySzLH0Nnib6bUvCm2puB7EoOz1prR5pz4LQMhcp3xzAIgb02kNqu/pKJJ+NssEo5J+ZmbEjojiksJ5cxd0bmw95U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWx4CRA9TVsSAnZWagAARekP/2avpmuP0zISWNkKBSyG\nwgUbmpRIEb1KWhGYDcwiuLgx6PVX8XCTa3ZQz9cNoFR+1C8BgA8vNCcwaeM1\nO9MFBPI028ETsp3bbePiWhIGXbEPLCqm0+YsGN8k1uYten1434ZqyacG+O8n\n9E6Ck6KUhU2AbJELFyau2nOn/HtaQacNIRpce6IYNOxgYtuG597kpke2Vu84\nyMYzF1JIi0FLSBkAx6a/QCkDwd2Ncdlt31UBgGOgKXo2BxndxcRHjP2LTccN\ncnF6xTqxNxzWo42Cb0zuy6vGjLwn4GlzEQ/22kRsoXSleBpvOYQ9UVLuZ7Ju\nf0zQ61a6hgbfkP3hoUQ28oQQGKGr0LLL8Zf4to65dxSKsKqTBenUzjgLgmbU\nU+TjLrKHwmR/ykMfNb2wxP0wHPfkjASn6RczG1JwbAdqDrs+phihrzUrKivI\nZrAp7ixz5lE66XPSSJ38Zwr2nHsijXQ+X84xDhaGk9frvDl9P1ytI/bwy8dq\nyMXbCEPfJn56ZMwjeCprlNrHD22HuUyOhT1bz59OTKD3Zqws2v57mmR1k5G9\n72r9MIMnEuzzmoGIEHFDctiZ3liia4zrYPROm5P9ubpUzZl4IyUtAALsqJUH\nksC5mNDNmjDXaSf6fTE00UDCHOEsYYL27hCqdwpvsaxtrMnFZdF9wgpZ1S5L\ntgT0\r\n=zwh2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.02e372c5f.0","@material/rtl":"8.0.0-canary.02e372c5f.0","@material/shape":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/ripple":"8.0.0-canary.02e372c5f.0","@material/animation":"8.0.0-canary.02e372c5f.0","@material/elevation":"8.0.0-canary.02e372c5f.0","@material/typography":"8.0.0-canary.02e372c5f.0","@material/touch-target":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.02e372c5f.0_1597074551981_0.6657556649269722","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/fab","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dd308eee619751de38612c85b309beea186788c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.66669e3b6.0.tgz","fileCount":18,"integrity":"sha512-cDLlvbYj0y5b401SIvQ4m+ZxwyP2X3EFlcam54B97TjFXNabqvLGorbrsnQtmd6zV2Db/VZ/QWWRgFFHDDhIoA==","signatures":[{"sig":"MEUCIG6L1dmkahQr1cfLi8ZES9a4tPdfg5HsHI4/1aqlCbOBAiEAp/GwVSiaL3ZOB9eyW50P+0pX2+aEgASFK6JFKrk68lI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW1kCRA9TVsSAnZWagAAOfoP/Rnpcu1lbRncwYpr12Zl\npMCF865Fg1wqRcbXF4/NOMReJ89iDs/W/hoDS979NiEAxSeAws8MgMaE4y1M\nMnGHQyevqPf5k6QQHZYAMljzAJRYQg/QoH1OOuyxBB+djdeCDLc5Gs3pnwe+\nGE5H2r0c4VxUxftc7Fz7AQ7o2cC2QNQX6OjeZPnThWD8/a22PN1LzZbhUAdd\no3NTs7lRrWA6b0Y9D5L8ElWXHaz3OvpEHsCY12uFjDz5O1+rsU5hhvnc6wLy\n7AujAH0Fn7UKk8+dQZJcBsWaAIi0b3LY9W2gd5bsdHivCkxFHYbjQmKj3sJQ\n/b8lDF+y8wiwbgDWQvcePJkNEAPV5GcasDDgsUHSgglUw6ssiKXGUQKS0dDf\nt06q+OvBYlriH7T22kiqcJRtESZE32HIy24LQWv1pT4aQ4IuFErYLrC/3se9\nKUagmjbecYv5f5yyggNCcdowU6fbxVMIAyAZNdMdIK5Q1ciwhAp7KDZdx1Dm\ncqMhWEHA5FvYpwPspXofO/ory/0f1HkfoxIe0DQJvJhCAoAujYIvpRSCMbWP\nsSjP/iNzHMSrSjfGjLktf+iAxKm4DUz8rYQe0y67TyTpADn01dy0vHnEh0kS\nJ7BcLV1PTL4LPYwzbrFIisM35fY5bMQGFDd890HheBCpl2uei3F6tCbW/JGj\nWr/A\r\n=1l9M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.66669e3b6.0","@material/rtl":"8.0.0-canary.66669e3b6.0","@material/shape":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/ripple":"8.0.0-canary.66669e3b6.0","@material/animation":"8.0.0-canary.66669e3b6.0","@material/elevation":"8.0.0-canary.66669e3b6.0","@material/typography":"8.0.0-canary.66669e3b6.0","@material/touch-target":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.66669e3b6.0_1597074787817_0.8262683409525218","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/fab","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"742bcea5aa75cceb326c64b6525c799dd5c4734b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.6d1ea9761.0.tgz","fileCount":18,"integrity":"sha512-80QKAyw4iIoFbZ5F95o4czy1DOLt/5fwLQdBCZonANRg10l1BMGCGWv0d8O3y5tcfX7VsmFrHN6tlqm6JwyL3A==","signatures":[{"sig":"MEYCIQCEjQaeHM3TJR99DvgjMdBJ6vOPjg3uS/c3/JTk6FWsVQIhAOwsuAwVaFKmQl4kfUkyx3EfbKM8p8shoHh9Jb2YHM3n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqu+CRA9TVsSAnZWagAATX0P/ioziFeD9mMffLAQbR+J\n9jA770lEUStP2QBAy001jLKsE9inv9qQSF39wcPB3nBDP1eY6ZVkYuAlYrAz\nfNAYb7nSpvo7XDqUSbC7PFqm0z0EdlkhSWSe/16sGC+IZapveuMe/YbLj7ZG\np9eQ/k3Uk9siR12mSgXsrSKKaYDlduF2/Iqs4BVN9awTg4BTfJ38XnYjFTRd\npe1A8JBZZN3hagkTZ/lBcFFDC0okCnzBit4AqElFniMxg0U2+z+dAyVvqe9f\nsFy1BqN1PiyaUdFZZatgS6dWohhe5CLCMcYPhuzmlYZ/yht27sHE+aV5z3Z6\nHNSHqLR/P5PXfv3GDHjYYoRgYDeZln5wFFdDQzcM4tu4z2M7a+hYgcMSKvPK\nWtACFQuGurTaFY9mK9A9IMb48zEIgjl3jJ1nUCcSwy1yif0lCMvhAeIRAxsy\n19qNhCcXhFOS08qeADIWuRBvveDSe/5TyuFgLPEsbqUJaIzCec3/F8Bt/E+K\n+MuyUuKIK87caNCWMWNiOBL1J0iZ1JVwQT1XjN67yfb6RXs7BbB6QeX62ujM\n808+RRevghRW6sP8ALSWZ+V44yhE5/jlwoZxfvn1jRQXL03IelZ24bntOOKK\nquNupWF0/UDYTcb52iBVsGB7ImTqLkdFWXSZIP48NK3DMu17Mgfrucq7oJYn\nGXuh\r\n=JY60\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.6d1ea9761.0","@material/rtl":"8.0.0-canary.6d1ea9761.0","@material/shape":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/ripple":"8.0.0-canary.6d1ea9761.0","@material/animation":"8.0.0-canary.6d1ea9761.0","@material/elevation":"8.0.0-canary.6d1ea9761.0","@material/typography":"8.0.0-canary.6d1ea9761.0","@material/touch-target":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.6d1ea9761.0_1597156285670_0.6009929987259737","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/fab","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11b2fbeb18e8a613e21d9ad50b0b760b70c0dcb3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.79414bf9f.0.tgz","fileCount":18,"integrity":"sha512-3xfwB/o8+8uap3zAwgyqg6QHqCEvolz1Xxe3Hch2PS+Cz+ETjmxkYriOLJaZmlRxTrict9AmmbPpNxlyFG+1Fw==","signatures":[{"sig":"MEYCIQDHUIG4RurjGBY3Kdy1wMwxO2sIGNuCEDPacztu5CIP5wIhAOCDBSXpEZwIEj7FIWOwYgIF+DQVCBJXaPTq7JLLGDzB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":276738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMutJCRA9TVsSAnZWagAAPcUP/1QPJkVAOIrNX96mL9jN\nZmxtqAOJc7LZEF69NboK9OBzSVTY6lZROMX6I3lrDHXjiGtAKbJ4FhUyElgY\nLaVCxpObhuJDqbVIelNJeo8kOsmcGIV9q3iAbpXUfbKntV0rFiFfWAvT+OjH\nE8KrOZH/rUA6ui5xyOFOXj6kX4RpyGxeg2ad+rxpGyWQKIsAwRrtlEO6aDls\nV06ZeeAyW/TkextQSvA1UH1HAj2x7C+mrHVWMRQxDi9BCeHiFDklaLH88VPd\nrd+xLShtC8d/kIvSKw85xdjDEs+CtVcof4mRMExS3c3BYf8oMBAkeARPmBtc\nWwH7vBrbZPUW8dNMTpgDoKVIUKcaetABUDSAs69fiTIgFl9Ai1aAJjNBY9DB\nN5LcyuqGmTRudP8n2Nwe/zKNbHyl9rNnT0FWhWR1eCjBz327jNjIztmAKMWP\nse6iAyYZIbcbQ/2Kwl2lXB8fMmySZPGX3mQCvaA+mD3wJcgr97HrhV4Tq0mf\n/ZsM511IjyNoiUzMdl2MDDuhL70hbHMxcEj/3lomTL1jZNM8/NMGZpBRwZHu\nkTKeGjoSzfWvN/YDDOrhKkqKolxtEFzm61ZkWEwKVKa7HuVhbT2wtB8WzuvI\n2c2qFEweKq2ilZM6ux0h+oquPaMdroqqpnJpGHQAMpSEQLOp8bW2uIOkKuv6\nNFuh\r\n=iJFc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.79414bf9f.0","@material/rtl":"8.0.0-canary.79414bf9f.0","@material/shape":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/ripple":"8.0.0-canary.79414bf9f.0","@material/animation":"8.0.0-canary.79414bf9f.0","@material/elevation":"8.0.0-canary.79414bf9f.0","@material/typography":"8.0.0-canary.79414bf9f.0","@material/touch-target":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.79414bf9f.0_1597172553177_0.8322266389693997","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/fab","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.85a5272df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fba0a15461dff5fb528605a456c485125ab1954","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.85a5272df.0.tgz","fileCount":18,"integrity":"sha512-yjbt3iaQ1u5VI5wbfPK83agj/5l4ib2n7Qmw3Ob5FcPbSJnExDWcUEIBHFiWYgPELyUVgimfBhMSq7vTd7sfkw==","signatures":[{"sig":"MEUCID3/wUzTLaQt91qEH2FF60s3jz4VNpAwNa+AOE4WuCjqAiEAnb1Q6P+Tga+7rwOqmMGT+VG57Kl+HhxqICBgjgk1tZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvrNCRA9TVsSAnZWagAANwsP/3pOyJi+PafvwmiQLa6o\n4dvxGbwCNh/Z+Y90yaX4vap4dbCQ3R7556WfeMe0lsyJ2rahoT3ynymDhyRs\n0bhXhpALMHWh/bBXZUzr6c+YxDv/4VIded2TPcbJFcbiXBx6eI2F0IhR4H+4\nhrQ5h5TDtHhQgvoetHtfutcxmqxph0EEjGQIi8vkB9Euks8TyFGdeEOxAHNw\nPobhgg0bnaZYvJoMQgHopsNkSZBnwgY3tqBjAiN76qHODZ+taoHvfsXuoQqf\n1UEp7oAll0RCTib+ZO/BZHCQETguyVrGASnLpSTiS6QQenmqpeOjvNnOACkL\neRse/b5Xg9zj2mJopio/mh0UBFWoG+Ajrjp14H9qzQZUvRZs8eBcnCwp3YLL\n4EZON9NTrMVVjqZOXFjqMaCL1kSpJZx84pm1milunt7Y/edIrq1ZxYRKjCpQ\nUngDozYRoioq5KSgnmAOlKFTXoATDCYHlpmJjUr9unt0KVsi6yeQ5lj3t0Fh\nAlIelQ9DXlQrVxYGyFXfjtQXgvssW0uLW+xYYW9Hc0hIyqPYxSVo8RWv4ap0\nkkl7J8zoTx5dqcyoSHUX78FgAi8Mwi9gIIiiADwhSJfzp8BiIxCF3OoIoXTM\nHkfIYv3GuVetWetsMeI/TcE1NPBjvaJWdWXQp7HmnfWaRTjR3QjOYsKLFSm/\njTtR\r\n=9C6R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.85a5272df.0","@material/animation":"8.0.0-canary.85a5272df.0","@material/elevation":"8.0.0-canary.85a5272df.0","@material/typography":"8.0.0-canary.85a5272df.0","@material/touch-target":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.85a5272df.0_1597176524879_0.49548841137751176","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/fab","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6e10874920e0cf7e845c8bafc90595b79e1c51f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.fda053eb8.0.tgz","fileCount":18,"integrity":"sha512-O6J8Xs2URlkszQ0DVKiqAIfXqqrMJCCUn5jvzh2sS7ZmLYrGoOKvpFBwexxPu346uTkj3lACbhBf8fbMFV0mww==","signatures":[{"sig":"MEUCIQCCYQg552b84+K4MjuxveIKtX6nBYdZXJRry0rlVKwqFgIgYalALvKFZC3Hc8GgeB40J7liu5SeoC9pOhC53uqDc5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEtdCRA9TVsSAnZWagAANWQP/1Df47eoremxXfojNdEt\nIxxZQk+t7N7188c/xfaKrNzEZDg7S8jl4brMcTyGF582ZOhTYsPK26kGRARl\nX1xC7PKXbI5EvlcpO4cfSUHS3qkGi8PFf62LtkPpqbm2qUgzpfFUeJWBAG3n\nya/JIMbeKrXicVWANNGyS5Nw28kEtlCGoqMNWHyJgqicd4Av6xBUbOTmtUMs\nka+W7t4c3FU14ytDRNRXnBWMCwQ4BTuzU2Vzkie1x+987c7h7mg/dYHei2yY\nhTpQnrZITeMPRj8tA4tKHotLXI/7VRLC0bDhbNoXSCE05A9MK6RG0qp8PnrQ\n2aHqYlz666L0ktagUhuGUR1TfiQADhoimvoJ3K/1sjqlPkkp7ERLjrdSiBZo\nVVGzMsDhSMpgk56xSIw4QnXZnZg18t+34XTsj/F/PP6RD5N4kFZ8exo8DyMU\nqMdFJxhzMQawXoSe8AoSspjQIVQ7Gje4THYyzPlCrm+s/PX6jgWWqKqvfxKR\ntOZfocYCb7XWnucWkRkfJV6iXiOxR0nzhjgZhGWC6rN4b6cKYkO0Tc/AWYih\nnq54/slBTESBb5x4OX6Fx8eOsoXg0RwScnfsPKHoQNigiPwbeh2OB41aZvRO\nzPTU6qRZ7EIzOF9ZGeUhd2RKPxVDMQXlpWsOcuGmdmwNt1M84vvHgC+uDmVc\nB5tt\r\n=4vMl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.fda053eb8.0","@material/rtl":"8.0.0-canary.fda053eb8.0","@material/shape":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/ripple":"8.0.0-canary.fda053eb8.0","@material/animation":"8.0.0-canary.fda053eb8.0","@material/elevation":"8.0.0-canary.fda053eb8.0","@material/typography":"8.0.0-canary.fda053eb8.0","@material/touch-target":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.fda053eb8.0_1597262685408_0.19201613131335105","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/fab","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.760873445.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4907cc897d7aee884b2cb25a645a123c9692bbe9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.760873445.0.tgz","fileCount":18,"integrity":"sha512-1ELZGfyZImxgVeq96jML1RBbFLPhpvXaqQBANOvyIlupdbAcLzhqtfqRDj4krMsnOP8tElnR5exH/aDHtqrNsw==","signatures":[{"sig":"MEUCIACCMrqMFzrpyJk2ZI7iOX8MdkYFPAONPB65aA675miQAiEA5/x2ZpHOrXs68zPQ+tdRaAtBy5cN9Xueu2jb0x6ecUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGKVCRA9TVsSAnZWagAAaPUQAI3+HGrN++rusU85nJq4\nUot73v6o1rscIHyO+cJ981p6w1FJNTyAdY/bR4MmO9nCH7wfgMhAEeHOpl9Q\nfr+OoedKemYmgV8IDr649tCcP9KtfLW74dSpNAvX3+SwdpdXkFSfZWxlHLkS\nV0/07103TdRpeAZCgZDWMFUSF1BHt8Kfjjjtf84tRBjHY9p8PfD1jNuaNWlz\nKqNZVHTWHA3SBXbtIQfraoKGOt/DNrVTgnaSMk80OwJ7GiuU/J65IJvNRL5F\nI9Abqgqv++gFhZ9k+C9sPHusDTkmlkCRZsrQfHg3MFbQ0fLNsfn5EBbKlC6N\nauIbau1oaQbLLbEEbp1u8X3UkvWkxO9RxD9L64sLQuTwLqOlPkX5BGG00/qU\n2HG6YrTJNyErRbbG+d6ClB/TyG5PYGzii0N5vpgB8GXZR48czOurh99sik66\n/wcoddqg3No3OUhKSUobezKcjh/ZBnnFKO18t46mhoZ1iiu8PMcJ2/LWi6pL\nWFAwJ0H8iIIQOTALYErC8bWszoH7e/knrqD+xiWUjh3mDhdNfTwnqBfPOZIa\nQuSuLsjtDDN653y4HcNEw6vKKxcYbKa3kvFXUR8iNwlutsOK1SsfQA+BOeF1\nfhgDFZ4PTA465i2ExlWIaIacStKPi4c0ojhfZIfaJSRsbHWvuoGRrZSzl+0L\nm5Tk\r\n=dowc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.760873445.0","@material/rtl":"8.0.0-canary.760873445.0","@material/shape":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/ripple":"8.0.0-canary.760873445.0","@material/animation":"8.0.0-canary.760873445.0","@material/elevation":"8.0.0-canary.760873445.0","@material/typography":"8.0.0-canary.760873445.0","@material/touch-target":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.760873445.0_1597268629387_0.2281209320172486","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/fab","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccca9dc704da098952f0716b53aad602b804ea8f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.2f4711a30.0.tgz","fileCount":18,"integrity":"sha512-woyQZHA/HHYWc0WyWjrmWupIIl221BDls0R5S4zcHxgawkTQilySQ53NoxzEM5FJsKvSjbOe3nTuJEgwK92WyQ==","signatures":[{"sig":"MEUCIQCvfPAKLreggbZOrs/3u5YCjivwLYVa/cENAej/hs+bowIgfmoVOzNe2doh80kIVhPz4vb41dUnsSpsIFw7yr3anno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGTuCRA9TVsSAnZWagAA14UP/2gGJRjA6/JnIHO5zOcz\nbY8xb9sG+jzkZxW5L0lt1I4C9UiEAVL+rqq10sJTd7+/L5DPnTOfL7x05Buv\nIXOXSdTjG457DIeFg8vIU6xBeJmh0i0+WjspteGVjREqDNYMRh2TLsvLvCC2\n/K34485aZhlUUY1p1pnvthkQlNCRjCmeysoidTNGF0leUnKvRYJae+iUFzwn\nVA9E4qqwCkuO82n4VPHXaNODsyFNHmV5ZsuHC2ZNcVuEUF1RAG5q5n4frTBI\nyoz4H5jn9u2fm3WOoaCy1w2+8k29xELqLHNDBg1s6VzPfKjMpkc31qpqiPGy\nFOBHDNUnosiPsG3Bg3Um11Dp/MxKd4TBkE2JpLGJOPNiLDNi+Zqd3w/iGb7v\naI4GOPnY/BUrdf6dzzLkvIREfMrJ0DK1PzhUNgOLwlJJtweoWBnpXkxjy7BQ\nVF1br25DhmzOO925ne4nbFAytd78aHs5XYR0w9lwk5zd3LpU1LQKIFzM//pW\nqifUPT7v4lIT3cnpkX/3ZonjXgg0Ns7AAIKGoTC6zVEG70jJeNw7uxRgHUaE\ncSCJLynJQN/vDnuBuw76G26s/N9nmFQc0+G3xWpRnBJzOlgou52n4zTk0uWB\nLd8d5KilJusOxND1A0dEaweliVQ6a3eUzZWwonUqJD4APvcdFOlB+Eo9jlVI\n6dIk\r\n=sWfF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.2f4711a30.0","@material/rtl":"8.0.0-canary.2f4711a30.0","@material/shape":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/ripple":"8.0.0-canary.2f4711a30.0","@material/animation":"8.0.0-canary.2f4711a30.0","@material/elevation":"8.0.0-canary.2f4711a30.0","@material/typography":"8.0.0-canary.2f4711a30.0","@material/touch-target":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.2f4711a30.0_1597269230321_0.07430047698378939","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/fab","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f4517f67716183df7b4b3b231367795aced69d4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.2d72f3659.0.tgz","fileCount":18,"integrity":"sha512-oDHRvZ54d8UHCwIJZINt9MxQiv/y65yBPq1RYT/iqPJ0316US2h5gFGO/pxBagthYDwv7jlJ1rhdwhYEH9QdTA==","signatures":[{"sig":"MEQCIEO7gZBFI7lWfKR5C6MKYqOTf5hl/hPDA84c+Ocr2dGxAiA0SAplIAf0XJIwX4Fpgdk5G+c6NNxKmUCq7mlREbQQ7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGawCRA9TVsSAnZWagAArTcP/1pz/LeI34s0gwpebkEL\n5QUMo97RtMhJ3rYK3Lj4gWEakLHryxTAh0FWIWGNA5WfsPOUBjfz+YhtJ3VJ\nRnfE2oEqoe+c+KqCVG+dJVVY0lzhUUJiYKnHL3yRoBSFHTvgu6llffxZnoTy\nHhtJMxt5zGjv37nFExN1MG4L8IpZqDLhL02iysZ9ngJCIn3Gi6PM2gbYK4t4\neWldGOcA9IKmYfSA6Ood1ZiQLnMXW7/qv0hudBnB7dn8sLuxz2+KkRTIFIBG\nTzfOQby9XTGEvWHZ0HBgQBiSx82f9MDRhdA894CsgiSIPCqqRSWFCMTfROj5\nVmHKvNgY76+9RvjXZAjWyOCsFgQNS6Tgpzci27PSbhVCKUB7H/ShCDQ1aNK3\njwgMBFTParHi+CV8LCulm/DoSMX87CxAPytxn5W2ctyQkHUBxJWeOjYmp4tm\nc0qZHLiwlmCFlBIC4lLyhIV8KZTz9Rjb1w3J7ICrjZr98Ybo+arsrFTdtUwr\nZHoQx5W1jQlLnI77NGKuk81tOvxztFP0cun3EqP5Gq/CTCCW7FxQTr3gpPJx\nZKo9vAtONSkRbNXJdPTBcbQ3Es/8Ul8B56iLDulXF+A1j2pEWP8wyFlC6w79\nFUNXNDYzBLfryS57wtvSYsvr+p9z/iefuCkUqCYr+11k+f1eh1VtBY1rN2kq\nSs3r\r\n=C0RL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.2d72f3659.0","@material/rtl":"8.0.0-canary.2d72f3659.0","@material/shape":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/ripple":"8.0.0-canary.2d72f3659.0","@material/animation":"8.0.0-canary.2d72f3659.0","@material/elevation":"8.0.0-canary.2d72f3659.0","@material/typography":"8.0.0-canary.2d72f3659.0","@material/touch-target":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.2d72f3659.0_1597269679568_0.7718104122496463","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/fab","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce1d437697ddfe450016751fcf84d58ebac57283","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.1fee70a5e.0.tgz","fileCount":18,"integrity":"sha512-hihgHzcRSeFZKMpn3d94m61KZsK1U/ov6C1O3B9PXl8PNtkIQDXldC9X6rcgagHqMXQP8fjcm8VPRksLurnU3A==","signatures":[{"sig":"MEUCIQDPpfrvOyxmXuHz/wzQfKpC/zfto1kgHRYJWYRbRiqwmwIgFaKkDieVk4t7BzyaCqRIK4c+xdfL3CO+CDEEnrm/r4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHtKCRA9TVsSAnZWagAAivUP/joghHjcoDEEkOdOXTYr\n6yc9S4417dgVD+pYWFUCa3v7cMoitCDxs4w6XmVDN68vN9VrPIwYV02WHUM8\nXYmWZr3ugiQKHhefXgmcWpns1IOEkUyPQd2ktEwmqEmxXhbMhtEdkxX8YECE\nI71OM800ohyjBKXe80T2OdfU/mE+Sk7AUVs6OJHZmEJWhdo/6jvChP4jfQT6\n0npysW77zC85t4CbKYfL9NBeZpGxNYF2FdbK/EEluhTbZ5KfiblY3j2LeXNy\nvtBK2cJn640WYMS+1zzvZxqoi1ivsd81X29HaIRWaGkT61dIqP6zNByW44Gr\ngdh2f+m4KdjxVfUuzfZ2UF278BfBEbySB+l4T261o0j4MUoxiscEzgu+65s1\nAW7e/wRwDjDh91/BT1NfnTJrfcsK4KUyTnlYJJ0/xS5yBZsD/jlZqkp706qf\nMaL8G+zmRhx1iOtxrXBWnH/+qBvERnUlLpPed0h/1xNpRMy0gLuYwiQVBqs7\nYbApsT07kU3/AMjl3ddmaSvAb3VcmReEgNCSXFfhfLdrOxiOhMuo/0PtIjez\nvifQR+RnfVGv1bqrY5WTvh99lCyASJUKjBM+RvAWh/hOt68qhgH/MRQ+AbKU\ntEHISgO68daupnfp3AoCMqg2vbXe3CIx41YUh7SvUWj9w4e5ZbCcdmXBpWOZ\n7Sdi\r\n=nQGj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.1fee70a5e.0","@material/rtl":"8.0.0-canary.1fee70a5e.0","@material/shape":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/ripple":"8.0.0-canary.1fee70a5e.0","@material/animation":"8.0.0-canary.1fee70a5e.0","@material/elevation":"8.0.0-canary.1fee70a5e.0","@material/typography":"8.0.0-canary.1fee70a5e.0","@material/touch-target":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.1fee70a5e.0_1597274954156_0.32910749136703377","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/fab","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44ee0b500dd89052b76939a5b9973844fa37b257","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.023f3fa34.0.tgz","fileCount":18,"integrity":"sha512-6gscGjs4jtoTrZFMDFtiFJpABPTn1vgasmhzvmttBrfj5FMhZLjVg0JdnvrLrgMyXyg5tm0biRj0E7dmL+FJrg==","signatures":[{"sig":"MEUCIQDnZZNhDhu6qgvdNyiMNyH/ZEYoVO5+J24/AXRXDfrSKAIgQWXxG6khqEg7jdwuQRtrvZUsHuF9aAK1H+fPYef+gAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJOaCRA9TVsSAnZWagAAKxAP/0OQMj/Hx0Wg3W6N81dV\nv+QAotoofrC0uLjxkRrZFOL6nT416srTb8V3h2MV+FbTqERzmX4qZP2r59rM\nASFabVUuXMjfqxXEUv4zjRRgmP/pzEKMLGBd9JeDmVZpMeDfIukKhjJ3cDdB\nZOpGg9TMxMLYg443LBwUuk45R/ST/NShe3FPbL1+Pzxv6U3zzjATdj5YbGpP\ndhRgLUJ4ryMk3oXSQVCUYSCtO68VOOECX3oiHoHFTUki9QhJ43o4U+jIcIBV\naU0EBESrtlSTfCB13V1X4Beg5toCJQM3R0xqiaUw/RukoQKc8xEToVco7z/l\neZ+/E7swYgZX1o7jOs95t3GkHfvGUM9U2BJPkNEGXziyvNILVVr/Fadu/BOn\n8xjy3FkwkmfrYOzpFLv0qFe7SJSo+XKeVpk2NmJDXV2rdDbzSnNz8nSKOlo6\nmlBMeap3+fkMEQ/thiVO8TrbfHA6TVI7LUZj6MY87sK/mgNCD960o+2cDPVK\nv0+R1CK4YwOxuxDjHGx8LxVODW4lTZwIl0qiBC1SnAIR+4cqDHHoJ7AKRkP4\niemj1Y+sQB72mD1SojRZ7zz7vqU1GvhAveZ+Jj6fQx8x8hTHjTH0FAyJ4ov/\nrLdNDhoZpOQ4X6dzk1LIxMOvAU6/S0qoBXlw/VnK15FFlfNdFQdUuQficPzP\noFxg\r\n=FMOm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.023f3fa34.0","@material/rtl":"8.0.0-canary.023f3fa34.0","@material/shape":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/ripple":"8.0.0-canary.023f3fa34.0","@material/animation":"8.0.0-canary.023f3fa34.0","@material/elevation":"8.0.0-canary.023f3fa34.0","@material/typography":"8.0.0-canary.023f3fa34.0","@material/touch-target":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.023f3fa34.0_1597281178019_0.42737160948945685","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/fab","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9894048892c76b38918efac889d97d66afa76e60","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":18,"integrity":"sha512-bRJgRb90smruD8P9ZYEYubCmaCLjjDajb2IHZ+bpeI+T1OzjBl0+a9r5/CCFJO2+QOXyl5SK4SRs40v32PZ4Jw==","signatures":[{"sig":"MEYCIQCkgF66zQyhA4apIl4zu8xWeld+sD7Diw+PpExXvG9pyQIhAIFJ2+9cq9t4QDunbuI860AMhE1H0FzAEb7UvoehpDj3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJeGCRA9TVsSAnZWagAAUSIQAKBxrZc6tu4BX+6xkvUX\nIJFVVintQ1/MiyFMhncR1V141DWs3rW+Y4LgTd380ZD2519o53NIJl8yLRnY\nt5EAsPfZjme3yVwNxPV/7aN8KtLX5AXMkArrDqwd1pKOAwdzyMg/IgSAX3Vn\npmZ0ChSXaVXRLmjGiq1WMO6BfnjqnVoa3arnzCtIM0IcXcu/pwCKNPZgfoR2\nGi+/tiJZ3zyAQxUq3HXCIi4Jxfblgwf7XkzAC/lmZAM8m7oL6JmmLvmSgwg6\nRnIJ3g4UNGnh/vi6rB6B0/SkrDdjsgZMBjwrJsS5N+/rsuNt82YM82Z1pZ2D\nqevrr1d9K9/uOyiUN7//CLC4oDIPCLSMMNd6FpdW7DWVub+SZvsI6f3CK0Hc\ntaLmLYy5joG+Ff8qBZRyuoGlQ4xCuRAxw7H7slJqmTYk+mshUG5vCvixCn57\nlJuHBLJf2FflL5oLiA04WtBGYpYZW5y3pKiOl3Ljm28iEt/GIQu/y/buRjTk\nPe70DstFiM58Nf0z5zw5+gMAbdg4gIolPAS1+vDEXiUMgrDpxxfhro/J8yIP\nVLtkgtjCZ0jhxXLrelOQv1ZSLYDKv2XDp/tsDhcOMFuDhXv4ePkKa+ZPpJrt\n8oPqp7XzvVv93eFXHhDXPJe3QCaYbpdA9D31E56ZfIj0oYuETejaNp9y5Uj5\n+S/8\r\n=gaBD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.80f3a9e5d.0","@material/rtl":"8.0.0-canary.80f3a9e5d.0","@material/shape":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/ripple":"8.0.0-canary.80f3a9e5d.0","@material/animation":"8.0.0-canary.80f3a9e5d.0","@material/elevation":"8.0.0-canary.80f3a9e5d.0","@material/typography":"8.0.0-canary.80f3a9e5d.0","@material/touch-target":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.80f3a9e5d.0_1597282181942_0.26160360449265907","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/fab","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d5b75bb351c31266faa6f4040d3a94aa0e60332","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":18,"integrity":"sha512-ZrO8RYbbQsd0VJHbDjJi+rsHDeWPm/C+t3zaa/SEsFckboYewv81A1D6k4BdEb70PQryur/9jvv2iGKLVj/EAQ==","signatures":[{"sig":"MEUCIQDw2Kf7RMOO8zrv9SOaSdoW4CGai8GB6rjCAnydffhcUwIgIFMNMwgfh6wK4OQ5XaS4armQf9mIhgAClj1L5NS7Cs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP7YCRA9TVsSAnZWagAASNoP/1/yzbXT6fKiRZZOAK5I\nUhHpzMylP2V4fqw1bVLg0SrhX7/iayUlEBUlrGfckc9m5cRHztAI28WnBa2y\nS4JKIFQ9GECjCwgQaQjUYQ6TlujUMaOfuzhpfFyZ+Gr+cui838dsHfvLOuYC\nWXfcphmp0yOPa/rC3Shxfo2m7zJU6NqNM9/veY0iq1Mz+VOpmU/8EEgmJYbQ\nWWtik5jsaPlFzwUxon8bAurjVLP4mFKy8A+bqrzFdgsGz4btu3n3YdxI6CT6\nZQuJIfGEdvD24Rnq+BaflUERxGLDAdQ4QigJkkjCRYBD6VSMwQFmqfp6FLkP\nH5CMCkHwfE8qYA4hSl957Ejgq1VQmAa00h8Y1Xkl0P6FJLuiL/WDyaNpBG6S\nn/CFY5vEGvSUl4xyaveb2kgssSG8SSEVyQwV4H82a+YsXQ0mUYuwKltyb5Bk\nBWOvkzQdPEBqzJxkH8UEGf2LGoUa8YpgdtgS+oZ956fS1jCC199BAP4enock\ni6DjHGV2dxG25RdlThpOBd8iTsksjCyPAWwB7zEGUqplE+n4tiStlT6No+Vx\nCPFdW+cRrXL4h4oPzsksvJysV/2+9MA2GWNzaMtjfDBggbD/Etd02CvT0ghu\nwCmRTrYQBn3FNFGhK+ARtIIKeY1hnNak0uddtvsgdBk/TokwplSJybcI33hl\n9PU2\r\n=7sye\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.a1dcfe97c.0","@material/animation":"8.0.0-canary.a1dcfe97c.0","@material/elevation":"8.0.0-canary.a1dcfe97c.0","@material/typography":"8.0.0-canary.a1dcfe97c.0","@material/touch-target":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.a1dcfe97c.0_1597308631332_0.8325131301131681","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/fab","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.af332d5be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a37e70591a9f6b0fc20923212e40f81e9f3bf239","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.af332d5be.0.tgz","fileCount":18,"integrity":"sha512-9j2M5tFkRKTpakiXk6KgmVC3ZGyJx1yRcza0lRTBZvBDxfBWzq8Ojv6zVPdJB664J8vXLs0Hrgl4SKyiMmRzhw==","signatures":[{"sig":"MEUCIQD50am2AD72jJHJpFAT2PT1780A4ffuDu9NPUJd1VBb8QIgIeRhIR/ORFFRcBieAq4aOzFEqK4djsWxGsw67dm1spI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa4KCRA9TVsSAnZWagAAijsP/jI8iQJvtDr5uv8SUXEz\n+M4B/aJywqBrfE45zZmtNVc4hsM44h5QLJnkEnTQUDxZ84Evhrhk70937OjW\nrMPPnrZLdhCrRnSv8Y0yc3nGUxudT+sHAQB/xM8+alNj26Vz4r+qErry04rq\nNg5vnkzj2ajDESXOx4ADtJgtwAmsFDWuCo7QqL3RiJiUSJb8lXu0ag6hwKh6\nfZ/qKa6EmZ9lNWp73aDK7GaEg6t5Lv0XfIvP+wA1KJryaYwZVdcLiKEZlwaf\nHKr8xtDNJV+ovUYgBEPllmdwcCn0qmb0Xe4S7hHmhLzAJGZUqR3YYQsK1u2F\n6HgysjohYO4xqjemz2FEOzKd/pcmHZi/R34t+EUGZYnzgSf7+0bjSA1l/8rn\ndlVz/D0HEpxY7GiqGYf9FZX7LRBng8tReLRyijCwLNWRWVYVq4K7ELRKHYI6\n5iCG8EGuxa+esqsBr29dTCDIEt6go2mqokmsQxGKdT3Kx69CpR9MRBe2ugRD\nOAIgfF4j7wDcs3N38xqDxHsN2nbRfdmPmxuzrhmiATG6lb9gYzU96QlaTLpb\npGbnVh0kk6g3Nj5vzOmkpm65cxVkWaDat22+VtEbFh8XmagQyt0GQYLYJaHL\nm6cGwtr2K6gTNHliFO3eLGTXAopSqneotP8tlKeXI4deWzt6N4VpmVaHSJ5X\nngUm\r\n=XQFE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.af332d5be.0","@material/rtl":"8.0.0-canary.af332d5be.0","@material/shape":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/ripple":"8.0.0-canary.af332d5be.0","@material/animation":"8.0.0-canary.af332d5be.0","@material/elevation":"8.0.0-canary.af332d5be.0","@material/typography":"8.0.0-canary.af332d5be.0","@material/touch-target":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.af332d5be.0_1597353481527_0.5299136073155775","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/fab","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"673018d5072e4ebb8e5ac57906954df83aebbb83","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.7dd4567c4.0.tgz","fileCount":18,"integrity":"sha512-FWefkHUhYjc4TCKPPVeaJqKq3nZgrEgBW8P4ygtDewSukNFOz0LeLT0AppKSWTHKrpXWH86CYWltsRSQSCmqpw==","signatures":[{"sig":"MEUCICy+4+/B30UGfDslRGKuXYMqiDWcHzsZ+XWbtVmg4SyJAiEApwLShYIFwmMOaJCQ16BNrF15YdjX+31Vix1vN8SKp6Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeAZCRA9TVsSAnZWagAAUbsP/3WF8u2keKZEjWRWYiDS\n+IbJCvmBNn3fi6vxtv7ADmRxd5MSnmKyM8oKYeLErKrqYIQtv8++CgqImxy0\nIvs+bI5AGepBYgSTJ0aTqXqyauFuUmnOOQaePcdhJ/E9zXAgBkpW7zyrtmlz\nW9rY/3bjRJfRhGWoQP8I4NJO18Pf1TR+yYACgFixV+ZwALYWffTMclIVgIfv\nS2MZ5UmCfqYKok8cRqgOv6HvVhDYsngdcy+87IwdCb9soh4l4dqGor30MzuO\nxDGxG3CSqAYbFNu8dnVo/l5tG3xB63Z5Tjswt2eQg+D/aRNexlmtNVdNlQhN\nxtTO4+Xv1cB/RpqCumZHeD/+3JNYDTTNwf9DfFZcAV5dMB65jhVzpcrkNsCd\naTOHAWL9x7lL44quem/R8jklaiZRsYE9iawKP3Bbb/xuRR84NRuvY/+00Ikx\n2EY8rLpNyRjpHd5EeUVUjXW3enflm+Cf6MHMWN6eQPulXVsNRqK3y7na6faY\n8Q1YC38VOmE2op26Hq7X+OoIOv9/7nuy4bqm2nkkfIFvxczEc07eRjIf+yEZ\nWKYc4j1V3OOFhExvQci/ymYyf1sZVH4+R9R/zdjc8c8I/7G6kUWJ/uyMTsuT\nPC6kIcVM7ut/pEH1Foy6+17NaQa1BBULx89a9lXhkhM2cQFAHlr0/IZ7JYE0\ncoYx\r\n=8LYh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.7dd4567c4.0","@material/rtl":"8.0.0-canary.7dd4567c4.0","@material/shape":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/ripple":"8.0.0-canary.7dd4567c4.0","@material/animation":"8.0.0-canary.7dd4567c4.0","@material/elevation":"8.0.0-canary.7dd4567c4.0","@material/typography":"8.0.0-canary.7dd4567c4.0","@material/touch-target":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.7dd4567c4.0_1597366296788_0.5071475517180815","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/fab","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.ff870005a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a73c3ad9f5b383ba260b78c3c135acd918c8f19","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.ff870005a.0.tgz","fileCount":18,"integrity":"sha512-w/ns7K/yPXO/7DWbzZnF4UOGqtvsNYmKZlbpUXDlywHC8kjU+KCJciQ016C2JtV8NMeQbco+IzKuDj8rMsn8vA==","signatures":[{"sig":"MEUCIQCYR0zG4h6cbYe47g8FU9izYlZunPVek6BPPrJnCs8FUwIgHQ4qLXcuqRD0HnA3fnoXMgWYiNa+k2Bd5paK5OMUS1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeX+CRA9TVsSAnZWagAAKtgQAINNUYnlim+WJUjDj1Vj\nQkcfpoPcgo5WYEa/PXqC9AgKL3vNyvWDi68dggHJS711OEwqp52u5l8vgyIj\nzOwd7JK5NwB/gnIfUlM7Gx3KRZrA//HMRlUeHzSXqXdbp8zL6csVMpOWTlig\nKomolmiWe2APrPKBwFMK4hDSUlQItNPTAros9CI/EcHKUvPMsGJormkRnMlG\neSEL7EoEYecd1GgnTTPDyONwtphw4TbNgePQ3CiQ8EwAVFHNBGg3n0gXtVfZ\nxgbfdoolR58up4Uid8ytU3hx9zednUpfkXvQC4oytnDX0g+eacQg2yGLwZ28\nmvyzWqoDBl25XHbRSAVaL9ethEfeYB0E7u4Qq79P8znQqoA0hTpfWVi8D0BT\nunjLraTaN9lo8jr9NUsp3XIUwqeBIRQDWeY4G9KiIBzF/jHOpuDIWhaeyb2J\nGS2gLY5tQoV7FDp0LRnlcqZ0xSl9FiuJxaXGePiaoaVbY4H7OUArsAxuSZXv\nca75NS8jxvKefIFVK9lqfq9x1jVRqF0u4hCD48siEha9HV/zyDaNmRJ66WtK\nh3EaGQHxGKDGDnqtVpR5l1c/2Vi8IvvbHUnD1+VkZPmmvcde9e2sJ3hPC5iN\nCADjlKRcjJH7eaQ7g0vBU5ChBxc+VG/Bjx6Zfx8w7ocQg4mV09vGM23XMrE3\njZP0\r\n=qJVc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.ff870005a.0","@material/rtl":"8.0.0-canary.ff870005a.0","@material/shape":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/ripple":"8.0.0-canary.ff870005a.0","@material/animation":"8.0.0-canary.ff870005a.0","@material/elevation":"8.0.0-canary.ff870005a.0","@material/typography":"8.0.0-canary.ff870005a.0","@material/touch-target":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.ff870005a.0_1597367805677_0.6858077274306176","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/fab","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.150f427a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bbe36859495ef58be0f2fb5f5e2548c4ab51dcd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.150f427a0.0.tgz","fileCount":18,"integrity":"sha512-TlqZwJI7ZH/ZVERK6fSuQRyzG51KDR43LAX8wGQMZh4LUlBwOuea2kqdrEPgok8KyuNpm/0FIrocwH06O9gz8g==","signatures":[{"sig":"MEUCIQCE08n3ROyanGLhVb/wLhIBZXPjV4a6u6ZKsmPLyx3w1wIgAOWngyQWS25YVy7cX3xVG9yRILlhIf5arz0dBwNsLAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpH1CRA9TVsSAnZWagAA2oAP/jtBTbrF/q7tXxthRox6\nhpMYg6+wq1u0cfRIStVduTNqPdDqRWmc9qImNSKOcdpNaLRZ/L3BFTE1wjmt\n2WZopKrzuKuoPlPypB2kQ8bPSiVdO0EhrQT2sAj+DdMMnWZVj1zGnFaXgT5P\noi68pUlYw1V9T52pTgU999wF09yDmM+1sYChv7d9rLa6wD0gls6O/CEqGLoI\nB/kJNmECjRq5aCu3R4op3VjDLd5efjPed9GqwcdnP32Uk1gVzKv2w+7H2uLl\n7Bq43CWsLudmpiCi8NZzf4g2NxBxI0+gHxHRJJNgqhxKjhLwxd4vhzgnMqOn\nG+13MN5yqawZhQHd79DyRoS2dkxr2/IQBzSpFe0Q6FlPn+ay2M1NLU0TEbtD\nYEDz1TgjqQDFS43mfd1E2+XBE6LwCJ/91AuuSe4QUWz3YLbdj8Yt8dSGDaaE\nnWqHRc7fredB3fuP+0w7OyGu9/9jFsO1/dFmR/3CuDbDhUk+EBVWxX3wl6yr\nggERiH0+IqUiXah+9vqPUB/4elbAhOWI27peu1QOgMbaeERymSPcq6X3b4tw\n+zDq4m+jAHrgsM4pfS1Yk54cZSXfaUpfPYkMQy/TZCIwXDlqxrgkdMXpuQmJ\nEwSMp0UhDVGPiZyQq0gBfN6+dmkP6+qJKOLuhCVaFg/Hpyr9mxLqgKO23QBP\nKZ/r\r\n=lSfj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.150f427a0.0","@material/animation":"8.0.0-canary.150f427a0.0","@material/elevation":"8.0.0-canary.150f427a0.0","@material/typography":"8.0.0-canary.150f427a0.0","@material/touch-target":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.150f427a0.0_1597411828382_0.4740560015412989","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/fab","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"625f8094878769f851155b3372d7c181c795e14c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.bcc58290a.0.tgz","fileCount":18,"integrity":"sha512-IetxGGQF9dfc76QvikLmVBWamWGX9OrSgs3yPuQ4jsejhvLr/M9p/ANjd8rBYNDyd+Q751yVo75n9ntFi4LYBQ==","signatures":[{"sig":"MEUCIQCASMDBzHlAPEgDU2lxdEcr3vYq4BgDDwOi1OSlJ8XMpAIgWsBvz/+tVO+3RabIm65t1Dg9CAKuvYoclFizkjW6z2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxzVCRA9TVsSAnZWagAAn2cP/iy2yn0NtOjoB0NafZB9\nwr8g4VVou5cAHmtlgaf5y7mJo2HiOaqBDCFuIpwUnuXbcx3L4vMByM1BiMRZ\nZZrDckPOIa2VR50WheQ4EVhgVCPF8mvW522CKZRu/KTUvMfTD4mugSDIIaEC\nb3Xy4VbkwmLuXR1Cr3fJQIet1Za6/Q8RNDiPjFOH6/7QIoFAwRFV6n8Djy3U\nHvYFlpBW9yvTaIUn+gu/O373v2RcecRocMPn9KUPSisoe8Qg5wFBPzhGd9BW\nYUXvGQA0KceQxTLYm52kREaqxynxRCfTXvZa+u+qnjYJpx9hhp1S5XmMmix9\n9ErUuflZRA0AHdD9LIBbaOHXE0gxR3ZwkuBrfG9ordp9z0oTRsEmLbyGeEgx\n0cwvJiJSIhfPW5Xmo391Dy6/oRNEajQQlSrDcHYpC5CplWbGu1t6utZUrz/3\nm066aR+4WLoSvDPsTuCc5B4Dt69ktMb6vJbnEUvHRVeMbXNcZXHuH/J6NwHc\ntQdB0H7sIDlw4ReLJvRAzaQvFye2K86zHKfYoD9L09642Fvc7PWi6oMjdxNR\nLhcDphXTnzqb966z+IkTSFT4Dyu3xGsIa27t0GB6KwN6CzNtfWkBWFk0VLD1\n05h72pmi4XN1KqO2XKokmfNKMC9cfRKQ6lJHz08aBi+TVKJn559JRH1riOU8\nPI/b\r\n=ruEb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.bcc58290a.0","@material/rtl":"8.0.0-canary.bcc58290a.0","@material/shape":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/ripple":"8.0.0-canary.bcc58290a.0","@material/animation":"8.0.0-canary.bcc58290a.0","@material/elevation":"8.0.0-canary.bcc58290a.0","@material/typography":"8.0.0-canary.bcc58290a.0","@material/touch-target":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.bcc58290a.0_1597447381192_0.31993539691488926","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/fab","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c45adb2f6cd7a4583c9409c9f7c715b4ead5da80","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.4f55400bb.0.tgz","fileCount":18,"integrity":"sha512-koigq6oBAJi90Dlb9Qhu0MU1awELII4xKyOXDMatokfgAlkCtxhxQfB+jF17/OdjSpWDINzgYoWcOdfsWFVyPw==","signatures":[{"sig":"MEUCIGGabDRXZQ5g54S3T1gZKtuHY5NRSUNEIXEgbikhCsIFAiEA4cUBNOPeyf1aZCcM2oK9hw+rG0PvI9lewyT6d1jtbPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrKlCRA9TVsSAnZWagAAg6gP/3g6N2Tukf4IMqYE6aqe\n8DOT+OPIUoDsdhHMSdzjrAsdkAXyiTaxZfyW/O0BFdHZmYAEAcug/Xm2E+fW\nTaXqfoOj165f4PBOaFF5Kqrj6JZbjfkTUl9IXX9qWUnhb8MLEUAqdOgUTHag\n8tYNbhBw3Cntknp/EqRLsyHNVYfyBTiHyET6reZuEigDQPzdHOUGbukqNgo2\nMEOL8vZ65dIyMwDD+V+dd3AQ5Um8d6uTi3YoZmtTdYilK/AEGyVfORqKb81m\n1Ysj+/MBc/0Ue9P+SsnAoAA8aQcFk5HuKKdfb1eI+boDbFPSP5FCP7eIl89s\nmFt+ua40uFi3zOQB9fvVZ6j3TKMPra9QHqomhdNFX6WPQYvykzeJFOEkJJxF\np9iVwX0AmaYDCyeYQwalmqMw2Wgrl6CVkG4Sdo9zgh2FSF3dmWatCmPW1AfP\nFIncZ/A1JAAAtWYWGznc/BacdD3wseMzOskFC5E5Z6x26HAsWLUY1nTPpIIY\nhV3XMfkv7Q3qnlTNdraoR7yDns1lnn9P7gQJm/AN2etvHjZh2mLSigBR/rr8\n4jQ4QDEHt7Epcv6135FiewFzXBDFzWM/jUhYTcNmS9Ljd7yURoOKvqJO8iu5\nbXdOg5YlpjvpG6MLYH7d9tcXGEYo9zSUfO2Kddt01yRN4J2q6zJunyc6TU+k\n0wT1\r\n=trq9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.4f55400bb.0","@material/rtl":"8.0.0-canary.4f55400bb.0","@material/shape":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/ripple":"8.0.0-canary.4f55400bb.0","@material/animation":"8.0.0-canary.4f55400bb.0","@material/elevation":"8.0.0-canary.4f55400bb.0","@material/typography":"8.0.0-canary.4f55400bb.0","@material/touch-target":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.4f55400bb.0_1597682340997_0.7037256628961364","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/fab","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.000d64815.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64ee095c02d191df2bab09d743aec4d1ca1155bd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.000d64815.0.tgz","fileCount":18,"integrity":"sha512-2MMTUOnvs0FB4zSmq2OOIXO77RB6kR9vJiuKJAyXKfYIgMOULEdWW2LCKbJ9VcqWKJFV/8XBW0PiVOgHg22/kQ==","signatures":[{"sig":"MEUCIBi1TI88pfR5nqLvxKpxyYtnxGQW8cqv3P9yqXPWU6waAiEAhsHUXRa7YCBLNYl+9ZW+S0EoHZ7/SwNasjvhTAbK3uE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOri1CRA9TVsSAnZWagAABFQP/R27OYmtHouM3EBUQCoC\nUVDNUvkwvsscjn+4VcNkiGZ5D/a7s55L5W7dFLZQoJmJcMQNyXiEOX4ZMRWQ\nYOnra6EV926w/5cAhBfq3B2uakEj9fxKgpZwReJEkYXpJDF0MtDR/PjSU0qH\nkCs7i4x03Vli/JVhxaqwgA4QhAnnmWEjvM29tXI0bLCzdV28ewjusKsDo9iw\nyydN04CrT//nyFcnl2V8qFNMHU7oW+Cr7f8TIWnUduywlbDno0czbiJcCwM3\nbINLJyhGyjrGaQm0u5U3eVTWm1pxcMZdl9odgxUGGieMpn0NySGsygKv/Cue\nwWrU1B8Qum8bKEHIloi0iaU4sSZGL2jqkJdF+03ICkzshUE2+D3gLmvUhPIv\nwcxtLMaDkWQjzEsoj/32nuU+eJ/XHOI2OE2NF7q8krpqeJ62hzuQf8SOZDfU\nEvp+kUYm+/GMOczPG5IWu/ynnMiQU5a5VSFK9CofmhccfSYBjtPL+DyFGwXo\nS8c16UJX4FeIhqYr8mBleDCvMdh5MjcjeLvl9Ksri8zT6sxzoA97Slqvu21g\nD78ItILnaTAOD7r6VJ1KedLF2EJenEcK2xJl9wb3yu76FrXtZn5dNduoEeOw\n8yqtIHYFkT30+qcyqJPF0vq7/2oC/AbRAYMglbF/1Z7mJj2/vOJxD0mtVCsJ\nk1qq\r\n=9kLw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.000d64815.0","@material/rtl":"8.0.0-canary.000d64815.0","@material/shape":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/ripple":"8.0.0-canary.000d64815.0","@material/animation":"8.0.0-canary.000d64815.0","@material/elevation":"8.0.0-canary.000d64815.0","@material/typography":"8.0.0-canary.000d64815.0","@material/touch-target":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.000d64815.0_1597683893349_0.8150337333181514","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/fab","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.defa599a8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f67efabf83b8dd8950849a338a20158882d676e8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.defa599a8.0.tgz","fileCount":18,"integrity":"sha512-GTfER/PzAaGYKUd7q/RT007FvxkqcCtLpk30ncREKlnqkJnBbAFEjzKQkmpNm4rDyQOuoCEP8Z2UYqIC2J1VTQ==","signatures":[{"sig":"MEQCIAEgbm8po+zLacocB3IPj2CHOyey7cCuG6WjtY4nyjX+AiB6H3OCPViPB5vLDFhBtA/Yl+lCayjuu2vGJ4fjkyFOAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOulcCRA9TVsSAnZWagAA0bAP/0KJlYDNuFjv/ga81Rk6\nGmxHi8Kj2/WMOWTAOEaplBn6zCdP6MFWiJXMLvcJk0uVoeJa1yl5iY9CUCRc\nCcfvdGZfeHWzYE+ACTe9qC9y2htvNbtQbFJJcgFpA5hW8eZqMvfm9qTtnjwi\n/LQ7ivB5Y/qTivZjpIifOiSfXB3pp4RF6xYZOlu2zxNpeYNJTxgLYvZLyd6E\n0C9fvqpy8w/onYq1Hw6m6VN5JkMToLWOVPmK6Qs2wCo4DSGXvzHiaOE48o1S\njFbdvKQGKvEU94fU9ofEQD0JsfMHPj8YainpAW2KEOZgcRwM3OprvHHljxmX\nfhvbx2kqFk19w2tnOHXX6fbJl45xWZUQsDIEOamEPAqoMqZ0K4GUrR83wXZQ\ncpq/qnUPXTYYgHuEN2PR+omuwpPtfcWDxJyPUilOzYme20rhndhYqvL95KOL\nNotFo6xWVuWOH97FK/uo2sPKlOPj6053sI8vERJp7fDydpkUe6qofGYJoofL\nyOitDzmqODoQg7FTJjWUX5+9WIaEGVWScGOu1q7HhIYP3YUhMwItlAK4jjbA\n65sFggZhTs//dUl1m6NQyLaWJt+9ngDA2MDRn71FHkK/h05bRU1DLPmBHuPb\nQj6V++yA7YDCHGlNlceEUn0EMPKdSLnw8bpf+vtLnV2S3K5i6JtdYlbdrhUh\no/JX\r\n=Big1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.defa599a8.0","@material/animation":"8.0.0-canary.defa599a8.0","@material/elevation":"8.0.0-canary.defa599a8.0","@material/typography":"8.0.0-canary.defa599a8.0","@material/touch-target":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.defa599a8.0_1597696347983_0.02173911162965725","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/fab","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92929383ee849c92439443c0d0594832bee440d0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":18,"integrity":"sha512-qfYXOGD5vT2cN2LGrJNV6Wx1JIUCZhxQ1jSFo4nh3+TYVIGWpm2+ilfwLLRxc68ivJ5S+mMRPWXOUYmuRIvEYQ==","signatures":[{"sig":"MEQCIH5zf2STC8S5HDDF9oLKRVsCPPFB89Ag5UQO0JYPldvTAiAtJVN9Ulb/NUx+/FT0eFijGSas2QAAlfjhRDXvsh2ETg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB/kCRA9TVsSAnZWagAAZjYP/20B21znuyApNj1AgV24\n9Lz+LhIdu7JTNiuWDcfmzTUg5thq430ASVDulOmT8Vjlp5MvOxpQpImVxHUS\nKQpQAFhjdarLowK8OZlbX4tgjoyzqoy/luYoqYGpRC0OH6aCQXF3x3b4QX0C\nMyoqNlvmqnzy3FJLFO4hT0WuogBZVutiSSUzEFXUI6ZHikzIlIWkapi7/t/Y\n4occfHvWIMba9aYyuoV/qMV8xg2zDB81VVfQbEf8o4LQ/XvwUo/RQLTFRpaY\nLAVGUTZ3sIJ72m2akvXYx3W+nEKc7Mmg6Djo9MiTz8P4otHuDypVjpkG5Y/C\nxq7QilvM8kCbRrS3EIbAixvQB+PCenVHBTKAjjZe03mUFJv2SD5q6vg1GlqS\nVqIV57QzF5ivjTCaCfjugNFMg/3dQOTI9qYFlGCeN7NomGj+viEOL6zP+u1R\n7FkqPeOToFANy/hqeJI4F+Tl0ivrhUQU7XgSsQc4+8L226F3Mc5fS8eNTz8R\nwj/EWMCNH+0cd/H7iKXbyFyWyhB3AlPAp0zKMaa7sZHHlKW2ymR2hmtuBEve\nUIXdAPD7c17IiUprnV1e9nQGh13snpibnwiK8wuecT2744tFsDQS8IReTh5K\nTfFtJ+ZU0RPwNysPPPCzrDSCFfvnXYq9T68+6al61r4pkSmK/r9ae4qwaH+z\nGkmM\r\n=X+P6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.66b8ed7e6.0","@material/animation":"8.0.0-canary.66b8ed7e6.0","@material/elevation":"8.0.0-canary.66b8ed7e6.0","@material/typography":"8.0.0-canary.66b8ed7e6.0","@material/touch-target":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.66b8ed7e6.0_1597775843760_0.4215320364377442","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/fab","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24522697534483f6890a130c7f6c85d3ea46fc95","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.e2b1033df.0.tgz","fileCount":18,"integrity":"sha512-8Fc0LyvMnIJircK9v43xWKnSYHyAuGFTdtV6zCYy4zdunC1V58aQqWMRU/00BeNbKJWDE3uNlnm7pRcSxVLUCQ==","signatures":[{"sig":"MEUCIGyVIABWf4YnahcEuPEjSPCCLHsD0ptpXhHQ5EL7bP3KAiEA4J+L/pO6LNjbPPnGmR+0/m2uv2ga2v0HNnazBD5zgvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXKdCRA9TVsSAnZWagAAg8EP/jna3L9+pirhyWk+hohA\n5nLQN5Y3EOcrvbodwOtNQ5AQkWQLS++pSroPz9NvCF5vlpgJcyspBVcRZjBa\njZL+iICNMAgrGc1ZRoVNrXz0y2CGA7wBFCJsnWDicprwrl3/p9n9wRsZrTfb\nRoyxJug78b3oSRzdkk1SYDhoLcaxzHv4wHKM4GjVuuNU67IIU9X1zPWni8i0\nqZz+/OOsL/B1nh9T9fKM7lKdLvIc54zKqI38zUJeZ6Z6CDwKiyA1IpGx5B+m\nXLXXEAc6njxOnhqYw8pxwhOIjO74RqTLChQkUze62u/iIWYxIMysO9HC4lKi\n5GC0XMw5dl+4xsKNeaoOg7Cgtf+zG6zMTQFt6GNZNdCsZHQV7TkTiDd6q2/P\npaIgnCmJ/dof2gWgZVyC/ugsS1R7GJzyeeA6t7uD/MIWJ54IGRekgmMviT8S\nb1Pvr/I0oknG0qDrXa5mcdiq8gHa+WRO0XWFqg2UQQtyiv6m86XExrELcmDY\n2UbOaGQm6g7xON/EoP1SC19o0BMvsC+Xrqz9yWbGEwc0wRCYdeZNoWueuqAT\nAQ7oJdXYqdufoytm4dZnpeAHWnbnA88iFqAIwmuHdEp7/NOVE0VdGaAlTwqm\nIzCagRDY+33NWjxi4COcNTKXIxR1dljdcpNUJrkDvTD7cJamiojoD8YOB5KX\nNTSI\r\n=yc74\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.e2b1033df.0","@material/rtl":"8.0.0-canary.e2b1033df.0","@material/shape":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/ripple":"8.0.0-canary.e2b1033df.0","@material/animation":"8.0.0-canary.e2b1033df.0","@material/elevation":"8.0.0-canary.e2b1033df.0","@material/typography":"8.0.0-canary.e2b1033df.0","@material/touch-target":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.e2b1033df.0_1597862557027_0.03781831979971817","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/fab","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77b30b106eb533819484e616c84751a16185e80e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":18,"integrity":"sha512-C1sgJnMtF1KsvWs6hQaS/5JuG7iziu2+3cpylDQOnn+I1GzqJcb8GxDEN6OSuyb8qeAfaez/zskVo6q467bm4w==","signatures":[{"sig":"MEYCIQD2nezukdi3279t/hkUCZDXSsOM1ZRkCxP4TQAN6S3LPgIhANmxEYiBFpar0HSrqdfk6mkUjJ+IH+vz6c6JBX5J7jeh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXxtCRA9TVsSAnZWagAAh+YP/2RqchXsgbefttL7sUtL\n2M3ShNmm70n8IVSAtjE5YFV5lZYbBJGmfPs8fHgQ+sNt4ECRp5zvUPs+sqsU\nJtKm2sIj+az52RXnIaXIk5EucG3JVaz9Qsh+VYjW9IhBaF0AD+zKMQeyvxdl\nEsLF9xLums5ZBgal6XpuFRghppw7NB10uknmW/i+RsxQigqOlgZC5mebsRjX\njPiGVTjg7qlgyToPTZCc7kPg7TwJpFFRl6bpFVB3ZaODpswlJH969FU9yvxV\nqSuPe3CcqtSxYKkJDkrd53kQLZTQ5lFMV/mKS/kpf05BeXWckDVAQMQV4xwz\nMjKzqaykLjVqyodOAFG8mWbp+9X3w/6Z8iFuSy0ZJu4BuhkCxL6+Rle9j6yL\nl7dLVlXOXmKddobwTE+5UyyR4Df6no0a+6tQ6NKw8HQO/wdAnPelVkMRvnFd\ndPl/QwoTlHxVDQoiYLUhaCHtUED/vPlia1cwQO8k6h+rUSjgPl2tsYbZaNbh\nIi+qAHn7ggW6Xf6fwsGVlK+54ehHzpYCVlRgEBQC6OCMCXUbTzwRGbIfU/+V\nMfutNMyCwngmxUFbV6rqTrsk34NW3VbmTbkbLxQjUArHQR9cPlTq2gHJp43t\nahXn9xN9DZcDMdsFEHZACmrp+y78zH6Q157fMzs2H9VCekQyRpOM1OKrrg2/\nCqN3\r\n=tUqv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.2e8c3dd2e.0","@material/rtl":"8.0.0-canary.2e8c3dd2e.0","@material/shape":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/ripple":"8.0.0-canary.2e8c3dd2e.0","@material/animation":"8.0.0-canary.2e8c3dd2e.0","@material/elevation":"8.0.0-canary.2e8c3dd2e.0","@material/typography":"8.0.0-canary.2e8c3dd2e.0","@material/touch-target":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.2e8c3dd2e.0_1597865069489_0.6557596542702233","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/fab","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a382667f5e5acdd314d87c0f1dfa8375c620307","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":18,"integrity":"sha512-HZ6oaHBxtzKuNyZvkqq02gVC2LHRyHVgS262RXwb+0FCSDTes7XaoWFxcmRcXQwEPIFZgy+mVr9qxOgQXb9ABw==","signatures":[{"sig":"MEUCIQClkYGNgX/NtdhPfzkJVy3DLxPDMhRydSFnMC6JcW6etwIgaQxkZSNtBtxVqAFa/MW2dZvjPQq+C5tWm7XKCbST9Fg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaXvCRA9TVsSAnZWagAAABwP/RNiA+oHQ3xdabdLQmac\nM99BpyU3D6Furfwe7WV3tWFKUMw3nC+PIcSr2JzjANnvHeLeunaMnba19IlE\nskCPlo9BJ9V0i0eJj+OTTwGMBmWwISd293vlgObRozFYmZen4HjSJUi9anx5\nGpLgOTd41lIBY98FdXB2GOVnRM/jIggNEWO+j5fsMYUxD7XFdaP9pwYA3N7l\nqhlbt8C3ZzFm5WpLrNh/vSKbj/zTTYf1ZEanjQPc4qXuLQQ33M4XE8pUCM86\nTryEc8ad0xjbUhoFxXUAdT+fFO0xT/m+zuvfAuubEgRPsnJxnB2R+IvL/c0C\nbrUUgxn3OL8Ui7v+gTsVyotwFibm37uaKmgNxntEFS1EhZX3WFGQ6RzasX/G\nuSDN0k6x0Kt5GGaD4kIt7bkwugzuBuMICkQgG33JGXeJsAyLhPqD0V777cyL\nAIyw+Ey9+aB3Sidktwt4kmA7/UzxAdCH6hsSJoMJyfNd2X1brX0hP9whBldz\nxlg4KkmxiwqtiYspcFRtF2U8xOza9s+4FCVTAufJ3U9ococPxB41OFsS/Fhw\nQe93MDnN2Jv1wQ2MR8Tk6bb9pzU8re9T7JZm+iVij22PDTF2MwfjmBYeeFBd\nc80fxKowSBbID/iiiGU5oIFd9hCN0fbzd28M1OQyOL4LjjOwy7+vD9MEe3ot\ng4gR\r\n=kSjy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.b2e80a5d9.0","@material/rtl":"8.0.0-canary.b2e80a5d9.0","@material/shape":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/ripple":"8.0.0-canary.b2e80a5d9.0","@material/animation":"8.0.0-canary.b2e80a5d9.0","@material/elevation":"8.0.0-canary.b2e80a5d9.0","@material/typography":"8.0.0-canary.b2e80a5d9.0","@material/touch-target":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.b2e80a5d9.0_1597875695071_0.830594197742146","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/fab","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.ff88df637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cc101a6d8af67ee2917d4e343dcd4e97211d494","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.ff88df637.0.tgz","fileCount":18,"integrity":"sha512-uj5byy2tuHyzwMFCNzZRp9f8B6DMcKQb9UONVb7gTRoM7vykVIB2+goFcQQBX9d7zLBIoiIqokq/HO+3gp9Etg==","signatures":[{"sig":"MEUCIQCsoJCYwoiD8ZhEykgClM00OknhEJgb/pvDCSPiZqxI9wIgJnJSr+4y34kAIDKrSGXuJB1iE0mrPw0xOMUOoDib7Go=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPajCCRA9TVsSAnZWagAApYsP+QE5Qx6FdzgWXhpDfyLF\nq2ZS394duDaVEn3c0wcSwfB8wl7T7E8adri/ET85Icw0nbX7PSFRLU0EMsyY\nejeOV9cv4S2gEV9a2BQVfKRaceyMUu6ynPKzRBVmYEkbkSjVm0itnXZe2wj0\nWWCts3B6bRstVo1QNjiNxgnudcTEuIINtBrjnHnxI0nbgDo627ScPc7QCmto\ncrcbMUZHofcFg/l75hi5VsdEz4GEOWHVO5fxnlK9wmHU28mU9rOZetbjRGRy\nuFaxGhbldgXxX8Srdno1Z1D1XQsjQerHTTf8ZqVxUr/GIAFpyp8Edba49GXv\ngyupU6Z0vEb8BLf26LL7+UZUBMOuu+qGOM4QcMvMhQmKZ6l3UAT1AOXgGyFP\n3/Z4Sys0IQRtvCVU24ESYKsjXn+dCSYB0BmTN0D2wJSmlf3Z29OKHEDhEysL\nvMdrSyE7XBvpXajl1g+Y5Gyz2gORw+H69VDgy9VGrbDhqy/axVbRznCnk/lP\neYUUw1pOpSjgcW4pTJIs1mO+zFy6Mj+9uA3ocpM/LPWBFukQfOKYV9KBiQ09\nbs7cpSSulazQeK/tmIih+JPvnOrMknq5lfLy8HDcPaT8AFIFP7M4DjQtqQgE\nPqURv/UOMV5iPBuhqPe4fr6N/4hOqntFvSb/kIK35ewkGQoHKpRDaA9IlZDA\n5TjP\r\n=kK4f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.ff88df637.0","@material/rtl":"8.0.0-canary.ff88df637.0","@material/shape":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/ripple":"8.0.0-canary.ff88df637.0","@material/animation":"8.0.0-canary.ff88df637.0","@material/elevation":"8.0.0-canary.ff88df637.0","@material/typography":"8.0.0-canary.ff88df637.0","@material/touch-target":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.ff88df637.0_1597876417772_0.12972757013953906","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/fab","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd28345fe8aa7b58651ac051741d1449818157fd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.32fb314cd.0.tgz","fileCount":18,"integrity":"sha512-EHl3ihFP1VnfNGI1XHHuVix44vpQ1RK0hNb/72YwqUAdXLNAi6t4hQ+f417dZ4XLyiLptWTC6uaJ58Djiu6WGg==","signatures":[{"sig":"MEYCIQDPAhGm6NfFbWWvTfRWI60G9DkrrhMefEdBF8Ppd4ogLwIhAJ7YJ+c85OmP5OsXzTf8aIxXC5rCuU5ASvphQiMqHkoC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlKYCRA9TVsSAnZWagAApeYP/0OkWLryQSRlwY298oxF\nxsstMx3U9DjpD5u+JeraPNr6rlNtq2+gwkM9QZg0sG9dfPtOOgZh5DBvk3Ep\nlpGQfoq0YA+NNvKcAKgUQxxdgvr59sA7bX6BSBMSp3+GERp6uxIxsQLwmKy5\nHnhMijTJb6cR/tLY9BKI7Kg2U14daa8mEjHiDTfqUufNIkwTBnavVRlR0l+U\nPUjEwrw4S4ymyLtTIfVywLXfMcr9H7eqlwiJEcABNAx/+EmKyYKXJilCuHRS\n+KOu0/r6Vi34MuB8yx71MXBDQ9kJTNBV4arlUodQcDeZwCw7gzVCYC05VMzm\ncL7dSuo5UMbhoqoL0Rij1/YPdtGeFCSBn9TBg4ioZyyK78hU8/VtmicngZPk\nHztoG6Zh0buikLgn828MXyWWaLYP93WNaGZR/CnV2VfOBFfEWDZHqp3gC2Vy\nm/9LvbO+fQd0XDY1sONZjmRd//GtViAbJYv0eoIAQHkTBcrjiX9/WjJnIBCH\nIvymeuZOfg+UyHv9EDzLXoqsWxg4vRcAsJOhPfPVWB3KgjGJwbzCIjNXsFsk\n4aymdtJSI0ItNusbRJGCKfFzzpRdQF9ChfY2yXWezXJva7xUba2UGt7w+jJc\nNJ4cCqcB/phneI6huyny/c2UC4sT2kaCneu2IbhQ6PEplOQ9K9E7yQAUcvTS\nCwMb\r\n=0kyh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.32fb314cd.0","@material/rtl":"8.0.0-canary.32fb314cd.0","@material/shape":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/ripple":"8.0.0-canary.32fb314cd.0","@material/animation":"8.0.0-canary.32fb314cd.0","@material/elevation":"8.0.0-canary.32fb314cd.0","@material/typography":"8.0.0-canary.32fb314cd.0","@material/touch-target":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.32fb314cd.0_1597919895909_0.604941182977581","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/fab","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.546277d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cae98aa6ef8d5918f0b9edaa857f0088adaa106","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.546277d32.0.tgz","fileCount":18,"integrity":"sha512-qib50Hkdnv9d6LABP+crtZ2QEdxo8RfyZzFdF2dFFtZk/Nlb4QmYtr27OrbYNsSzsyzvU5g75cY5xycVqBdk5w==","signatures":[{"sig":"MEUCIFxTKFIJbeqDlLidBPzrgbkOt01TbNJ5J6I5/9rsqKhkAiEAxKFS60yKzMk6jTPYR34jnlPoANO3+K3MnklQRxFys3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqhWCRA9TVsSAnZWagAAjLsP/3sUreI148GzzUHnFfb3\nxX7otqSmH61SPCUCJoCdRs4lZPGz9bZnuCRm8Xk3EAs2kjsBuVhZI6rWulgs\nfWrlOV0SpgdOcZJ0c4F/3JkZ0DKYGKPjW3lzdrkzUqa41961SnmfSNXs3nj7\naIKnTL8vv+wOYm0aOQMDbcaxpc8w+yr9REkyesShYyWwlKB6q61lHILgWMK6\nqhHJPCOkcPwOwE0coSh+Yu2ytfok89x3Oh8Aj9X7W5/uIlMKO5MExcp1QMHv\nryz4aJFyU8AXux9ftNHgJP0MHObyvxwoeomPQ/nbEA0mXDpr5XVFnMDzHF2/\n4t9+4z2+0cfRpOkxJzT24Asbgakdyvzs5zGmZ7LdY1TWZvizuozJLbRt4qWF\nCVtRtbJ98pxsQScQdVVPdOoYVozaMfnwzLvrJQjDgb3o6aVZ/7kgTIsM8v3H\nNh/Ew1Xvmy2cf9YPjbaCEIABqRSezlVbHDzpOTgdDvt4/1BxLdXNRMkxMc8t\ntrf54hBRkUGWplOXiPoFCzZpcI1X3fNO2C8jGF3/qMs36U4rdCC0YaoPKhca\npuS8tA07F6u5iKpNMm/mn/CFaJ3oM+dzf1oHzzqEQCQlcA9LA3hw+FFbVA+k\nEmXKw6hTOVuXeAjMxucGpgEF0+45zAC3r1n+VHjHY1iKp1zodizC0GiisJGn\n2ZBr\r\n=pMcw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.546277d32.0","@material/rtl":"8.0.0-canary.546277d32.0","@material/shape":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/ripple":"8.0.0-canary.546277d32.0","@material/animation":"8.0.0-canary.546277d32.0","@material/elevation":"8.0.0-canary.546277d32.0","@material/typography":"8.0.0-canary.546277d32.0","@material/touch-target":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.546277d32.0_1597941845842_0.8686775582867343","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/fab","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.da72839f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57fdf0e17f554071f8bbcbbf25795d68060ad5e4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.da72839f4.0.tgz","fileCount":18,"integrity":"sha512-+4xJtmjE098VzvwFoVawIcsFns7UFmSUf3iJI3mHUhyyevaLFbodjDD1T3iT371IU0e+q+92THZt1zLHLl4Sjg==","signatures":[{"sig":"MEUCIDF+qouG0dacQn/4dqvVEp7iAjYXTkWVyU1U7kJ9gr/pAiEAw1B2SH+iKkJnZb2Tcz5IcX1Sl1T+FD5VpdrBG2z4ixk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPrpACRA9TVsSAnZWagAAA0MP/jLBg57yv04cZacTazZ4\ntuwRYNCc0XBogtpOPwQjDzxSeGu/sA4PRRoxfia8LS07WExYzhUGu7sXIzhp\nNXwSlL9sTbVD4WVYEJaCKzyxMbLrMP824wyfiqTPaKqLXi9EBu++wKTH17Uc\n6FWww+IUP81A1BSnVitXMTyFVGkAiqEooA1BNBthsyTgsbekNAyYNEjcDUyY\n7ps6T07isaAx159oqQZEV1MsmAT1Qsa4fDw76orZl5a9rs7m54aBcy7me0le\nb76TNbMsa+6wuvCTYFO7huvHXPOX7nVr2Vh275rBrujYyqBkfkEj/dxrTeQP\n/yyuZ5p7dgWs7oskWbWznI2VfuRTDU1qDxiahMm1Hpr/CICXKCmzT7Q+VR8e\npwtPQLCMeB96aXn5fAQHO7jKd7Um3tQOSS0NNHVmYFZC/y2GrsH3kpufeG4C\nRSR2yEXzK6+it8ZfqHPKxpvU3k5soY5aonKOYVBwA5G1ANUWs3L88CnwIJhc\nkUBUs8bPz48TzhZF5tx5zQjTWSdlx847wpG+D+uI95FT9kvIHXRsCetm0DzU\nvSbPAvzBEI1LmGHQTrXSs2ekanWeoaG217sixZeB8wH8uEE01bDq5RiFbcVy\n2xcPKL87qxrd2BQtwprZ1AgksH/P/tyR94/H/z76mnRUkJSlZQlpq1yTD76j\n2KF1\r\n=6vhU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.da72839f4.0","@material/animation":"8.0.0-canary.da72839f4.0","@material/elevation":"8.0.0-canary.da72839f4.0","@material/typography":"8.0.0-canary.da72839f4.0","@material/touch-target":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.da72839f4.0_1597946431440_0.12440223766843217","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/fab","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.346069ccb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68f4cebf27e7a416b33e9e335a2e1d32c49ce022","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.346069ccb.0.tgz","fileCount":18,"integrity":"sha512-1md5KqWWFy9XnNINlwqkRFKPR79XznAx+GV6hplPblLH5RopzHNpUisNVsIDiduzfZnWGih0QNxV+eYWgN525w==","signatures":[{"sig":"MEUCIH73p2I2RWKATWK1XQA0YLA9G1zl/eFOBo0arCYNrzaHAiEA44YqZtY6gN6yqmTnWmc9ndWjvJVvaTXfcGguyVwnNtM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr6YCRA9TVsSAnZWagAA/c8P/0GVtSUL1VinEhyHS3gi\n2rKuMtjCz1za2w9hM47frEgu7b5K0M0daYgn7ZSjnxp0jtjyZMuqCpcf4/IO\njHQCnKBPEZEJmCUMMjbb/kARGFxgPe5hZOK67dDIL4AH8f1zYmw13NZ8U1YI\nqDgSomiVYnGHLgXqse1vZzh484dNjXsD1UZO2bsXIf7qVt3g5BuIfv11iozy\nvS389jwUBHxxbSGFY6ljX2AUMmvVJF9E12Ukj8Ol8sSDmWUbQw0PskqXh82Q\nIr3HnIQt9cDNOjMAZOYI50XLgwelxzcSpyElYPodzhERVpT0KREINNfMScUA\nrPaSvGWTHhwttSE8YhmWwy4wwThWYVyaiTAlggahOAVRBftJt4WEeSwJvybk\nlNqAAvyW2ZF78PoaZKepYcYv8DFYC1bP/b6zLiopLu9XR9sWsj/6uPAZulKA\nx1L1Xmw0YhJr7fotMsRoelSnvvqdiZZTBqBEseG4kD1fTn1i9YYO8R2kzNXX\nZ4rltlN/WUt9mo2vlcR25ma9N/n67dbJDVzE/WK2zm1WOxTGR7y4LDYc5kcZ\ni5bGSk/9soWvNe+d6SJkA8XYD/F3lSxjIoWfc36D1Pk+A02V2JE7XP0tZvVu\n1Jj91URIi1zQj5m7isRecphjH3KRTt0PZgQfOQzgWmERo89I9SgeuMsWVmp9\nwsjd\r\n=BjnL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.346069ccb.0","@material/rtl":"8.0.0-canary.346069ccb.0","@material/shape":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/ripple":"8.0.0-canary.346069ccb.0","@material/animation":"8.0.0-canary.346069ccb.0","@material/elevation":"8.0.0-canary.346069ccb.0","@material/typography":"8.0.0-canary.346069ccb.0","@material/touch-target":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.346069ccb.0_1597947544435_0.4504935904825724","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/fab","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd99e5486a5d4edec3dc3eec86e9620d365df7f2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.e27c5802f.0.tgz","fileCount":18,"integrity":"sha512-E9aoYKAZ3x20V1P+sHPW9h0aRD4q9mWT3PMYmYxQwDLVwLXqeLvCO6gAr/VJz4tay12LGTeu6UfM6tPOTgJqzw==","signatures":[{"sig":"MEUCIBwFEwSUiwBEw7w95vR8r7Vn3uiX29NQvf3TdskJQlMrAiEAvT5v9deQjKWP2EZ2CiBwLCVEnl/xE0dxx9xnQQEYatQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsveCRA9TVsSAnZWagAArGEP/iwHUb0/uERvBAKKi8hJ\nXIbCJFTP6IEz2eU6wT4RmFZHl4tiBOXpRtGtgq1HP0uTPG8qokEYBgjVmrvF\nImrvOOtS6b0tRsCm6lCTOl//XqXw1aIPGTUf4feFd/94RaWqt7KSHRugUYcn\nUhPtzSpSHpksHj8CtQmQzTYE5Art0+HBrFN44Zpnspge/Y/ip5J6usP976Vz\nBXed8cOYx8h+tcEQyOLvRUMv/36hCi1YgP13Atzh3WPO+sOg3/8TV/zxNVyb\npmLXpHrMiy6kARTbMElsZrDUwYKMxIIuOW5faTpg7y3ReGDE3u8pfATqAfdd\nZY+p8FMEkMIlS+iIis45lI2Zm48uqlfhRdb3rhbbDxComvRDDqrBu5V1PdjN\nRikdPkqdpOU1V5O1jZUcr7xifk9D/apQJrwZAlo81kSofEx5p+IKAkMh1d2r\n2MRKBIr2774EarW/G7+BDXzCPEDQ3ZvfAxUT+K2Gv5qaxvexXZUiykUrwu0/\nRU2pVawG9sTZ8QxI63TwPUVaF4ZHWGIytQOdpQ606Cdp8ZuW4t5bXXAU1lDU\nYq2XHK0vt0nwMX+0mYfPaj/2Q0VkxmaOuBVLHxrRdyy08cDAfxrFdr0ISNCJ\nXAYpQiIylIxR2xWux5C46ifWfLdPf4wlWtfsrRfk8JyVp2heEDlvoNJ926eV\nQNSB\r\n=pYGE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.e27c5802f.0","@material/rtl":"8.0.0-canary.e27c5802f.0","@material/shape":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/ripple":"8.0.0-canary.e27c5802f.0","@material/animation":"8.0.0-canary.e27c5802f.0","@material/elevation":"8.0.0-canary.e27c5802f.0","@material/typography":"8.0.0-canary.e27c5802f.0","@material/touch-target":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.e27c5802f.0_1597950941646_0.3564804426498922","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/fab","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dec0365c7a08a77f19a003e38dbc6d2260bc8572","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.f4532b9c8.0.tgz","fileCount":18,"integrity":"sha512-nHpZC4QchPB7RPcTZW02Bysghh5XbQ/v+Fdv5wJMVvzTIbqljcDw3g0+nVTdF8F+kJ1t6K4z/cZ8F22552ILFg==","signatures":[{"sig":"MEUCIQC5rsk7iM7iCCC11YAEZNrBSl/3kiNeTEdLN0Atms7jhQIgSzcNhuiQ/KZ0EaQsjjAnRJB2vcJur4ya5Z2O1soIvfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtXYCRA9TVsSAnZWagAAce4P/i9EYEdRzpgsGiHb071e\nqwMtA6bCi1cw8+BDwH6f3XgD2l5BgVOEKLW3+sAZLtdK7J2Ne3dLsUHxIVP2\nOmdJ1+BTV85gdCbDDQkiYeQ8/3G4m+1nOd+q6ouGMfzNyyJ9ywiuuqloKmkK\njz1RL8gTrVilnvTNNk638GRWdHE6YBaP8NACKy1zEEz7Kuc5eE7CDTjtTpxY\n4pRKQyOxRRH2kuQA9oYUna/CDOhJmpCzIjA9g8nazS1UQiCkOjz798mB7vjq\n2xAR5BFdp4UuDCzF2vA3RET72c/1LoLCr6CenB1qg0pTojID/uPQgnQu9fNR\njresZP3Qy7W+Udz3WFjECgcOwEPZBsly/fzFpe1Tnm6yWJoq9/SEEGTldoAj\niuobFrsaVOWggdZke4plo9Ggj55EzYBAKAMEWbNsxAdUo6i192vZzeouXbwO\ndISANZ0rm/IkYSIB6KwmcVQUfC+P5NZEoQoSCQ3w/X3wfOuNnhyokaPTsmwo\nfOG9raJ9YJnm6ppvHbF4tzvqx6luan9qciTOczyXsBirB87QcIjm2H6dMoG/\n8DpkV3u1Ks6liDfjcOcoNtKB9YtWdMJcgOa3s61Y3cs9RAw1bMCI85oufvXD\nTwdWppBhR9q4+0+uX0QEA5FncUhuFr3dor3Cewf+5S6WfqpYyKOblsP71nZx\nSooq\r\n=+4cO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.f4532b9c8.0","@material/rtl":"8.0.0-canary.f4532b9c8.0","@material/shape":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/ripple":"8.0.0-canary.f4532b9c8.0","@material/animation":"8.0.0-canary.f4532b9c8.0","@material/elevation":"8.0.0-canary.f4532b9c8.0","@material/typography":"8.0.0-canary.f4532b9c8.0","@material/touch-target":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.f4532b9c8.0_1597953496117_0.3884876605671499","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/fab","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb0a66165722e02b21e8bef9f841b13c4ecfd037","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":18,"integrity":"sha512-HZA/uq9eGGdNwYKwOd89UQ9ai2Dnuqw5EC5FHZzEDRBtXcRp60vPG1pQ1WDHzr/eby+aAsDvhtgujUXyvTyN2A==","signatures":[{"sig":"MEQCID++HtdXinJIn+81P9caTGk54QP2wgMKZzNMftIyP6VbAiAviRt2r42hIEUSWaaN2ypQqePXtJUGa/KCWkFAuRwKnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuX4CRA9TVsSAnZWagAA+CkP/0FQJnluZiY51F6mE08C\n+zlHcPZ4v3OUG/fgiyDGGkIhG3/q2kHRZq5mzAzYZDykC23vK/nfKZ1b9nnf\nbpoA42GrSvDavPVNnvn0Davm/2SeI7gJ9FH358eNp0qljO0ilPo5FtJJiIMt\nUwxHAX+8FHeJBYOuljxnWu9MvINf7iCDUrKN3m1/PD2VzKKE9LNYpWBpBpqZ\n76YWvQdD2BifW+Rje6N1RrS3kKbUdQTNLxpiI4WMBUSKiwXapPeJn41DOdxV\nsMoTusOk/4JsD5P/pGIUmD81EtEtIeLEfsXO9qtD5MQv+flcmuqW/M8C99Aj\nY2WYtDpJjEF0zzkSvWQpZnjmY1FntEEA2H0lZC3j3r/vvRm+M2viBJqDliMa\nui5n+7U3b4+WZ9W9+CmZqDm+0D40RlV8VCZCQADCZmmNKjjjBVujMAT5xAU7\nADUHVUQ3pWuZZFJRm/XLX71BoCXxyJks0kPEXDKE+fY3Oi40yY5SH6zBDTkf\nIAcoufTOmY2mf5wi3xjCUae534nXLMJIvlohkscvZnVsDorGipH9b+xb7fgb\njb3erN7xDKqeKFHq0ExW7g3jyleE4Jm7O7QW2Tc5a47tu5ocVB/TjlPT2m07\nwLqCq8xXqQpzNx/3127yfLaJoyfwWWIcnrbUNOvQOmyZdoxEJCWjjfdzfGDS\n/pbu\r\n=YyRF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.fbf73c2a6.0","@material/rtl":"8.0.0-canary.fbf73c2a6.0","@material/shape":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/ripple":"8.0.0-canary.fbf73c2a6.0","@material/animation":"8.0.0-canary.fbf73c2a6.0","@material/elevation":"8.0.0-canary.fbf73c2a6.0","@material/typography":"8.0.0-canary.fbf73c2a6.0","@material/touch-target":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.fbf73c2a6.0_1597957624306_0.9302997402416349","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/fab","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.cf800124f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f90f8d20371f29245d3713e74f6005235d1bb4c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.cf800124f.0.tgz","fileCount":18,"integrity":"sha512-MHAvL2x+CZfCIMkvjfiUK/9kByuVDx05sbU/PTn12FFBq2AC+hLN8ritYB4DHU6RA2cobTLytPKsuHWjvEG1ng==","signatures":[{"sig":"MEYCIQDkXVf9oh7IXLkJ9iZnN4VLsen4aNPGVtTM6kcT6YlJfQIhANA+rGf46BXdc/9P40+DkzYzolm8tdHqXOtGYzutrHxz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvDFCRA9TVsSAnZWagAAOc4QAJdX0wXes6mo+wfzzNV4\n4NS2W6Yp7K7yiKs8nCad3yUWcPXJHXzb9U04fkMJIuzFEQo5prcmASnRtFx4\nmCF+EtW8rOrrJsuMVRJANiojRw1wk8qvx+vgSQ6wJfY54rmEJm/mRprxpjx3\n99TL/RLcoJU1BX+wTr3XuLxts3envvYKsoWqqoIZ7C/rE8ZwSyCxmDyu0RBt\nhvbGFWSb6imlqWJ8XJ7ECywmQ13H25ItcivTivRA93rsputZj5HmqVpeeBz1\n1VaNPcYwbvtUVpzxpZK5PMjuxZ05788wqGd0O9VoHlCvgk0W70Xk2kvIs+9h\n1a0+0HxUJ0C6fKdctBfBhtWCeblb8bcdGgJohPfNosst1+nqJfhtsfX1IEuw\nNoxtPlGt3+HfVeqhiG4GZl6wQvM6h7/Wz2hc24PVGgHdCp2Mx3VwgV6NKXN0\nKyAEUn6DXgi3TLw1GxGSeyPQoiojCOQPv8f29q/gaU1vPPZzCe8LYB2D8p/G\nyJ0OA557Qj7YThU+gZDh3s4u7YvhAagRzJ21UR9bKqdg3qRdBWqiOLiqjlDt\nPi7euMLk7yBTLT8B+wNeahNUKoipOfEaDr9Lep/fjEbZBhivDNP0behRC30F\nuVqz7sOyNKc0qqHkier+kbo3gO9ou2Tx5+TL+t1xCXTyyczvltyFvD6Q+P1a\nfv2/\r\n=DmTd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.cf800124f.0","@material/rtl":"8.0.0-canary.cf800124f.0","@material/shape":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/ripple":"8.0.0-canary.cf800124f.0","@material/animation":"8.0.0-canary.cf800124f.0","@material/elevation":"8.0.0-canary.cf800124f.0","@material/typography":"8.0.0-canary.cf800124f.0","@material/touch-target":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.cf800124f.0_1597960389215_0.232471305814121","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/fab","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"626bc26d0d538fe47aef1cfd494a1e686767f5ec","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.95e4eeea7.0.tgz","fileCount":18,"integrity":"sha512-GiVfkeouKDIAAkcs6cdf2XHnbR7Om7kTz5uyeQd196wNFj5jtHQwvunML3iNK0UlP5Llw92wjVLfDeRRmma+tQ==","signatures":[{"sig":"MEYCIQDD/dmMNJ7utJB2KIC8AQqyFUHR+D/o9P5Qcco2em6+lgIhAOz45U/vKvc1BdmQMQQiQZMObCYh8JC/T/8AXpbDtvQp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwdVCRA9TVsSAnZWagAAyjoP/1YxIAbKeM68cGT8FdGW\nSd8ztQZz8KswgFKMhsKlzhMJ5FR+Pqo117DFtjhG3ZGuVV7DD4x2ivWIodwF\ndcuZic0ghlPIA2oSvXTIr8v8bJK2kyFpuewmda2Tp87FKvz/tBAvWqoQLHRM\nBobPzo2d/+C9UPG20Uup6GeffgqaTr2ZiFUmtsSPU+8AuEdbxMP3jTHgFxN6\ngdWTMSI/rD4jJ3oiuaN7bPkuCmewRpM26vv342/dpj9zDn8LkRAGD/XkmxTW\n/ipP6Fg8bdLWAikvsZRGnfrvtLPB8A7+uT2NJMfF8yCaXAtFz3RiiyAVrZVp\nW73z58tzrenMVQ4nH6wLAYafTged5EhIFZV1NqpB5vxXZ1un7oJynrob96aj\nvk85V38TBHA1u+Fq9EpnvTJ5O8YTh8shVyu8Bn9fKyU2tXQ2CNp0y/Dwg9Yu\nz5mBtakZs1dIlgMRPOq4KecYupSpP1Asx6GHIswjLKLLER1Uvhl/5CRofHFu\nzwVfphIrBjdT5A2bmxGc0mSNPaPE+OMcDu9ai/DNCZsIxQp7fn+UhyW68/PV\nXamMcitPVCzgMrJ0DBbZk++77I+Ltxaa15IPeg/MIrna5lLbt+OUl9FH56nj\npovFn8a1a3AkuoJc/PykjREkoYV4Hz2UGGdYFT7I/bSRAJ0827D/N0NpqnTZ\nM5Eb\r\n=XicJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.95e4eeea7.0","@material/animation":"8.0.0-canary.95e4eeea7.0","@material/elevation":"8.0.0-canary.95e4eeea7.0","@material/typography":"8.0.0-canary.95e4eeea7.0","@material/touch-target":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.95e4eeea7.0_1597966165352_0.3243912776528364","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/fab","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41ec4c53d7e135464f0649790dc193ff8025f2c5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.91ab1c62a.0.tgz","fileCount":18,"integrity":"sha512-HYxRdbjzZ/LBWCOC8F6F6lsvjCLLK9l7KppXdmPgt6uowhZ3h0jyCvj8GYl7R5Lnx8QDYNEKLlX4uPP0eoOJnQ==","signatures":[{"sig":"MEUCIFhVwjY+7jWhnl2M5HvtLR3QZLD+hH5L0Zpud7NVXw0KAiEAxXiCDXaQ/vdXPVZKG3c7/UK/s9wBtrAXrDioPvx4sfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+RTCRA9TVsSAnZWagAABaoQAIqn+gZHX7jw1n/w239E\n+onhtIXm5McK42GcTQerNgVFaGQpW1xdXtSDlJMpNI3+7o7YLe1EHtxXIXhS\nrB/TzD/sf1PlJ1vb6QQ4jBW/qNzHth/1RTG+OFT8h7CVKDeZEg/S8ZNX9xhM\nFHYgTOqnyhp9oaIoSj6Bq+PW/mC/W89ThK8IFsUf0tzJdfvajjaf0OYA7O14\nDBSiis2PVEUmAK/uujWZohpbZJbaNC3mgXBWgYJKJEvRAC/riP6iOakC6HiS\nJUwEdJgUS63rgcFc4P/qTEo6tESckH1xKU873g8XjLg9c5SKGhaU8f0uvICw\nvcceoscMlmoz0etuC0lr0Mj1jv2F00ENtqdoilyUen59kS5643vjqNGpnnKE\n7ropCcLYjXyKoH5L3Xt5aT04b/0ZChS9tK/IkRx1k7a0V9Uq7v5uaxIbeso1\nGWPA95ATb01bC2/XNEuusnyIXRVkSd7eVxE+WJ5nhhO8Zjd5pD1GfxAC96fa\nUpZwfXtoE5c/bANpCQbjhFGYZTpmHX4Ve8zEdNeXjXjQadbGCBfRSZgCqYmh\neKUgNz/r/NoIB7dmh4YAGAuW7JmIHL4T+zm7qd7AaraF2JZSjblYw3ryHGEP\nhi1setEiEeK0H1DaZH6iNhtcMBZ2htlJHfWV15mBIVztkORsQUHM37yX4vKH\nTaOG\r\n=Q1Fs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.91ab1c62a.0","@material/rtl":"8.0.0-canary.91ab1c62a.0","@material/shape":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/ripple":"8.0.0-canary.91ab1c62a.0","@material/animation":"8.0.0-canary.91ab1c62a.0","@material/elevation":"8.0.0-canary.91ab1c62a.0","@material/typography":"8.0.0-canary.91ab1c62a.0","@material/touch-target":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.91ab1c62a.0_1598022738793_0.3070396791707648","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/fab","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ee2375beb1e4b3a73ff646072f1530a65d0e287","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.58eaa9f02.0.tgz","fileCount":18,"integrity":"sha512-1FbeJMAIJ26QTjyFcbr2pw/R23+MMb5dz8dTxlMbIluhjl6MyRbumThu5VMpMH99jxLFon+HonNVrSfgfkiKxw==","signatures":[{"sig":"MEYCIQCveXCVpRqFCH0iqXUM/Xadn82stx66UkVwDYpBOrccmgIhAKcJ8i/yzKODyKONz9NtfiQr8i7Tc3E/IVmOZFqnFnQJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCf3CRA9TVsSAnZWagAAZkAP/3somX2qlIsu5dQauntU\nVewWWgIrmyKZ7raFP9PLkD+KA9B56VF9kXP8e6uIzfPwl7yRDytswLazmI7F\nZkxh6Aos31COGvjN3nkBy0gbKU29O6hVyiY8L8gW6dRpQOTE3du+OnVPbE8N\nv3n+21X8RX+GlU1u76Q0lDnVfl0i1hWIF7wVzb99qDKPe7fSnTZjNIDpGAgi\nbr/b8p4S5J3vqag81hG2gepvMcQA6NHi113bIh4xSuX7xinv7WWu65llk8X/\nAAmkvrLrKhdPuQP70qxc7eUuEZhxkL4nnp3rIq0IGmCpvBPA+dQ9RFYgW/3r\ns6eyYCKAz3ZNuQGRG1LoVOzAzHhCKrlDhyk2eiSBY3NRFYRvqYWLLEGWvgXG\nRBpFzayFFoSh0ODmsCeeW+R2+qYQlG6cZrEZEVDBIbMmwg0VcDgJYCZ0W8jq\nqyG4apMY8d0USCzOaIyc65hC2OybJGYi1RQXp1cfi0iNGMx4poE8/sPnulZ9\nrMdhLQdSaguSkG/de/as0WV5xDoXsf24eD1FW7CrhhycZEGY0RZbECTqV2Ok\nP6+/+16IvhZUyfrOshK2BOKrBi27X0opCH2sKIlgANHypGA2CUKPpG6RGDB1\nTTrfUly35Z20pQnK0n2uE+w3xC/yqwDTp6ZeluYZMvHYZ1SEI0a8e625gK1D\nQD1B\r\n=fN0I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.58eaa9f02.0","@material/rtl":"8.0.0-canary.58eaa9f02.0","@material/shape":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/ripple":"8.0.0-canary.58eaa9f02.0","@material/animation":"8.0.0-canary.58eaa9f02.0","@material/elevation":"8.0.0-canary.58eaa9f02.0","@material/typography":"8.0.0-canary.58eaa9f02.0","@material/touch-target":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.58eaa9f02.0_1598040054884_0.17168877730573695","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/fab","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.238216fc4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b00734946e71d7098f5e86949a4e79addc89630e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.238216fc4.0.tgz","fileCount":18,"integrity":"sha512-nl4tYm2ddgzrzgXULtdY3zOXOVmj8fsmJG0E+YVnfbfjsvldr4ol3QIETzUvw1uSsFmU/VxYi8mvpnEi6HuXPw==","signatures":[{"sig":"MEYCIQCGy4vDzwOmLFNXyDXhpwvOLI4IGfEGhCBecPovvSvouAIhANCtaOLwI5ctcNbEz/GnctUbRphRMUoAJGWH1oEb0R36","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9+kCRA9TVsSAnZWagAAGjYQAKQEurDVhmhAnOspOJf4\nPIOEoKUpbElxvm50FzZDiXXZOnv+opZY7NNHQjJQExh8mFTdsecPha+wM7nq\nu5BpmbfcqbmI0MoxIFydbOJoJTiKfd7kfZ0Gtr3h+D3cqsrAPCjSVjcvRT6i\n7/8OsUlhPcpPF/oF0HTIwk1cS+kqnHPBYtBf8DsJvlmU92aHjh2TllAMb8pN\noBGNpjjOxHMnAXA87FVP2yOnyD6UXS6o66wwS0nFGjGFiOtgfGmvxGd1tdXN\nr0HWHTFhwdCaVEd8jP6GRL+JqnlbXPHWXZ5vfV12WBx0jDN9YlSqJRyASGLy\n7TxNytTNWurmoUgcAocCOBxFiMI3ucPbwbipUY3y8Lt9l7OcHjSY+LXtiROW\nUX3Sf9RtLpOarudkdh6GOwqhqp7oZuRK6CdZSArMrOrICzDdmonkXGQVFjGl\nl/n3/3bwHpL/DT3VNLSZNLV3mxJb+YlGO8zJMHsaPAUxlHnutC8dO5V5scN9\nSyDPsk+whq4B9fevCbv3BD56kchZGM6Cmc+qErRoDyz6/Uy4fXRDTcTGkFmt\nbzHB77aTAueCyxS+jgVh4SqErwpMeUYfNXf2CqyE52NO98ChadpsP7hk5Kdn\nOfBp2J11259kOYbBg2PA7UeYsTymY277BICW3NSl9ds+m9tb8SAXGszGFyDs\nLy19\r\n=vEkg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.238216fc4.0","@material/animation":"8.0.0-canary.238216fc4.0","@material/elevation":"8.0.0-canary.238216fc4.0","@material/typography":"8.0.0-canary.238216fc4.0","@material/touch-target":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.238216fc4.0_1598283684199_0.29353798402197917","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/fab","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f728befe5baf29d15d19ff3aaef67c011fae2e68","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.a1c65593d.0.tgz","fileCount":18,"integrity":"sha512-Ymv+rSnYi6AXm0JUHGIYykrkxI7x2j6JbT+2UWXpWZDWcztp77n8BkNWyRfdIupxWBbgctMAFZjqpi0JbwP3oQ==","signatures":[{"sig":"MEUCIQCJgvOonI4i0Meq1jzhr4ZmNV+LJpsGWOBCGD64bNYOCgIgS4OPA3TfyVEDYjB1Rr5dAXfcEF+F5zdn2Q1Alsc9XGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH+4CRA9TVsSAnZWagAAlJ8P/RGNOcjxA3Zu2qPmk6PK\npBJqCb8LP21MhNlmekMjodl6HJu1NkNsmiPToD8N0o/ECsR802hwjji9BxtZ\nbXOZyttTMe083PwzDqdJhor9gYtBuGTXhZop0iixRl9OymdDfdNFVT4CYNjt\nOFKndH8QVr4o4Kwv/OouuV5a7d+5yJDApVo1vlhfIGUejvjNjkNW9B1ksIx2\nQo+vjDWQO43IP23FFc2l2BaikuOme1YCoKvbWN+no1l+URyeGZbVRebSftSZ\ngN9uu/vLeiaP10BFEE3K5BMU3G07m8TCNdEfA+M3V4gQggE78SgNS9nrJqCF\nXQvXKZLYsGxSCANCP2iN7eSlYM+5oSY5B+yyc5IPcpFe4LkflDpktVBidRzg\ngJwx2XqYptfofC3Yy0mS7m489iwiHI63udb7LEQQq256tg6Ry+Nnt6AXOM3g\nBagbLK9jma9hnCQzly3iNYLX743k3dC+ru9jX3/Pq7QpCjbzDzj3ZEbFhpdm\nK9HGLk33sOwce3rsMHP248RQ5PYPIwXFlKiT37kpa3rhUxfZA0zp4zZo/UZ5\naXC2Wi8Kp67psrqMS89+ywu8kv3xSNWod/u+D+UQz7lYO9j+N4AtKXrCxxQR\ndcPFHPd54Eof9sGrWB3cNdRCQVZ2TPX9fQtm3KFPULTNlpB1CQpdMbsfQP2Y\nIPYz\r\n=lKBw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.a1c65593d.0","@material/animation":"8.0.0-canary.a1c65593d.0","@material/elevation":"8.0.0-canary.a1c65593d.0","@material/typography":"8.0.0-canary.a1c65593d.0","@material/touch-target":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.a1c65593d.0_1598324664348_0.5931623238685615","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/fab","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a31950b61fbeaca84472a588f13c5b6e7b8c7fca","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.708cc09c4.0.tgz","fileCount":18,"integrity":"sha512-htBC6AEVXPP9+lwzNevThU4V4yeKbvXlyRjmuZKWTBMiIFDa6sLGSajU71C+DRXYwvvJ/l1h+mwWraP9gmOISQ==","signatures":[{"sig":"MEUCIQD75rT4CwEAfoyeWkCNCydIZ4MSBmx9WU4Ef3aHOsXkJQIgMixpL9pCV5cMFqzmHQc7BokLFRfwcqE4DHYVgRJn45g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTTJCRA9TVsSAnZWagAAjHYQAJ8y0VIk+/RWB/rfex7f\n01BXhLUZK7XGjdj8u8Ot4X32FTUuc6/X2oKnQyytJUhQHf7U7yGHOPsRAVy4\nGcrt+2ghPnXoYZkhFAJFqfHP30xSt+gi4WUFA1a55xEaZyX1PEGqRAQsze9M\nDTMWtIaxh1oxjlvurghWY2ArI61l7QITqBoiZP/4DRI1VEvIxYytSgn5H1iI\n9XyjWWhgGYHmLfacAKhR0BO9KlS8Tnamg04MDWVTtWuhqhB8c4AxNjULCc6S\nacxu9X2Oke2Drl/jQp9zw7NMFeaNsbb7YQfrDSqy5hZzqj+vsHZ7eIHNFmY/\nY7gp7qdKWtXkQTHrLhAYsA7Zb6zakQPLBPwH6yfxZUobJm72ONyOsOLwUe8i\n7TG2QWCROC4R7BTaKQ3QmHAhxh5PADXAgN8sacPhzPqFFSl1A9I4gTgHDFUE\n5nfszgYb2xsQG7/R7x2iJro2jmLpiiEmX+qHDbJNgFA5FTxlgPiGHk41eNUQ\niHPByzA7PnXawPg2IdBk0NRxf7+xCqEJE1Snv/UUKU6YNE9fbsS+u/euMAcl\nhiRuQbilStqKfRqw3QUh4fX21/1qgTJiTCHCwEjiMVo2C6mt0CufvBSqVX4F\n6XQtYoTmSn+UUUprIu63hUfnAM1MlFCCqA9kyttCL63+U4/QKOCwumdAWtUp\n05ox\r\n=8Zia\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.708cc09c4.0","@material/rtl":"8.0.0-canary.708cc09c4.0","@material/shape":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/ripple":"8.0.0-canary.708cc09c4.0","@material/animation":"8.0.0-canary.708cc09c4.0","@material/elevation":"8.0.0-canary.708cc09c4.0","@material/typography":"8.0.0-canary.708cc09c4.0","@material/touch-target":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.708cc09c4.0_1598371017222_0.34225809212963076","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/fab","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e3d9ced47f7bf982d0c5f05b6ad4d2c28a8da57","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.19bea2ad3.0.tgz","fileCount":18,"integrity":"sha512-uhABDNnD3r9J2ZA56zsubysD2CArVgA32u+zunyxgbhSKGvPmhuaV5W1j7tw6sjcYxZ2jVqHXu3m7ZdHytYd6A==","signatures":[{"sig":"MEYCIQDYLyyr5bRiRknHoecv8qWMcnXkl/C+ltw2kWDr8Cq+pgIhANyurMVzNkuxdHIvgkkmSnKLGdW1q0rvhEzk6MZJgBLt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq7VCRA9TVsSAnZWagAAhbkP/0ZDcaAqHq2BSiKeXoCX\nJoCXGlWPVvtrQ8eQQED73wmD/M+cEJdp6/tXQzA1Zt3RPmMjG6MwqO5xToa1\nWJwi5OatVCygaOmdXqtu6/G6Z5YiTasMJ3zq3PG6daYg/o8nd0/dCCNU56U4\ncUERVMiR05/1MXLjpdrl5OIyeXHyDyYvw7n82Fd/BHgkkrZNX6gWqrzkzrmK\nQVc2qZs5nxYUSbg2aW6ItnRGSSjSwvOsAWYmG534fgyKB4VJY581uNjW8Vn2\nMVyRDFLxpk1hiRUBKPUcviRlQFQ4cUkkRufytTlw8GSJnoOSelZzjedaaQne\n4Me5EDAJrg3OCROpbIy1QgvBdUbQfcv6Yuaz2TSZOK7bo2M7GpS5O7FSP/Jg\n6V4PQ5LGAIHmrLrsLL3nvm/RrzhS1PSa4TuqbXPN29+iTXUGsQjcKB+q/w3f\nsSY8RxkK6o2MBmrI8w1mG/N7ppsLs2Q2itfqbYfn2KFDgtkWqws7cWeAK+45\nRiQ1fNT2usjadU5G+6WNaqek98yNVaq9fgTWpi3DVJ4/6lSvPhddEnwNTdWI\ntBu5e8hCsjYbXx4DZthLOwnNeeqdTaHsUmhasH27zRH4PyowqtRNuhdR9j11\nvZ+f7jBAgs/xIdEyHhehKTUPiFETJXP++9rTBr7im500voR6OYqwJXImJKb0\nKAAA\r\n=NNnP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.19bea2ad3.0","@material/rtl":"8.0.0-canary.19bea2ad3.0","@material/shape":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/ripple":"8.0.0-canary.19bea2ad3.0","@material/animation":"8.0.0-canary.19bea2ad3.0","@material/elevation":"8.0.0-canary.19bea2ad3.0","@material/typography":"8.0.0-canary.19bea2ad3.0","@material/touch-target":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.19bea2ad3.0_1598467797469_0.9159843913894645","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/fab","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.911014711.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecf28a09f9ba0caf0c21c07d71d777ccc86affc4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.911014711.0.tgz","fileCount":18,"integrity":"sha512-mMYt9PFl6gdIDzgRtsj0F9QAPK2H52rK4unYfyyIY2bAH50cm4JV/x3zN4JDKtUf5NngRoLpMSz3eYgP6aKBcA==","signatures":[{"sig":"MEQCIF4lNDOwdbDT0UK4vsR9zm07lsH+a65O/VWsmHz8unN6AiA2iOyHKrgzgY598g7s5k6Zv4MZb7bya2OzQ299N23Pqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9qHCRA9TVsSAnZWagAAKsIP+we2aCAcIx4XU0c5Qytq\nirTzc2/hk/xKgZP3t6szumOEDVuTmBB837lB8ebQv2ngOlAZouj1OjWEv3Hz\nDcn4A7IhsMJ8SI5AVgCByRRIYGSczqsTGIhwysiPIs+O0LFyrsVCo/sJVZs3\nj9GOeN10oVqEc/+vO+3fbLbW+4Myq5x0a78MTc2Cnu+ERn0fWfkW6gI0VifQ\n1sjgiJCoT4ncIXghhaUid9f6KOvzktXUP+HFPPXI21bVvcegXWl5xPEczff2\nc8DtiEX1PZlLuqOZqilw1cbpIamBGdfom06fGqQx5IHb5m888BXX473yDpd/\nfluCL2nLjEGGPKjgyr1LeHWJLwhxpwi/nppzfsxIld79SgxAh7WtChH7EsJ2\n6vbiWsnhT03dVVysXheFlttr0NN87/OKp7s5HQIvs+7aKGj+O2rXgA37/NMK\n6qToZaQug5FgVo/NIy8fRRESvAGDM96jA0BwZZMPYTTlgOTHFZWuXbQ39yM1\n9UrCum99FhqBT8WEhjjMhiWKvM0Wu52VLNcuZPfCh7kDI6TRE4+DxCy7AyPs\nV/Ih5y/zIk+ATg9xjHNkhY0FMY1ekt/ZMk6Qi+u9reHRiaiH4QynPZky7OHD\ns4lHvGuhX0/ts/fLOgRE5hhY40RrzDCO/hsQfTzARsubojMexRx5uKdrpFEK\nYIor\r\n=7WVi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.911014711.0","@material/animation":"8.0.0-canary.911014711.0","@material/elevation":"8.0.0-canary.911014711.0","@material/typography":"8.0.0-canary.911014711.0","@material/touch-target":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.911014711.0_1598544518551_0.7308877562501535","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/fab","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f25ae26b61e68f2ff22a6d8261179bf83777d7f2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.d3387f54c.0.tgz","fileCount":18,"integrity":"sha512-0xerrowVe/uXsQgRxyYQJ66z9/AeTS3zhKewIpxmstybHWUtT3S4+XkayTvoBBaUVg06Dh7VazKCgcPvchxHXA==","signatures":[{"sig":"MEUCIQC0hHeA30x7vMVfsEMwaNm8Nzh3lY7OdeTL16cOCUpXIgIgYVvbEWDLAtj54WHBBUxzqjawtcnYDIN0Vl2AJEfUcVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhzCRA9TVsSAnZWagAAnhIP/1xfF268rsDnz0MRUI0C\nJ3GvzDp426uknQDxN76gZLjNme/uUaeEPsG6PPy3RHB88xR54Vh+9XBJQcst\n9I4eXIwtzLjPviOyK4HbqY3KVHcTBQeWKEDq9gTDMJR7XCDMjIQT8ZAobmZ/\nbjaiv2eoEIZZFuLQFiHJTFu9OPmfqP7IL0LrI8XAT98l1F8l3X6iw0/K1Q45\nIEy5aAoATgas9ZtRUbJC6tinWBL+RpAWkQ9zLuMjqpW2uhthxEDQ6UcqRM84\n9KtoqHPmYRqFkZ/E4/G+u8cbU02PKZuOYZIzihMrn5xDa14yjHf6wpc77Ob0\nl3aDC0M3Ql+WCUXEcJMGqm6aQ7X+LE3crg7CtVggmIwUp7xiFmFjqpdz9Eq7\nhlGb2TFq6O6f7QpFW8Tgw0ExJDrVVcfVVvJFLIeJl1N8IXglG7edF0tH2q5v\nB90BlOKyx7/zAal97VciC9zK6SqHTi5n9zljdmH8+P3AkIoPc3CGgqUouuuE\n+6+LIdsAruTp858jqaq4/9bsG9pbqHsWT3SBItkcSAACcGNUi6gQXvfc7PpX\nLwmtgLIl6OPKYy5bJIEcEld2merxUjPOwnlUrtR/WfL+VO2CLKXleHJhHDdR\n73x7TKC9LC0/HYsUi5vSgHjS2FAlJfUhoQdqudPzS0cYwg0kyGtxYJEq/o6v\nyxz1\r\n=F+nV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.d3387f54c.0","@material/rtl":"8.0.0-canary.d3387f54c.0","@material/shape":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/ripple":"8.0.0-canary.d3387f54c.0","@material/animation":"8.0.0-canary.d3387f54c.0","@material/elevation":"8.0.0-canary.d3387f54c.0","@material/typography":"8.0.0-canary.d3387f54c.0","@material/touch-target":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.d3387f54c.0_1599166579297_0.004322789131630422","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/fab","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99259f9ab9c5012d73aef8b07b47dc759ad15df2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.2ccf996cc.0.tgz","fileCount":18,"integrity":"sha512-wMRL7o7IrbSBA0jmAx8kiFolAUwQXAy4Q9y3wNodyrTkYuewnNndc0rAvogE/KEdd0QV9SVGCQcE/sM0nylymw==","signatures":[{"sig":"MEUCIFvh+56Gk1FpxObF8JB5xvsxldbGRYvhI0SCxY9U2znhAiEA2Z5gmkxCaj9eaqy7BbduJZ41qTGOo5djdi92R1mc+Yg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUViLCRA9TVsSAnZWagAA+ycQAIpnNYeRQjUpRD+FxBpi\nOnw/HNwHmOglePc498qRAHdVQt67WqvtFgVv7SfV3lnO3z6Du2732OcBIdZj\n2sQ7eVWjAzRIyxqBthadpIM3AoSZP3yV3GUp+e1WNA3e4tdkDHgVUvf8GHIA\nsHcddu0x/DepfKnhpMhlHOk0aWLsVLiHBB5B7Jh2zT09TRP8d3a4Vt3uUDzB\n4XOsSNkQD2ZEDmXSEzR3pWQHyPNW5UHcy1Rnw9ALdI2/nyB183qXrK7Hkjsl\ncxaJFBo+hwCbCFrSw1tdqS+uHqtPt+f55sevSbgbz5ayU9Zkjrt1ksESPWAp\n/WOgHuLuusq0kn30NeHGb9n/qCV+9b8JKiIH8f9/6AXp/fvaO1HtYZ8s1QJ2\nTNT7AyXrahvkYW1+KsEywAdvtRRA6AuSJMDVMleyi1qrSzlXS8yBg4sGT7av\nGWk7R88n8gl5XnZATYip3FJ3NZ5oq1sZrVTKjNMlsk7GuyD2Qur0cnZVzxGE\njPCBUiMFgACC8lbDZfPABuaSCWf7u/vwtjwGYrcQYNks4CZcBk/9G1ielM2j\nbFBMIqbr09EkA2/Mwuj9beqL6I/3rbDJuRvI/8OTSD5oo3SgCmcxunIo3Jgd\nYzXQDKQZI5UXtD+gXzfEmxa6+SOocoe2GI+7o9sMGWFwSKrgfwzcRaM8ZtpJ\n67OH\r\n=wKxb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.2ccf996cc.0","@material/rtl":"8.0.0-canary.2ccf996cc.0","@material/shape":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/ripple":"8.0.0-canary.2ccf996cc.0","@material/animation":"8.0.0-canary.2ccf996cc.0","@material/elevation":"8.0.0-canary.2ccf996cc.0","@material/typography":"8.0.0-canary.2ccf996cc.0","@material/touch-target":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.2ccf996cc.0_1599166602704_0.645153623662297","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/fab","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"776eb2ac9fbf28fedc6d8d1ba9c65cf4cdb63473","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.744bfe5d8.0.tgz","fileCount":18,"integrity":"sha512-vAeAmFVW/zCWOLL3pptY07o4NI4yNFWe/2IkxbtTU6Oe20x2eGx3MzjSOQ1d21FDJKkK9uEiaPvqC28A8cf1EQ==","signatures":[{"sig":"MEUCIHODOK7Q349pNKnbxRkk64X1/LWw0XGzfxZp+c0MnL0XAiEA/FmTqTQfw/8xc427ShWGXUXokG5hsk/Z3zzMLyR47hU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVi2CRA9TVsSAnZWagAAqv0QAJ+Fq3F5+2C8+RH91l7b\nmyjLbPoFpil0dKn03xgQJrCRrYyvjfceP8JooqvSEKKI+Vtny3tO1i+9Dlon\n8nfDghQs+BgApkvz3uhWf6zsg/XmxCfq/3/0I41HkX6Y3ODyYjAG6BrcWgGV\neKHItNVvy8BjB1SeHsLc0sTIToSazLtakiW1ong8ba9s9hlMf1aT9Ha7qFu8\nn0kuU3a4j+5QdyxRiAdNeAl2GPe/RjoKI+EFaEFoEJXwFSYNs+xc5rr5LF0A\n9ajS2f+w7BMEbh9JLnmXlg6AaM1twmtqqUvqyMUiySMOJpkIoUE70SZryh/S\n3wteBfaps25uIQQQAWGB0smPigusR8EFobKR9MBop4jG3Mgd7EjUrSFx56Qe\nkoH0XkSiX/HIB4MGIRxxrNHcJCh9y3f5efkY88ezvNq/OTLHJjkSObTnqVh8\nukeotEiXEsSBbmLqFdEpPz2V+whsck6K0gqigtX4AkxtMAxx4HkbIW1bj0sH\nJ8KloZYKC084oqKmWU1jU/QZUGuHRC/FrOuV/ixYYXA/4qcqgcfXhItl23gy\n1QH4pA2zh9EwUs/wTI75wXtbl33EysFpjktFvrY/QfkxYIfUWu/sufNYSpM1\n7xLLLtBFDsXWxrkC+7rudm9wE0tm1/V835G0DiwnidCM04V8P1qlhJQcmZ33\n7l6L\r\n=0+pq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.744bfe5d8.0","@material/animation":"8.0.0-canary.744bfe5d8.0","@material/elevation":"8.0.0-canary.744bfe5d8.0","@material/typography":"8.0.0-canary.744bfe5d8.0","@material/touch-target":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.744bfe5d8.0_1599166645415_0.9122172932920436","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/fab","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0146f3db846d19d002d5aeb481ac407cea71ca41","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.78da96eaf.0.tgz","fileCount":18,"integrity":"sha512-KxQuyNYlA89cb0oWSd/3ioSi+i3hGrXO68vXP0jKDWB7pUd/45bxoLE3+0U7eG7Ap2oG4f8bnAxGdC40Z2DGbw==","signatures":[{"sig":"MEUCIQDEMcZ3fAFTbFbHktDgR39/h8Kx72xl3ToHsWCSE/mVcwIgD1Mm6+vUrOxZ87noq8tKxTT/jHDLy94SWjLQasuBiuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9fUCRA9TVsSAnZWagAA4d4P/3HAAe+xqoZ4e1AFcp/g\nXVraOq1Yt9islFEz32HNLvqQqqcf5XOV27wk9uxJp1bdcnDMZlN57MlMKhnZ\n0+qZF7WpMXJ283+et2sFbg7+KQFFQEXwwPgxY01YrxbYVyC5qTyWJjI++J0N\nq4dFt5XDrS7rS+r9uFY+8pE+l+AZ4euWW+skDEO8yS/+W8D8bCTNf1T7O+fv\nZQ9xP5eDdCKnWuBOSVMlOWWDBf5A+IGRn2jgUaSzokEXqJty22AQEHkAL3ba\nekolSQBqR+Bn1zIsSvFYmUM/84mzX+QODBQxArtVBHem+k9ZnwlDnOxCHsIp\n6I9h19oBHembex1EPbNfRRxxUPn4fHIYr47ubOPB5VWbfPr8QdGXNmamVaoJ\ng3nad3RbXXuCpmDyuohJs5NIQaiFvd1UyMBOKn72lqcQakUt+tED9YTXa/8m\nf4/klgsXow9wUPBFNLkXu/8USuV3afnMjr6iWHw9mlMo0XEsDqNIrdc0CbDc\nHz2M3wSgJlX0kRqVKFrBYC2K2SthGwL57SYEJb8prJKkHyEET1e+RrHkQwd5\n4QGWw6PHwowP64wWiNgopKnSQ6SnxwFBVWmcqURsTD/0aFKlYGMFqc9sWxI1\nIXLyDb+TPOs8XMT+NXNamf9pAT/wDQWDRSVAN0RkM0medfDow/xG3pMnkBit\n4SRJ\r\n=lH0i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.78da96eaf.0","@material/rtl":"8.0.0-canary.78da96eaf.0","@material/shape":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/ripple":"8.0.0-canary.78da96eaf.0","@material/animation":"8.0.0-canary.78da96eaf.0","@material/elevation":"8.0.0-canary.78da96eaf.0","@material/typography":"8.0.0-canary.78da96eaf.0","@material/touch-target":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.78da96eaf.0_1599592404329_0.2768597670011872","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/fab","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"536adf71926b9166bd995ef483665d7e66a4bee5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.b0ed593cc.0.tgz","fileCount":18,"integrity":"sha512-oiaNRfv3VB7Nm2o/4boocrB0CuuoHzjzsZzblzULzESF4QKzuYlKv72f7HwwEczdt6i01iZ/bhZCnUTP1O0Qpg==","signatures":[{"sig":"MEQCIDQcvaCIskGyvBQq34OA7aOIgMpmDr8rqF0y5Wcoo4qVAiA4eukAPasVAvU5byN93dlVysJ1SfLDidWErPLuqIP8Og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHNDCRA9TVsSAnZWagAAEmcP/jEow4JMc2z0IwClMvFQ\nCzdowu3Hzl8StI0QmjcKT2kcCg6Lvwg+R/6m/REJjRTJT/w8rapHHdDxJZNF\n0gpN5vlb9ZgkpHqR+BEnsDO4wSB7l6PDAgaixxi3iiErgZZgTyB681ZfZu5k\nf3pCp1htEALeHwViTnK4st141glCMbULz6jwVCdxU2bFI95SeATcpb/FR5tb\nkZleJ2jhB1U49Ms23j8Nw1OYHuEawI/tkGZfqEjGnX7DAz5Mgas8ox/KokHN\nwv04sMzSIFhkeEA1Q/jAfKTIbcJod0xw7P01KBo5iLdhgIWc7CEdEyHMvPW4\nzRZ72MV6VEM1iO7+72uMYBr5DGr65fK5rs9F9pB9qLddsybXERerNrDFwIwu\nr/Z26Yyyz0dvwRdQvSq23xIrui9VcKDgUd53x2KR6G9ROx3k1LV4PyGh9P61\nZtd4RBuOQijV2mbYtV+uL1RzdRF140XgOy+l+LgTmJYNet01ib8vzsd8VxEd\nOqo6aSeUiUqQyLvkIDyJLm9OpDt9J4pc576ZGDSCL57x0959gcdPXvJ8HtWC\nTYrAiO+uA5cH8PfoYR9LU4HnU0yU0iCW1w40Ns/49F4XyFgguuFPOFyiqpWy\n8pvedyXPtBTR4Tid0ACJpgEQX0IR69LXQr9XUAeI2+bZ8Dgzx9Oos2nEF6ZE\nBk5A\r\n=IwEe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.b0ed593cc.0","@material/rtl":"8.0.0-canary.b0ed593cc.0","@material/shape":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/ripple":"8.0.0-canary.b0ed593cc.0","@material/animation":"8.0.0-canary.b0ed593cc.0","@material/elevation":"8.0.0-canary.b0ed593cc.0","@material/typography":"8.0.0-canary.b0ed593cc.0","@material/touch-target":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.b0ed593cc.0_1599632194473_0.6831064856328657","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/fab","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a7fece8a58e963ab912025ef5321aca6775f559","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":18,"integrity":"sha512-9scZrLP00zK5od6yU7ySCAukf6sxfsemkB5AO5pGzOaP7XuxxZFMiHhFnCRmdntqwCTtIkI9H9cqZPS2MEwJwg==","signatures":[{"sig":"MEUCIA3IvRrvC794+D4ecLvi9wRxIt5dj+8963P0C8GY+VYjAiEAmFYgjCoHC5r8nkh7mh6JCDsAjluFmXV4B/zGERhJDpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpZsCRA9TVsSAnZWagAA30gQAJ8FqIm9feINBUYG7Oit\npRzrOFkCxRdOwKrOTVF8eSCL1NtcyKmpaHUL3QMzDkmGTl52J3bwP/T9cViy\nGDi7UFJLRPxOV5jBGN/DgZf+TsgXSEgIL2GvindGTVnmh8Q9WC405DCISCug\nD4TqB4r3OV/9ohGHoz9oU4182psZnxnCYP27UUlb3Dc0Y/NExYwbiXFBTVLQ\nUDYTPf6gkm3OqV1e4TJfb1cEj4eSsjHg4DXysyLjiM7poO3L8CR87IP+tYGK\nKZaEc5mwp1TzNswvVOgQ8aFE20+vJ7sGUNzD3JoQ9et0cJU3ijaA0xjYYh+4\n82kdWOWUk06EMHHYfoRZhaNEiTjF0QBilrablk2kNEKiLHBzDlOeolO34Iin\nKB5vQHD7puPgcEbnGEUVOsa5axV/4ZKrH8Sme0M+1PvHhj8fodTiwKvcZJZy\nPtOZkKW+u6rqCVNdUkFGtwSDsPpsXrYiCxuQCsoGDkEIaV4ocM863/d/mQDl\nwtm8nKzHmqiE5amKcjsNqyj6d/Hxv0Jkw344+mcjNkkmCDvq4fuT5rpOCY0w\nOFGQZYip56kGOMkcNBf+ooamEPMsu2qh7qmG/lih7hpIgYwAdIzhoTuyAqFy\ntvLooZNIl/j5XyrD4BTTB5zghzmQWJzg14kzv/r+lClVxotavGQbX5iUOf7d\nsW1F\r\n=YtaI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.85a1fa9ea.0","@material/rtl":"8.0.0-canary.85a1fa9ea.0","@material/shape":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/ripple":"8.0.0-canary.85a1fa9ea.0","@material/animation":"8.0.0-canary.85a1fa9ea.0","@material/elevation":"8.0.0-canary.85a1fa9ea.0","@material/typography":"8.0.0-canary.85a1fa9ea.0","@material/touch-target":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.85a1fa9ea.0_1599772268422_0.1065248980679867","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/fab","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bda126e882e9db7bae8108b0157d04f2af6734a1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":18,"integrity":"sha512-rzX/5ob7g/XvDhcWTxasghCiwrgpu4KhjsEWxvy02LldMtldJYDhUyT2fawzhoc5YxSbktbfhuMar0i9JIzCZA==","signatures":[{"sig":"MEUCIHhYgyV0t2Xqn+4vZIUcd+mYXas5NFMGSCkLIdW9jaGWAiEAtwxg99CEVrzRXhRXEDSdg80qWrHv6myaEaT5Tn5p5eo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7jjCRA9TVsSAnZWagAAULIP/RltftiACsw7wXh73KsX\nuf9Waz/e5dHUng7ACuM2ClMMkp5EaReKcZwFXpq39qvXNYcDF+ubbOwQDT2x\n5ggAzb5zch32fQOJ5GVqhbu33HQBqoSYZXbpRNseDn51Qk51Pq6KxK51KBQT\nq63a9AhH14Y+m4DuDOcf+F5aQUQXB5lM30gNsuzXNqi0Il/igrFHIpwQqJyB\n8lBwxc2aSD5Sb/tkoLK8v7N0A5VLYPPXejW2QPwn2A1BqcSFDq8kkD27gEzj\npO9bVeNCtNdAl69raXicNpjn/HK4FRB0bxz0xkBqompvuaxfMSZOWfyBr6X/\nmNILuN04JfRuNPX8HT2GoRYSyf+SKNUXecfBFmGVQuflDaTURsPP1M9+4iiu\nUMQdtjSsNYJIXtyvzXMHSx5nTcVEJLjWmOVjixvS3xvI+sogGXvQ4Lwg1u+e\nm9/U1vC69BfERsq2gYV1ZVHCxYN0npFcJwqrOr6m+vBGxXP9gTqR3KSNXgUb\nIaiPd0Jv0jR1cBDCpslbe14XjFnPozjjMZqiN543myDa2EWe06zxQqhRcEc4\nrmmJp5TH1W/BujqZRkF2v0cpk8i5oMeIYRZLKI0PaMv+e7DOhsNr9EcoHwbm\n047loA8FdBxlLs++87PgcwMCDVhI89w8yCFEv0bg7gOIVuNth0x+v77RGq1q\nHRzF\r\n=mNUZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.0bc41a9c7.0","@material/rtl":"8.0.0-canary.0bc41a9c7.0","@material/shape":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/ripple":"8.0.0-canary.0bc41a9c7.0","@material/animation":"8.0.0-canary.0bc41a9c7.0","@material/elevation":"8.0.0-canary.0bc41a9c7.0","@material/typography":"8.0.0-canary.0bc41a9c7.0","@material/touch-target":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.0bc41a9c7.0_1599846627189_0.16844257561422493","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/fab","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecf5f327c761ccea08efbfb45cda34f06e3de96c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.fc0eb5013.0.tgz","fileCount":18,"integrity":"sha512-veBJAtspWo5cPtaZ8Omcl2/hGUnUuPlkc/300fWGSp4HF3RxgHk9v/CAzJGbRLgaeGK+20Re5doULbqe8N8rCw==","signatures":[{"sig":"MEYCIQDau+Yt6yX4F//OW5TgUmDHKWhyvFw3EY4ESU8A6zQQmAIhAOX1O8HR9i+cRO23eK4r+8PQQY0Ao6sxYTU7sNAQ+mg+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9ZcCRA9TVsSAnZWagAAHkAP/2vgQekKFA++UFVG9rmi\nifiRje0DxGlCa25w22UPIDUCGHg7u6NMmUNDgAjc92pqyOHkiGE5f1abOniJ\nU7sWrKtzxtRwqa5C/O9R7PeJwWIzaCbqLhFyjDHTDODEtJRotmkbozEtqP6E\ndve2xN5V3+ckKaqrpnYKbAqcYSEVPcxFCjR4GdZQlBUuowte6BGw8vFCZFEL\nDnsKRdBk3bkSqdC4j4igk4MUUXA5zvSsibMQPA+n596IzuTRIgkyYsunbNPk\n/OKs+1TSyeJn/l6EnLCKRWpLpvf8+xxvSUyWSg1h5iAjn8xFB/OzSbt7BFPw\ngVJtKaaVfyNxfagGcwCT+Jbm3YaAmKKgon3LbZX3Vff4bi68x9J4IdAHh178\n037O7qJUpK2VLzM5FxvFiWWNYYb0i0j+6Ad535lIVl+fzGeL9gvZoB8gG35c\nbZi+1+W0LUXQ9mn3T4lfmDGxmqIrUZA1CsmV+/7tsOfto7k8Y7K26/LX49jV\neyTt+7fdUcQVFANDP8YU55z79tnPdzJq3dGj6cBvmZM9Y1G97+CxDpIGgTr3\noEqMMszskWklGwEDtUwKIIn/9zrQHbH0FC+8/NubSmeAlnDF/3V53mmgFBN6\nvZgOb8/BmiI6suxRYUvzUq0b1XcoQq4wN144NNALdaRdsuqKsGa9g0IdKgj6\nesd5\r\n=rqlg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.fc0eb5013.0","@material/rtl":"8.0.0-canary.fc0eb5013.0","@material/shape":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/ripple":"8.0.0-canary.fc0eb5013.0","@material/animation":"8.0.0-canary.fc0eb5013.0","@material/elevation":"8.0.0-canary.fc0eb5013.0","@material/typography":"8.0.0-canary.fc0eb5013.0","@material/touch-target":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.fc0eb5013.0_1599854172372_0.47068532666525953","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/fab","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.319bf66de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91563eabbdd3e360e24074978413cc0a56b11554","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.319bf66de.0.tgz","fileCount":18,"integrity":"sha512-ZbrSyIYna06CpHzWPk6nuAV2LzsLjwVFt5+xSM30+XyUFsCjGxkZNEjZUIdN9WjVUSi6eyZZ88F5m3ZX7+Nv0A==","signatures":[{"sig":"MEQCIBinftsoVO+UbpXOoUXe/hSfgByofTh8m9pidj48TTb4AiBdo20/PpLwbSG711x2F+OLaM6KyeKE2aaMj8NdfzJVwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAP5CRA9TVsSAnZWagAARvwP/1axi4PY+dfj7SKNfWyb\n4adVE4QyKh4lPvop62w+/2wIGxJabfiOSyBdUkPMU7RaDOFE3Gy//cQzIC5B\ntf2pRc8Gar2E7c83oIVa98CtK2nL0b5tMpev6Rv3DEQ7XsC/S1CWAtzU7Ltu\nIjyYAuS51mmcdb1LdZffUF/XtGGtoHBciqE18/9Uvq8kK2aGXTafw58fdyKU\nro0NRWlyPNiTz8QDZF93NEUcHPVnDkDvQwOqfSGYGxSfy6rNTT/972mh4+Il\noLIxwLBvNDH4WDal//sg/hyq6RTWeeoQ0PA+Hy9Cys+0nAzDFcvrE5n+l0aQ\n/yHBHGxjl7umHUqnTLK1KB0Vwo0sOqYAD3Y0/oTqnrO1cwGSXl2KwismKm+i\nH3lvZQo6tm/utVmFSZT+0qCnGIMC0ML0s29ogSgqJW2qK0q2urdiROZGHNyv\nCIFzYNmHveCKsDPA5R/IitWs+lS/yHxjOD/riW+4b+F/VFoOuzdvwrNU4Y+i\nkxFHCLHfQKEqXsXylE/FQqATLvDn4LlKqZYVJ0ACiDrydUahRrPhZF8CzeBO\ni9J+Vaf6uVRaumaEpWdJpJDuHnRWM5CSucnyymaquD0TPEx1kGw4Yhcd6FTi\naduazAJWnCVfZd3wX09mh60sNrIhT9dVK8RHGhv4SY/ReIcb1vP4QrUtD9Hr\npfg7\r\n=QfOw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.319bf66de.0","@material/animation":"8.0.0-canary.319bf66de.0","@material/elevation":"8.0.0-canary.319bf66de.0","@material/typography":"8.0.0-canary.319bf66de.0","@material/touch-target":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.319bf66de.0_1599865848536_0.022823026353376408","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/fab","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d472d97d98da14fc9aea7752a5d88470cb28372","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.5bfc305ec.0.tgz","fileCount":18,"integrity":"sha512-3oQPGl5yveDuLVDBr0K+NQauH0BbzvrTo7O3/b1gYS65QEuypEP5nFuk9ITsIplrOc8ZTx1BvRIByxRCz3eiuA==","signatures":[{"sig":"MEQCICM0pkaXjzx619X4+qv9nSD69GUjT7uX/br1LfpcAKWwAiAqXKRLb1JJJfVm3H3HBoviRxqk4RrwkRI/k2Pnuu+eMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqSfCRA9TVsSAnZWagAAxPwP+QFXTPruOmZvF6uuiYJ0\nDMgnXRMOFTbvCs09lnRO6iSwN+9tqgHGLSoH76snXX9zDIoRek6GoyUr66Ar\nt6nItWRq22yhLpmRqgaGvflelkU83asq+QCnYbMu1OMn0zLqFUJgtmvsul4i\nslS1TTqXCnudjIFyhiBjvsQS3hsJvN5IU1MOXEDPwSxY9o9OsJvagKaTiNmb\nE4Bh55lKawjgivYIecp08j1uLu3Nw2z8s17GeQakEVWkEvw3lIjLBSbdVgJh\n5wmYDHaS9SYDIRtJEpGvgG175L8KN19mwOt7jMClqtMxOYfSQ6JR0RBOXyt+\nqmRv7RFEEUiwxips7QAuhwuXypTTntH+GsFEFQMgNoFz2IBw6o1LOD+UmQep\nOCe4nw14qQIPjDD2vlo4RajQA3W3+nKpeaYucloC6YqTOvDH7xYCjouiOsgT\nggYqLU50YKEEMMNC9G9ejtM2G7sJgYRnWZFpP/RuzVk6rurtvoYYUUEsI4vr\ns3DykYrJUYSuOqmtRIPDXQ4SoJK75OtnFW0v+Xy6572hP4AFdaOUxGffUaRq\nx9uyPHC3fJ2vAZu3YNuIiNspuZf4pxXJ1PLIt3vC6FL3coPn8XoXDSfQ6/VE\nTjespseJgej90GR+koCSJ6UgknRG207jXp4Hjg2xJs9/id2j9lGCpiffrqyU\naaEd\r\n=45qb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.5bfc305ec.0","@material/rtl":"8.0.0-canary.5bfc305ec.0","@material/shape":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/ripple":"8.0.0-canary.5bfc305ec.0","@material/animation":"8.0.0-canary.5bfc305ec.0","@material/elevation":"8.0.0-canary.5bfc305ec.0","@material/typography":"8.0.0-canary.5bfc305ec.0","@material/touch-target":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.5bfc305ec.0_1600038046732_0.4872150517217273","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/fab","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.83d83f131.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39d8fe95ca1ef21b148aea30aacf2d349cf0f9b8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.83d83f131.0.tgz","fileCount":18,"integrity":"sha512-1Yfz+ENyIr6fFWx17+1aqs+Q18DhEMlgcTBcFrjL+vakFGPkk6qpC1WsYx6ZWrS25B8EHac8cE3VTYJRuIcw/w==","signatures":[{"sig":"MEUCIQCnNpQ+/4AllFTYpiMn8Od6rSF8OHiQrTs2JBpK1z8qwQIgbf+6umJ222aNdrLDuT1DN0wQWOHJonfULCPRIo30Jrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrpPCRA9TVsSAnZWagAAOqsP+QBJ3x2KhfpgWX6V+q19\nDRNTuyF7p3yr9AyPtc87sve7dFiJ3jrFjJlm+2lnbKfXljoiJMfI2+Ntl53J\nhDBDoyrxyqBw9tgWcKb6mikOo4U/leQqaiv0ZsQN/cGB0udwQ1VVja69EF9c\niRtlIvgqyle0GGxkt1BZ9zQJ3wY63OWsc+ohm9AG0QTRcuN+Y07L1NMZY9+o\nlAaqayiDrmBotzSAqJnUrrXN6ivxwJ83CvWpDCn2kTMIaaXrvETsQwBgRofv\n46+pNDy7pjzlo1TciBrYevvUweqt3Kgudi7w1ePJBvarx2hh1wCCWdEax1Hr\nw4/M9/H/m1XlslhT9kGrdgp4fxEkly6l5+yfIBN7mWlqiAAkQgkMOhKbkSM7\n5TL8YolR/WffsmJlb3XOoBdWdg3E4jzeI8crhB+hAmqUY2l87mZsDNBuJvaV\n1gGx0Uy8l8a94u4glgcl29osGtAeFOfkpUxXwkUF2GeitPDM547NkaMP2aoZ\nU6Q/GhMquFlj7S3nbxqjHAjmbpZzZHCaU0GBQb1gC5nnqCwuVKRmT7WyRtdU\nPYdhT3E/Dhb6bnSzvTsdpo2US3hU5yWqU41x0BOnHnmn8X0YCB2POp3tVjT2\n935VR+5I2LvjRABqS8DJ1KELVnrQjybQQ7aZhindez376Nt2xgytWPt4+zV9\noLps\r\n=HRr1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.83d83f131.0","@material/rtl":"8.0.0-canary.83d83f131.0","@material/shape":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/ripple":"8.0.0-canary.83d83f131.0","@material/animation":"8.0.0-canary.83d83f131.0","@material/elevation":"8.0.0-canary.83d83f131.0","@material/typography":"8.0.0-canary.83d83f131.0","@material/touch-target":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.83d83f131.0_1600043598418_0.8559894482325006","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/fab","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0afd33a3197ced92190074f4a627063ed48c0ae8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.d52b165b5.0.tgz","fileCount":18,"integrity":"sha512-vYkg21O7j1+oHZkLpZVtsJ/eEy5AhCEsPjea4K/zJ4Yh6EJMxIJRQYaNEDlF6LuVmfUFPX88Fg9GL5UKy8kezw==","signatures":[{"sig":"MEUCIQDr88Wqtky9aDpuhSdl07VOtvtidxxyXgC/xIkVOilgMwIgP4fanFrWzL8qDLareBGM3ejeQUQkYg2Is1zG8wcuZ1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNXFCRA9TVsSAnZWagAA4p4P/1BpeepfnPU5drH+WRUE\nMtC2IRy+Imlx2X7pGt/lMJmNFN+NtnPwDk6YPs5j/5PgnkDJziw7EOWFcenl\nWCK4JZhOfW04GYY10g43SxOX4WlM7UAP8fS7vFxwlrafZBQtYwwkjrGWCRZ3\nHY0+v5t8l8/7btRM6lF5Np97QU8bkoRRQhwml1Oyq80EPPyo+hAk90ral+Xh\nZrmrdDOTvmZlaFRv5UsGewlF6SQY1AkPz+Q3Y4px28pNDjI+AdM1vEKbu7NP\nmAzkEADnGVsmHUKH4xDCzgWdb+Hml6bfQKY2JSXpiitwhqfrngtnbYNMNoxs\n0wq8q/elPSRqssaXOSWcJbE4GgukpzgIDmS7ybMUsyn53snxiHrJ0ByerFHd\n3NokBXRxZsPvbyaQKcBktCurYZsT1D8M+oQ+opT3KpyrCH8SSVgi7Khxyzh6\nWd26MPNmahLGd8T23ONtbihq8HaYBluX23ktrhVPCberhkOORSH6w27ZjqUq\nmJ9InkqfIUZW6x0ojePOxrDfBUiOd5WB4pMEVqN2v0G/j3/hucZ1F7b+7X7z\nywP6Up+T4hA06GiOB2hdreSvoYcNVonsmF8PL1YAu1XRiRXgMLXNORmidoeB\nAJVgKnB/ZVw9f1nZeJdfh44xKldrZUEggWfnvMGpVTMU8c7dM/crcy+12lHl\nFvs5\r\n=PbIa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.d52b165b5.0","@material/rtl":"8.0.0-canary.d52b165b5.0","@material/shape":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/ripple":"8.0.0-canary.d52b165b5.0","@material/animation":"8.0.0-canary.d52b165b5.0","@material/elevation":"8.0.0-canary.d52b165b5.0","@material/typography":"8.0.0-canary.d52b165b5.0","@material/touch-target":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.d52b165b5.0_1600181700682_0.659571053059457","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/fab","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.a831d4799.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3640f569996aa37b7d5bd09ef985e11126b327e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.a831d4799.0.tgz","fileCount":18,"integrity":"sha512-rVaDb7KALfl0qNZ4bgdi87E8Hj+0qP8FHB5FEcSBhRInrzyguop8XPU2lGnbbxPc7v67QgtqVUu0VyZc1N7JRw==","signatures":[{"sig":"MEUCIHqlVHUmiy3Dx1okQpyKa3tdKzSZngB4uL8a+9jTRasDAiEA3hnoDCSh3zs3bM8y1yJ/ItkkRwkB5JUIT9bFFdEsonQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP9eCRA9TVsSAnZWagAA/fQP/2Fh6nMSIUqx678sbyHb\nPR/UuGffghu+atfOufjbaAyyrhOYLck8pDBgrQa/gPnBnNQeAjy27/a+dYls\nIFfh+PcsvpUPdnJWZfktROAr9IrCaXkShgUDgbCemnzGpxmHMyDi9No6yR8A\ny2YRsDmPwBn58W0c0iUAV6T8AGYm6dPu6uqVvJ+vGSHatwpaNBQ1ugzMcB0Y\ntFVIwAgdbEWiXrhIYgkdB1RPmfHky61r8pYPazwYEFT0drzVrN5E2DVszQdl\nqo8/sfM+fLjOENRLLVnI+W+zMa9oC2QfUijL8H8WUsSM6PkpSoD4Q+LE/TE5\nKv2ImVwcwsF7i//UOVHdUIeR13z+IV1JPPbj4P7Iis1B5dmiV7h3tcNXglpK\n5jcRYAENN7Z9lJaCAHK2HeXNOOe4i6JIa74pYyQRgjikdt8zafPTkn9Nujcr\nDu29bMnPqOkpfjmf78B6zvlahfBDpOXtTAbgIhzbwtgk3iUJn8vQQ33O2QJU\n7h2iACbDUJEbZb2AFjwBtkPxMIu0DYBLcTLQy/nXsF58Q9XD2cgpYWozb3K4\nHjB4cli1VZVvlmO3hJUSQUsMmIsJ9U5Dye3P3r5Tuw31ey1QX2XWEBr6D00G\nQrRJOLD1LK0j0xKn22E6zuu7w5ahfxyjtKpTusJFYZKFPTARBicAgxLWehp4\nvyDy\r\n=0hKd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.a831d4799.0","@material/animation":"8.0.0-canary.a831d4799.0","@material/elevation":"8.0.0-canary.a831d4799.0","@material/typography":"8.0.0-canary.a831d4799.0","@material/touch-target":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.a831d4799.0_1600192349762_0.30935722600765136","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/fab","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.a306aa488.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1da9643d4673381925652293ae5f8e5b9745af06","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.a306aa488.0.tgz","fileCount":18,"integrity":"sha512-4067zP296BgeYsXX1YxRqaaaJRUrtfUEQaf0SH+dAa+CKj9u8arb0X5bBjv+acIwd2lq3CudvFKB9oLd8yzfYQ==","signatures":[{"sig":"MEUCIQC3ejjsXci9JicD2dAXAihUgr/2yWCIfH8TrkzhCobqdwIgWtdovfCGQ3qzIFxoRIuw+c7kwyvDF4kRAhdVLH7fAck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrTtCRA9TVsSAnZWagAAiB0P/3CsKL2tPFAgJgpxEkD4\n/NPiOVaaNpDKPqHUXwrBROQ1g4vTmhd4nN9gdY4LgZ+uS1PoOxITBwLJjJEU\nB6YhN3Fzx+VMqmcNkydALDLukc4nKuxwvk9iE4nl5kOPqmyl1a2uVPzij+Tl\nzypBc9dIjgLTlW9PRBLBk53a8Ooyikw7Xg4kDhHOtmQeYXN7Ri9P/YPXIkhC\nIuDPEPgSm8tJMq0nBcOnFJ803nBlTRqkSimV1MSeI9pPPftvgTbhHe88agc8\nfNyn9BMvpVzixGOR/s+oI3T985l8cGek6lttT2kEzjpaTBss6CWXwC5qWPmU\nJ8RhwijvQ/cq2GMDYRwqIfm75HcKv3EdsZAlzuE+Gf2BFJHTg5pRZ00fw4F/\nmrXC82cINr0NmaIUnv5dTot8i9wriAbNA94M1ZtdHz6YhZRQgC6F/4sG/Nxs\n3H9qoY6qlJUJp4ryzX/uDyNIVJEgZyp1JjC7r18OfUGlltaZQMwct9lySXz8\n85kFMwJRxxTA6Zl72EsC5i8dEOiId+nxS4DuVELk/jyNMRxtG5K/iAigJu7B\n/6g/yltB/oRJ/cAZRiH3Zh+RyvQDH/zYy8YKdRLZPbaEvpvxpkTdrcitndSS\nasuT6bZTsuN/M6eC+Pyv89i0FcJQNe8WtcGFo4m+MtjZcDwyae2NJtiMWq5p\nb9OW\r\n=QSrj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.a306aa488.0","@material/rtl":"8.0.0-canary.a306aa488.0","@material/shape":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/ripple":"8.0.0-canary.a306aa488.0","@material/animation":"8.0.0-canary.a306aa488.0","@material/elevation":"8.0.0-canary.a306aa488.0","@material/typography":"8.0.0-canary.a306aa488.0","@material/touch-target":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.a306aa488.0_1600304364942_0.10213277033347778","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/fab","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c79af01b2511a00bf01114495268a94395d02fdf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.fd608ff66.0.tgz","fileCount":18,"integrity":"sha512-emyraQ39pjKyU7769GwYUDE51fo9Lgi7Q9L7b1KhDtDrkLCg/MehlfxmUhb9hf3gyQy+dE1Rq+Eg9S2a2R2Bng==","signatures":[{"sig":"MEUCIENTgPx6mrEPbfPiCGHbMP70+GM0D/rau2Y0IhySwIn7AiEA9CdyQh0H1f6doK55WtlM6U9kL5iLbDZxNMpGebO+tZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3IVCRA9TVsSAnZWagAAPMkP/1xVCSublH9b9qh87xrl\nbMMaz0mXAjVIsMmZ/8V07kyzfpfjBsD4sjliFInyN/Jhhd+sJWbhDmjQjLuD\n8/IEq1zD21Lcz+zgxUAEmlKCMQjRuo7bARnCIezTG+FKS+SU/IWMDNmUqjwV\nytpXrKWilPvXRbh9eVylUr6rSkcm4PPtAxfauLvuSPh26yxT7vyWqpiQaJSf\nUhWYQ+eQNrR2R5YpMWFJJNJ0CSU9ER6hGqCOAYe6Ed+qb4e2Mq5soPEwVq56\nWU7sTPBDO/syxqL9KxqqU/B2UswZn037xQDoGdFMlDLwCGo6NN2PhhuyAWf+\n6JAjzDBOKp4870QAz/QheaQzhAIdv/OxBJ7/+nSd/umJZtdW9ChQGpt6zUTw\n66nAsU48akDjiiosd5WGvHlq/qfSw7AHiDQdAgYucU76k4xsOpSErZh/abCW\n/3ghmErfy16KakQVkxNxsoIUVjIPvLHudm0/tY972tUiDpZh7HiN+F03WIeq\n76E7YXGEz0rOiKwoqZBxM6wBGsxMwe79B8TWoy/mgp2IImQRB7tkIQ89Psbl\nksQfsEhmi6b4+tbj1s+y5Ogi7vO/bLICsrMfv9aHZccLhP9HQ8f44e9Ty0K7\nt5ZJavdEqCW5uj/uUMKpTETWhWrpYf76zVk8EaAzD8nfkEIaSJ+2CT7RUCW1\n3hGp\r\n=YqAj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.fd608ff66.0","@material/rtl":"8.0.0-canary.fd608ff66.0","@material/shape":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/ripple":"8.0.0-canary.fd608ff66.0","@material/animation":"8.0.0-canary.fd608ff66.0","@material/elevation":"8.0.0-canary.fd608ff66.0","@material/typography":"8.0.0-canary.fd608ff66.0","@material/touch-target":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.fd608ff66.0_1600352788539_0.1779679241478569","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/fab","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3944e50b143743451de274ed4f594a7a42c26ba1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.3e435ba57.0.tgz","fileCount":18,"integrity":"sha512-7rPxnp0RjQmKvauaP+PVnGbb9ToSgud1bn3MwJPTInVy/uF2ooROEx0A9obS0hOi8FTmjFMqe+p9jcya2TFPHg==","signatures":[{"sig":"MEUCIAqoTqS7q7aoL9JRCPSG2TMttmPU/BIf7J/tNyTOjye8AiEAxVRP3j5bpYDRxm+aFFZcG6pYC2gDXzK8FBQp2Tsdjo8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3YgCRA9TVsSAnZWagAAYuQQAJTz1IqkBtFx2LgVOCXC\nYn6m3rtVi1Z+OphyYRRQJir4gykFlW6cLsNg8KmnhQ1wGH6YObCeM34r0S/w\n2t0jjCC7bQWy/0Mt//WLfD7sWOQ3NsFKl/jAITO2A9dr0tvynsit/Olg9bXb\nNqcD0FUlkM1a3SCrsYNQKjx+nAleDC0UtS0ywusomQWAIlTg3slDfKJuqkGs\ntXrP2W9GVDuiN2Eebmc/OWV5tiSH58hYMeJqOLnRxyqqQ/oyk73lDJUJ1NjA\npiqQGLl7uritf+1o+8JVL9Fjv7fOTlULGdlhST1uKGzi3Acbtnei4LUJaTx/\nrAoAMeozWjLcJHY4szE31Qw7tZliY5E1jL0L15trjEyYm7XqUmvXQIhu2N2+\nl30ADU9xAIsVzi0J3vq06cY5SdMWx+pXWD+jlVeZsH4SnMcSIeTDxQxJyh9W\nkO4F0RIrL7YdmpYZ63aYF2N1bAJScZlZAy0zLZGZ8w6CPULPSY+YBTpcxjPL\nlYJsSGXSjLtugTffMLjnGQG3Jk8I6Nj94RJhMm1x9adDAmK73iKhlO7M+ydT\nNP5IZqRMj0adHwwZMUBBju/O2P9u7aFOAeOs8JUqN7t0OSfEZJjTixBYRH4B\nzpa4fkwna4ZJgSCTzOrg2l0dJn6wQcQr1G2isOotgtL6Tx9Kd23cOZufwkPx\nJYqk\r\n=Pdy1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.3e435ba57.0","@material/rtl":"8.0.0-canary.3e435ba57.0","@material/shape":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/ripple":"8.0.0-canary.3e435ba57.0","@material/animation":"8.0.0-canary.3e435ba57.0","@material/elevation":"8.0.0-canary.3e435ba57.0","@material/typography":"8.0.0-canary.3e435ba57.0","@material/touch-target":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.3e435ba57.0_1600353823319_0.5236978612687737","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/fab","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c6326782795cffa8b97a39d8e07d703fcb0dc3c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.c250ec52a.0.tgz","fileCount":18,"integrity":"sha512-6NeS8wPHQAw6nPbHZg7VR0Ggu4983kukI4Lzc3IuKHzu+Dx0BZ5JV9O6sgAZmwkgXUuzVnTpDvmCiNBXv1GzzA==","signatures":[{"sig":"MEYCIQCYws0J3cqI611wnBc92xoQNRdaJysKCKOL6oCmfuw+owIhAMf44rfPxQvDL02Mxoxh8UJThPtp4yppg8GbziZ8HQ2v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8LdCRA9TVsSAnZWagAA41kQAJkIsx72x11IR3UG3qRm\nlTvmQqK2FvzTV1vluJb4eWSA+YV9A5z9rNsasu1WWadyqpehpmBgS0HcDTxE\n7pZIa6IPsg9AB18h9g0d/bu3KLp91V9ONGtev4UGzbWvyh3WpXdr65FM2W6Q\nSX4zi/+VN/ygMaC1+7I/I3M3tJyPREkJeH2BLg9Wk2yWFzMQYl2T481oFk/N\nDszaot70rkjjtpDABuL3Qo0261h+nGXmqaguSvflOR4tCrXMg3DQmW/SPY1h\nsSkKTNQx1+1JyyidEdCm+TJRTZsJlQd8hcsiBvphNwXUAsrLV4NbUlNYTigi\nYxUzgB/KOk6iYGSxGA0JglMGoCCPgQYA5bDk0H+30VujZ9ZCpNx5qkc4s/Gw\nsIMbwNtQjr4SEUERWPotK9+4eUkJX86UzH9QLGJRcAynfEgtHv3bm+Wz5ntz\nC+XsFoDltm/c4bB+6NZ61Z+qJhz9JpIcOJXV4UhSGwfp+c57BL/QH3NGp4mx\n7pkNNFy1PeYbo7tM28pjNYpij0AcFVEpGACJvMj+hEm3v1oHgbmsuijMfWqg\nHmLXCXyMedDnwwecWa7GUXNwLOk6RyGgBckpszKgL+8JgDye0qxq1gagK1E3\nkE72dENMTaI5mP1q7kMzj8MVycOUagb8q0zaVDIp94Fx3ZI0qGhBOkiGx793\nDppC\r\n=V71d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.c250ec52a.0","@material/rtl":"8.0.0-canary.c250ec52a.0","@material/shape":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/ripple":"8.0.0-canary.c250ec52a.0","@material/animation":"8.0.0-canary.c250ec52a.0","@material/elevation":"8.0.0-canary.c250ec52a.0","@material/typography":"8.0.0-canary.c250ec52a.0","@material/touch-target":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.c250ec52a.0_1600373469177_0.9690511429473037","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/fab","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9f5700f7eb6de99cdc22ffb3643decce81b1050","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.e34e411b1.0.tgz","fileCount":18,"integrity":"sha512-WrmWeBvt6p0s3UXbvpspTnQc2GtFEgTqm8NwF/kd0sGPjf6bEzXNRCjjqUjoBN9tmLpNoyW6sgJsLFw91qhYUw==","signatures":[{"sig":"MEUCIFw2OA1+LGb0RcPUbk+nnIIRXRrtj/1FIcjDO0mumdHrAiEA+zX2ioy2nteq0rbO5l++nmVzGpI6G/yQRBiU3+lnlJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8SVCRA9TVsSAnZWagAAYxoP/2e3nUV+qSs5d+v5yn7T\nLTzLl20DtO0/vN++Kar4EJ8VXqG+uQSTgJAbWB43g1+Jsx6hGNwov2+q3MDh\nlpX0Fghy1u6aylVKTZ0lZ6VwSN5wqDmaAEPu+XoglNs03qwVZ6hedSfBh8yj\nAZUZfJB5wz79ArchxytcW1+BB/vSgkR3eV5xvY8oN9WL+bg2e4rV9Ip3lvJ0\npxp98ovFv9USgXsB3nWvafFtE9rDNdmSJCgow2KeKrS8edG2QfslcRCosc9B\nG5zCpxLocbwyYAWcFn/u7cxkQ8KhkqDWT5m7F6Ao/vS+vNCcIMzs9mbAA7M9\n5jT2G8lVRAAYulNzJh+EeVe24M2RV9mvYnOsQ+75EOonFED+HlT+CaJns6Tz\nwEemDIBsP9jpU8HSH/w1Lk3aU3OX/TeSpGSBBluQf47fYImk04xiGeT7BFrv\nuZnZIo7Ebg6iN/ooGKjF0A895hwC5rUXfDN3RUbDWQ0/N/JeVk4DPEFL0E9k\ndOFHjk5uscAXCR2rwhe7+3BEwhB7wDR9ioLbcZven/deJ+shpadbKUsHiMLz\nfYQ2zv1Dr3riBciKCSEdx3uPjGvgC+9iu9gc0ZahYXeEiBDI0UUk0P50JTwB\nK3ZIOFPtXjk4YwQJes8UW0jfhHvfbQ1Qr5pqF1SkpoO6/AX0xC1Y9gKT8W+d\nL7XM\r\n=mbeF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.e34e411b1.0","@material/rtl":"8.0.0-canary.e34e411b1.0","@material/shape":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/ripple":"8.0.0-canary.e34e411b1.0","@material/animation":"8.0.0-canary.e34e411b1.0","@material/elevation":"8.0.0-canary.e34e411b1.0","@material/typography":"8.0.0-canary.e34e411b1.0","@material/touch-target":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.e34e411b1.0_1600373908523_0.6947749808848089","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/fab","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.4e9343929.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39ab602f5ab65b859f97142291b6201c19429abc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.4e9343929.0.tgz","fileCount":18,"integrity":"sha512-kgSUUsBSTZRNkNgwIUZTHoV8UnOLqJGz6mGEqRPE2eIQ1cE19ZV21GbzIiwX8pdK3QxEiZ3ZJkZypzWWQj6sDg==","signatures":[{"sig":"MEQCIHcpXAOBAoeS3lsJSeX1G2vTBXXkFgsIJhAxCuZIHvDLAiAJSD6Fa5pXN7nkKmZ7pFfyLb5rDPnDOPAQQXZQL6xtSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8qECRA9TVsSAnZWagAAhrUP/A8xIyjCpfyR5tw3dCcH\n2LhflXGOn+LGpI9mLaWCkMtDTuut6zS9BJqdVqP/hj+JCDhb+jrojqM436Ep\n6h9aYiHeMNbGVCW9gUdV1Fz+IwuNcUfcgSF3ZM2UC0XCkErzYlf0FZjIDY7F\n1qxP9qLuZd7j6AbSKJvmbnGaQBCWtp2mFIbSS9OXi5wSLmu4uo8AY9QjwVNt\nj5wCr9TYnO5VWjG+m8cbFuS+hviSdVllSGCQ50ulQ32KJNYIghXUC+mrCtJG\nCg/X3euzPZ5MPfwGBLlXlyzScZ8/V0WdyJ6MikOYX+I8cSUYbzAxkNzdfXlY\nNPrFaIFWU/GOBOBtqksyF5DmyGDsHkOd9m3IntvUsiFabHL+6wuLesWuYgol\nfPNCDlD4Zur4JKFdmJ9zi3Ue9nDASpnKCS5zg1ntvXEd5d9XYA+30o9Zvy1W\n/YxtujUEeTV1tJbLLVTa5z+1GbaNOpfYMRIDXo4gooyxrbq7SYEq3Q5xQC7c\ncRlTNKHJHlMLYxM7HyPtpkgj8wJrs9o5Svz9GQvAN4kiFmvZ/Cf+Q4jR3Haz\nxK/8eZCJ/MmaFia4+gOfO43NfcckamQiqtJnbLY+3GYzVVPOaQ2Y+VAeAW7C\n6n7FLRW9VUl86SS/4z+zfKywl749SkcuRMRWHCWZe30ZLiiDV37zRtnk4F3t\nM6hF\r\n=LiSg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.4e9343929.0","@material/rtl":"8.0.0-canary.4e9343929.0","@material/shape":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/ripple":"8.0.0-canary.4e9343929.0","@material/animation":"8.0.0-canary.4e9343929.0","@material/elevation":"8.0.0-canary.4e9343929.0","@material/typography":"8.0.0-canary.4e9343929.0","@material/touch-target":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.4e9343929.0_1600375427462_0.16732500433669428","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/fab","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff96f82c38f093f4e1ec5ada57e7ebb640e6c24a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.4e5c350c2.0.tgz","fileCount":18,"integrity":"sha512-8JV+9HfIQ4k+Y+967oDKhO5jYSjjZEHV1kVfoQRBZjf51lz6hMxK6oShEyZVSADgaLFRm4+W+A9ewRhHbG0srA==","signatures":[{"sig":"MEUCICRl1SIPRUs5bFkvy0wu6m5mvNOHR7jrWEZnLza/XBw1AiEA8f3uyattORTe0+3UoEaHgcsVbTOKY08Co0farorRm1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRfICRA9TVsSAnZWagAAH3MP+wUb455cUPr3rcfn6j+9\n2bcj1a/ZK/YW0rUknwGLMkGhfs+JsXYum6m15g5PZauGmO+ZIZGY5qkCeBTH\nAhUB3jCXiURbc5ZMy7Tbx6cS7Me5wJXBj6bTmBnRXI1NRBwU4sIjvh6Jyncz\nDMk+IfvNvYrUaobJc8qlOgHO1u7K2YUY6bXD246vCdPSxHKiScLRTEFTi6Zx\nNNXPuUFI1UjL2VDS+IG+UAzLGLK6YVWjbqs0kSdwiSpDXdUO4mxWWqzVNhEK\n0TwIM0fD0EYna/aPtkHBIO9nu69Q/P/HYRocy2tC3GIGAE2ymCbCVH+S6Mes\nZ/rj4lIGSgdr/O4/kdfqpuyQ6ecDOh52F6gBKhIcOSaNEEbUNLBim5qiOEYU\nfIQVdm4P7Or8MQy2GS9Q1FGxFTIBmO1sTyA6+V1UZUNtulCMNAdkho0o4K8p\nUaQwIVvdFlNgdPtW5P91PuhC+OsRt1IP5qMYvoYtX9iGePs/eSGoJnq5XlpN\n6SC5cP1GuEEHrkzLtMz3wedfBwvQGxHqp1vjURrZJOFLRxZ40TwAKNysK+IR\n9cDTg10AZxTsWHcEGd5E2R5LO+9z0/0Uj1K3mDI3IlkOmSe7uIqAiGGT+h9I\nV++d6xSHf/Hu3idkf3FuTgRmpEGRLrbvtshdVSZwH5qUCegVdqTN1DjbO1Fl\nanxq\r\n=gWBm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.4e5c350c2.0","@material/animation":"8.0.0-canary.4e5c350c2.0","@material/elevation":"8.0.0-canary.4e5c350c2.0","@material/typography":"8.0.0-canary.4e5c350c2.0","@material/touch-target":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.4e5c350c2.0_1600722888166_0.3600738270218018","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/fab","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a018a252793a4f2c757cdbf6e296a35af0736a5d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.16c563ef7.0.tgz","fileCount":18,"integrity":"sha512-VNFa9VoCIltUk3Y+9PiehdxdGj6WUut0/BzoQFyT3W+HkKuZo8tznNklGHTmQLCZhNTAUoFbKfcRas/o9yH79Q==","signatures":[{"sig":"MEYCIQC86EIAsFX5hc9ZzguuWnEW+HJeixqiUsNLQAxpGI73+AIhAL9uEZUfeuxbK7vqg5Tl1jpo9VD7FzG2k9yX/CgtbBAJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalSxCRA9TVsSAnZWagAAgawP+QBhA4cuafGMfthjpfGC\nht74rWJDj43hgLFQD8EgB2D+iaSJiWmAHO164bS6na6IXoxHB0yD8dcQGqyN\nw0dKvD86dAqDnrht5PZRnJT9+0EtDPXPhjP9eSlSa1HxGr0oJaQEHpcBu+fz\ncsMlvrTAJhH54hYIBdJnPO39QI773b4ob1M65yMK6gYCrXyvjaus7TL3ozDI\nH/nscKufWkZtypvKUwnG8OXsvpN6rjBUf8BSGBSeTSbSlbTlm7yCAeOvlXTs\nP4BRuJPBPEFAZoAST4+0yT/ZJF8qAokWuoBAbynDfv43hddgkEhd6cYpFWxo\nFqcVSxxjlgeW8qnrQlm3lhabtctpfhUYN5/+DXEGHrYCHOj+Sz2FebXBgTVy\n+EegObGLhnNMw7F0tW1em2iMFWEhLBRybWqFO8AgHPumE6E6x8yVu2xNOMJ/\nZw+br83xVAc/fLsD+iGnwGBGoK3eSKhEEO71UXAzArpgMQcXtoHaNeW9GfZK\nHjstxdKQtDjDJn2oIs02AWj6PhYGB3T3rJoO5F6D0SeckBM0lrPKvXYrdI5a\n2ramqv8UQrLqEACFKpLIrn++G8PqIR1vCE7f/GxPURT1cERn+zXcHjVC1+Tb\nka2IuXhd8F4vgQa6HcO/yfoYHcA+963w8o18D3Bq8EcpnTgioH9wbvP6v9j/\nYubv\r\n=CwMP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.16c563ef7.0","@material/animation":"8.0.0-canary.16c563ef7.0","@material/elevation":"8.0.0-canary.16c563ef7.0","@material/typography":"8.0.0-canary.16c563ef7.0","@material/touch-target":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.16c563ef7.0_1600804016829_0.2586880728240053","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/fab","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7afdb7e6bfb0318711f9a77d13beeb8be9bd2260","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.fd8af3d43.0.tgz","fileCount":18,"integrity":"sha512-lg/bWECxPXBsla+vC0NRs49Qd45G0D4Od81TFUHOTK4I30SB3TwZuelgHlnmKMe6cRNXhta66GQc5zY8x9Qt4g==","signatures":[{"sig":"MEUCIGOjMwr8oW5B1X+kGjI567ULVYZwO9kNrpgyIZ6CXtLVAiEAmiWGB1QdlHw1DBFbG6mBuBeMCY/Hv2l0myJC+kGTnGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6LpCRA9TVsSAnZWagAAWEUP/2gluEUptjvegKyah28c\nczxEZdlXUdcyWHH7wqgsw0wY7Vo+/icQk68Cu8EzFD3Q4PL3+Vg+jncNOMyo\n4IWuPcK8Bs6q61A3zBP234F+H11tcwVy7ipBZH1dtzZi+mnhublNUzJ712Y1\nYYkJ2d7QzEXkH7FvtDFMxkVA8Ue83Va9RDrH4OWs6jmEFZnEXGVexdLFN6tU\nMThThUQL03CeQ92d2hrtGJbMdLB42LDLE6QigqcXfQAeJLCU3hGBUHOxyjAV\n/Li5YSWAh8RbsDCEu+jUbouXhhWpMj567r5Y92sn/VjaOUhAH+ZufzIwfvzx\nctWmnC4UDZvmQ7M1iNpXwCrGj5fNdBvjzu2Fmr+ZR3706gJWcE/9aCMyXy7N\nC3vXQHLK5z/upK5TNXvSc4vNS2peEb6TusPVU1DB8YQ4nYY3HhbXMCCthSR7\nFuteS5Gen7/biU2NTNaN/qtungakKP4Eg+pP0WADlnosZRGaua2p5NTQvT0U\nzxPrpt4oXvcCqYsyIrLpnpoSNGD7Z16wceqMJZIxCUtyjWJTxibas1VXVSBD\nDD+lg+9MbahCYNwJ8N72kGQD+8zwyKjRnZzan70Stb1wjK3kwlgI7s+TH0cT\n7jr8v4TigS3kIWIfHSBINvmLYyCwzz5X3IGKBlsAJgbnCePSMaHQ/G0KI753\nKV9U\r\n=M8KB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/dom":"8.0.0-canary.fd8af3d43.0","@material/rtl":"8.0.0-canary.fd8af3d43.0","@material/shape":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/ripple":"8.0.0-canary.fd8af3d43.0","@material/animation":"8.0.0-canary.fd8af3d43.0","@material/elevation":"8.0.0-canary.fd8af3d43.0","@material/typography":"8.0.0-canary.fd8af3d43.0","@material/touch-target":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.fd8af3d43.0_1600889577335_0.9193345559002941","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/fab","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe34194d2fa23d3afea90ff1c071e847dd7fe29d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.d4cd83a85.0.tgz","fileCount":18,"integrity":"sha512-JWCkl40IZx1LwlkT1tUdSxsBg2HgWT9B5Wb5omyt4C0acYb0B3dPqgtGxVtDRkpkqaVOe0LQcSdnc9bRwu8DOQ==","signatures":[{"sig":"MEQCIGrlu4skMeCkpROzyCNup2NDj2kDhvCLi6lYBGbZ38nhAiBPx3kFRPyhEIjXYnU2EUmK58zrIsYTdt2zLImjG/rr3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTuUCRA9TVsSAnZWagAAZK0QAIcE4zVSz29y6OU1Cncz\nIMiKwHhlr9QUPEj6I4KzU6yxVTwzm8Z8t9IKf8y4GFqWCDsr4wWLk1DgOx3y\nGhBF/ZMH/zSMwvfW3rbhNRwcSovFvWPad8y7O5xySWbWgmVibsUyFEZfVDen\nq1OTY6u5PcTOq0m/YgVhtIaXMnl/gCHGHJ9mCgipQYMpOyzN3BDZwQFlAuCP\nUwGGJ0S1XuZixdYjzMq/mvnVuEDQeMLs/mW8RqiDVgd8/KxJSmyrlZg78KGz\n/SXbICq86l/5guSc7p9sml8DTGZnATnoMB12r92KbtyW4+Ho50ffXiqPXVqm\nfSYeGuM/DGnvG0AvShCzfnTUwN4qIOS6eEVMGYa0BP3rLwfQKgGQze+/ZDbG\nO+Tp315cWjLP3d77LKhY7sgVoRY1k8axQHwpF7LRAGyTM7o2/yZfMn8eZFZL\nQFXDXBlaCTN4vcFHjutb5ybu7XuiAx+uoIoLF+j7+mB+OiJTBOV91Df0rCMP\nb+ohr58jwNX9dDmNBPw3dYsyqIPiaZky8x/5l6JBAmow7JGLG8BkCa8kCw+z\nVZDIh30Gc6dDt1K/ItSGWsGnoBlVoUo6mqLlHTGJs4d6BI+N2cD516X0SjYo\nBPLbzjfyAENjh/dzzFHhL+R9eDyHD3lp0zXc99P1rnn+BeP5QroJpMuUlTwL\nOAyN\r\n=gItv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.d4cd83a85.0","@material/animation":"8.0.0-canary.d4cd83a85.0","@material/elevation":"8.0.0-canary.d4cd83a85.0","@material/typography":"8.0.0-canary.d4cd83a85.0","@material/touch-target":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.d4cd83a85.0_1600994195806_0.9242769114915499","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/fab","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4a1d23530d0f0f2d6121f11828db04433aee622","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.199aecdfb.0.tgz","fileCount":18,"integrity":"sha512-qZDb7+8mn9H+FUozTaq9FeyYbkEcm1xQd1F4qoyYJ8BiMABigFx8LTTTblolGlSGji2Wu66hN7fDbL7tv7qc/g==","signatures":[{"sig":"MEQCIHpFjaluuEHyB3AiKG+/8/nofkYWnikmVrSMCoXc8O4MAiB0hw/SNO5iXzKLcbb4eMyUeBMi48ZAx1cDAUxUSRVxPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhIfCRA9TVsSAnZWagAArV4QAIWfVen322jm4BeTwRKJ\nz/C03/myTdXIDKup96CUDfYViasE4zHAQ5ZxmRvCdco9aBUI3gE9Rbx9V0IL\nGHzRnaIS1Z8hXx2sGvu3vNZI0gdzVwghPz4Ik0M2orCBv8B0npR0tfrot/fp\nmiiB4d4sjD2qvEVd61b2UzDAU1wSc/Hx8P0MIsTru9DfF/WkYWZ1FhuY4/M3\n2y0z4vKNkHAYxg+p1O7kzCh9/ag/Wu6gGEAH7kKq6X/XmhV0cyHNYJV+qo+x\nves9dad9sXDSKPdkyYBBilFzSmFZn5Ntvx2vmqcxJYyOdT3NuEivw7/DPHwE\nsRZZpuxTAhgJDtqUtQTeL/AprA/H8SCwmOObmj4EVRO74kMT/9VrDFHs0mnf\nlHJ5u/zpW6Adu3FllwPugoiHAXjaCTiP/P8uQiAkANqokFPBxVD3ECeObfUo\nF5MDzl/YyII8ngRO3y4xSpx9xTpK2hKVdXx2wQefKPZxbyNhIDBG3inwTgT8\nYRS51ZAW1QfrrvEYrRwEj0gvGZ+/ynLS5rTkDJ3jgCsNROham52lYpBwE18k\nnVDiNVjreK6W4rqXM/a1ujvUxe/IvyLlB6nyE+5NzUKpm9YXphAjvjums3M8\nPj68c/McM/NW9KzgEaOmMyGkEqwUFzbsODOYjqaqmGIbEyJoh7R9irUCq6Ty\nxiJm\r\n=qxw9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.199aecdfb.0","@material/rtl":"8.0.0-canary.199aecdfb.0","@material/shape":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/ripple":"8.0.0-canary.199aecdfb.0","@material/animation":"8.0.0-canary.199aecdfb.0","@material/elevation":"8.0.0-canary.199aecdfb.0","@material/typography":"8.0.0-canary.199aecdfb.0","@material/touch-target":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.199aecdfb.0_1601049119489_0.018061607980373706","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/fab","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83f6e7000f4f027b81f50bf4efeb58d300c4ee80","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.38ef4501f.0.tgz","fileCount":18,"integrity":"sha512-jnOCYx51uGfTiIBoueOxYjOf9X7V3gtL9xOw9151XWuHkAs+IsLjf3zH+GycHQfscoCfsHMdbtLQBKjzNM5Xog==","signatures":[{"sig":"MEQCIEA0lVX3R2Qp1aJynubcj+8pHNmvO57pM5AfiMSSFP23AiBv7Z2E1vlzyDEELMrCXMNNMgscOH3/9g5L27/30lB81A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM2LCRA9TVsSAnZWagAAutoP/RQEaO/VzgyYnf1Tckyb\nYIOjBO4AEgawZuNTpM/j994ndiY5vs9waLFhgBa8IIVIG5fpi9LZ6VelAP2y\nLjotFuH0+DCRrDasfuPt5h1h3H9vuuvTw7lVKpdrll35M0klgrlJ3RDfHU2a\n7b0D/kA7njQRg6njWSBZsGKLtK/EgQ0ou4WbeuYVP38Zjs216Oscz0U5pXq8\nyUq1YGkUbApVJQUxVzWt7rriM9HeoGTViq7ogzwvZZuHBNp/5sz2bG8LqRNZ\nfPVmZDY8zpH0lTlVjyy368wb6IMmh22Dc1cpkkuIZzsu0p3/b7GHfJd9AqwZ\nuBha3b7l0laKxBke1VHMsh0WneKKvAPDz7xMi//2UsAOApl1QY6xscfYKy4R\nzqUUQ+MgcQ/86nqkG9j4+b+ETj4lY8I4/8VuOUwtWjAsw5cYHJtjdwscczIQ\nhkvZ7yeTg2MlsYjCy3pgNbOmJqnafPGufMjEyyaAvOWKfbyK2UtY1mVLrDHt\nV0OCO4f+Ab6TajpAUw8/h4OqJKvDm8HV6x6mr8Lq0k95p2KFijQMA2gtDggK\n/P9WH1yOaMAv1YP6qdPKxrRJr+V5evZiJWfn/jVYm5P+EqI7ffrZbfGhXlNF\nSEv0cWYsbFK+1hw4xu57HY3epd7JKfj+GJIU+BPkIso8IC2r8jIvrZaOZ5L7\ngqbk\r\n=tlY0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.38ef4501f.0","@material/animation":"8.0.0-canary.38ef4501f.0","@material/elevation":"8.0.0-canary.38ef4501f.0","@material/typography":"8.0.0-canary.38ef4501f.0","@material/touch-target":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.38ef4501f.0_1601490314750_0.07941934048747612","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/fab","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a481ce139498fb0f4fbede347d325e172948b21b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.774dcfc8e.0.tgz","fileCount":18,"integrity":"sha512-ZM+Fcv+L6ES2lj48UlCJzu4kutlso4p4BDekYdHn8nxt/dbWl7Wht2rrPYcSwvXOvuXXv5g7yfGZM60BD8jPTg==","signatures":[{"sig":"MEUCICeO4LUFr9LbnlpH8oGHNkT4SMWFORBmU4VcXEvuP45KAiEA8lBlhC19io2eGS8sEOXxuV++MA7wQ3BcAlNA/4RORU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdaduCRA9TVsSAnZWagAA23wQAIQztb6ft7eATt3OBFwA\nu19W9LwmQYmg7TenmwlVlRlHIwkUOCMFetIld/R44ONnIjoHqv/4EEvldTke\n6ZTRUsw1vJFVb+GdPsCcGn1w1e39wSpi6kjxd0qH1y0XTDyCMSZ+Pydms8tD\naZSTks5NagAlYjN5G1HAw3Sg+kD/WNaPg8Ii4FYnr3yQDEqUGwONfsFXnwoI\nJ7mmZZDZxF9na+tAJOrqxp6GHHDsraqqZ/muBxz9rfcdjigqgZaS6Dr0Wy5r\nfh7xCsH49H2EfDhp5wkKWsWC3OEBE2nI3vXTLukCCVSTi9IEub6F16SaRPXe\nmP0z1hxscbgcSXmABzjbKG/kZ75OmkJ4p2J1ziL0ZAjw7xeXsYaQ84uOn+5E\nRAedrmd3c5Jage/QoP1xTy1laVKvqUtgmMK8VVPJfaHwvcY6P0esWtgZ8Ipi\nz7xFLIGwkIG/TwpTPTQzKQO15PMjF/2DiPMp63u1NKaaEE8ztCRw7+d4P2tM\n4PL62g9+5vjJOb4vV+6OsMWc4rFMLOPxNjCrVCATNmNDhxeqNOIqSeMM8y6V\nxXelnGxqNUk1hw0lcaDaglPOQZvw33QG7x0tetk90LFakRo+o69t/GwGSa+u\nvgx/zN4wff8gqXwwR3CYwYlkZURa4OYe1mTxUCiLUGp9yrjiFAi8NvB5eOXW\nWn4+\r\n=/+em\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.774dcfc8e.0","@material/animation":"8.0.0-canary.774dcfc8e.0","@material/elevation":"8.0.0-canary.774dcfc8e.0","@material/typography":"8.0.0-canary.774dcfc8e.0","@material/touch-target":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.774dcfc8e.0_1601546094482_0.45655305926783174","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/fab","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36d8defb5313f94cba81e2a788c82e59b888d03f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.0f60323a8.0.tgz","fileCount":18,"integrity":"sha512-454OJZOAGw6TlKedgAddkS1jEZYlwTE8uUpw6wuhqG8pcypRT1CclRuxALZcol1WmbAx95W/r+3fPP6RbtS7fw==","signatures":[{"sig":"MEUCIAtEtLEuf1hPYrZHhjv9TNsu1jqthdvwtAuGVmqDdKnrAiEAmQ0zWARwZU53c23qnfGmvMgYhPvev/i9f2/zbPnAj9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4BWCRA9TVsSAnZWagAAN6cQAKSTINzN5OF1k109m2iW\nzLVn/pOUiK8tdxkCFSgE6EfK5Gg6dFrDJ56/DU1FT0RGJJERynHIvR+ldSTP\nWjwNoGFjZmy7KFhCSXK1SdN5pCm7UkRH5y1UCDw4kySzlMCzth6pC0vSKcYB\nF/KKZeWzexm7gXUkN8pjjTspci1eRrguzrFb0E6vqSoUFuRuhdB7oHLDFvJ+\n2jw/UL48jYk5vs38ekKYT/3JcsQOBeblimw/7Cg4TxXhtdpCUkLblmnU+ASB\nH+wk3PjvYLLCcNZUdym29HjX6ecIMUw6aAhrU2q+911artqIsNX471QvHALJ\ngdgHZz6nle7h/LSdNnn3kGMfayCHclmqsBUuohc4Nrbyc17iWHkHo9CmcOsT\nOQQWJu+WibfEPNJgHBkz1TqEnKjmDNpXmEvrKwhO8pakUmufXX093ZHbErr0\noR3ovEz80h8bX9osdrG0kFxsGviadzkt/FBuavhXGGqlXlwfnuWRNu6Hwo6I\n4HaMn48Um5lAtyCXMQtnihukHf2LuWruFVjMgURcYm5oOTm3nA1lE9tdvK8E\npYhmrNNK5G6Mgcv8ukSX98B9PuB8uOcAkWoVnqK6WjhMs7imBcsyuFo07ALf\nXW3Hmf46lTNq52nUEoEphQjHMGPSr8ojS9C9ugqbH2b7082woF4yxrze3HpP\ndN0C\r\n=BOSh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.0f60323a8.0","@material/rtl":"8.0.0-canary.0f60323a8.0","@material/shape":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/ripple":"8.0.0-canary.0f60323a8.0","@material/animation":"8.0.0-canary.0f60323a8.0","@material/elevation":"8.0.0-canary.0f60323a8.0","@material/typography":"8.0.0-canary.0f60323a8.0","@material/touch-target":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.0f60323a8.0_1602191445816_0.7119180673008316","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/fab","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.d71622574.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"180f40efbd4cd349b95a4ba12f2b8b0f4aa710b0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.d71622574.0.tgz","fileCount":18,"integrity":"sha512-bjA5T1/Whhb010BVkmg7tU1CQPEDH+VtCaHpCL0DmFW0VyILAPXwAqJiE6ODQmYuW3IOoq6YIdM63cZO3NPp4A==","signatures":[{"sig":"MEUCIHJyuFtr7mleNrPD6acqOmAXExbUILhOOzZl0abGZ8a+AiEAqBG9dy8S8l7udNq/les1dnCQ4Kfoh8qeP+y8iZYp8D8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJCeCRA9TVsSAnZWagAA0m4QAKBXXPGeQj/fBNRASJFu\n3yen7UsVJuRbBsbE8sFwgRkswI0ioFSNda79yYQflXc6QgUGjGr8unBBsfwu\nf1hUJeBSGky9ww6n5zv+jaUOIx1MnpekGOGx+KPgMIGol6jtGC5qKHJZiyxS\nCdWJKgukDRPGIFfHIFhzftAiQieQRh6jg4mo45SEFoyePTJsf6miZ2Ic141o\n1VujAO3zrKhhmp97kEDaMREE05lgz4YC+BLUC739PCbmIP/1KxRliBRd8nB7\nUJ901LWzz8y8dYbe9yKNqzbhQ/34smGeNcExx8icJgGKwKOxy3URy1OS8PlL\n4cWMzzqvAO0XdqobSWDgcwzqwmEjqhbzK6aXcohaUfcXBUd3fCE9z7372s0g\nP/sq2Q832KEs485uFySvrl3ZZlbp0HdspiY+QeFdkfvjKtscP6A6aAG78/PK\n9LKCCII153dZQuZoKHT3QBuEInQpG/D9UxUx7TZVjw9VAP4XqJb1ZVczB3In\nh3wxyLwwjW1xN+hmM4wOIeGxZEpFxCk5XGKv1LlfYmhTWthBRzCYds6XhTS7\n1ecwJtuRVmyeMYr1zDv6a0PzIPmepXog9e3/a3IYxwW829jOmcmVrwEjilYb\n57lt4+5oCSJfHjqCX/G3ggUlM2OznmELbrYpkJgHmSVg8btud1ljlDX5HFzf\nJkb1\r\n=Q277\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.d71622574.0","@material/rtl":"8.0.0-canary.d71622574.0","@material/shape":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/ripple":"8.0.0-canary.d71622574.0","@material/animation":"8.0.0-canary.d71622574.0","@material/elevation":"8.0.0-canary.d71622574.0","@material/typography":"8.0.0-canary.d71622574.0","@material/touch-target":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.d71622574.0_1602261150086_0.6654708611272491","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/fab","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b33c6cf65c92a3ca97dd9c1f45dae9c14f223fff","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":18,"integrity":"sha512-q3LwBnLSdYOWMHYIVFAu8JUmSSq3ITEbKtU4AbWsKUXi63KOwoMrfnBCBAYomsHNpIKRly8ebPZvQy4D4MrJgg==","signatures":[{"sig":"MEUCIDOt/jXbu/fuUzEWMuncroigD/19dyzLM6xpG7J9OejNAiEAwg9x+hYt1Huu9VjAqkiCbZcbInXKZuLGbk5WTzJOWuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOoyCRA9TVsSAnZWagAAauEP/0hf1dCS4n8+8TwfEsIF\nNsycU7AS4G8V4w6eMD99KXD/rXK4VRXwA1MINllnpnAxuzdAlTUBUsFkWay3\n5x+vydwrBe6zKu09vf9vFGsGsl+tjk3ZhVHtB2XH81brYk9AX1XnMBABsb2Q\nd5LvvZR1w2NKkkPN9wYojE53j6JfebHjMqdtGwSc8fI/As2CN6Gr9qBZ+Dtb\nKtLbefox3xB2+d3MnJ1BuRjiE7UAhMGSrcT5thgUokCFeYaw24Tq+r3SUa9D\nTUDphNJ0McTk75CcBysSY6+zCFtPbYM7QFghHeveMxe75uwzp/g3p99PrzsH\nTzXBR7Su8dPP4FiHQYjLUC5SZrIpMXxkTo09s5fq1RmC+in86uhRuM8yDkMk\nMTd7Cd4zP50q3HJ38/yuMkVRPBrgc49Mi2sgcGMeb7gyN+dgpHw9kFtqlCtf\nUWL80vhoXiQ0J8KQpTrYO6KC7oREOGkjGIf2GBrqi6+XI/zkLo1FLUnmIKWG\nqntlWE9rGfOn4ohi4ncuuMhjBDof+4xxw9x+biCdD/W3OO0uHdYVZjTe4pqA\n0ciEQHNIaReG8Nc06q5KqUkHpv2pSU+lQDiLZ4KowIq66kkmZG2xzsY8DZTb\nsrGP9FqY88SAd9YQ7DGxIw/Wa9SvNuNpP1+VBMCprMfJPfzAJOtmh6Pnxg1W\nVbEe\r\n=82lR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.7a9afaf4b.0","@material/rtl":"8.0.0-canary.7a9afaf4b.0","@material/shape":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/ripple":"8.0.0-canary.7a9afaf4b.0","@material/animation":"8.0.0-canary.7a9afaf4b.0","@material/elevation":"8.0.0-canary.7a9afaf4b.0","@material/typography":"8.0.0-canary.7a9afaf4b.0","@material/touch-target":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.7a9afaf4b.0_1602284081962_0.3526228085374463","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/fab","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84a1e878cabb6fcb0565cd1048439a60bdc07788","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.8a39352c8.0.tgz","fileCount":18,"integrity":"sha512-Cg05ELyi+mPuB7yLebAyKEsUYCaI/L2X1bWC833ZPsKQAwtpH92qVw/jy6B7FqwSWJWgrTqCheGpAGuk74OELw==","signatures":[{"sig":"MEUCIBZrR1XN/vZcSVCgkyC+hnhviy9wZ3S4NoeXzv78x8xkAiEAw3AJc0YHZ4OnnUK79ScaKJc0GF19+/waiQ8Aj/5DYPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJadCRA9TVsSAnZWagAA05wP/3aA61c+O0eUew5ZYNBK\nSMLGO1fzlTwfquFBBWHSHU++MLKz2b8nX3JCiE6/mdKKfHq6Z7r6JabJZrlu\nHO5oGcyQEyu3ogzV5s4KJ8IhoQ3rxw03Y/pxDlbXoejTnPE65xnN/AqB+ziU\nnzruwYHUZcEYZfXLVXdJ22ffFE5M9Uygc8gzPO5dT4tTpl8fuR+FVwPypOSj\nzx2CfPTlrJupyXGqcWsBbIlvdx6wvjuUDcf9L7OQTJqmdCznZxvCghzwgADW\n39dcoRcWrnb2XfqjlxxhDveUZ90nWwBa3DfMPiErhqMR0319p7TsM4q1C2z2\ni5wnZzvqURy3LRvFIQ5KZ+Kp4olQUpErqBrSCUggoDTE8sQV5Lhj2OhOzTIy\nsuHXKXHuAyvS8V6PaoLRE/8FWJhZfNA9q7dlMganKij2x+IgGJhxLOCl4ujh\n5qG1ncfmZXQ3ZIoQq0drZWqH3X4ozVrpMRiBsjIxhAXbxEPjpqDL+gX8OXHA\nVJytfEmhwBie1Kfh4Yk79NFnWpclUbCwZt09SFrlCChuY0hYnuvQG7+E3jAZ\ncGeEm+fRXVX+t/5kKv+7s0TkVI6CWBb7PyU/HL9AvtrLkBmpVtjvVPraRIib\n0m9jQDeeFKeeE1r9gxI7N04bBnuE8f12rnRooyZ4dZlAZB5cHnMOxbBewmnT\nrR9L\r\n=ge7v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.8a39352c8.0","@material/animation":"8.0.0-canary.8a39352c8.0","@material/elevation":"8.0.0-canary.8a39352c8.0","@material/typography":"8.0.0-canary.8a39352c8.0","@material/touch-target":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.8a39352c8.0_1602524828706_0.5715898515258773","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/fab","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e85c4f6983d2cf10c38d037710570afc1ef733a0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.790ca85fd.0.tgz","fileCount":18,"integrity":"sha512-E+lyvDy/7R8M4i4cPHeoNntVeadXViHmMgRe2j+jYDaDPHGcIhFuB/o6690FR7sNnfSm/oJQDdO9d4MNi7TZ1A==","signatures":[{"sig":"MEUCIFEcd/Q4550sPUkXxOj27Q73YWy8UjNMgVidFoASJYY0AiEA0RihxOubDeVhiWLf9sv94b2rjPzw+nngbQwa2SWgmI0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNFJCRA9TVsSAnZWagAA3UoP/RuYPN9ACHK4WIPrbQsM\nN3xgXorDDWHudumbjhGhtL+Y4BbXPv18pqED3Vv9rKzApvG1yWTDOUA4BHPw\nVwWHt90QmOHvf7bKk7cSQoyxvYSIcMGZnCPQ+yDz2fh92ID8dJx9f9BF5mG0\ntZyiZxt5dxYpLjQZM0DqeRojyIzQJS6Qt92xfebkZyB/st9EiAnqRHHl45Yw\nIRKDam1wgfj+rxq2dQdmtakPEGzucOQZTpsUbxFw2hWFw8LFpnd1F/M9YFKZ\nuOrLNUeXx7GTFkhYyNe1VGLJ0obLA7IbjE+fdg01rv+o+eoCPXhYf0ZDkv1X\nWCIMfL6t7sUtiwjsGNo5DKt4ods2w9T73pn9oa+LvxLWZgO0vUxXE9mox5XH\ntHg9gVhCNk/P7Rnw+ocgoOUhGlf8jK7tJ7SKFj5KepQewjI/Ge/gclwAnEZU\nLjqgihKk/Jo7DUh7C99YnKjFRnPPa7lTDt+7zOFICV0R2jL9szbFDeUw5aPn\nW0m8d872lWPJNqpgqcwvc7iuQhw/9y+0qD+lkCGGu6/vPVBfWZivJmOzFNcG\n9kkkT9VQKX6er2kUQUWxQCAo1smMpD9DZbc0+UFjMwLTe3EVZRRqILHdjsCA\nCC9p9Hg4+wkrH1Ct0B0IddXK9Nnq4FkqmaxVoa7fgevGdTW8+1ISziAucvxc\nqL+k\r\n=SK9J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.790ca85fd.0","@material/animation":"8.0.0-canary.790ca85fd.0","@material/elevation":"8.0.0-canary.790ca85fd.0","@material/typography":"8.0.0-canary.790ca85fd.0","@material/touch-target":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.790ca85fd.0_1602539849202_0.979697159279256","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/fab","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.174c0becf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e01ff0b78e8c19eca08f16ce88c6fb7444bb1a2f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.174c0becf.0.tgz","fileCount":18,"integrity":"sha512-xDPBnFCB3jVunNMI874cGumHQovxQHlNiKj8jaz2LE39G5QysndjSB1xWKLM/IG+4s1j30ySN+T9lxff5SFmGA==","signatures":[{"sig":"MEQCIBF8NBn+GqWOtiEAC9KGiWqqKAb+4yJ+xvc61itrtrN/AiAL2Db4lLzy3hNhkHTV51PQsUm8WDlVOL6g8m9iBb41CQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl92CRA9TVsSAnZWagAAg34P/21ysABRURF+KeiNsNQM\nyY6V0UxzEUw3DIXAhy3eV0JKaSF2SWF944KtKWW/IenqF6ry1I+wfexnq3p9\nAkoWwt4zhILpoIoz1mW7JgrqaUKHxVmWG7SSsrD64U6U+hHkkJ4kT42cq6x1\nFqjIB6caGclGoktrOXXqE2xo+SwS546kDPY92o/hnBzN5MWOzT9pnpuzSH4o\nj8QAa2SlKFLZXvUbBXAqpja0VXlldQ+9/hGk8P0MzLfjDNmOMFljJuZXHkB+\nNykzcjDxFH4kPQW//0yzFkGaCKaBobUpoluAkKA2k9N0NZBG+Bz/uUXVEJqg\n1v52HWTe2YqmrPMlFjrC4IXco0+O52YWJK16i1jdqm5Sa779X1olwG6FnXEA\n9Q9B82x8Zf7I0MR++9cRsNZswtSo1VBa8Fw2WlJ76S3PupB28aRJBrDLMLmv\nc24WYZOivETkAqH/2sPzko1h9P2ACrQd9ia22udxSCiY6VexqJQ38OPE5UUn\npxoOioLgoV67z6XuBQgd8s9NXOjxx0Ymgzmv2w13F69Ln5LNSjF9X5olMDSz\nU7efpseBzo2j7v53UQDTNHYgPWZn00lR3kNcYQUc7b8DVzhT6gNpfqVbnxkQ\nRjgq+jfCStXY71+THKqc4Yxn6AoBkL+/0h1URtPopwab6a/FZtUS94NHHCzH\n3XHM\r\n=rEdd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.174c0becf.0","@material/rtl":"8.0.0-canary.174c0becf.0","@material/shape":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/ripple":"8.0.0-canary.174c0becf.0","@material/animation":"8.0.0-canary.174c0becf.0","@material/elevation":"8.0.0-canary.174c0becf.0","@material/typography":"8.0.0-canary.174c0becf.0","@material/touch-target":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.174c0becf.0_1602641781744_0.5033956632822687","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/fab","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fab70bd19ad74c539c71205b961017aa19b13153","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.c71ebfa02.0.tgz","fileCount":18,"integrity":"sha512-IMX+MylvEgWFf6jlPndFz6mIgtC//qB5Y8VyKyed3HiRcAvHcEp/tSt+QGqZb0YBKKDyJqS2EaWBbJcYRQfvLw==","signatures":[{"sig":"MEUCID0o/bJ6IY+fcA1wZVO5QlceM6BmVwNyJIw5mkaoM4odAiEAlD/g0DDPmdQE4eZHLsnKORwkdxMItjjk41b1Sq5WrYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnwMCRA9TVsSAnZWagAAXSgP/RoLecvGvr9N7LEB7q0x\nW6jaD5MrR4yWx7q02hSD3RT1ZViXzVzW3FwWMzArkMHjTvVD01NgorHBcboR\nelixypvaWK4YvBi18CLTvi/GOhV56Y6lGGY9IZ+ubgz08u6SGteSZ3T0v5ju\nZ1zEjl/u/qszwbzTgbZLkS4+9nQNQH4BAqoeSmyHC+xoicl3subDQfl0Usjs\nOU7cTmAmabTDck176FFloy+IgyKfZr+fDvYWcktQzcR5qLZK9L5DIMh07h5R\ns7TQR8OFCal86hLwUFg9g1M3QoHP5J5AHpCejPJ/Wf3DcwsZyIUQ7vUSyflq\n2r/LsaVBnGAearYhcLxXAc31que9ti3JpLljvhVliXDRJ2eRLJQQ7uTr+Y33\nEjdLYYPuI47ep0NGOIHXWWL7bT07Hp2dwc5VxSN7V140c0TdnPpvvk9sx4VJ\n/BukoHK9HjqaC6+oUO6pIK1xg5plqjbilVgZsbxJA5M8rzaEsj6KrzOPVRuM\nbeTkvxr5nkpVuQ8h4RF1StC53d9ZY/OJnLInVA8ObPRonbLWzVWx0m9sijOi\ntVlaeOwx5VufOiSX9ciLWlI8Nzb8Rb5Rai+brKm8IrpWM4USZSaP5xJ/PI1J\n6/a0KfloUp2nZywL5ELGz0Ee7NVSABrLKXh5DH93XvalAn25BhnvrNqXqbWs\nW8QX\r\n=tgGv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.c71ebfa02.0","@material/animation":"8.0.0-canary.c71ebfa02.0","@material/elevation":"8.0.0-canary.c71ebfa02.0","@material/typography":"8.0.0-canary.c71ebfa02.0","@material/touch-target":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.c71ebfa02.0_1602649099729_0.19985493385280528","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/fab","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d01d91178913711b92b0cacce2a4678094dee451","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.2ab716cbd.0.tgz","fileCount":18,"integrity":"sha512-8WghD45lAnFLdISRTyw+xqPL+sA+M2JKvQE/5LD+WyLO6XKrOxEB7eOftZoskOH9ADa+kTnwkzAAxE3++N5aDw==","signatures":[{"sig":"MEUCICNIxXV7I+ubxIhJU7pPwGYjlzmy3WaMBp+xjiuPz1sLAiEAqreKqpzDpB4z6HqHuGtCdvr/eVfozLxlLphOy7BhTR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOtCRA9TVsSAnZWagAAtJMP/3Q7GWrVRWN6gJSlb/S0\ne+NW2h470BAStGxOiM8UjVh+hN/cOF3wHSrVth45oEAmMb/8DJQ6JTF82Li2\nwi+tf2nsFdsFmoC0zr3rzNW2sE/ZxAlxQyZ3/tUoN4tBOxwmlPaMkQvxJrXd\nVQ2mpV/TMEaOeVr0V2TZ/rwJLlCKgNe1iIwNzPgjYKNDWoiB8uCZJb9KqwOK\n1g1ZniAe/QOubwMDvaQQcvWnYOAsGGkAscGIF3fpJWM+FLo4pqgop8pz1vLs\nLATUehPoxsCvNKYGK7PCrnXib7Z5/GQ2ZNV9/LwOjpJfJZqc6yqSi7vvYxuL\nIGO2/SnpBgmgc6YGKTmq4WN5kJdmHcNoBIAOWwtgOADz7J26etltj3p2akL0\nyrRK4YL3mbMhdbniqrXQ+o2VLgx0ymY2LhTxmK+/Ile0dgJ5YVFrwccfa+/T\n7/HbQKH9HnIs7AvtgvWbr5TEU9vfDH1HyPmAVeHa7DmjUk8ImA/w3cTYLFWt\nz8XvZFnmbfF3voPLdefGcm91UZNyAbbwOD/PbRbSBJY2VEQ1PnuYQoQm9/Xp\n4qyOH8y2ob07ULky8JJRLtZSHTs/dKJu/rddu2ox8vVO5tzzssziNAloZGtN\n4YG1C24swXDifFgQb5icPtTAazwxdFoSTPH+qmILQy606uSCX9i0S0Sp9yq8\nxA3w\r\n=+Mu8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.2ab716cbd.0","@material/animation":"8.0.0-canary.2ab716cbd.0","@material/elevation":"8.0.0-canary.2ab716cbd.0","@material/typography":"8.0.0-canary.2ab716cbd.0","@material/touch-target":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.2ab716cbd.0_1602806700676_0.3520534682444607","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/fab","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d86cd4f119207bced2fae36550e52624751db0d8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":18,"integrity":"sha512-4VpWtzIVUSwohe/LuugxqDeQc9bT7G9zBGTLi2Jd+6/kZiZKbKUQo2NuSaoAyhBIYFotbVsvEwO923z8HCjw+Q==","signatures":[{"sig":"MEUCIBAmPzxlq291MNOvVtDTLNlLHhQ3VVaCn9Jl6k4Zq+IWAiEAzf/Qh4NqGFKWHjt2VLOAv0/MY0j5xJVsB3myjFAeP1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ3wCRA9TVsSAnZWagAAnxoP/iVKM3th7YIVaMJw/vYc\nV6qdj5tqu0lAvVCcxIwAr5wIlKt+CMyHESL5Dw71CS/AcTgFJTO+Rwo41fHD\nFdf7hp98YKrhJNT+A0cCcatzED5fnQ5APfZ+3vXhu322cxYmFfycbFmDV7Pz\nKnmIbmlPhaJB0LRXvt3Ycn2ZHwIrwee3I1GsljwK5VqKHbzu5NGooTM8X0Z4\nk5lQ1aLSbpAHrj4vAl1BKPvsFLsrMqYZRog8LgNx/5Wb9afA1wIsyvmlMmqp\n7LXjnaQPT8yloLPO+JpbjHPcP11Js7218JsnfaL1C8hB3NPpFwouGsouesmJ\nRXedLy57gTqfdHljq0HfPeogdXbqt/aCMRtv/ddBw8zDucp/qqPQe4F8ttdh\nwIySpIGAZD+MYuugbrs2fzVEnPs1qQJZ8snFEOtAYnFrOdpbWzxqIMcMsxOn\nCSkeog6sQ9X4VeTFHMe81CLEgyBfEIfuJ8/I9OyqhJOcghs5bCsz7oKpOBSR\n55LSySIqCYguNQfwKcT6XSNLRHpSOQJS43Tcg9QOKUf9wNNxkURQCCI3224t\nRa9YZxCrhtzCDlplY87BoUkHNyTYeA1JnVJiWlkcP4qEIkMWZDA5efNm082Z\nZs7OAt0qDyLPzHD0zphUTw72eoUKcpCL7IGci6b6DzmRN/vu5bvgTisYVqSH\ncScV\r\n=FGrP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.43c1c5e2f.0","@material/animation":"8.0.0-canary.43c1c5e2f.0","@material/elevation":"8.0.0-canary.43c1c5e2f.0","@material/typography":"8.0.0-canary.43c1c5e2f.0","@material/touch-target":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.43c1c5e2f.0_1603116527890_0.6472697077319305","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/fab","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce6ea76fdf0bec5365492fe8a4220020f1c4c887","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.ccc64eea3.0.tgz","fileCount":18,"integrity":"sha512-obeV+c6qryJn1QedJzsCbVKN9BhUlvpSXyiWSTBd3g/jIJVSUqTMQ+mMsqXq8KvbLqKaWc+DAe4SiKBK7A1TOA==","signatures":[{"sig":"MEUCIH7eAYFcl7ASWGZROfa+ZmhUpkixg1unKzqu7CLfdNcyAiEAiyhTiItbZzxas6tj/wHTX8MTie8KOb1AOnRMcjaQ+WE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1MiCRA9TVsSAnZWagAAsGYP/0FLxIAoC/IuUrZkYMEh\nTLT4hbsepOIlynY8Rp37OWEWSk/F4mrZ6vCWr3nefkyNCb4iZ2yaQ/zCqye8\nMqw3ogIC6+99znyW2iP6ve3plYrWddjvcxWeR3ytUd2JMqUb0+RUVdgINT3X\ny3lXRMO0A7NqO1nPo3Bp+I5WiiXk9m6FnDoSCSc6rzjtNzfCJMbgLoF9k7c7\n10mzn4VTtMXKDGTnOljrnL3IzBAxTHvMzOeGjRie2fznnOgbwy5u39t0ulWg\noZnN808IK80eJosUPZwUiBao2GgeF9fM8J+/28c/XAxxj8yM6XHf3ArXJESC\nI13sAv/qLX+WKIE2pILZYDks866LabSWIT8hprN5hd9gdTO0oyq+RdFuZwZH\nPh0/KAJqBAdO6uL3rUKWeWsJL3NoYjXMtjrMiGPx6vjIjKiZ7bwl1DC+DHSC\nBx0y/Nlc/Vmxds21IDdvwldEFBQbGsZucV4MAbfZTONMwSFarzaOExfZUA1b\nMqE8gm9gSmDcbKY77GOnYFIsOc34gMSomwxo69dmBqaLd7iDw77kfLZHni1a\n+l6YVVXBAyGA9rDzY3Y0eJ4UmM/3wiffnrHBGwFcm5Qzt5OWNeVTw0KiI0gv\nBjf/5i/uSHhWse2ZWvlJY0DNCu+ItaZ1IbSEWGsgubqxsubQDBYnineHQ0fa\nx3id\r\n=wkER\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.ccc64eea3.0","@material/animation":"8.0.0-canary.ccc64eea3.0","@material/elevation":"8.0.0-canary.ccc64eea3.0","@material/typography":"8.0.0-canary.ccc64eea3.0","@material/touch-target":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.ccc64eea3.0_1603752737524_0.02810440438050099","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/fab","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80e8853f353ecf6f7824b5e9fdb961895a7aa0e6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.a79cdd019.0.tgz","fileCount":18,"integrity":"sha512-FHshu/lbiOSRm0PeLy4jDp3for9J+wUgpmHT1kLBqPyP1EVSGqIfJY6TaVvXLMOhB5oWubfqMt6T1acuZ61+uQ==","signatures":[{"sig":"MEQCIF8X5POOWyzJQhAn7yTKNg3/cldTr37Tim1TGmwudhsxAiABXDehpc90zQav1T1pzX2EiWJCmcqKHnByQi3BBXVE+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEuVCRA9TVsSAnZWagAA0w8P/AuwDaTDkgYhjc6pTdVD\nL8b4BBFvqbG042L2TWCVO5wNkWtQpJtpEA5lOwUqo7seTJjDxNATXsvWOZkY\nrbVJa0a9LqBWDBtVbmT8+cbZHebdXaqm+qC1NAdDJClvUr/1FdtC7y1w0UZ0\n0DkVCInG3N5NFnKNDdGMcqsBEPoxV4ExjvGUkbnC0po/6l5MaLB+cXw1jKYt\npPleZvWKiFH5inng9Yvkp06QBIe/EfoE7dFiOpq9M3FnihHE1mIaMT+0fXHm\nkBDul6OP3O+4FXQKqnlzaqPQtYxXE6WQAo3UN3pj7hVW7Ug0I9oTWlDAEgz5\nYd7U8hKSQhX4nls5Wclhw32RCO2hwQRhHMnOO18EMv1T0kiXg8PmMV0ryNuo\nOBVx5kDCYBXHnxzF2XDkpx4wv7r1/n35eFB5No93UWVeaUZSThORzHAlgCTQ\nQ3Ehzv5y59ijyedehYHsrpht+RMua6RyoojTYcp6oRNxakCO5wvyZagpHCH/\nZiG2h6v4va7KJIz7oj6/kQ+3uo126OjiSiOHUndIbxjDAZg1SEJ3dwpPfEWV\nJO5VjFDYVBAuaIhKTTBDgh4Yzxo+vfp+XK/mg4XJCjq+IKaPtReqslJvdME9\nuU15cvUYaNWkI6KnJo0PHlkgf2tY3XlyMiZMQlGRsD6xhxBV+I0A650lJqgh\nOaWV\r\n=w043\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.a79cdd019.0","@material/animation":"8.0.0-canary.a79cdd019.0","@material/elevation":"8.0.0-canary.a79cdd019.0","@material/typography":"8.0.0-canary.a79cdd019.0","@material/touch-target":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.a79cdd019.0_1603816341477_0.455769967260202","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/fab","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.596e98424.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb5a25a7342907f7d711123227d9a610f08b4e95","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.596e98424.0.tgz","fileCount":18,"integrity":"sha512-rJjfkyt75jFVXKSsjw6l08FAqknayVBwGmGKxOS3VPvonPBoqX7v2k+nEbL8OmywKnZgySXq2PhmgqjBujLC5A==","signatures":[{"sig":"MEUCIQDIi/QmDDVVT+6DcFtvIE+8J4dGbQ+1Pdqqfmka15aeWAIgFs/TvNVBNgygyGxTlXaeJwsXzvAfYB3HH0P5xxlXkVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZaFCRA9TVsSAnZWagAA570QAJh1stawWST9T+BiosOo\nJBlxaRUN7mYEEqt+Lou3oEKQ5wX0VxgBRWpmx3X33FSNx46rZo3PzHvrihTA\nD3Gp3Bmj0YWlHXfw6eUpKy1oRDFXW3WAeVxTu1zrOkXEmKFmcsjc/wKNh8xs\nmL0QQgRcwMaFagAPOsk/qR7VvxoAqbwSjdegHKFaFanm5ujf7nxPt8dSu8yQ\n0iKgYEuNJ8KIoWAP1koF/7KcXt/3gAMuEao2rTKKBCTufyBxyCjDsfEKZJaH\n+smGo8WKXJd6L+XDVXHsVpT7FLmWd2qXXG2CT8vN3IQiNzFQ+Ba0GbIgqA3b\nf2JCUX/JGaMm2GqgwbSoK2MDVVrFDpFmt1Yj6JeYYzWvi4YyQBYWiCJZwWom\ndxrXnD9nQMXumh3Sin9sC1MaR2dQhMnwP3PJ5wRP+WnfdS1lBF5Wb+uKahJX\n/M6pkNTfIa/P4V4+w96cZxIlLSvakl8mD/0a3xy02Pfcoz61ajCh9pIAuyPI\nqO03eE02gRGsVbVhrtEoyxtRmENC+gnSpYS+1CNYjWR05zGKbNQAfCsFp8u/\nCP1wj34PUj3myIR/YpK+NEg+1H3nDEGvZaC44EH6IgRdMNb5ftae8i9tgau+\nKDjfQ6cxnoULPaWK5Wg562AAtviu049GYaGXScGen+C8cmHsg1X1gW42CVfQ\nLEJI\r\n=T976\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.596e98424.0","@material/rtl":"8.0.0-canary.596e98424.0","@material/shape":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/ripple":"8.0.0-canary.596e98424.0","@material/animation":"8.0.0-canary.596e98424.0","@material/elevation":"8.0.0-canary.596e98424.0","@material/typography":"8.0.0-canary.596e98424.0","@material/touch-target":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.596e98424.0_1603901061190_0.5146080958208936","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/fab","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3e1700fff74579a9edb0c5694575d1af28dd319","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.05d5facc2.0.tgz","fileCount":18,"integrity":"sha512-2YW4SwB+c0lCaIolMNlOpp6kyhidDfu8TfRrQ/ti4n7QzIxISWK+uxLinZJEb1eDQFidI5lRc4Dl2Poho8W5MQ==","signatures":[{"sig":"MEUCIGFZMhK50FQ9i1aMwuAUkWUnky1eV0nLDG2774wAZeGCAiEAjavTlKD3MDK/LLRSuGSUAjuoTZN+ziuvtDb9Ly5Ip7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZiJCRA9TVsSAnZWagAARvkP/Aq238GmWpSiQ0xiyqcd\nc7D9IV+0Fd6gaxwtt/VOVwGUswU2KidR1FqUfH2SYR7d3UzlMRk420rWE8g3\nFRcAwcUCnH5Mnjcwk+FXx1ueMZxezML5FrYtZXKht1oPOlPVh7XL+NJYq7M7\nHR3kA6i9LuvM++DJJDWdwRU0PycPEo74ELT5vJEnoHXXb7k69FPO1fABIF3P\nh6/rkL4NX+O2DTHxUmdzx0Z5Fg7ns72Uo6BNn6m50B6po69+usEQMhy+Q21w\nNZ8NBZcyWzz9fFzEYi23gdd5gQFBAojvpLqT/Ht/TRKUn5d249x0F5+EQECc\nsExHe4yCxOnIKVParR1NeivX1Btgncegzvjv6RqPf083jEwHx9wpDwKT+JNH\n8uWypfQfNEWFQ176MUUhp+3X2A2lAkM7NV/5UZjZjP0H7uxbOx3BfAOKdf+S\n4TjSpsafv8t6Jx0JlC2w3SLr3Qgn5fYqxrrJWTQOsMiSadqaWKWAdpVYGBAX\nIEAbeCu3wo11lOZZ15MkkOJFYMUBs4thyrR2yk9lLPH2JyATkua9urM1vxEK\nFKMvjd4rYGW/RA0WdQxcvq93DY7XfArhPhkWaXIla0e444SbAXzDmdC/70U6\nbmg0Yy82qjS4PUWRlbfV3AqQXwdOsQ+doXPs2i2BCgR1cfp3Psob3WvLHcOr\njvzQ\r\n=me5C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.05d5facc2.0","@material/rtl":"8.0.0-canary.05d5facc2.0","@material/shape":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/ripple":"8.0.0-canary.05d5facc2.0","@material/animation":"8.0.0-canary.05d5facc2.0","@material/elevation":"8.0.0-canary.05d5facc2.0","@material/typography":"8.0.0-canary.05d5facc2.0","@material/touch-target":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.05d5facc2.0_1603901577188_0.3059509951708279","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/fab","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.291b3553d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d166b057d43efc3961a02aa637b1b4ddb810078","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.291b3553d.0.tgz","fileCount":18,"integrity":"sha512-so8cn4c/kxXJRdvBuejSVEWa/Hwf7EO0Sg/fSvUpEqZuoKHg7pMmHMWvhXjD2Q6xhReE2fslZh0YZF7nwv/w0w==","signatures":[{"sig":"MEUCIDR86IU5DTZasl/+T0CTUaTCz1bjYsMOChexvRn+41o2AiEA0vru2UOpmAEGfl3QWZoq+gqwIyubdy3CL2+X2vNolOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma5KCRA9TVsSAnZWagAACoQP/3ravJtMh3+pw5NvQ98F\nW2tl2jIBWs/AhQKgkSXzDZOBTOyFlpNZI41GdUvHsR4PpOZbizpwNsOPj0Fr\ncPfwgaXBoPbqXeQB0gu9gv7fejl1kFLO/jOS1GJw2klsxckQKuC9pRkY1seF\n5EFzptUQf6rr1bSkciYivUslVbxs+dUfAWlYABtjXAXq4ed6xAtrXnzaScz/\nxt4UQPZaz4qg0CDuDJkkVY8C7Xzm6J14SzYB57duCdPZBspAmEiMxZdO/lTb\nOarnFO1/On+LC6m2K3H5lr2BL3gHhPNHG2niQEEntdUD6snrjrFxwekxrlL+\n/uv67SpjdA1OX7m3elXmdrJWd9PB/jTiyQkQvxLGWkcYYeybxwPz+9iNBugV\nRa56ec+Df2/lDPFzCOQKDrZa6YxQUYnBoAX452IzfYLzyVBt2Puc7wdOKSVl\n3OfHFh7VNw0DCNqxGVRhjko1GH3KFdMzfbthPpBS22hHzA4DbjdNtyb71g0y\nxgL2uZh1PmUBQCyqcGSJFC4ePhkxuynEqVCWhsGv/A8bidwHDa4ibG3FYQ8x\nXswc1RV/UQlNuUrJPb6lY8qY3whCh77GzTL+z/XlYmpx7mS3MoPH+0HWhmQ3\nmQz40gFZ6+LQhTazv92fLOfQdmnsrZMaMSLJ1t+FwVl/yyx0F/GSYCdlF4yP\nBHK1\r\n=25sW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.291b3553d.0","@material/rtl":"8.0.0-canary.291b3553d.0","@material/shape":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/ripple":"8.0.0-canary.291b3553d.0","@material/animation":"8.0.0-canary.291b3553d.0","@material/elevation":"8.0.0-canary.291b3553d.0","@material/typography":"8.0.0-canary.291b3553d.0","@material/touch-target":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.291b3553d.0_1603907146479_0.7383955784306855","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/fab","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4abfcddbb48fc517c0040acbf018fd44c86f8e48","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.dbc449b09.0.tgz","fileCount":18,"integrity":"sha512-8olskhAEWZ9udrOBim48215iCBIAZ1oHS4ziRc5+cKk1ksSU6LQj5m+gVCDjRiKeKythsKYjpWg7MlDULE3Y7g==","signatures":[{"sig":"MEUCIHmrwDS4YhL1BNNPzsvGiiju8roqp9SSA2nGKra5kFGQAiEAul7cssYjCayGrmL4StV4G5V3ISMcpR7sweCRlAMzSo0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbTKCRA9TVsSAnZWagAAtQIQAJqIEwSjqoEFGQMPf5r+\ncbIt6ITtJW/ghmeHDd1ra2xOKDzKmXJlk6lfZxncfcVHqLVaXhNwlBuER7ky\np9XkDQQV0B+hYcWj/+Mdzr19vvDDrSYCewr/OjCZNgQgYLG4UcFktLhtR12k\naApsvgvXArroo/SDGQWklfqDCb3atPjubgzvw8FRa1Czl+1P37NAVw/P8mwf\nFEJX3iLfxtwdruXjgBOBFPKfHwQ3KlHkULcnAJmOjQj/WUEbAsIw3s6MsDwE\nBY1ewVXwbsjmimV7KF1Why7Nm6yxPqbhV1yfLQ4WFCgBgqGuJPC0+LOPykCd\nU5KGGUKNRuyir5Sv3x1TT3JaXWOOrBvk0QfugjUFkxj0LZHHKcq1+7E+OStl\n2NOk9w9S9HoQK475wUHHRYSO0oOIKAidkQM5EeKOFgvmLzW9SHUJLgMvFiLy\n5t3xWpdGwPDcbTjdVJ2NpZpNo/04RtU8/5hba+gJm37qorqOlJ3cJQAZ1KQG\nGPkkkWu72RwnchBQBBkdMMp8d9lsMvD6CB9LJGlGdZ3HOBRuvnuDdhPBsCK+\nubqKnKVgJ6hiagFDsVMZX5aTsXaKePc/pO7H4zKpzr6gD9bmVfts4x6CVAmZ\ndu2M31K1vzWbj0wUURu37s781NAFKHtyFxc1lbCm89COotNa5WthaIjn/NyU\nJfQl\r\n=O1/z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.dbc449b09.0","@material/rtl":"8.0.0-canary.dbc449b09.0","@material/shape":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/ripple":"8.0.0-canary.dbc449b09.0","@material/animation":"8.0.0-canary.dbc449b09.0","@material/elevation":"8.0.0-canary.dbc449b09.0","@material/typography":"8.0.0-canary.dbc449b09.0","@material/touch-target":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.dbc449b09.0_1603908810056_0.6956874519764902","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/fab","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.4794b25da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24d8b061baa8dd809c4a2ce6d28a493c9083bf6d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.4794b25da.0.tgz","fileCount":18,"integrity":"sha512-d85J7Bzdx212GYxoMah+tGBgYIs3TuLvd5X5BkvGXjcWU3oItyUcv3T61GhUX2wil/sz1bZ+6me+GfLuUysUzg==","signatures":[{"sig":"MEUCIQDJXe0QNVx5vRNf1sixudmhAaNW1akSXJQ9ToqHq2DNawIgKeNJqO5OXJ8CjjjaW3ssKAwIigtezOlev0lTOPP9Va0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbt4CRA9TVsSAnZWagAAIHIP/2xBV+aR13jEJA7LFubg\nBQzl6M009k0L4HetiKnrM/FHyDWFAjeTIFdMCIPeNkzXRA9KtTJWSFK1YBA2\n3PCddCvo1Zi2Fxh0LSiZW/K4Yan5/6VEoNR/8tEkmbEDfaTikw2WvJcUfFpx\nfXvb/TOV6s3vfbDDhVdH+NYXvdUemWHUMWWsOd/R9MAPtY87+ElVUfnR20bs\n4QGHGhT85mO0HHUmYqJ9fQe/rJnx8FQoU4rmVmI1Nain4gHndvzg04At5IGc\npg+ceu59Mfr8BinJnUcrquy4I/8+hvkSZgFNBPIxWHrMctt95jpKDfo43wuZ\n0g7+xFYfXojZj5lJJkF1qzv2KSrLbcXnQMYSDVMVbzjZlqw7ZtDZCHQ6HFTP\nq5LlTRppLSsVS7o3QQzcXPMz6+TTm9Wlatv7CmP7li4VeuEwDFhZoK8jD5qw\nIv6LNsgvoDkoQcupc7xEK1LcdUwPs7qwmYcShaB1lg8upaX9LBUvlaK92OeF\n/8akqkvdP3CX6AgkTGMr1bYHPVeD49RAcLgMUSkYar5ARLfFDPtqeF8j/82/\nmb23Br7Y1fqRHps92CSK3JInzE2i7n/tdDka301mRusug/UlUZKGvCUCxafu\nYbPPq/X8v5NsEgwAcfBwSOEqBdRcoMkx5+UfMrUoOprW8cx7eRufzPx5gboX\nC1CQ\r\n=EYxF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.4794b25da.0","@material/rtl":"8.0.0-canary.4794b25da.0","@material/shape":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/ripple":"8.0.0-canary.4794b25da.0","@material/animation":"8.0.0-canary.4794b25da.0","@material/elevation":"8.0.0-canary.4794b25da.0","@material/typography":"8.0.0-canary.4794b25da.0","@material/touch-target":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.4794b25da.0_1603910520418_0.6710443649455444","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/fab","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07daa263c67081c8aa5026abe78853e95caa113e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.c61db90a5.0.tgz","fileCount":18,"integrity":"sha512-KyATrpD/KzUxaUbnDHOtUUDGqY03dW+n7jaWFdDE+IQs/PjGmtkxTn+L5TkDp5g8iuCXSPMh3yPvqsa6RT9/KA==","signatures":[{"sig":"MEUCIQDWF3TG0Nc092gA1nucC/0ymVEZrWoqHv0n5+kyhYZR6wIgBV32Dz8kOqv7x/TpdKGdqsY2WE3WmPRD//90Kfqi1H4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb/UCRA9TVsSAnZWagAAONMP/18mqXKyEJ4E9ZfVQdYq\nIxeAJx4pcJJ3sk3xH4kX8y7XHdCJdi6qPJoKpp0rlpBl3seSgkcm5fLd0Dru\nDlLfZpvLUxNdq3jYFT5uabsi/Uv84VpZpJhXtUqCEZHy6CVUCuIiAH7uB9YF\nWL7abjfrEO3VszcTgEtwwOMTkcBAbfd6KTHBJPHzV6Mns2lX78fDAD3V7xR4\nEFzr7ppgAlWDFE18YnkRWV9GYSfKZuCaDKzeGJ1oMijQc7/A+Js6kleUkGGH\nr+EyJJNikYfHMkzF2/bUbalU6WReBl8/5MxaFP9hbwyD41A8+pPIt28d7qkC\n0PbPmJAZjQwbKZGfUvSeS/d0u67ShlHC9AQmNdqslhTW1PgKJ/CnVsygOths\nZ7b/jMyGMAs8JnvcSYDj0+GfOoRykV3RFv0+brjuD0J8SmNw806Ts8PRoOqu\n2+gfaWkqSlTRS2Y0Pj19gry0JUdbqZgznMaR52nxNROhJINaTMPAwv65uNaD\nUQ90y9POLstWp/os1EDcI/upmzhsqwIgPnRp/a4NOh7X1LPxIA+qnzmNXAqA\nM9if9ARZ59RSe4LifnPc1uaNHXxPchE96ChS0EzMxmfBrqKPP/PGYnwFKJpu\nIVFxHrpswqpisirswMijvwxf0AZHZl/XkkegApSc3FsROGG3mX+9hF3XbWTn\nlBCQ\r\n=gRCe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.c61db90a5.0","@material/rtl":"8.0.0-canary.c61db90a5.0","@material/shape":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/ripple":"8.0.0-canary.c61db90a5.0","@material/animation":"8.0.0-canary.c61db90a5.0","@material/elevation":"8.0.0-canary.c61db90a5.0","@material/typography":"8.0.0-canary.c61db90a5.0","@material/touch-target":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.c61db90a5.0_1603911635602_0.6078216898273647","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/fab","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63147873ee2646413f95ad6f39f8db4775e4c41c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.6d9648ab2.0.tgz","fileCount":18,"integrity":"sha512-oCgAvHUsBdV9ixiv14DIppsBHdW7c1lZpuC5JOL1nuDYvNwzbmjATqR0sLoPdzDIKM9xg4iNbn+1fUO800QaoQ==","signatures":[{"sig":"MEUCIQDlvzHg5m3es2rpCp0LKO1W7kaW0U+xIE0MRd8sUAGJGwIgGLcsvYaM7Z6kayq2X9ne1mAqLYIzbJFuE/0jKi3LHH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmycTCRA9TVsSAnZWagAA5WkP/09dJzuQ9sdXekwoNyTH\nCU3Tnq/cQKe14g8rdUCXrUXSi+i4AXxnUnVP8MvjwpXjZYQh3vQNw7XrHS8u\n8YYfPdsgorplWh8k+Q+q3qEp+gIKFXoaVMT9kxxgZsH/xslZDaCrPhCsRnbE\nECyLXWtPQYwDvlRpPAlnV7tY8stCZZI1F1BxWx1f8BRLpFwV6cPzLI/woPPI\nGmvdxhhw0BaPOkvBjG2K6d7NntSyhVh7uhtG6SiC1n39DN+Zknt580qa1kj7\n8AxYX/75LtrxjE4IXKW1sax4TcaKQTGsodREVg0INEolmN/ghnQu9a9nGFjz\nEEgUOmoAzXEtJ0lkZ8NtMk6f5lHERBowyB0auhQmFlUwUP1YjwnjyTJ54l7G\ntKvl19JOJER5aLoZJCs2Q6CdmFlZuWdGVcDaGNTDSRv0ECXNqN7Ow8qMqnS7\nMJJdqswyKDnKQBcRaJ/YDvM1P83WI6NtqEaM/vgkhaouPN4tzp/uOFV3UcYR\np5x3qqilugzgCYh37dxAa3rpOH29KItNPzWw26zzgf15JZi1sw3wZg7FaWrU\nGApwrhybFAUQMIqmjL0kXzXOL5v/rwbV7oWGgSTKMHX6hFod6zZGkFKHXinb\n4Do8pBEIU+wDD3IivpAKRvmNHgvkD9W5BJhwNHWZzP/hQU1qwo5duWPk6RI8\nRkR+\r\n=oswt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <span class=\"mdc-fab__label\">Create</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"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","@material/ripple":"8.0.0-canary.6d9648ab2.0","@material/animation":"8.0.0-canary.6d9648ab2.0","@material/elevation":"8.0.0-canary.6d9648ab2.0","@material/typography":"8.0.0-canary.6d9648ab2.0","@material/touch-target":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.6d9648ab2.0_1604003602810_0.002954899822217527","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/fab","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.5511c5254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a9bd6c44ce5c3c3ca8c8aff348cc0ec1e7730a6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.5511c5254.0.tgz","fileCount":18,"integrity":"sha512-hT+mGemQlKBv2CzZMOim7AYFPAGTX3GrjqCzWES5Wc+HPE3HwfCqNVQkkt1Nvk6IEhj5Y0Vbtf3JzhkZ+2dHeQ==","signatures":[{"sig":"MEUCIQC7r1d0W0NgUKKJ3HbYzusIPDQbqZOy5+4udhatZhbyJwIgRvO+E83QoGS/W0w5N8s6pBUzPvZkpY7g3sB+hs8N5CY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFTaCRA9TVsSAnZWagAA7JUP/R7P9aDL8hrCM+2C8OvO\n9B0H/hTsodEOuiqllgUhjwU0zuPNc9R9cCUQA+Lqa0DgftVHO8cE1tr0JhnI\n8e7On3Yty35VisA16IymSIMSF2Xnrw3NBleheidwsRMv9zdks5wrqCRuCMjf\nULoipk0lgZQP+3A2BEG3/TrH+8qs9Nk57LHIFoKWE0ckT1cGL+85e3yP6ezl\nb8k+oMpr0UhM6RuzagX2ik1dsFl50gxnfXjl02sAWqVYDtRlxPNF7mhww7l+\nBeqT3xPbW8fEDySqI/ZxDu7hzpC0LQj+lV+Br4Vy9CmGggJtZI5ymZsFoc2M\nef611VUBVrmD2Ti6oFJ0kJk6I6iVhCWXA5n7Puuv3CdjLsPdkJEvVAF8biqf\nqD7y4HExdlU1egDfFDSYTcHWsJlxvREs1k32PS1TLKufvR027UD+zGEhfxQ+\nb2rC0BMdnaH3qxidaFCxmPYgW0du6pp53GUyX2ettcRPnyyCZ/Iu+V4PE1j/\nf/1Burj2VW1XqFfMrAB8LpTfpMGBcHuA36/o2FqxkZGMd5VLzjn+QdbnKmEP\nbbuES3BpLWlRFoKHIX2VXkaFKneBu2PvOzQArUkSzO9dbpThoBfMnXhfkFto\nFxAHWDEd9+kgUPlQOdd1D/syDe4w2jvCxf458EvxLEeDbnMSlVl/tNwLy0Hz\nLDR9\r\n=15f9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.5511c5254.0","@material/rtl":"8.0.0-canary.5511c5254.0","@material/shape":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/ripple":"8.0.0-canary.5511c5254.0","@material/animation":"8.0.0-canary.5511c5254.0","@material/elevation":"8.0.0-canary.5511c5254.0","@material/typography":"8.0.0-canary.5511c5254.0","@material/touch-target":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.5511c5254.0_1604080857538_0.7634946384150771","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/fab","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"366f33977ac3a021eed6644504b765fb68a4df4d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0-canary.bd6e302a4.0.tgz","fileCount":18,"integrity":"sha512-IE9njs+Lq2GV8qbw8k63RHTsVRTkk0DUxYneYndXM2z0J2X7OzhNYY23Lje2GxPk+RWcAx9jfrUPoXdcx+dNsQ==","signatures":[{"sig":"MEUCIQCB0JUECbJYZWUFAFEQAYDw+KjgEZQIibnO7GYJsN+55QIgRKB37DvoT3Ua+5ED5a9BcBOT2DmNbKqQI5dce5wzL98=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDxkCRA9TVsSAnZWagAAu28P/RCz/QSafcYEZJrJu8DD\nGb3wvetGAyVLVeHV+MbFQs0PCDFe7Ivbj5pZLBnwIbHEcI7n+JMbPji3VhCn\n8SpnUCB2QIudG/d8rXk2CkI4UVQum80GjOXRTqILudiSTyNKTcyIKdcT9hRu\nfe+KYmbHzvBgDzeItrKjDhGX78iQGirOT5qPCAVt38t1qm+5KP4FBlKvAjLo\nJ+mA6Px5g4O1uKYgdar8LZZHN+H9puJ1xIpaDixPQwBpRjhihLQjy6+yZ/Lg\n7tEmeNnIMUgx6zeXfdYH5BgIQpAm8QOKae4rF6STXVF03lCmaTFT82zUW/Pn\n7b6r6r2+1HfJ3KDURk9riLPpqNyuPBEB1KCHAl082SLLM0Ocn7C/ebCfgU87\nHmdfTVcC5daZv4Q8TD8KnHyuZfdrFe7luDrVAVBcLs/3Wr8UBS6Kp4Gu/a7F\n1X19kk3h9YSSl8jtjgQgUaHeiFyVfXYzqE1gmT+3O0LJgPkaePAKEthO5ivp\nfSBTtL8cEFT8qjebX3ofXSt9OZFFQYWaFv4QLZ3QGNnP8JRLQq0aI4Fn8viC\nfDGeggfjgvwgFmZuxRyM9Oq1JU/DxgBCf+bhTEosyGd7Ajr4tKx/nxDYBf3q\nIXVxcB+L7tjguOr+ISPlN902FQK4DQSPa1aTdfP2WEH5BxVZnpa2yx7BF6Sm\nn95l\r\n=cJ2U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.bd6e302a4.0","@material/rtl":"8.0.0-canary.bd6e302a4.0","@material/shape":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/ripple":"8.0.0-canary.bd6e302a4.0","@material/animation":"8.0.0-canary.bd6e302a4.0","@material/elevation":"8.0.0-canary.bd6e302a4.0","@material/typography":"8.0.0-canary.bd6e302a4.0","@material/touch-target":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0-canary.bd6e302a4.0_1604336740073_0.05736381293916715","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/fab","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bbe967689985d3d763dcc96c9bca77ddc861717","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.d6b5cd418.0.tgz","fileCount":18,"integrity":"sha512-fjtOUA4igZcLsdKOQsTAL/9mI0E5EtWp/3rgU8mLKJnZEwYnw5L+cOwGhg+kd116G4W8+sCkoYcqN/k6HRjKqg==","signatures":[{"sig":"MEQCIHJ7ntB1h5HG937m4lJ+LGOAB2WOxHYQoXqvXBlfAUVEAiBJn7DRNlNOOspnkW0c4LUSipKLINPSlNJmBoRS8mXWCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9zCRA9TVsSAnZWagAAhmEP/i4ZpfzKIakeCyExgd7q\nR1zeIX7bC05cf11v8OSgLCkjsgZ5uXGZvc3yFaHtK1034RPg3TUu2FNUsnpF\nAit//rXzjsMUPsoJ39oi2aadUmgmzXA2iSI8rHTU/jMV1F0uOV1z3Kgz7wdw\ns8IthX1rpHB2bxoDr9Fl2r0YM8MhtJXNvvGOuTszQVou8UVojg1gjkWEe3zw\nvPj3mXQubg65g9fIBD0TxejT6sd3OLJSkMQOtYdnoVlLedDfoVo1f/7iC+KY\ngGi6c/ChQEtfQjrBq/XC7OmPBpKS2TSukFT6uAWY3WlMUR6JXTJ4IYNG6iA2\nH2gQ5v1J5mPL8qp6jq2zdk36NfcKwTygKIvSHXTR3lpWvoq1zw0+aG5SMVUK\nF21qbChwF4vO8fLSwGLOurkGWEOcvQ3qbQ7aQSnDVuG1HOtLChmyZs9WkzTD\nrbs2jwtWDr4qgmlS8cmZW6zflos7RAu0vydQiu5zA/ZJHSgAKrsIWGy/Fx5w\n2DdZYAwwPqHK/e9u1yb7316/H/IVFyVUG+jzYlSu3FOquEe4GkOu1Qir98jc\n4oAd5OmtDz+ZRlmckNou1bTS8l5ltpk5wwLWO7iXGHG5lhQdzqjXSrp5PgEn\nT7DnJhoeKe4YBW2L9aZxaR/ZDi/kXpLsNIFB6slHyfrTe0PEmcX3r1BE5sZ2\n8Ju2\r\n=kLAo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"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","@material/ripple":"9.0.0-canary.d6b5cd418.0","@material/animation":"9.0.0-canary.d6b5cd418.0","@material/elevation":"9.0.0-canary.d6b5cd418.0","@material/typography":"9.0.0-canary.d6b5cd418.0","@material/touch-target":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.d6b5cd418.0_1604358003379_0.5393859250412198","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/fab","version":"8.0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@8.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddab596e9c52d3c530d68812e2f9a0842a28f196","tarball":"https://registry.npmjs.org/@material/fab/-/fab-8.0.0.tgz","fileCount":17,"integrity":"sha512-WwWD7eiKsiX/Ys+0q+/0mUxdPdgX3ol7kpQOaCjHwNsircpe4ntT/BjXsNvsEl/S2sBOy+fC6UCxsx/UP6Djcw==","signatures":[{"sig":"MEUCIA+SMqiLZU/v0RAmwVIQJ7+IWvRKXkbG2GMVLrxtK47iAiEA9nN31dkyvoiv6cEVWIzT7Tn8QV6bp/Yg+ej5q1R+K74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI+FCRA9TVsSAnZWagAAZn0P+weWEoXcIq7ZqOxVcvwz\nVSQnfPrDONcMaqP3agSrSLLO7OeWFrvLHkUTjoXl2DYNJINVS9UDhdUnDcYs\nkwWHb2IBPaODhaaYbkpYPdXSXZJRT8sk9GbyeHtX9iZBvYjJDrYLFxF3etA0\nMVjDUoLR8PQXqn0zKvmRXX8E34QvvYUTIYPYuJ/gdj6SkSYH9TfsrWtlMRt4\nO3NGXvC4MImI5vptebgnWJ/zHW2zpFyKCe2qo1BSZxKotSuxcsQeEDXs1SGR\nbCsA/WQrhL5yzTxSB9cIQqvjaZVr18kXlnYeepR0TZglnVIMPECHwTweX92u\nRVM8Epw1dX/T2dF6Uji6nOfaRRikJpuBvXIHCD5NhaNuxond6gffLfmedlEf\nL9SjgSH5hI1c5BHr4dFoEpLEjgiiehkqU3ysR2gviDOmI1qLoqlL7qwlD2Az\nfG4cv1MDQchAtAh7ZVsETW8QkU4ZYowqVyjK0FO/9hwN8e6K70yBIUEfhiC9\nlcigOC9H9CYWPa6eDjtvu9OSRVskmj8NY28AL4V+hxvKKjXeKXmqWpcCNBD+\nuA7GM2FtvaeMU1JSPleh1d8nHQZ3p1Px/phiwATFklokFxoHv+kE4KQnb8o3\nx5bcOe1pOW0T1P6T0IX0AMd1AbP13TntEdM1fypmmLKERI5la0R5g8nnY1sh\nvELO\r\n=h3qK\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"^8.0.0","@material/rtl":"^8.0.0","@material/shape":"^8.0.0","@material/theme":"^8.0.0","@material/ripple":"^8.0.0","@material/animation":"^8.0.0","@material/elevation":"^8.0.0","@material/typography":"^8.0.0","@material/touch-target":"^8.0.0","@material/feature-targeting":"^8.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_8.0.0_1604358020853_0.8284633770825625","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/fab","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaaad75dda05ee9515f74ceb0c9e2086b1c50d70","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.fdf9a2634.0.tgz","fileCount":18,"integrity":"sha512-5P9vQYkLyXhrG43snx7oCn0+wSiZZq2QDUnqrR5WMcy33pB33/716wGBUplRNVX/qehvhc/qBu8pdojvi9gnHQ==","signatures":[{"sig":"MEUCIBkkLp5SotealgZisFDdtjq/JdVFVRRHR9hYFxMV9cfPAiEA2n/MsqgT9gKazm6cQlau2GLSob9l54s/D+h8bJf1XyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeYjCRA9TVsSAnZWagAAjbYP/jRDkVPGmux4w9orMCs1\nyjBRQDBPZyMu8fCM2RCb/LsUCvMd5NlW5pKS8TwjpRhO18tZhJ2C25B6Ab4P\n1fMuL7fBvPBs5BGWnCg10HfbJ4rQb0BnjYLIKuORXrHo2MaVlTHvKzTF1bw1\nB+VkNnOO/q6kQ3KATOoGdQqmZvW/Ce0BTpoc6as/SJ98TsCHBXvGsy2dPMi5\nbHIGN9EcB9sh+F8JcDH6xqx0Uj3ZhtigqZY0QFWKUDv3uKad6osq+6DBlqPM\nw1IR4FTdy2kRABwl9X4/l/c5xad9EOk2zoFtSSKCRHYmvd3yqFtUHF/JUcDW\nWIWTLW2D6pzL7xMSbBtbjdaLnUmNVu1Zj9AeKFdA8JeVlZ2mZrFlQjhCN1vD\nN9Db7AUlqUIoixDeyXEl9AHbfcHEKHQhyUoZA1yqYnMjoGLYVWTwVNtWNaKB\n8/8ai4mNffNbBbiMw3j5r+gv6m/dIlAwMY3C+FFCkDAzyU2ViJE+KshB6S7M\nFxFCgGpP/5Z3b1cD2+TEeAyfqvxlWyo85VCwxv1hAvymFLtr+hYw8YDHd+Rb\n8eXoxkpw83pCHaE5GoQ6EtTWwQrQ1YUSdNrPpzMJvUs+JLsa5TotaXRo1+jz\niX7Fy8lwkgxfD5vOUqe5jiZVUxuat7yFt07Pk9HsC+kCIMZ0YrD6SXXPQnr0\nggQf\r\n=AGM8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"9.0.0-canary.fdf9a2634.0","@material/rtl":"9.0.0-canary.fdf9a2634.0","@material/shape":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/ripple":"9.0.0-canary.fdf9a2634.0","@material/animation":"9.0.0-canary.fdf9a2634.0","@material/elevation":"9.0.0-canary.fdf9a2634.0","@material/typography":"9.0.0-canary.fdf9a2634.0","@material/touch-target":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.fdf9a2634.0_1604445730877_0.2771164359963083","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/fab","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7dc1e30c4eb67ccbe3de7b2288a535f0c6070e1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.4a86f30a0.0.tgz","fileCount":18,"integrity":"sha512-hj+rTYwP196W3IAqsj8eZw3r9jSgIC/MnhHvmNJmODwX0bb2jOAvb5yJU3zVCjn0Ka1ElTOdhKcmYqUCova+kQ==","signatures":[{"sig":"MEUCIEgSththY0zDDCwmlSjMIAY9uNnpd78WSCmeOfjswP3hAiEAoVl78VjwTOBDOo1ASCCBcEnqE9aCq61+5KSIIO02+/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeexCRA9TVsSAnZWagAA82QP/0Qqfrr0yuWohSalrzUY\niINPsMJFP/6P++cFQxwUtkKQMTMbwx8MhKDyGirudRBkndjHcg0HErXY7Qs3\n8egwiYbjTtt5WRqRA4Zra9XUe8XheYwPF4sQINj+mzpa126dRUyV1ct8DoLc\nh77tmxfMvLe6pQtDqi8/rgUQDpOUyEU/eDjaBvvAY8ERihyM4WhO22ShkMov\na8Bz45K0NkRQxeLS/wGYmU1SbgTg6AKtIDQYFFBLpyAw5Wqene7VxBfyJTO7\nrVfrKDwyqBIjjr9ZrrCUnoHtkGPynoa1OS4TTKFWxG6014b5Al4dQTfOB0NQ\nBGxfpxN20ygZkw7mcwPmijGay2bU5ffxpM6NSrNNTofj8fDpXgwugQV7RFSu\nYaJ32fkdPMem2BR400muaDab8g9lUds1QmQXGnfPtKyG9WaMqugOILPf88YR\nXmXr9h91C+RmFiqPcB4k/I2Erl1pkRORNAM2+3CtTgzfJU+5CfuDFI9P1Wf0\nkDWkEoX5kEDg9g7y0LnzZhgl2DKk7pVV9l6QfDrFSNDXQOA+AeLW/aUeilED\nAvYFQXULeUb4YNodlsVZoMHbvaYq8947Ett3T2IUowOuRQJ+SaZmGyw27Rit\nj9AH2chVXhDrVpCPuxEHAKUlCcosh3ouFTAJ2LAzdJeCRVxOdc/0vYsnaOqn\nqKtr\r\n=4ZLP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"9.0.0-canary.4a86f30a0.0","@material/rtl":"9.0.0-canary.4a86f30a0.0","@material/shape":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/ripple":"9.0.0-canary.4a86f30a0.0","@material/animation":"9.0.0-canary.4a86f30a0.0","@material/elevation":"9.0.0-canary.4a86f30a0.0","@material/typography":"9.0.0-canary.4a86f30a0.0","@material/touch-target":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.4a86f30a0.0_1604446128874_0.1784172214377715","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/fab","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00bf20821df659e0444210ff05c74ed24773c498","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.fc8b045f1.0.tgz","fileCount":18,"integrity":"sha512-1HHoMB6LinXI6Xo2An3OjhL+Tx6su9xcnYqzr9/0dMLjVqRDs07vG4+iWLwJ14skImaYBOxaupYjXt5yhTS/3A==","signatures":[{"sig":"MEUCIG92QehowxqQaxUuD7rtsTZvEVFKEdns+TsZa9hxceknAiEAqs5OVRWSGxmcui4TR2232dug+IELK7W4iFv8V+J/O2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoenPCRA9TVsSAnZWagAAX+YP/j4j3R0sYcMB5bd9uRJW\n15UfGuObEtgaHmDB3DIqYuZ7b3sfB9jv409JA+avzL/yZoAhaLW7CC5+xG3J\n79XM9HJwt2DEOF/FV2JuIFBt/7dqJ9G2v7vNb7a1rK9Bg3+y6Ufd2IOXauAG\nzkZPr8mHTiFfP0bsfekgkaHtW+7LWaWjXM5ntzLEgbZ4VvKqQjfys5c6Fd3p\nXCzR/5liYthPNSDLDYEOoB0l0GjpD35Rgx/weUNvVtkNGQQbD0acPSPO9DWJ\n8g+Xyyz9YMsdQOUL4TKL19P2SRr9AGTE5UNALwzPcPMkrj57DsnaWTKkAu/+\nMfobfeKcYvogj/Wpw24b4Yu70otOWDOZ+ROVEfISNTxYLykqaBVJHzA8eXps\nmk4JK7xhnWweQw7xqIcXOC3G2rGjcl+TFLtUVoItAe3WBK6W8OUuGY4xDoVF\nyFfid3YOeEZ1GKoCD5IRyzSWx0Xf2fao82rNJkwf3wCR0I9b01akgGB4b6j7\nVnfRpHPf/wRnjdrHLURQxV6YkOoGyFpzJURyYWQ7siNz40CtSOyYUKrCnQID\nEvQOLAH3hXurCT3SXQAn/vJ8MkMgdSD0Knh+HBafIrePqA8UUZMKUFc4ZES0\nB1e3XWk5VdIq7wvBsHL8fgUT8Phhhxu7rkJktSOTDvv+gpXv9u9lmm+R+3n/\n0Fwf\r\n=Xna8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"9.0.0-canary.fc8b045f1.0","@material/rtl":"9.0.0-canary.fc8b045f1.0","@material/shape":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/ripple":"9.0.0-canary.fc8b045f1.0","@material/animation":"9.0.0-canary.fc8b045f1.0","@material/elevation":"9.0.0-canary.fc8b045f1.0","@material/typography":"9.0.0-canary.fc8b045f1.0","@material/touch-target":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.fc8b045f1.0_1604446671135_0.01600555777590351","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/fab","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63ffd1a8c00038680f9dcaea664d611836bf8c27","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.a0b2db26b.0.tgz","fileCount":18,"integrity":"sha512-2JpfO/AgDXIBu1UBRBRwUzm4JCgyhrJ/JrrIaV8ICdFEO2YVlAVoul0cWCrddBy++88E2yqEYOMYuf3Y4nSjGQ==","signatures":[{"sig":"MEYCIQDX+oBNnT+9kkiOHda7Ce87q6+cSlWIBMn1An+y0eyDiAIhAK+13x+a3wWDgQuTdtG7/7vyryqI+GMKUbitbV70zjJK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofFYCRA9TVsSAnZWagAAJkAP/2mBv2KoL6Mullpm4Hyu\nV9m5739A9J8KHmcRFrnVt37m1XiBqkUxOidvd/80PzxoxQvxQX1E58nLyFvM\nlo5oqjBP+kZ8mrsS0wAz1fk9Ia1FiUyjPX6muV4UpqvWOr70Zn393I0ezKtV\nmvZi2QvnxHKOkfVxdxg5OhVAIMu/yjlYa3Fea6xRRKpe7g60imMe2Lp1OauL\nhe1JzbXGIsQIM5Ba4VQLUC7GinhNj4/btxV9PuNJPqle77c4kW+TqGGbtKxo\nnYeHXUbR99/bvAQM7KdxRpe1oxWIx8CPgkjHp9ctZ93S89uqOxxmlUiGatu6\nVas1z8Ze3lCxUoCkjndKhZbpLptwxKGVTyQ2C7gKvXpiaMUicgumIXT2DNFc\nNhVlu9qTu7MdxwXuVuPJkk33rJUnC8t98fuO8lU99az200kdvlqAuk1TkLAE\nbYw6Wz2jV/5sbs7QMKZlZD4BmeSXZiQwzqGxNvAQWf0U1MX1Wn+hIcJZv80M\nPAIYJqakrp/Q2PYVqYm+RZv8MJ2kcfIi7fNHGv51ECKWJXSbSuoywFOc3hvp\n+U8ljo/cimjyIkGlrODOaWff08RnT/o23E8SptR4XhoE/g+xqAZ727EenNrK\n1rZIUleUEWWpa1BXHJVffv50KgcQeNW+1J1FEaVgCKBlfmVhePIWpg4LXU3F\nh5x9\r\n=K8dJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"9.0.0-canary.a0b2db26b.0","@material/rtl":"9.0.0-canary.a0b2db26b.0","@material/shape":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/ripple":"9.0.0-canary.a0b2db26b.0","@material/animation":"9.0.0-canary.a0b2db26b.0","@material/elevation":"9.0.0-canary.a0b2db26b.0","@material/typography":"9.0.0-canary.a0b2db26b.0","@material/touch-target":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.a0b2db26b.0_1604448599660_0.5192442034343008","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/fab","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.419e03572.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4472b8954f93fc5da5f06bcf379cee191c57f9bb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.419e03572.0.tgz","fileCount":18,"integrity":"sha512-FFTKnnccwuLPuG4ytojFeZaOIl4gh6cee85OKR8aaMBf1j+VN7REDJ5I7ORcvkdcJOP0KvdEhuGrvxc5C4GCLw==","signatures":[{"sig":"MEUCIQCBCyYGobWkL3DUK/2cK2rXVpUFaQmywEEPyMviNLB+jAIgfrJlXJx/jqxsvwVkuLJn+vg4SPtzvTXLmXtQ5AFEhM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogT6CRA9TVsSAnZWagAAbhEQAJA4bwImv68UAl8VKT1W\nnBhMbMdKdTGWhR6jZImmyoj9DeM8th+klyFDcpDZmJra7Y9IIxjqpnJdmSzc\nYRCQOnW7VUWUPbC3yL96b5EQaN3EPcvnIZYGQLjoGYqHBz7iB/YkUlp3FW1Q\nJWZB0EMHxgcPrkAqWJAPuhYmYrpRQffDGY+8TMjouZqJNWEgak6JCdM2LcIb\ngvzn5CFjhZADCoUcjd57VUBxHUduY5nd4YewSxSSrKqjI6vthK4joSP+euIe\nAim/Hs4NF+NSXXdZP8s7Llc9uA03GIG5IXGV3mWAvlbbFcqC/LsDOty7FWKp\npR1CHLAkPXReNpsRxrvPdk0yr8XwVvXnAK5LrHbiednHsuz1I6XtU4m+3bXB\nfEL/+RQHE38zLG7BIqChSZ6RQAq3YhRZcbcaVhQHEonIfpULO3wYW4H5Ctgb\nOVpi8rncudom0sm3SXGpTi07URY2A5ISzasbQJCNPike8oYfbGEqdvYjtIz8\n+PKn+qk2KqR5LzBU4Lh7ffiIByGBv2RaGJ9cIIoz0F91//p4Fbi9JpLCcm85\nXIr9GHWdldnHWgux0DJTaj67ScE2kExD/TP4aEbwP3fedyZFdW6FN3maH2fV\nLsxFbkpcbnt+3x5n3gKk3WRM2llWrhZZhy4Egx+q+gBICEpsB5L4HQCPJLBB\naM/0\r\n=90sU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"9.0.0-canary.419e03572.0","@material/rtl":"9.0.0-canary.419e03572.0","@material/shape":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/ripple":"9.0.0-canary.419e03572.0","@material/animation":"9.0.0-canary.419e03572.0","@material/elevation":"9.0.0-canary.419e03572.0","@material/typography":"9.0.0-canary.419e03572.0","@material/touch-target":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.419e03572.0_1604453626492_0.950239625599794","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/fab","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.a432ad542.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22f320a224433c5c75864b92ecceba0ce52868fd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.a432ad542.0.tgz","fileCount":18,"integrity":"sha512-YwdR0dseEYJclX+EvjNZOFgLHxE46oGMgJd9F3ykJuiu4Qi1xgpXO/MK587jLIe/f6eSjvGwhCTII5JgKUW4Mw==","signatures":[{"sig":"MEUCIHpE6wPJGK4+uBzqta4qbqgfMxrm+HWMEd3xudPEp2ywAiEA10PU8KGIezfP460MAV/7bsNHYQEl9D09sX/DpB6AgxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKr6CRA9TVsSAnZWagAAk1MP/ReTk6UaDQS61NK+c+jF\nvi30scstUZXlL07Pv2OaUZRaDzFguD8K86MRvntcUlcxEJPWBGNOITcpq7Zl\n4n+XlNchqfe03XWdr9HQUI0YcafSvjFseuruTKy57kuO17Ndt2EO3Cn2p559\n8Im+b2SKhO/H7oc/Mpxn1DP74wYpYa1qrsp8uAhGA8gIwYz5QUuKpHuAREXO\nwcv43eytWzN1UEDh6oK4dqUbtFnpM3xLDX6DsafvEYCqH17OTF4z2pi+lYpg\ndRxDqrhGT3A9kNjWpPLtTYTw5RQfP1JUCHV1C1r3F6jUV5TBfwPZrplHtFlw\n1278i6X4CPlnkIwEDhGhMJSWe//zdrXBe4oxP3EX3p4jyE4uZmolnyRVn9Gs\nDM0g1I4sYhUv31yYKq8/5yg4Ig1/tUlsVRQtlXZSo1BS0ZC+17LnHvQSXPaI\ndRAqHLEYECipF/rNXt7PQa/KFFfqyNtUjGnKnDpmkS8vVC9ICkdFg33txOWd\n7uSiJ8CCQqtHr+xIjIz7P5s5oNUqFIIPO74f2nTa6tcLt4GdBmjpSQ43cXGW\nxt9DmyFjvQlBSg3MJvgncLyyqB8m49FcV4zBSE5nvJTCQYBAzbGjY8pIQR4V\njSlKg0UhVBjOzFAYyCD1egGEdbEK4fENTGyczcrJH0PQa90/Yo068c56dBty\n2j85\r\n=ViGI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.a432ad542.0","@material/rtl":"9.0.0-canary.a432ad542.0","@material/shape":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/ripple":"9.0.0-canary.a432ad542.0","@material/animation":"9.0.0-canary.a432ad542.0","@material/elevation":"9.0.0-canary.a432ad542.0","@material/typography":"9.0.0-canary.a432ad542.0","@material/touch-target":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.a432ad542.0_1604627193671_0.8321035857230383","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/fab","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aadbb603706d0f42a5a94ad6f20d5846d216350","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":18,"integrity":"sha512-lbKC8MfDki2H+JbjRwN15E+VzpTw1ZZGbJ5ysp+fGPm27jBDkDT7ojRkrZUpGPiOMelYq7+rpdK8BnPatsA3AQ==","signatures":[{"sig":"MEQCIEK6hVB+sBue5LFuHABjf2NbTb+X21UlrqOt/44hn2VTAiB3znsHgtDRFLm11fonaooHbEYIzy/uGhInxw8TgUcN1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK+ICRA9TVsSAnZWagAAM+8P/iAzcTItGvUi1kB5xkVk\nfzY1NLRHAB72TEDJA0c7sK1oTzYh6jxEaTXmF3o2iI68l/NZuVgX/bB9B9UZ\na9IvTkyY5kMf9ieRglaspbxV7maoIpj4deAjZEc34TVjoYCw041BhGozYh56\nw8krv7w4rQRv65m2AW9a6YBodKj4Of+HM0DrJgqfUCZy8qT4ddZr7uoy/j2W\nq9fHmLgJfl0pbIcaHgMFCL6dJpYaTzVQAeLJjnsxD6s1174cBcf8dVJMaT06\ndDXzoKt5MTM2lk9IqNff8P50JvwDdjyZtH+JAzK8uGULGqLXTXp2tUt+rsXL\nn/+Cmo5UZAFmroAsl1udh3BLm+eUyAIto8pP+csk5sHRoIbCZMYnu73CAGYt\nSq3s+WGnuZyJxCRh+dVwnu8Yk1sVgxc24t9p1RucoNZHtcXgQv/rR7bMXoP3\nd+o4F06K2oLL5dVeiGY/5cJ6TlDe3vdIST8MVsp8kdtR2KFefsibM+FR7c30\nBWb4moBG910TJSlk9lJVnDKRmEWBoKjzbsgK2lYAAO1ggWZ4vl58x8i5sjCh\ngzA24fn9no5eQReSxNU8J0hIs/kf/evOmurzEIzh9oikS0UUzc2doyg5FE5F\nJ4og3toi1qclFRHxCo9ssPfB52nIcVzpWGZj/5/gNQw5nkPYrK67UdWP5Wfb\nh5iC\r\n=qhYw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.e2e8aef1e.0","@material/rtl":"9.0.0-canary.e2e8aef1e.0","@material/shape":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/ripple":"9.0.0-canary.e2e8aef1e.0","@material/animation":"9.0.0-canary.e2e8aef1e.0","@material/elevation":"9.0.0-canary.e2e8aef1e.0","@material/typography":"9.0.0-canary.e2e8aef1e.0","@material/touch-target":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.e2e8aef1e.0_1604628360136_0.33252915340151756","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/fab","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cf34e703cc64e3cb5de438e0f959248b8f870d7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.ec6b68b34.0.tgz","fileCount":18,"integrity":"sha512-Zf+1hn2jpFPVI43SHXtN6zPLfEM9JWCI7V0tuIcnp0LLEyKE8s3c+34gpaISv4l+q98vxD/gIyKWZySPhdEpFg==","signatures":[{"sig":"MEQCIC6UNrafqG6CPG1wWWG+P40fvWTGL1imJ/GMjK1ANGdUAiAJ4evDfry+mvqRCsyRaBRikif560CUc/jfHyBQlMhDnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZyMCRA9TVsSAnZWagAA+QgP/Ax319EKGYMFlQCHf0CZ\n/0VMvPNvLbHmHOAW0lJq0pW2D7rf+RKtSAHXsEBCKlQbqoIWeXQ2b/wsrrQp\ndB9gibo8GdBGPsQ5UrpgwCK+8stdQUf3SwTx9J45ozBxWB8GhGNEHnvWMoVg\nggvXvAkXFDyze0P9Vqx777VKuOuVn4NYc2h1YGwIODxB4TUYPfLRUn9XAUav\nTYhNXimO11vz69qbbNxqO6fr7vFS3oNrOa4nUFiU5iw5aP+xpYG9B0f9iJmi\n08hnAEKdBODeFHuJNdMx3UiDunoWv6v4e5BYlv9YJ1VFkQUtS0MrohH8fIIf\nARSO4x76HOrzEOreLr1BfTYExDyrPbE9FqCRX1/vZ7nOhuEdvDGbiNT05BJ1\ni9bC7N3G7SJSyLZ9+2DrWVYN89mL9uFU/KDUNK39ZINoKcBGzFacGEOP3U+d\nw0KyHkeOGitqcJ2DmKkzD9mUf6G8MPfAax/+Kag9+dFlUs9whwJLcuT6sWl4\n7Yahkvn25RDBXKqFMzRRbJvgYcBvYZFgQYwgsXNsVhftpSIxZ4AmO5Botq6B\nEF+pqrhXB1hIURCL4wdPBYs9OiFkyh3IGcKcDYTMZF+gn0jLlryD/rV1nuIg\nrmjBYn8YdzR0NA6mX1ySznTTnG0t76AWzsPFXjOUt4T3A4G0OF2HU3Wv+YlB\nnD9X\r\n=7ZGd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.ec6b68b34.0","@material/rtl":"9.0.0-canary.ec6b68b34.0","@material/shape":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/ripple":"9.0.0-canary.ec6b68b34.0","@material/animation":"9.0.0-canary.ec6b68b34.0","@material/elevation":"9.0.0-canary.ec6b68b34.0","@material/typography":"9.0.0-canary.ec6b68b34.0","@material/touch-target":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.ec6b68b34.0_1604689036266_0.6325503495428688","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/fab","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.b39094d14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b46060223b9935a629cae76f6fdbcd9f331825c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.b39094d14.0.tgz","fileCount":18,"integrity":"sha512-215LKkzacuFHc00YgnkrdBWXGs/YsUP+/ihkGZew2V7mauMrKQ1MXhdcgsmFA0XGhA0tS8vI6kNDavGBtisQAQ==","signatures":[{"sig":"MEQCIFsstaPRjsSpq6AdNmTMt/7ZvRRgkS5BFGnDCOewWED1AiBYCkfg2HD/wYMx/+59/nQw9Cq5mlOBLxi2cYpgMDYOgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb07CRA9TVsSAnZWagAAHY4P/2gmwcUccIjjtOrpYXm7\nRisS2CBVDfSv2vC0M+TnjRnfmNlc1EVvqWfyrAs0ET7ZCYMRZoH+UEJ90JOG\nmwTbbc5gWvMYZIrauePGPUyskiicwIVGeH0Q62JJdtqFPEW2PAtbAyYM3CAP\nFT14QL2hdQjSEed0bYGH2JcpidMUCjlPj3MZIq1HRpYutjdKhA8/otv2z85I\nAcJsApyEkPZg2pTHTLwArT39AmgioUvYSAYA+CtJR80F50yva1lTZ5+4saox\n7n+JNpAv6p35khEKFuSLqHUtAEwl8v0ee7GEZtGoLGMak1jeuVfDSwyt8/sF\nMf1NZqFx5M7W9DaikLCwdBYRaOOqi39jY87GnnAvklu84WHqHgXtS3RXIGMT\nMX0sk8hEcPh8xr3s7lOv5bX7ynsS5YohzH7K9PLzDl7ZTYepHW4fqsf2rosm\nMut5aayzXzwQtutkQvuezCg8MrBnkrbTiVDf3twMvBXs81OsrUlJS5jfVImG\nh+IXPfidiUSqr+JMH1rkpQOlOpfdpn/s68/RBh+EMrEM/tEr6Ut7Fyo0PD+1\nzXzy4Cvp6lpKmYRpTmed/DOS8Ahuxe/9SjuYS6xVM4aCRm6b2FEJmfeBxyGu\nHdKiTN7zVxHSwMn/gI/dFVRk2tPYDh5xCdWNnbpeb76GzAK1eJEBdoSqO46B\n9kcU\r\n=XxFh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"9.0.0-canary.b39094d14.0","@material/animation":"9.0.0-canary.b39094d14.0","@material/elevation":"9.0.0-canary.b39094d14.0","@material/typography":"9.0.0-canary.b39094d14.0","@material/touch-target":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.b39094d14.0_1604697403091_0.03576645113450039","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/fab","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.8648b8258.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7fb929571b2fa2bed8688edb5ff2678ff5dc6a5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.8648b8258.0.tgz","fileCount":18,"integrity":"sha512-h3EFn1l5+OcLaGGPG2r3JciymOa4VMcYPHZy2947uqHZC7M86nARDrvDmtxJvNIdaxMfBLuUdXLF+aJ2qnOFYA==","signatures":[{"sig":"MEUCIQD1XWYkdVWBrt0skOlr5nmAKIVGoHF97iqr1AHIUEEelQIgG9zNrsX3TibHiDShcJdwoegkgHD+Dwtljb2W+GY1iHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRJDCRA9TVsSAnZWagAAVEEP/30lyXV+TD0aaGZSDBiC\nXTKAKvwA3j2xNUl9rsa1iLZ4Y6c4XAEtw1GdKer8fGqcy7zMNLlhWtr6bqGt\n7HdbBQuNlIaBWE8iMveMJmAlebLPpkYrja+/w6rSL1NkB9m2/2jTaRh9NBkq\n55C98Wvk/ni3pOgsfmr/2D4/ff6BEMfjtKAhnugyJOgdN5dbGJAVsJYSolNZ\nb1/MAGNuS5wq0S8OvXFvjriEkwfZWXDuhqzQq5Kf1onFC6f/IBcry5hUUVLT\nE0Hg85FBKWqv8Giu2yU4lKbefzxKNwVrfp8zkbYbqMG7U1V/3VGGqHxYE0DT\naeUqSIa1JnoKsFmyhySxpvI1UK1A8A0XyxSpJWb/RTx6p3IQ3w4g1ngxwZIr\nkxX6tcZuIOVd7iDbn2YjHE3PpApnjHpOP/z6/9h1uDsxips0qwPrfFO+2i2s\n4vFY5OleU4OK7k3+hmdp8bBt2WGCIVjuMWWNiW0rK0ii0ToxJj3Sd3UdCwRC\nckKAwhUNTNrQXhIqeBF/E/le2W1rDVzMtxCb04WnKODHumhhRVyqqWaOJOXH\nHPNHs674RysuWiz1XBLUREJvNP3SOrqA8PqKWi/CNDCSZBpSRK0NB6z9ziot\nNAOv349hcLtbQ2r79iMhqslCkWBE9URLNcOl/ZbGBkUskfLuWWiFzvJa0Ti4\nCQ+9\r\n=IbEs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.8648b8258.0","@material/rtl":"9.0.0-canary.8648b8258.0","@material/shape":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/ripple":"9.0.0-canary.8648b8258.0","@material/animation":"9.0.0-canary.8648b8258.0","@material/elevation":"9.0.0-canary.8648b8258.0","@material/typography":"9.0.0-canary.8648b8258.0","@material/touch-target":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.8648b8258.0_1605177923292_0.7717872882422643","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/fab","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e69e1ad523bb04826c5157fc4ce001f667f66b8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.240c5f74f.0.tgz","fileCount":18,"integrity":"sha512-sDAWp4w0IX1FjtlF6sWGKw3eo+SFuBzBdyy5PXV6GITsD15NanSuvMtm2w8jy1YxDiU4ntVXRVdaC1vdvZ/nsw==","signatures":[{"sig":"MEUCIG6iLHXXgUUhzR6AIZxa5G7t/dmaybGAs27WlSIVucsIAiEAwqAoFrMgMQbo4Bmb5184Bw/Xw6eSR8D+Wt71fmyCsyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZlOCRA9TVsSAnZWagAAPIwQAIF/Ezy+gsL5a1/y4O3j\nxTGLEtXObpIAEfgXUPS0RiMyWDkJLMyCPI4OeC06614uBGzzd/qnR+gDHIsK\nsZwpjmywe65TZYqlf1lC2moh4z/B9c1l6NVax13hIxozTgfjoiepz4HDWCYd\nU4CZhDkjN5J1hbpDH7rDJi+ZAbei1YtKX1Q4H4cYaGFZ3ZLlk2JzutoWkMgr\nh8YclCcPEPTe5X/HAerlMy6VOgUP/CEMA0ulBjCTzuRbke/R3iVDoDhdWP8n\n3+gAIcEgpGjWe5GOuIfrfBoSKqeuGhx+AWjz0hwdG9FyBykSq4K823SPILY1\nlprzgXNWKa1BqbWcUdDAihmsJK6NdDKhjhGW/lBd7OFy/vcSthi9Z7xQX4S8\nbp6WO1DO6LIm1/cfniFDfuzI5YFuXKl4MJpin6LWHo1xGReYn34Bq6ma9kwh\nc2+R2F+3B28JK8qJt94vBHvTXofhZqsfepBojyzDFXRyC6P83/+1lqfBRlH0\noK5lk/fMfIgWQuIJPGXOsqPYUdI8fFD+oL1+Pje3DwMdIOLvn080CrDfiuC6\nKomPhVzH5HVtPGLnX8N92jcJcxUP4MSOzqXhA0sZmEAw6QBJ7mlULluNFgcV\nKOpeQef+8TDJh/CdA9hBKPZNf/cQt/ym2t/DKsM9ZLkKhpEKegSDKXbu3KMZ\nMEcY\r\n=zXZq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"9.0.0-canary.240c5f74f.0","@material/animation":"9.0.0-canary.240c5f74f.0","@material/elevation":"9.0.0-canary.240c5f74f.0","@material/typography":"9.0.0-canary.240c5f74f.0","@material/touch-target":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.240c5f74f.0_1605212493925_0.8413730707298526","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/fab","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f92534359940e366e8983d0c62ee76da3c8d9ea","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":18,"integrity":"sha512-Vmxi9s7luggTvUtaN6c+tiPW79IDGzSLwJR+BYh/0fbq0RmfoEkAzacst1XFt1zDdc6quS+6KnK55XlKYgUyXQ==","signatures":[{"sig":"MEUCIQCrQT5OoVXSRYa1r4tSuTwa45pYaY8RmLr8NEboj3L+IQIgTP41qEDm8gTl1Nyb/ag3qz0qip70RdWjZJ12h3SZRzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssn8CRA9TVsSAnZWagAAGlQP/1dZ6u+zCUfHYF9DZk2/\nIDShwjRUD3qhBOgBj4CN4G13pVJ8ho9tA6XgC3N2K8Xw2vklIQSzbWiXny4l\nDTIJw3NjqURVL5wy1PC9yeaol17ZJ0fdaPJbNBS0dPuxlnJfy14GfpjWdIfw\nqB+ek+aHLR7KOvkRLc6eySVP8jchmqKVVbwG8WwPg8c7v9mZNTwYDQbiE6M6\neAIUA5/sQyQ8evJ62485VscqYfOHyKAcXvFZtkoTbfLJfDaBGJFjAx0TW+RS\nGopMqYzpcBzTRm6dT6yv4f4Wm9OftchBHmQgvuhhU9umoNwCsdYfs1vyneeu\n/vx1Kmq2EbP8N8XyCNHFQ+iJvQTu5hFN5ngsT6Rc5p5Or7rt2J0jfHdg9Kks\n7u8uMIEvOqfb2kKRcFqiH9Nq3R7FQOysrh9uRTU6gNjCZtl7YDeWw2nh82Wg\nzME14E2+pjKu1EawclXV0y9sB+2snI8V9g3iFU51dSJt5y2CKyx0noGFDGaB\nT5gb+JWn3r3LsFYW6HhpyxE14mRSe7QE3PpMIFf7Ma4rUsBo4T0skCmZOPXv\nGHdF8XkPbbVao6AfMxJdKWaW10ajPLVYHhCWEuF/seOjwWfEHMemcqYFOysp\nn25Ss66kc9rWKIrxOSZTc/+nNM4wTLKvbtfJTtAtniEpEodaj0P21ubRdA+C\nXkQo\r\n=d6Lq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.6cf6ba4f4.0","@material/rtl":"9.0.0-canary.6cf6ba4f4.0","@material/shape":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/ripple":"9.0.0-canary.6cf6ba4f4.0","@material/animation":"9.0.0-canary.6cf6ba4f4.0","@material/elevation":"9.0.0-canary.6cf6ba4f4.0","@material/typography":"9.0.0-canary.6cf6ba4f4.0","@material/touch-target":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.6cf6ba4f4.0_1605552635664_0.7905333104325345","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/fab","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c41a7503a21c7fafb32e656dd54b28a3d2ee9ba","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.07f3e01b7.0.tgz","fileCount":18,"integrity":"sha512-wsf0V8fK59HV99xMW7RkwQ+Fud/fdMW667MJH6Zy0aP/7WzqSDyWXV2lZ1x8Xs0Emf3lrBdVnKe3DDYw7oUUBg==","signatures":[{"sig":"MEUCIChJKhG307xIC4EPv5v04AWjilJJ/fHoOnF3FJk3r8UUAiEA4Eh9SjCwgC5j0hbcAZ68duv73P16Xr/i10MPe8hIono=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvMzCRA9TVsSAnZWagAAu9oP/AwaED9VRlf/IgZAFg6y\nuLr78sR7MtDODMeJJYnVcfhFAUGzZMlSZBn5SKuzbtMrW0eKPSAvD8gn+e4I\nlsOQ8kOAy9aU0O/UB6cDpIkqWzRQ8OBIPCgaPphXNqSXkZSOcI+rFGb8qQ7R\nm31wWPXBc+0gf0pFJIh4eNc1jbHESM6bAABZnpsiAgD/n1G47H8Gbi8uBKRD\n8zO58GZvFhu8YkXsP7/bBHf1e3lrbtcMJtW8Rlgx2KPRMFuy5TIMk0LZ4RI9\nSNhUgSlbtIDaxIw5dSCgsObQwFAUGKBBbD28RvU2yRtZs7hSJ3u5JbSCFVxw\nBlFzxwsLQqtHUcAO5XtOnXw6eJzqpcKmVQlCyiXABAp/2LJiybKIdVw5QMj9\nAzkLkM0fDlgg32X1LMu/KVlKM+x1A7Qef/Un8xsrXCMIbmPk/+5KCvyWVkGf\nyyNYd2whEw3mHVD9A9HHRddU5mXVFUQtep+GX1Cm9wxQ8rKrzInyDSvC+ia0\n7AtJRTiq22azOul3pEQNIdD1OUqDle2y3YVSAagBOe4oNPm3n+vZVTqWUOKH\nqNcec/KBKpecHNELqdjefIf4kpKMg7gdVNDRj76TBgBFiVUf+JEqEO6q9mw/\nFAcyNJH/vS7ul8sU/QruXx6xMM/eSadyA1xE3ZPodWlGJjv6rL3b9B96iJIH\n4xzp\r\n=4Ce5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.07f3e01b7.0","@material/rtl":"9.0.0-canary.07f3e01b7.0","@material/shape":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/ripple":"9.0.0-canary.07f3e01b7.0","@material/animation":"9.0.0-canary.07f3e01b7.0","@material/elevation":"9.0.0-canary.07f3e01b7.0","@material/typography":"9.0.0-canary.07f3e01b7.0","@material/touch-target":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.07f3e01b7.0_1605563187378_0.04288313517154352","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/fab","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.23491cf85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74a3f1161067471f70c8a5b3f3960c027844b79a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.23491cf85.0.tgz","fileCount":18,"integrity":"sha512-IsPTmiBY3bYD7yneGW4Imm0Mu3RZHKiMLG7cwvP3ff/s7wqK1zMVQdy+P1ycYcDZ66gkP9BM2GV9BqVbNPkGaA==","signatures":[{"sig":"MEUCIQD55xgOrLqpt0EgMNaQbDnqi1BctmGW+6qfRnPmjB1kmQIgdjPlVhmmBR7WTjRsqIDcXX6Zrm5z2ogBdW/mfsvXTu8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxa2CRA9TVsSAnZWagAAjpEQAJMnwkOZzGKhPQ+RWIgM\nOjOjprdevYP+QiT7vtvekgwur4XAAL7RldRNRVjW/9ZNuNZpCo6o/MG+TrMo\nswIKHXQ/4gRXBRlmLm2NsCXVsidefWncaY1ASaGRIDcJZGS9HkxcflAN8w45\nzEAIDF/T/87ZSyIgMld1/W1Ya+b/oN8MpiU+gMLm97FAmGeayBRAwogbp1aL\nzwg0y+uzI8K7kgPWCRCQJMNratltFrHONh9QEWVXp8GzuzQXuUC3mnotn9Dm\nPaR2l7JrJuNWmZklwU55bc7bT9UMqJL6RxUbgOhKv0hl91HURtMsbsYPjSac\ndYKGWgs1y5th0HNHABB1lRRWZ9tkCeDXDDImHGlLBuOdQwRjAxIECCAEFM51\nWLi+s+UQ4V2Z192yA5kwedqwIVOv7kDMtKT1llvZIScsmpJchnyWZEb6jB1d\nblVhb83EHJNneJK0f+HWwLQXyCFTmuGIj/OHrC6J4E5fHoOEEesYz2k1L0IZ\nAHh122K/K9Lx9FtnMSBQKhq3ZYK6C8GqbUBQVEqBMPNBjotXOJlf0gz9Z1XH\n44zeBcST5188uQo0cK2dkex6hQOBEjnA1ihoBZULWH44lOgAALTdq0Svd2xH\nIDlX13x1Mk8F+15zafAZbZYKbBqH2RQcsUwSIboyVo06oNqRew9jmZvUyqUL\nfByG\r\n=wBto\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.23491cf85.0","@material/rtl":"9.0.0-canary.23491cf85.0","@material/shape":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/ripple":"9.0.0-canary.23491cf85.0","@material/animation":"9.0.0-canary.23491cf85.0","@material/elevation":"9.0.0-canary.23491cf85.0","@material/typography":"9.0.0-canary.23491cf85.0","@material/touch-target":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.23491cf85.0_1605572277928_0.6247993704133397","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/fab","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f9045c9f76327292683515695707c51b07d3d47","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.b659d4fc3.0.tgz","fileCount":18,"integrity":"sha512-zwQ29+phPCserfmCX/qie5GvfPyOj174crCj626Q+hATN44uijgIBMfFDXzuV+UNbC0fNQhLtRm0snrUeUB62w==","signatures":[{"sig":"MEYCIQDc5CyIPZANkHnw3ephrUh7UaXSpGmQU4SW4IYa5jWKjQIhANnLEBNcGlgVaylsgl4FLcQQ/QmQiUd9+YTZUWz3r05N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxiLCRA9TVsSAnZWagAAICwP/3gpfutmPPvF8cCL4aG3\n5nxCqn9GODb0CS5X+s5OGAEkqHEn141mhry1sMBjNzy0KP+pAz/uFnDFq3qg\nkRrF5qoCVO6FXI85JYwxbJcFH40Hzg3M5ycFKOXWX+wJr9AnZpWLqo+vpqry\nPD6gZ0zv4dH/LAHCoYGMrKb3PQogoCIEGa3YcGgwihVMQ3KAxR8vXdf1+29P\nL/6hqJNBEcJkEtVByDW0iZqb9ndZfpw+aLSKVCyD3S2Xp2A4okLN34nIJ9qi\n6c6gsfQwgZtBjDAGJreCZz56NUC0yCH1hqpA9geQheKpfzC3w9s39KemUmBZ\nb2uzX9fBb+yMqSRN41DhH/gLV1FY2WjwPwYx5kPq4XS3IS6/64l977wTfOXo\n40H77X+MCK11hbjzXVNKpPduEhiqgcvo+uzS9RrPCLxJ8unx4lnnDxBouDtv\nqtST5JLY/mek26HUxywLgYye+JN9YjVSXzBji4M3IZ8nLb7gcz5d46af9UL9\nUZVZGB2+7nfzgGPbj2o2YE2BLSoBkAtvlOW1T03FZwzc6IhF7XP1HtqB8qPv\nfwjpBIOtTWObkiQj1RlDfnHnsU0SaIAbn94lIt2Y+jLBJbQgagE4D+dLYKmD\ni+AMECwHrk4jfrfn/SdUH7UOs/L1DZZb8JpuNo16rzO49iqhtYkOoeercG8a\n8ovu\r\n=/vHH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.b659d4fc3.0","@material/rtl":"9.0.0-canary.b659d4fc3.0","@material/shape":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/ripple":"9.0.0-canary.b659d4fc3.0","@material/animation":"9.0.0-canary.b659d4fc3.0","@material/elevation":"9.0.0-canary.b659d4fc3.0","@material/typography":"9.0.0-canary.b659d4fc3.0","@material/touch-target":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.b659d4fc3.0_1605572746999_0.38309344199785134","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/fab","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bda45d6940aee76863a8fa0ed7dc3e7b61ea150","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.d8a3aed67.0.tgz","fileCount":18,"integrity":"sha512-c++7fsnoO4miIJupfyli7cInLF2UiGk6hc8Dj2TSKZ5Nlu9SGaHSN7bfewoVG3J4Sp5aK5RU/CboHJFdRsG1YQ==","signatures":[{"sig":"MEYCIQCLklR8wHIlwjJkou8k+s5O6Vz9bmSDDCPbIH2KAxRYJwIhANaqE0G+k0DeVjXqzREgssgnFRAoxV3yxHqjn1xpBVm8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+wBCRA9TVsSAnZWagAAVSMP/RhqHgRSDEbkyx9AWCSo\n4dubQNtn7NFJ9ACKKAgbaKDJ4+4oFago4SYYhtSus2hn4tKLwOVcrSWFkCHf\ne3ZMNGq7BOQ0Be6/bX2zSF4GOgP90Mt62zz9aFnXkekZmqDtBv1B6vpNWmDb\nxqTXHCrVFTYeqkUy991NLLEhMki2oPmLw6knTcE72KDo6Dgi6dNUmStfKZHu\nOne8oZ7W5L3LilrQ6vB/6uwXGHUMx4eeHc8+zn+eMxHsVNc2cLwxUfggH4Vu\nCbg78yoo71xxmnjEnLZRrxW45VASjJvI++zeVFzRHCRdM9ihjdphiYqpHHnU\nAas80KHwM1ZiqcUYr6B+Uwae9IZ2VIdMGYaiJ0Q+ebzkqUyQF+MxZLjwaNtb\nr2sGBkfMF0yS22vox/la1xQdKL7DYPK2ky6+JupCHj72YT2CVEZZo7Yp0xAe\nM0Fwox6A2PwxH4fsr90ikLWawQ4AnfzYA5jzFdpj8Zs03UrcYWlmspF2dQ7I\nsXlAta24a3qxkZTCID++q9Q+tKEF8BmMEEVmMMIokynDleMPqsQlhNgfESww\nM+Ekz/LwJ1Vovi9IgKNkPr2x2lBhi6yMtU3cBf6B90Twmg//UdjihmnONo51\nSbiqvq+5No2jwhv3BpM8+BpsSIK032M8dIlZMPD/SW/gq2kP6o6eGh1yi4h0\n/TM5\r\n=7IJX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.d8a3aed67.0","@material/rtl":"9.0.0-canary.d8a3aed67.0","@material/shape":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/ripple":"9.0.0-canary.d8a3aed67.0","@material/animation":"9.0.0-canary.d8a3aed67.0","@material/elevation":"9.0.0-canary.d8a3aed67.0","@material/typography":"9.0.0-canary.d8a3aed67.0","@material/touch-target":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.d8a3aed67.0_1605626881100_0.7480884073012006","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/fab","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.482ff9091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd381fead2ec037b7144ad28e7258a16a61d77c6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.482ff9091.0.tgz","fileCount":18,"integrity":"sha512-lSa6caviLOLwWDJIrDjFcM7H1l8QK6v8fdFcte5mn5zhZUGfKVrM2OWnr446oxM3DlCkTx6N9KKbFmPAqGwAzg==","signatures":[{"sig":"MEYCIQCIoLWtQ7sR4Is8PoDg/rTLhvnYq4tkXNcVBgVUIREdcAIhAOtTsD95PX8b+pAyszQ+OP35OaqV6F7ICRI8/HZsKru3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA9XCRA9TVsSAnZWagAA62wP+gIAUBEV5aK1ad86buZZ\nNjx0enSMXfYzeYG/FvIk12Pv2XdzyHX8h52czp7PJEVBazxHsoQThgppe2Te\n2ZsOV5fQjXlDxkxuKM09naaFmehJvm/zlbICQoH6VaUqiSdKS6BzGAEukbgM\nhhAG0CJxNRvX55fpl2maKTRpNjtS27uBwW0FrgbUv8hGvW+NXl6i32otG9Qb\naovbKXUJ+eg/KZ89PxsRTWpe3gpkhTAG+1HE3Olgv9uZErZQ9jpCPRGFTHDg\nmYcNfXd4Lak1AmTbWEYzisZ/wdMmKNOvSSntVENwpKVMYB4C4MHAXhePnEO5\n92Py0uHFo+POLRk6I9rMvHmFw5xAV8rRgDWJGVDlSRhuNoi8mkc3F2Axagci\nLVlnl+gTB00p1DxWjVvIQXZ7f9Q9M05+xaBT739VYo3BMP+af8/tq33rHNGQ\nqQURA9DnTygrDxtV/o/1HiXKOFI0UCx24ikpEMDiYJQFf1MshHNDFg2M1jLu\nzNP2ZIBxs6ofl7GXE2EpAAMeKCVcLoU7HpwXMO4/Slc1vT/DSjaAEEQ44UuB\nhM+wb7tdFlQyVmEwn5f+fN8bDCKSJsrS/Zkqaco09igXl4LVuo9nJXcL/+Ox\nSLoWUXbESUKH8RpQA5I1cHE9dRZITmwSy9I7+0TLMJb8v90sPmQqVSmTjIoG\ne/H1\r\n=cKx1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"9.0.0-canary.482ff9091.0","@material/animation":"9.0.0-canary.482ff9091.0","@material/elevation":"9.0.0-canary.482ff9091.0","@material/typography":"9.0.0-canary.482ff9091.0","@material/touch-target":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.482ff9091.0_1605635927081_0.3183035320797003","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/fab","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d45e59373dea8b646d3280ac80ec58b01addf90","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":18,"integrity":"sha512-eOUTu9etkVthdJUQWtLX76mvzTQKliy0sdMc3W9rhiNv7gfrgdXtea0+PE1I2Nf/ZJYL72xKvYfAmuHK1bQ1cA==","signatures":[{"sig":"MEUCIAqPDdacymByuL8CiyZfucobj90GhGxDuhrid2gZFkfsAiEAtWXNPJLdSjoX/EegyBl5z+K8566+3Qbzmv/Oh2oPZO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWuUCRA9TVsSAnZWagAATpkP/1wbqt/Llr3FScOd2ow9\nkaggUiiCABT2uyI2l2RyygETLdcTfZlKu5vKJDZPkH05zHgtHKAW0FSrIKsQ\nSnPam7FK2iUdNzFf3KcZttLBZPKKhs3E6BZNpWlmXfUpPD84YmHjbDLo6DCk\n9TbiGq+S2CHUnZuoU9mkxalWOsMMZHc3Igme2FgAOgLwwp/6gdcXtUd5lxCL\nAvaI0QpW8/M7cxNsfcAkV13fy5igYyNQGS68d6mNWgLGD7QS4yFBMJljW/Za\nbWG1rCpjHHKH8XI3BEaAY6JvxjnBDqaJgoWz6vdRgF7ivmRsqCc6IOttI7kh\nVUpaCCv2ccHw3QMIKVKbfPcAnHbKlAEKbELyEr0UKSlVLXxAXiOMhQwBc+ZL\nc2uP33upRbCktqmxmqDXKh4rxa1ndScEY6roKoQuYP7xVlu4Imh4xjQd64AJ\nSQukgjm48UERh5PVExq2JdnU2R2iqQLQ2r3Vbf8XGSNzwbOQ96JBFciH42LX\n1fnD7taGNj1QNOKWrLXzikZTUJxASjWslVWNzM4AxaPaU1urxurVYl/bHnVl\nW8JzguTu6XSAV6P8ZJe+2g86C8qnGDqqCZ69gh276OFKQukqhMo365rZ1V47\nA1hxLA9RBgfrOk09RlGCCMs2Dy2rl5kaXoG0GJbkVucy/lulLsCWcl79k3im\n0yrZ\r\n=/Lye\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"9.0.0-canary.99cfb6bd5.0","@material/animation":"9.0.0-canary.99cfb6bd5.0","@material/elevation":"9.0.0-canary.99cfb6bd5.0","@material/typography":"9.0.0-canary.99cfb6bd5.0","@material/touch-target":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.99cfb6bd5.0_1605725076395_0.47689177737442967","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/fab","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"692600313698d74fd8e831ae4b1054524fef206c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.b98d15d90.0.tgz","fileCount":18,"integrity":"sha512-yAeWy6uD/9bOsQJM2slEWlmNycnKhAqrcPfawbZEcaydE1P+foqEnNNfnTVpBHmJev0eRWz2oY1BvOTqJRPQ9g==","signatures":[{"sig":"MEUCIQD5//1ZXBIecVQ0iD9JZNzWQlN5fC2iwguf3sE/u6WwNwIgHZtmwOp1bxcgUmujrnmTaOQkgU4h5Y/wV4D76AHPFcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaGyCRA9TVsSAnZWagAAZaUP/iezxuZEiLFZMa45jwLM\nKjdNKjGKsHR9zNuXfang+1n8rjo5bia5Xxc0UuJVuKEBomhnGZrpVhTbIPO7\nrrolylq/n5Kb1hI79U7FQH2QJPesg3gCCxnxKpFicLQp4ps373IkTjzBWaEg\nRd3sa7KrDN5teAevbsWWn0HlXIfHqNIeD6ARshO830JiJCeMpGpBjvWfidFi\n/4EEojDbFCLEvNSwXi5qDj3gnhtw3SgjFF+f/uz1QImur9e+yleIY+j4XCLL\nu7JHimzwjbgGE6/PRwvzXGpy9UjAir+CKX2BfBFcbOrgcvN8ukR9pmCzABNi\nuqgthn60MMxi0tUwi0J+mPZ0488d7ytZUWB7B3kB/NU/j+O/7mOj+EkoPXR2\nMGidKqUScEHVgXEjL/r1h7AsYcXV6z6/X2ZR8yNxQ2rvUgDlaqGClxzs8vP2\nYrApuQwTkNmGQ09UuUAUIMy1NrbNJiCqH/QkFt4H67qMsCXR4wJB90etHHEq\nLhza5t60lSu2x2uxveSUYMaYq2yCSv8geXNcwf9blSk+S2yrreuFzi0vOhZI\n96XRwGvEp4ACUIGetFQrxLOMT5f7yNUt0iEUdtFlNdqB0hTotzvD0shtcrt2\nPD1AphGpe8qPHlxKhvcPbF37FFoU5th74JQaqnl4J/100+zIGWjBeJNC4mdf\n4CR0\r\n=IHvZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.b98d15d90.0","@material/rtl":"9.0.0-canary.b98d15d90.0","@material/shape":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/ripple":"9.0.0-canary.b98d15d90.0","@material/animation":"9.0.0-canary.b98d15d90.0","@material/elevation":"9.0.0-canary.b98d15d90.0","@material/typography":"9.0.0-canary.b98d15d90.0","@material/touch-target":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.b98d15d90.0_1605738930365_0.08915533457879432","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/fab","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b5dfab8a1d13d58432764eac8d2f4bb82475c6f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.30c11bfc2.0.tgz","fileCount":18,"integrity":"sha512-nbVuNR0UnvqkDClzndL1UzljKQe13wtiWRfmQLK/aIZOXK+SY2dpClF6kO8UG+fu8ikH1AHYLU45hH+6CF5lqA==","signatures":[{"sig":"MEUCIEzPPY+G0O8/O/Z1dk8o2FOPJeXAViOCENlaFML5m1lwAiEAxH9F+6ceW+dr4s1g/+fivVYYiXwFmgaitDY7Vw3aJOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcnWCRA9TVsSAnZWagAAR/UP/32zLBySZZXWfl73fv+o\nXca6mYKyfP1WVsjhAJS+w6ZvYnUH5R9i1xv+U7pg0tvntjqmkFfAwaIC1nIl\nclrTHcqbC4V004aTY+DkNFydY2NUURSot7NQuZuTRlfKyLFApbBwxxGxZLxK\nOELTImcekIMVZK1pLBkCZz4LNR0umziGtdCvOn+Fy7XicqifatVrULhsDWvm\ncc8vgYu19hwoElWZxXdChXDjIBRw9FoI+1Eb0cH4rPzwVllQv3GYZKufNBf+\ncZkgQjSVUmimXkqd/SE0Py1cOLI+PIk/OH7SVMm4i54f+vMdOBhv/42Uabtp\nhU2Ac0HKsloyHbeVd1ci7Ditlv740ZdpMY50hrBz9xQKB/KGP/Ku/Kg60z1u\nSkB6fhn7/K6YQTsbob+X2uK/MMTf8uR/qs8szR6ymjnyDRW+91Mam8DriAlN\nftZsYTBW4NcRG87hkefan+tIzZbKY7pIzE11w9C7RlaXD5hBch8V+gwk5M+y\nixMwYN0KM10F33DY+5xSRXybK42Wx1bWf/elpXE8FbNEuTOF6qbNea7LSH49\n+XxKXa5pYHW1UPqUPP2y3M4O92fNwN+zjGaP//dlkX0UYhx/wEi5/wH2gogB\nCzHMFdibcUpWl/Dp9Y+lRwrUenNlEDgN/yWFtXPspQBs1BCjv8E9hpUEp4fO\niV/3\r\n=4LDE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"9.0.0-canary.30c11bfc2.0","@material/animation":"9.0.0-canary.30c11bfc2.0","@material/elevation":"9.0.0-canary.30c11bfc2.0","@material/typography":"9.0.0-canary.30c11bfc2.0","@material/touch-target":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.30c11bfc2.0_1605749205900_0.43577416652754186","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/fab","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2693bb9700979a72743206ba3c4233edff2cd3b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.1b731d51b.0.tgz","fileCount":18,"integrity":"sha512-kxSsdDYo9utBJRQl3WJtoS2nVqnVosNI8Kpha7OqtV4m8qT2opq39FLjyHsI14x1RluOKTszHvMBgOBgrnIMHg==","signatures":[{"sig":"MEQCIEA5EuY1UqDJ37+bGMIaL5HiUkRQfFpB9EiSGW2N7corAiB9dOTbZyamE0FJKyDpQTJtUVYFIhAif5IkZcFewailVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr8PCRA9TVsSAnZWagAAWyAP/0EhUcthvFE+A+sOufYO\nHgjDSCHOs4EUcncy7PnI8cNCcnCd77Dz8dalRAnB3dLUsbLsj5fZ6SdzUaJU\nnQE9Vja2Ym6QGzAivJO/1s52dVXsBeh06w3R+Ls/vlNkQ5+nq2sP/DwCdmNX\nNE8eG18kC2RkEm11o5P1nPRLPk9QmKaBvK8Tka64hhvHYZJpzTdiUI9Biw2w\nNmC9D7f414hUDljyddsO85PPWjoeIJFqdfIOdm3RwUrsWExZOwegvVxmrU5f\n/GkrZoIOIWgUtBqLtywfSARd0y6G0hOTEbJK7qTG/Dr6L3D81HnnClicDcT7\nslKpoNb3giNDbzKUP4+xTTS16d5rDnvBROJGFvl9yN15wou8qbc3XGXL1ZJa\nbOrZ/qz3LjxQhTQkS9gSHUqWsdIwFrvO2DZnC35s6pD6yFikNq7d5x4o2fNC\n4LSfKAH5DMpYpjImewYIuzRA1EiKRfmm7BOZyt4rQrGcTqZU2r8JDf2Hb1IN\nrzMQ3lA0m3Iq/smJv8OqY3Ux4xzirzQQG+IWVvD10s3eal5YylsbNMPCFKVq\n/TI3sqh5J3oSHh/6KFa3Ih4q2eSyyi5iqe+f2wsEHUhLo9XXZe0nKu2r9lir\n/JFutcHAqup3X6Jja3gvVolVrjC2rAhgdld0ax9StDptp8HRs/PvN7/JUlsA\nBm47\r\n=ZvTN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.1b731d51b.0","@material/rtl":"9.0.0-canary.1b731d51b.0","@material/shape":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/ripple":"9.0.0-canary.1b731d51b.0","@material/animation":"9.0.0-canary.1b731d51b.0","@material/elevation":"9.0.0-canary.1b731d51b.0","@material/typography":"9.0.0-canary.1b731d51b.0","@material/touch-target":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.1b731d51b.0_1605811983185_0.7534298049421853","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/fab","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b77a81141cf00cc94aa264a6fe0c293bdd463422","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.4ae94ff78.0.tgz","fileCount":18,"integrity":"sha512-Ow16ucB92WYvpgKxfHiQtUQpqKH2yuaO+t9cw8XbmDbtPzLVUAJOgNOB5+gGLjZ5HH0xuQKs8KWlz2H9gtQUKA==","signatures":[{"sig":"MEUCICCWo7b39VRiH2FFv3NQn//aWYnMB9pxtxHSLYdzFYN8AiEAmQzHx2pUf/O5wpg9YwM0/MCJspCxHOFC5waLgNnqysI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr/ACRA9TVsSAnZWagAAbtAP/2pd+Geu4F9iCGAOmG5d\nV+iqUs8AZHh/SxodRnwSqnX8KP/OGQJqOe3LiJX9Zy/8F+iV2ft9L5W5CFLh\nLMgJVCPV0IScv8OEimEySOvX+bX02dlpIDrd0UZxjyXe5ZL1Cv0LaQwd1b4l\nuHeqtcx9hgUiMFIIInyIy5Tl6losJMcDNX9Eo+SQBqPNLa+NtnpC7W1rsDj3\nIqQ16qkVaeYMGVrQi3M1XCYCY4SE7lkIRbO21AYe85f6jTj/P+SgXFWuFErh\njKuJjCijp06mlGl5XQA9HIW83pAZ3OWRU80ADZyUOGRBLAnXLkYiP77pQDR2\ndm4vXPBg7xZTgvxuz7E7qd+LP9c3rFDNPoolA1kfa0J1occ7DpE+FmH12N7e\n1t8hrOIV0IqGK713brKVFHsYy6s8sKVLCMfdrP92qq01njdu42+kRORKKMlt\n9/+U5wu6NVN/E6ItMCynbB3dtXCQqcUQ+TnvndYEWoUd06E9nPaIoD/y932Z\nVzmqz6b/ecYXjzD/UB8Qjl3KrpgQiTw7De+LFA70r1brS1hkDloTYghWgI42\nsLwYT4f7YnQ4LbznpzfcQwABzDzHnY377B0OH9EC6L2J1EChd6rLT/2AEIA2\nDwGeMJ4vuDSKVyxzuqjlUhUVD1C3m8kWCbxWvTzF3Tud65muchaOhki7NR+K\n1JS9\r\n=7wOR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.4ae94ff78.0","@material/rtl":"9.0.0-canary.4ae94ff78.0","@material/shape":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/ripple":"9.0.0-canary.4ae94ff78.0","@material/animation":"9.0.0-canary.4ae94ff78.0","@material/elevation":"9.0.0-canary.4ae94ff78.0","@material/typography":"9.0.0-canary.4ae94ff78.0","@material/touch-target":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.4ae94ff78.0_1605812160040_0.3285741761212626","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/fab","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecc073de9a5d782ed50efe00e37bef68971a81da","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.7ad038e1d.0.tgz","fileCount":18,"integrity":"sha512-//iCyD/2Wm9h0RES3ifJDk6OPoJKFYZieP9YQXWQ3Xuup+qQBF1Ez/8cxltElzqVUZbGpwx5g9FcQLaErEZrng==","signatures":[{"sig":"MEUCIQDHEkCuahTxQUQS4iNdKA7L5ViOYqTS7NwEZDEWcygk6AIgfRj9m8MDhs1UD9pkVkttYkrX0nFzB1oQ2w/Jm21fBFQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsUqCRA9TVsSAnZWagAA9vQQAIHVR1L/Ct0vTa3/nhzG\nS6BL/YhpZfonFKOpMdiA4IzZyxYpTRbMAcZxMKOXWcxLeM6LjSMm01OWeQDC\ntMt02Rqjpk2LGeKxOqIZP0e/aNknjpcj7kIC0OMFkgWBZfyHeVm/IwjdPRJi\n0nNOvQ9XAUfPr2IhGJwCNk2Mn3ks/e8udKe9+G6MGE6lzB7J6p5p5Bn+AEIi\nFRvGEXYNhIhIVPW3fmnHwIT7Vtg39S6yadeRnP1Di5070riEfOMuXM95ihl1\nlEcFWa4L3RhgG/QxQjSNtyPLZngcgxiKG/E+0m0Of8eJaxq92clS4/XH99N/\nqoHr9J6zGrVxbgraFVT7w7P0pqwalrXPKCOVdHZJ0Asb7TZOtRP+2f58qQ+C\neFvIxQ0kdXSpaWmLbOOtvn5JuieFgeM3ncA3C0lnTtDO4QLx87d2E/6QYRAH\ndykAun24ZLrXvSQ6Ne7QrDaLzixIpBfSDRI5OOQAmCrvvxmMtChbtaQgWywi\nLXn5V76oHTIxFF3vlFXkuk3Fn285isp5ETk/XnRFim96OgL/iFB6db3/So/s\nZUtOLm87BO5py0XCkvO2Cg/l67J0GFoZKRxC7koH1R19NhCkrDHbHF7dZBLJ\nLA6ls6D02j24k9y2ufwjxV9JJd9tBpyP7Ca8GGuUcNT0dUB2MuoaSAyiljva\n+2hf\r\n=HOay\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.7ad038e1d.0","@material/rtl":"9.0.0-canary.7ad038e1d.0","@material/shape":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/ripple":"9.0.0-canary.7ad038e1d.0","@material/animation":"9.0.0-canary.7ad038e1d.0","@material/elevation":"9.0.0-canary.7ad038e1d.0","@material/typography":"9.0.0-canary.7ad038e1d.0","@material/touch-target":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.7ad038e1d.0_1605813546548_0.9467916774990826","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/fab","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.a41527604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adce15ff9bd41acba6712f7622dfc000357d1142","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.a41527604.0.tgz","fileCount":18,"integrity":"sha512-AM31JNOwc2HLz2R0k934kqlWBNOVP2ureEHPHhx1UxJfO+Mu/wAczRGh1cBDNHlkZ+jkq85D/MRe836zEBLtaw==","signatures":[{"sig":"MEUCIQDZVxDZuqUbQfkZlgjS2iqDSozIT/ARMnJNnFoNQk2bMgIgO88WkZyYQ5G5KCKvwOF+ZGFhTHdhCdvyH2b1oZjBBYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts70CRA9TVsSAnZWagAApIgQAImnQMmt+kbeamMr57mO\nP5xqSE6AGz3DQoSDHofozkFva59p9/D86NHNOTlS+86l00uoZnJoesT57d8S\nRiyOJjWxHVewrAJXDAStTpVYkQlGIk+EyYHtK5hKWj9O0vZ8+2URaHxV/CG3\ndOY4wWd9RTCjiayR0CHXNB1IBmJF59e0ZHOpunVJ88I0UQNvmfxoC1ddnaO/\n37gufZfjHVhVnvl1F19ZNhgjHTX2gUiRSQxZR1RnMltxVU3iiS33O4fY/Rbu\noZqeIjOc9bmsFKg1ESRYA/WX3DD8D/dvuM3gCV4/PG1omgBDSsHoh8OE9RjT\nlu36qOYOGZYh0k8dGSMDdtEi6GSo/R2S8HhNiUfdbdt/to9mRV8DA/ddVLdV\n6VseRGt6jHs/Q994hL+KSKuOiiuX41pRoxFWQBpw0HpX3NNVqOThekz7EejK\nXiCHl/ZtziLXDFZtwdnGqFvtyy7HP61nFlmI55UCWv1NFcE0pNkPoW8K6jKA\njnxKc/LrgAXHFNCwo7ANRrR605Gd/HtjevU2HOWfLhAHyKb1KKFi5CbuqpQo\nKyLB4bXmVsIpF/V7pUxvkppKPVXRYCxKUYt2j8/I1Llqx7A4zdJzUtnPEsXL\n4KwlacoggDzjwc/lZsqvXQ11bqOk3ykRaOq53lgaXZX2BOjVjyHm+DgB87Q5\nJXX9\r\n=80ag\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.a41527604.0","@material/rtl":"9.0.0-canary.a41527604.0","@material/shape":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/ripple":"9.0.0-canary.a41527604.0","@material/animation":"9.0.0-canary.a41527604.0","@material/elevation":"9.0.0-canary.a41527604.0","@material/typography":"9.0.0-canary.a41527604.0","@material/touch-target":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.a41527604.0_1605816052144_0.4760799072666122","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/fab","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dcbd64c918e6896bf2b12157313e9165d89fbb5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.7b0e2b377.0.tgz","fileCount":18,"integrity":"sha512-2ke6qhwQ34J7lJ2a4MtugS5F41tmnEiKlC7CfOj5mchWq3bYufYe1k2Q/okIaZ01T90K8Aqpv7AtQMCX2dZz8Q==","signatures":[{"sig":"MEYCIQDvMo/AlXFKfc1yUmgNzfRlbxj9TzC/pMxYePBEGfiMqAIhAIKab5gdi9OH0VDnjUsBxusyyRkHEEsU98bg+ZL2FHIf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEmhCRA9TVsSAnZWagAAXDcP/jhKiu+NnTdlVNJ7Ieh7\nLUMsqucSBNKJi1A/ZuQEd1yfPYNk7GXZbyrSA4On8WZASsBS1UnSIx1B9mmg\nIvWf5V+qCz2YvZErVrWKUjMQBv1rE2FX7HjPLXYisTmCpVkblbvFIoUnDgJR\n/Tzr44uShABPhNwQY1iYphPHP4P1o0SjVQ9qv8dtczfPSr3Q3Jhkejf1oT+p\nUqamj5zc67eFStCfFM4CKRMWOq9JB4hUOrgLli7ZFou61EJgZZbO6WAfA7Wv\n9m9kEebnOkcRm5xVqrWLiwaIb1lMtTtnttVbTN0lOnC6rcA5+mpz9UbHQBgZ\nBbqhrn340Utk1hjXBgXsRiH2HlKsXksIeb11PCiESwI5FD2iF4wX6/WQMNGA\n8pMPFE51cQsW8QqqmuIZq+95TKewIzNiaRAQ+ie38S7y5qGhR2I9O9D+yVXX\nCbTW1zKaygZuU2rKza+Rxie2Qd6xAUpgz/ACIuqsWURp3G3jrNRVHxXfg9Mu\niBgaNiRlrxrWHQMX4PN4kZ6jXlyn/43VuPA/+hMwJwneJgKqF88KJzwEPdJW\nUMPm+8RR4mOiuJXeVFUJH16i66LsWyjDHWxNnoSU4KPM7Pjrqj0k0cbhns2N\ndx2NziXHAIwWYZOz588Et05pNOukTHrRCqFkiygWHXXdyEFYlMTTYUkgAum1\nLwgx\r\n=wt8C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.7b0e2b377.0","@material/rtl":"9.0.0-canary.7b0e2b377.0","@material/shape":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/ripple":"9.0.0-canary.7b0e2b377.0","@material/animation":"9.0.0-canary.7b0e2b377.0","@material/elevation":"9.0.0-canary.7b0e2b377.0","@material/typography":"9.0.0-canary.7b0e2b377.0","@material/touch-target":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.7b0e2b377.0_1605912992884_0.7116639804062652","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/fab","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e5b01138c3f2f41ad1453e5af88b2bfcf1e4a1d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.c927a5d05.0.tgz","fileCount":18,"integrity":"sha512-qy4LAlLmzMlFCWhDDLd/WT/2fN7gu+bw3YXgaX5F/E/XsV8saMmDx9uJImQbxcQW+GRWYYwBUiycbN3+YzRqeA==","signatures":[{"sig":"MEUCIBG29NG+qYj1CB2/nXSCcbwtT5MsorXgWzfiOeAq3a6GAiEAye5Z0qWXVgWzvtlTriiS17dg5q09a7DdQ578HZfjV4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBH8CRA9TVsSAnZWagAAlV8P/3C312uXLEy/LElZLMoB\nT685bGRK+VbTAbPKMlwpVgp+b/ysboN1actd7Kvb39na50Yu0M9JiH4T3sCJ\nyz4SynClclmj1EtVj27tGYYDQ450QrOjJCGcvzO17ewyja/lVcTOeDDuGBsM\nNc3akRjfQ4Bu//lMxxBFEgo6ERW5qTxvP5Bd60OMwhS3/YlMkU11TqO6mA9E\nrtYFUmL3o9j1akaYIxE0Qnn0DebkEsSytH6LFM1mEHAOIWNEiko1KGt/2lFW\nZJIV2W15aX4VIGlOT9hQJvaGFkUcR+sUn6Tu+GYwvJhmkIV3AZyA3nTMhB4Q\nGtyV3/TffKup1zKlaA/qmsz2x2aRpk6W50lVBjgQAZY9s7Q3mJ97OM15kiWT\ncbaSWbs8a8omEPrshYOSDVqL4AwhepszCN9gkHZUsc32Rqn8Za92cm46dSLI\nmr/P3Om1aeGee5s6/xudf52XJ6Xbu1ZYaUkPIeXNWWtrQG3p9jarsnYAXp2v\nZEqc2+uLeVsz/sqyxHtX255IGYKCePCRgGfipKuGlEsbe0Bdgw/zm+vKAWvD\nsUiTezzhTqeJh/d9DPqbvGn1gsxEKNhTgztJByYX015+xXdmK+oxcujo4uqY\nPrRTGeOu+dKgU6JtMwxUZRHVT5u1OyIzz3cM9GI88AWHlY+jLYXzrC0rGwFp\n/QH7\r\n=J2cZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"9.0.0-canary.c927a5d05.0","@material/animation":"9.0.0-canary.c927a5d05.0","@material/elevation":"9.0.0-canary.c927a5d05.0","@material/typography":"9.0.0-canary.c927a5d05.0","@material/touch-target":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.c927a5d05.0_1606160891597_0.0694686619391085","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/fab","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.b349b5185.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2402e05fe86078ef752509694b633dbbb5802051","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.b349b5185.0.tgz","fileCount":18,"integrity":"sha512-L6CF/JQtmIYqFt4FRSPZtSObh7faKebCy6iRR/1qAxMhvDr5uUVqSCvQ8DXFZqtNY+3ClGmkysSXXDepUdW3mg==","signatures":[{"sig":"MEUCIQDUQfexEFCoSQ//ToNuOjNxKAnLFIlasFKn493h1mhCFAIgD3wjDoDeknjGw5Q1JNadWDknfn9plD+9avoTZAXCGos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT5RCRA9TVsSAnZWagAAUQIP/31YRH8C4g31jYh+t2+T\nLqC2U3CPjeJywSqekav7HZX3A5J6Hsg1WaIGOHMA8IHlB9+18v4OQSvLt1gs\nOq3PrYCnX6nxdTTbegg0Y8HkRA2PM4Z95sBR4bDxasNC4iB8NM9sUP6KN5Vx\nSDKABIc3pTAvTW5bydrlu/CT/h6K+xi2UQq34ThSWGpJ71+6Jwg+9Vhd/5X+\nm13v0LD+6JUKQ2ruuV0CPB7HXc7QPeflsLKxbPbbJSkukgY74Q6UjT7NF7zd\nAzAiRxvm1rgCV/38EjYm/pQXJBiKyPhv9g0QnA92t0M4pseY+/oHCLLwVQTa\nZOQn0dDPQSHFrf7f5QS2qAhxQY/7jJHbX7JpFkMd0AuARvKFh5da50IVRyhf\n0Htscg+Ypo+8U57QTQQt3xQHMdDNSRy5jj4pM4k4+ktwpAt4mrC+B4Jt+Y9X\nlwav6S/MDyin8UoL/R78lL+cD3GMUP18CArOqiW0SDRDSTHqcUqKRSTip82b\nx8biyD2hfHd1QouuAd75TCZSnGOjuxzUdiCgCOifU5MfBrPXrZdOT7QrlTdn\n+xVvPWDKyaGyE8sjOpB6tZOY5XAgII4W/7jIQORzTCvEk4srHM1VboW93if/\nnKDY4I2a+4o7Wron/9jZqWGWnbnVGqXuVfhURBrdS1kwiCKPfcIL1okhAZ4N\npBCt\r\n=2PG5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.b349b5185.0","@material/rtl":"9.0.0-canary.b349b5185.0","@material/shape":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/ripple":"9.0.0-canary.b349b5185.0","@material/animation":"9.0.0-canary.b349b5185.0","@material/elevation":"9.0.0-canary.b349b5185.0","@material/typography":"9.0.0-canary.b349b5185.0","@material/touch-target":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.b349b5185.0_1606237777533_0.2793759504164537","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/fab","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b65abd276d50d310c7cf44bb81d11523332a365d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.9083b7d61.0.tgz","fileCount":18,"integrity":"sha512-XNEWo7i2Tp0Gk2bw6TPrgBqy57G9Iht+338KyJSTbfz6p9yFStwaD3oChwUAnmKlMHvOEvHSkH9mReruJkzZ/g==","signatures":[{"sig":"MEYCIQD3RfxbTeCZYE0HcEFSUoWLrJpj7UUSPi8N4xcb22zrDwIhALz0P4ZSFu8a2SMrWP8e2ujMhiGV8RVPkDAOPdor+xAr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXgTCRA9TVsSAnZWagAA5f0P/1KtXPXkoaTWaAVNAWk6\n/h0WBPeud6G9Wr5fjB2pypzi+NmDqK+ftIX2LuZxZ0kkFrJEvalrgsMKi0tp\nvq2XnjYKQuh61rkl/0YCcL4rJ7MxmEu1oeGQw+wRw72RFq/lA1uATeAaUIhj\njTJaTFir6ZxICxPLHAj4mGfTKbaY3dX+TMkCZlBtV23y6jiBe+tKVgv3nkAG\n2rKeEr+jjT65cS+x1ocRW2AmAKx8NwGh7ET0GpgFCzuEhlDoeFqgN5t/xabf\n37vhtHUoewTkLWa3I017al9TN9x4apYFXWgniDB1s7Y95ar6G682bnpZ98bJ\nSOifWYhGP+zaQeXJ0KWSvRcSksgTxLA104u+uWKhBcNEv3XfCrewHnADWqg9\nT6vDZcX1bM4miFt4SClADRPG1UqvV1rauXUTYYB0DPikNk8OKr1O9COFD5Ee\naHrIeKiqvOWDIpEMxsLcNdaYdEo/2Zf1HTlqRr/nutPpIIKFdMnMfdb99J15\naWwRIj32kRNv2ulQ/D1sq/2hNSSdiigfMX48wUwPJotoUF51ybBriLt3ZYxP\nenegMEqHAcOK0lDevMZF56Z6Zy1MpMlWi3dCHFwBAq70tuQv+CWcQiZPP6Xy\nnp9gfCDFXv4vbeK2rVG6aodt8zBRFz/bRzhyvkcRP90MCVfp3OChXQmXrz6X\ndoWi\r\n=17+o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.9083b7d61.0","@material/rtl":"9.0.0-canary.9083b7d61.0","@material/shape":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/ripple":"9.0.0-canary.9083b7d61.0","@material/animation":"9.0.0-canary.9083b7d61.0","@material/elevation":"9.0.0-canary.9083b7d61.0","@material/typography":"9.0.0-canary.9083b7d61.0","@material/touch-target":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.9083b7d61.0_1606252562561_0.9855572885112256","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/fab","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9c9013f712a981e50294f79be725dd54e1812aa","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.eff7b46ac.0.tgz","fileCount":18,"integrity":"sha512-hmBFmovfwRj8eJSoegjVhyXwdL6ZQXcP7qtsgtbuNKtOkY1NaGd5JEQBKkQNIcxEYHhiljgUn7VArI1vbZ8Qlw==","signatures":[{"sig":"MEQCIG7ECIzsfNsPEz5pmnTLqijkVI8xtwvLm+KB0op5+jdIAiA+nw5vSvfvGwone2k9BouFNHi7Vnd0gZ/EqFhQTDZRZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZfhCRA9TVsSAnZWagAA+MkP/i8zxvkPaH2cSNELxEYY\nYir2iHayqUQn2te5mJrZbMPppLe+WVLcghVS2kWPUY9Dj6Q9kLWIQq76NEOr\n4T10ucPcKVTtFYWy80mlrNejn9Z4rwlgE9o/meUSNCEd2cI3/bWSyLW2wZcU\nC+uTaTpx3WTRPVjmjpXv9vyh3cknlYbi0v0yEFCJCOh//fJyaLvz0iKZwHDq\nUsaYHp4xpVRFuEEFMgDd/b4vqMqn4J5Pc7hcq0NotbI8OJKGOI1vIUDyNq03\nJMmxpycO3rldTYpTxWG0sIIXUX4WiC1StH59Z7Lk6gXjSsxkS6sCVlbZU085\nTmlDyF0JrEkA4ixA1uIkzSeIMyqZQHrTYRfdpQb0BZ2yKi2C748Ld4NWVbQR\n377EYwjPnllWwVlhz13PmhnvCUW8wr0X5E9HB7lkESnF/oHASj5IISVCCD0n\nNjScrXRKzTvlc+MN/dSMT1M5/V+Jz2u2WxXREPCAcUGxv8jhCk/T1nVX7120\n6IWDbeGsqS0MFcy9RQFzLKTnUxuURQG/irMPpvpNmnZpz4ujPwB29uLyi6Fq\nDID2OZ/qXdkxcNY7nNAsVWBcQR4Vu/qqoKD2Gkqg1IKME/MXWJ4MSYnv3qMS\nCWs47q5Fx9laJNR9Gdy2KnLzvfztJ6/FxxSHG4hL0lAUPes3CSRgNYwcLENI\nW+1d\r\n=MIPF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.eff7b46ac.0","@material/rtl":"9.0.0-canary.eff7b46ac.0","@material/shape":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/ripple":"9.0.0-canary.eff7b46ac.0","@material/animation":"9.0.0-canary.eff7b46ac.0","@material/elevation":"9.0.0-canary.eff7b46ac.0","@material/typography":"9.0.0-canary.eff7b46ac.0","@material/touch-target":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.eff7b46ac.0_1606260705309_0.7202086324642611","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/fab","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a4cf3a7afc7aeac5c651f066c8ebf2314b9a656","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.ae27b44b0.0.tgz","fileCount":18,"integrity":"sha512-oE4qNADy7JVgwXkvzOFsC0J5zE8/EEGW44ZpRjjzTIbSdB0CceLymR/cKUVq6FKjWrRouoAXp3pFu2l+T9+xFw==","signatures":[{"sig":"MEUCIQDperXC6HoZyGOqV7PWqIdQrWFPX5KW6ZYfkgg4S+aZ1wIgQlSkVSJcSX/BFLjnjhh6V5xULPODa5sJqYQOvy/Xyc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnmcCRA9TVsSAnZWagAA7M8P/idsiuqD4cGZyTMx5k28\nCOSmvlfC2PEM2iuI50+7L0gbQlougM3I5ODINV/YtjjF5XU8V09qJNXojwzI\nxkTmJdz3ZDubQ9RndWJm5uuvOzeLggkKkcXGurUAMLrQ6GYQoc8qO4dRxBJC\nm2LaCkotbbgB6XG/u/ungxIC4ZUTOyWorO2dLTEk9ujQSBP05AHYLplVs94e\n4PanTSaJ3LrZ5qnk9vjHfMds6/68omzkhZ+mP/kaLxN1Cgo4uVNVR8/Y8BZI\nC7nPFTf2qvD22Gn0ZNUtgMwJTzbwt3Byink1svGssHYcKIN+0bJk7TfaCgTs\n7GB3KrlweoF0zGh1zlkxh12sR6V/bnh6eOteqsYoviJAAAoaKfwMYJVve0Mg\nWt50yoz4/dJUPW1GvPQ/RzgFb3xuQoX1dvZZxREOqlWw9TnpLZqNFO7xfLM0\n0OimYX28J3eocN/Gzx4InCSkAieMd3S3CHW/3FobWYfBib5TeBjMAiNd/3ri\nNDIFaz/Huhwaj3aJ8IqF5Hn0aS9tg4nvc8vkokqLDILG0DW1IWIJ9ZpsArxd\nxMKAc83YB6mf+1m8zpFeUD8/Tz8FsURcBJRmH/KJb5rqvEGMi7F9b7/eWYoG\n29vIrGEu3g1PjkwCuGaapStPAETfCCw+KQSoGbv4oSiwEVEdLgSqUcrZElCr\nCWon\r\n=D7Ub\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"9.0.0-canary.ae27b44b0.0","@material/animation":"9.0.0-canary.ae27b44b0.0","@material/elevation":"9.0.0-canary.ae27b44b0.0","@material/typography":"9.0.0-canary.ae27b44b0.0","@material/touch-target":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.ae27b44b0.0_1606318491713_0.49814275425036225","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/fab","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d41ee64a007ef0da2de69a51665f2f0eabd152a6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.2fbba2554.0.tgz","fileCount":18,"integrity":"sha512-JWG7eSPXXmY3aPOgNkXT8EuIuLCdkJkRfcUQ6Zhlb18SjurTiJzDkO0dgB/6QcP+JMq0bxVyUQ5ouBPKUh08zw==","signatures":[{"sig":"MEQCIDParZxA1fe6YVKmB/yUtgJVnqwCfI8kVTU6zyVQvWHAAiAA+FfhBlGDEVJRhDtrWaZC+lHLrAVL4KnveGpgBtKPdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS6vCRA9TVsSAnZWagAAfYoQAI5oWAd5NjOBP6IbJbZN\no1XSmtsjTWnw1rLfyOHkIdDyYX2Qyx0KLmALwEMW6xYuSiVU5zRM0gWB8uaS\n7AgRLtSr/o2c5xGu5z8N5Gs8qEaizDnPGLWa1TQiXiHemMa8lzxYJpYoda2H\nlSCVMizo7pN7vd9CnRaHlabcpCa6Q6Qo/C//XekhO2TAyCA8rWGf6nuReHys\nJDcNpNJOAfmuXugJhnFuNnpvtRcvGF4s09LG9Y37yYTrZP0Z1xtcsPKbPXvn\n/Zr2VM7IqT/CSO68866vhc0ut6HWCNmVdZFesKmMjeLTIwWmuXdtlhQDsTrM\nBNj4ZYeDGB66a347jAkmGBUpmEg8Id5s1KatE4NhTXoiBqKWF+1m8k8YzQJQ\n852aABGDScevp278isvXqWcAhV5U1aXDB3hUDp3UuHBsYzZclxREXQfXcMkg\nn2+DzJNAgI6Ec+g+FVdFLw4BFypnBMREEKlCo6hNdWMP6+2JkeBzZ6WRnfqi\n7c06CL93ZZAvv+/CJVgH/Svy61rncGJxU2RptcK99xnOa36SatsoqcsXlfYE\nOUZBq23v1JTdRaHCwdIKF0xoEiB1HqmnmxwVGHYFEIkbSSQ/8UUCrLDiMFzS\nVkCi/2egeVCRbyOHyZKMQRIs4FDcsY62etTrxGOUhY8RC+oD+IT8hxyURYat\nD9r/\r\n=smqm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.2fbba2554.0","@material/rtl":"9.0.0-canary.2fbba2554.0","@material/shape":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/ripple":"9.0.0-canary.2fbba2554.0","@material/animation":"9.0.0-canary.2fbba2554.0","@material/elevation":"9.0.0-canary.2fbba2554.0","@material/typography":"9.0.0-canary.2fbba2554.0","@material/touch-target":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.2fbba2554.0_1606758063051_0.4494179627690862","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/fab","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4276cb7d09c61572ad904894fc05057083d33cb7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.6d8574fe1.0.tgz","fileCount":18,"integrity":"sha512-s0YaG3kXHnW1seGriBrOsvNSVyLBHStAPFE0+qyFYBxZsNb11Vq4DXlZYML4HAtjq9GYYYhqLm2T3YlurQYGIA==","signatures":[{"sig":"MEUCIQD7jrBp5OGjjyXWNMcLM90v5v9Fu6Pq8IEgzrj7COoPtwIgXLFuFrpLhMtlrQlDoqzRWQUFKc/3lNWxP5/UiS89AvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTFBCRA9TVsSAnZWagAAV2cP/Aklv3Py5r+0PsQWPhr3\nLTul2p87pKiceiWV5eCIKjrpL1iNxCTT97HBlmva+JvHrndOjX7AGeOvlPsI\nPMXwxtxeB3IDdHZkSREBzPSsePwRWg7/1sJnDrh9UsMpxI6vDxKE8IXLGO7Y\nCahua685EHmdcx+kH/+SDudzw1BWtJ2dGgGw7lsDkJqgu8uZljab0zaGqgk4\nq1zo/DRE0NXmenhcDYeGJFy7fphTKTYXoLTQlMzwEhbveW6Rp8M4ohjDey3W\nURu8Ao0DJ1MMIOpMA/7NAtawhxLh7ghL3QqRfQajF5/FhVaIQT8KPIeTIvTQ\n3kiV5r8oRiEbwEGMi7RaKlpnar65c1o58wuuDQjierW3+mT0+n1zdjD9BSpg\nGJZdQTDmDa5MEWLSN1hGxiGgWueJd8qxviboAy+O/n9nWlOIMRN+0X2LNwIN\n5aSuh4eZctrGVXzc/+amQ6fwYZzztJjSxjQ4Mv2Gb6DC3idHTtmG++LVYlnO\nhwngnTr5u1f5hu3eQpK/agD9MTIE9+3Yt+2xWaJ20rwLZbXSZdf5OvY906V9\n0jH6xXz9Jx7HGh2x+GyePovoaIGN2i7hA3ELUtpFv14BzdmUxCWG3a8qO9Ly\nRnx+0oRVvdquh/kYaPq9IPEdQ95otiIqyci5HpNtD0lKqVWOa+pUz9u8Ur3L\nBp8z\r\n=oZ2L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.6d8574fe1.0","@material/rtl":"9.0.0-canary.6d8574fe1.0","@material/shape":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/ripple":"9.0.0-canary.6d8574fe1.0","@material/animation":"9.0.0-canary.6d8574fe1.0","@material/elevation":"9.0.0-canary.6d8574fe1.0","@material/typography":"9.0.0-canary.6d8574fe1.0","@material/touch-target":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.6d8574fe1.0_1606758721127_0.01834342844804282","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/fab","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36838a1a01785963f18203a643230c55d2ec8d50","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.fd22355f7.0.tgz","fileCount":18,"integrity":"sha512-18c3260yEGDfASzvtc1GDRoV4fX/afipONjBWBlnHLNaTEUAQ9VZzcI+hCDw5wx2grg1QrhxHZSj3eDNLVupOA==","signatures":[{"sig":"MEUCIF5qHAWOwAuhmkuAY0OELY76PhmyRnWJ23HFFBMs79PNAiEA6/sNFeQD9/l5kYVi3Bww+LL5SkU13hQf+QWQZlgg398=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXl/CRA9TVsSAnZWagAAu2sP/Rufpvvebe0mR2YaypWi\ntt8KSe2VmIiUn3Zz+E3f1L1I43uyQqe3UTeFugOnGG8VaoPuyScPg+5RHzGA\nwIXHG3uuO1MHwkJ2i6DQp9wDBBUoenoGz/smnq0dwAliNlE/boUvSeukK/4X\nnO4Pq3kIVnIFRIagTtRYRUF0RZG+SNebZoLzdImUyomEBGUSObcdS+uunwCF\nr9hH6gH7jXAKNyJQ74dkgBqrfNk+cbeigsBmhYcjaRvCGVlIPl9acWt8TkPH\ndsp8GzK3PEbYrZyWesFoC6bibucbgvsBfSWgaF5JAkp3bLuNLlRyLNVTU6Jl\n3pDQlD2UQeAKmcGe9wPUTdhoStkcCp7pWbdZjJRxXke0qoqmxyqofy8W+Gzn\nHHyA0WlwpXpzq0JaWRi60hD43O0qOMUwVHM2Y5lPrgY11y7wj6z8nlP9xAlK\nUKmmY6iJFT6HzAvHt/f8DHO6Wv/ozxFHAzhP4DRuU+eUD+6zykeYTbvwRxMd\nq0elesyPV7nWELqfZYSanWXKDGTfLvfPbw66J1NWDOCoU28gTDmFN+9E6sW5\nm3jRY9ZDhSFkvoUtsRXzU+mg/KeT2WixSCsyYSgTcWWnlL6Rwn/DkiMqabQl\n9Yy0OJybfDTvgAP6XoD9PM54NN4XE3uqubDgGE16aDdOpSGx8cvvN6EUzc8s\nxShB\r\n=pOE0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.fd22355f7.0","@material/rtl":"9.0.0-canary.fd22355f7.0","@material/shape":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/ripple":"9.0.0-canary.fd22355f7.0","@material/animation":"9.0.0-canary.fd22355f7.0","@material/elevation":"9.0.0-canary.fd22355f7.0","@material/typography":"9.0.0-canary.fd22355f7.0","@material/touch-target":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.fd22355f7.0_1606777215086_0.5794195583820028","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/fab","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ee4961333676ba7427f3c1b03e9c9569f705ee1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.c4ab98722.0.tgz","fileCount":18,"integrity":"sha512-6Ozmcqw3T0MjitHPQCloezyqg7bt3x/kpN8xJEpuTwO/dZe4x1dd7am8jJwMkPkba6kENVKRJLMz3jLhIgpe5A==","signatures":[{"sig":"MEUCIQDoAR7zyNrAqE0FiqUqW5YiFlTB9mK8jZr3W/+4Sxfy6AIgJzGu/AMZxRSbQGGxfhUUAZocL8aL8so7GoIXYXHa/Rs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuZ6CRA9TVsSAnZWagAANTYP/0LmxdBGVbFs8h86EZ69\nzAenb7VU/4qIAS30j0fFiOHqaZfsV6D0OOepqUGmQh/9vfWDR6JcrJ4x8aTa\nJic7MjG1kZ06YJ4+pQMx5112pccq2xCAFVG5NiKMCEVEyBRl8Jir60Q/htYl\njLbgHAggduXuYc4x56RBA234z8Q+ME83cfPRsSZL+/DGuUyCwA1mT0+qHONv\nPW1E2+Pp3l/b9W9CXtdJx2seL+qnhJginMlITI7hUgLbTHIrVeIzcJEXHYHX\nEhRRY7vo+xofjqtptaKxB8FGtmoi+3n/Wie8VymhddkNJTBa4fXzXOKmx9XB\njgT5enbrW8lJ+hgLesXHDrTgj2RBMY4GyywxDu0fW3kpvLNOOrHolANnU34k\nR+TCP53VeAckDXHrxhi/L5jddapvB8mUrRIXCGRUusN04lX6sfMDFpkOcx40\n2EfNgFy08gzbe2w1RNy1p+J1GAzXOFDKSChd2e+xXyAxIAU0qId93J7eQSHc\nQ2CvQYE8uz3J2WbpDRln+takuBefcNzEHGxMBXc6JUq8Z38xFYRVYPpQztki\np/NBCmY8gQYJVumLwORkegIRcS6fxdjwT7c/uWnr58VLB4/KXrkHdZxNyQDX\n0ZdTpYYBenoT4M+Z85MyjFez7m4nIjcjPGUE+KI57pEacnakb7Pj6Dnmyy6F\ndRpi\r\n=K+aA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.c4ab98722.0","@material/rtl":"9.0.0-canary.c4ab98722.0","@material/shape":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/ripple":"9.0.0-canary.c4ab98722.0","@material/animation":"9.0.0-canary.c4ab98722.0","@material/elevation":"9.0.0-canary.c4ab98722.0","@material/typography":"9.0.0-canary.c4ab98722.0","@material/touch-target":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.c4ab98722.0_1606870649234_0.061362685625309554","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/fab","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.977585650.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08014ac5ace10a06fa623da84a181355d8ef3047","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.977585650.0.tgz","fileCount":18,"integrity":"sha512-1glpldqpdYqcNR44onlVkoOnqptbFO7ftlGRrrPSuuC8j+ZT3J6GcLpeXFyAXt+ElQBE2lWxbztvjpZbHgjBVA==","signatures":[{"sig":"MEUCIQDUM7fkHD93orAzsLdorxI9MnFxs3FrUYon1zlw60wCxgIgIWcB1ysq7kagQJXbwNvT0FGcMYYVpNRWTOKwSAodYuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6fxCRA9TVsSAnZWagAACSgP/0z5foIz1uY91ESqp9pw\n+sQubw2k4HkXYrzpN98xnJ3IrkDUvKSYdiiwzLAoeR53wQCtrYgVB0Rc2xHg\ndw2/S0L+kQwrLwo7pEU0U2zYjoj1yut3KVxkLzgMW83vWnLYpdkk45SXxVev\ni1yPqToGWRxp9wPjXLxUMicw8XKQITv5spMc3rqKp4gewQABqrc7qEyN0Dfu\njx+F+SUdpHuDMthYXN3eu/o7CnvWUGD0WyQfOguDieM1Cjn9FZwSzRucTiHR\nVxYT1vSobopRXOosnAdzaetGL3CBPa//Mx8bcBUAny5FQNf5Br1L/qd5UAJo\nXvWZKjz5TPFlmmR0M1IBUkTGcYMdD5F99ScY8ExpjzVqUdovdUaRiHl8sdA4\n8opXTZaYfYL2mA5jgSO/39H9C+azn3t1Y90Lq/VrX7B+rttREm1LwK0tTKJa\nXzAXq6tD8zKV34THWlsXPrxCRDFvQgTLtAXtxL1+sDsi/oF6bN/w/AiQ3N5Z\naOsb2qNsF33P+ZPn9lrBWumIJskEBNwOYFq9L2ZZugB9v8Tm/z26Q8WCNNC4\nnGUuO4wCAtPvbFivDaf1VY+bdsphIZHk0tNUyRU5NuN098lOAdx8NwN3/gzL\nZca5ps5geCkwqal9oM+xWmG3thdNZCBwPud2XAhKjJztoHMDNRHSe1Rcf4B+\n39rL\r\n=43G3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.977585650.0","@material/rtl":"9.0.0-canary.977585650.0","@material/shape":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/ripple":"9.0.0-canary.977585650.0","@material/animation":"9.0.0-canary.977585650.0","@material/elevation":"9.0.0-canary.977585650.0","@material/typography":"9.0.0-canary.977585650.0","@material/touch-target":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.977585650.0_1606920176853_0.4905208051908132","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/fab","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3460e8cf8efff0e8e4c8f403cb74452240aa8379","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":18,"integrity":"sha512-y1jhWIDjyKJmz5Qi/wD3S47G45jhUHl//92Vx9fSlWVBWlsiSpstMI8+cJSnuGj3nrs14NELDPm1sBpK+zrvsQ==","signatures":[{"sig":"MEUCIGNYcfim5eVZ8V/gMhAxYGdVgCF1jVg1ti90BcjJpdCRAiEA9WOt3PC/FbZ+QKj8W633isEHaIm4vg06IglNgXUzkY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6mpCRA9TVsSAnZWagAAk9QP/ibLgnT9SZCJqKuzxqRq\nrJSKfSnm0K1cLMjhoGoC8AkeY3JebHhV5IHc7bxkblN7wXN47k2ExR/8rn/X\naEPhMxTttgOI2juh7823VRg2UIL2epEA5CIZ/NqQE0Q+S8anL3W0VERiDQBI\nE7dhxRIIq0UqaBKv6JkTC4ds8X+ZG8mNc0+pP7qYzhp/E06ulRl4gfZBTDct\nDexCEMkX8tOO+DEXa/qPUtUgpPJc0mSuLXZf4bmtaOPLZ2siz53gvfZPoHxs\nG1P90rRlpEz+6uCtC5Dr9pxZ3ZfOUsBW3w9/PDDN6JbP4NoFl9qjaQkPvCyT\nfLLbxNt10ZskV+dRqQIsjeZ+wNr/cTKaAaeoyCijb2HDeBM8L2GtUo/Hba9D\njlZDNpKpATluL3i7XhF7OmoV5i89avU7yaqQYPcyTkTEjbU81346PtwHbETK\n+XqCqBusuPYARdCJhoEPQecAcw83QG5X9fE5tgtQb+iZge622AWWF557liSn\nCXmLUI5kljobg6UOwy3nysvmDnQJcI4ruwwCdiB/nuRiN5TFE1q8b6YAirRE\nZ0dsVrta3WOo1l+01enXggB9hVQnvGlvkeAF3cMjvbyIjlkVtQx2wNzu97hl\n+Ox0sXbg7L44JhXWfhHorrNNlmN8v5a3H74W8mSHVNfA4wQOiTJ2MrrqCRwO\nle9y\r\n=irg7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.c7edfc7b6.0","@material/rtl":"9.0.0-canary.c7edfc7b6.0","@material/shape":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/ripple":"9.0.0-canary.c7edfc7b6.0","@material/animation":"9.0.0-canary.c7edfc7b6.0","@material/elevation":"9.0.0-canary.c7edfc7b6.0","@material/typography":"9.0.0-canary.c7edfc7b6.0","@material/touch-target":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.c7edfc7b6.0_1606920616574_0.7736724556322987","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/fab","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.4f3347306.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8334c7e13e61cc793d0495b6bdf06fd2a622d5ff","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.4f3347306.0.tgz","fileCount":18,"integrity":"sha512-9a54/QOMFfWTC/vuH5wSQMmmJpY2d6f+n9onRSYh5ZCZkSN342keDxtntkjPZkd233JCPmkYfKHbv5oWhe3/sg==","signatures":[{"sig":"MEUCIQDOeh+J6HZX56rkMyQ/dwczPH5ZY6OdvUo9bZr4ex4hYQIgWxV9pjM/wn7YtvH7XubSoHlytnkpHd3QV2KdxgvpKew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx63bCRA9TVsSAnZWagAA/74P/36QHvBFDf8G73h7XMEM\nMTETxjtpykj2e7KY2wQLPVU3g896HYGTEFl+OITAZxlTI3FC50EqOvUlhaa7\nFKoyy2tHoflYx3U4TBxoEmg+P2mQQEbRJ6fDWJalVwHTEBAedc5HMSlIn7Ze\nQjzaWYyY4tEYrxm4cT76RC1rMrwZcB0T6pY3HVThDVWxlmQRUkwiorU22QSu\nytXpuyHuSKK1TEXWvbrTO0JxVAjoVTd2mQ/YQvn+uzrSSW4PrskTnQHHKCqP\ncOg/9ddD/0yAb+/RpknBJJ2Qjl4W01SyCJZH1TJoPBDykQ95eIZSCARYLfTP\nwrAiuon9FWctLEio86ifpB1H3imyRGtzInIIA3bq/MfS3aHexXt5YC6FkLEh\nnd8lw0bgfUHcTvcfnmQWOezbQeiRrg/5ivCpXpzLE+b3/qj8z3OYozetA7e3\n/DLFeVoRk9UQ1CuLlHgIyrSwgvPGZsroSKBL/MCf8Efm3QiaDr9+NZdueYuO\nBsveZIix0Zz9OZE57ASkGR91wRIO15DvUs740hZlYH9+W2zmbFPr817Q3gei\nECvWphXtPha/AtdXAVOwUc+RsmHX13RDH9NSTiD2c3UewPK0++1Ewckmy7T2\nv6dzQTBuPPSeTVQvDn5B2WwYILgoCG1BgtHRlX711R8WEFV1jciTF5WI5Rg4\n28OO\r\n=/bWN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.4f3347306.0","@material/rtl":"9.0.0-canary.4f3347306.0","@material/shape":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/ripple":"9.0.0-canary.4f3347306.0","@material/animation":"9.0.0-canary.4f3347306.0","@material/elevation":"9.0.0-canary.4f3347306.0","@material/typography":"9.0.0-canary.4f3347306.0","@material/touch-target":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.4f3347306.0_1606921691174_0.9586873481235421","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/fab","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ac07a57bbb47facf96bd3d47b476f67a9655fd7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.37fbae10d.0.tgz","fileCount":18,"integrity":"sha512-XMhlun/ZmLoYTU0XgnQ5kQWPSlELLH9hiLd2LfH1Lh0TMy7XfnDe5FFGsGBHtai2YD9GUEenCte0SJIhwbt3lQ==","signatures":[{"sig":"MEYCIQCOMPXfrjrQ81GGewP21NejN4CeavpmjLnOkGjePJwp1wIhALbDaubW+ZTm2iQwSfeTPy1rrigkp1C3G9lqipPiEiKZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9ojCRA9TVsSAnZWagAAJ6QP/iNgN086W9EvbJ+8Uht7\n1bZlAdmDHtv2X4zhHXJmMFxJAJJWjcX5iDS0p+nYOTbVJW7oHgYcUiYMWSoG\nfYphMbeg1VafK0MHGXz+hklJuAu49/PyHRo8yVsGX/+KP/mBcbRa/eMfNbfr\n5z6mwRbRvti3m03Iezux46UYkNqIbOwi6+YZkXa2hyI+NJXyC1tubM8r1DSf\ncf1lG+RZW53frk/cRZ6CfEDgxRb4ULCTrYXF9jt6Z+vBGDLUrh17F2ktxjgP\nzbB/BitjxdISqqLkRy3kveyh6LBAiquixtUzjiRQXiVfoZCl55/JAQh+EsKC\nanufC4/V1iiVaKEZbJ3EbSZTY8iCoc19w1rcSQaP7VwRnl7rQysoAimEyoNY\njsVSoVcqFexJQ2m1f5t2yBrIN4s4RHMcnvSP1WknzOrp5xIlj7ZDslgCKLwK\nPvY2VcMLQk7FywumJnMT/4Wq1k14hWmP6sMRXgaQkMNIgzXKK2j5AezCHyeT\nN7nQyDJ6tR1ayLiVOz2aYkaNPqzOXTdjqLPZ8F5CHfPtEMCdCwjBEP8Udtg4\neGCVmDRFWGYHCL1aGgohCHDxDnUIsI8ozMAEwUDbbxQxq7ruBJx9hvcFUOam\n358cUqH+Ou2sit66qhh+YfG8Qbrfy4hSu9tMNt/BL8xUiDeynfmiUPSkIft/\nfoij\r\n=lhdk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.37fbae10d.0","@material/rtl":"9.0.0-canary.37fbae10d.0","@material/shape":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/ripple":"9.0.0-canary.37fbae10d.0","@material/animation":"9.0.0-canary.37fbae10d.0","@material/elevation":"9.0.0-canary.37fbae10d.0","@material/typography":"9.0.0-canary.37fbae10d.0","@material/touch-target":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.37fbae10d.0_1606933026737_0.5903296912678708","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/fab","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1e92b9fa61d2c0a36253d838b0082b83580eccf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.11da3c0db.0.tgz","fileCount":18,"integrity":"sha512-p2iEpQ93Q/4SKnlwXvLga9ZKw+M0/Hh8zcUTzFwRwheFPbaDyKihvzZFYLhD4HQjI6edrRfqzdroqqSmnDC0+g==","signatures":[{"sig":"MEUCIFjCz8KmbotXsPZAtPWfrMLstXhTjNgRX+gfcb07ShP8AiEAiFEYMYJvzfEx1lxfR+B4r0dr6NLJ4GJEGTY6Op6ybzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/etCRA9TVsSAnZWagAAwsUP/0VkI3uAtvabeqIlj3Sn\nnua3j66EdJg+laRbQHNlhsTS8u5WvzLTMcAll4VfaXYlfc46XdEL3P0r+fiM\nIVX+fwYE3+tuGLcisaUQjNYWGnw3JKjy7UBzmdVYj1BPkst8vvDD3zdtMj14\n/Y1R+Im6aaSU+vXJCYaSj28s3QivnjSETIRVbdWfdQvNZc68FSRq4dwczEbp\n+jQebE1LLsD3ZT3EYW/xOW75+fi5caY2oMh1W/y1i7w5x6zlEz9n0Lls5z7s\nSMww9etVeV/OpSPKrlzQRR5lCUI82TwdnmNYeFZp28JI9wRc/GnkgcdeWVMd\nFwPi6jDZcdY7n1CgMUaSUWyFg7QRxviiq01+KSDrwBWjPzvj9zVEsb1n62Fl\nIutFyWKGk8bb71/ALzMyCE8eGQiww2uBhZPGVxEzMxLl14wKKb5OTetYDOCy\nn+o1xzJ0AvVlL8XuEs1gZ3EiJNZ0Vf9DDgrE0m3Utfk6OzNtbXZW3fXnABqu\nyZQ8/70V6Sj0asDemD0wgFckUzHf59jkEi0WV70vat3sTlRxN546pq+T1Moc\nj9RgLSCQWC/XQ1gqcOcjdAWxQWcWT1haHZyIJCniJEcpmrPmNs/pbr4CCzVE\nRh/MfmQZbYUh4M/O8o+5midetshQUlgY3oiXP1cYgGR7SYUUNtswjV25sLI6\nY1kp\r\n=nXJk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"9.0.0-canary.11da3c0db.0","@material/animation":"9.0.0-canary.11da3c0db.0","@material/elevation":"9.0.0-canary.11da3c0db.0","@material/typography":"9.0.0-canary.11da3c0db.0","@material/touch-target":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.11da3c0db.0_1606940589274_0.5340805905285808","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/fab","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.489d4c219.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cea2e91b5402a7c79b36d2c30da141ebfeddccc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.489d4c219.0.tgz","fileCount":18,"integrity":"sha512-thSO4B7M6B3nZvSLxgB6MuUebLEsYDLBeTQFKgjSIz4yL0bVRs7u18p1XFayEZVkuqTU7Jsk/DlTFrqS5hb0VA==","signatures":[{"sig":"MEUCIG/5fvCRGsdfDWc5rp0EG7YeAjFqb/F2ba+uSrNGuZDVAiEAlv5aUXGo5aXVwWI4ypeDGI30RiSWBrnQr5FNyEnSF08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQSPCRA9TVsSAnZWagAAQQEP/RYlLEJ5dWv5bsCpliVZ\n537QmoKMCv38MaV065KpbLOapBCVJY7yxb+amx3PrRQAlheHllF8VevTuIJW\n5ux4G1jq8x0eH8Yf1/+wTfGAFzXo4g4AlVPicahQpG/+Cs74PU5jcG69RKKJ\nZLUt5zsBo3IkyoosiwRSvqeLnyEVA3jh3CdKM7+5z64k6Xu2+yL2azDtLDAz\nV92Bs+qOR0TfKC9eyQCIwfg/zj8rcVok/SOlfn4LWLODWcXy8LrVN/GC9IL5\n5DIs2mwc4qj3r3+iIhDgAVrexG05ZcaANWSZxSGw38mK638kxbX20eTmAGRr\nVQnAq6ykabKV1ixes4PV6YbW3aF8u3iAj4m0zdLJwVbNcY+F91FGPI3FKNYI\nbKYlepZfPsZ98cgSh0sVTpmBK7cfY0GpaOtAcLMqXhHWnBbHQSNnbyzMehDF\nSb5nVJr+JdcI09u0P3yAkKP40zpYwDPqr/sNkA5/MqHVpLDiqssxkHubG/ji\nO8JG78qo0Na3ow1/t4MWi1V2BaPvxR/+AfmBw9QmiPL2pznPb7ScfDrzJfKs\nuGOhpTaAugFNu5XphiFytM7mqe5QUOV6R6GAO9HMMulA/8KL1HMO4+37vVty\n797mO4Ms0f5M0VNXQAlDDT5w9HoPj/CCLx/blv/Z8UjE3d1m+7hkAQi55ehD\n/yKI\r\n=Nvew\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.489d4c219.0","@material/rtl":"9.0.0-canary.489d4c219.0","@material/shape":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/ripple":"9.0.0-canary.489d4c219.0","@material/animation":"9.0.0-canary.489d4c219.0","@material/elevation":"9.0.0-canary.489d4c219.0","@material/typography":"9.0.0-canary.489d4c219.0","@material/touch-target":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.489d4c219.0_1607009422924_0.9731159990913445","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/fab","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dd3c0dde531b4ca58ad89f8937db40ee7278853","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.6557a69d9.0.tgz","fileCount":18,"integrity":"sha512-ib59m9Kj6OzIOTobs4JI4NOfg6sosGsqf8We+v9VwWpqU1lVkETmOVsj6TLOw/omvoXBijh9UWtumhQkVsb99A==","signatures":[{"sig":"MEUCIFe2Pcyt6IPZchrIvVqm+taOUFiPTeFzsh/Dd6/R3ulEAiEAx85aQSA7bt4BT6gGCDMs3qac8G+f0gtkfULOa66Zt3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQdUCRA9TVsSAnZWagAAvgMP/38v+mFhQ1ScgTCl8lwr\nrDvRgXuyMHb0ItfPSjMIITnp5R+qJwDAQrL7BwzvEScweHwTd2M/Xvq7m2bZ\npVa3IT7WOWdFHWVX1+7LSiv67anwhEkzDXaCtUE/CWtlSPfmZJxEdJDTExbe\nv8sO6bLTek6YU2iQsYWtNMCiPWcQq0zPEhH9OKsnYL7i4C0pFh5lPmfZNG6z\nnZgFauD7yADxjd7fZqsK/2bOW2pV8b2UkgHEa6Sz0xhQcvJ1zokohzJ3YCIm\nxxFAz8pOd7lv6mHT6xsNPGeO0QNPlQfcI5hj1iWAXRCn8gnl6JiyVILalG25\n1DydK0/3AaldihyMkOUg0moV8nSfm5pMl1uoIgEgoNkGjJkevrXxtbiIjAiL\nLVjRsPB7hfOcIdH+pq5u60c1UAAaPitPEUGbOG8UlxAorAtdovGoBR7fY0q8\nqGJbD6j3/btAw3bZqghWLY5yRdIaly8yxYCAk/1135vBNyFNyLbj8a/wm15U\ntrt96EvYs5MerHwlT2wnVUv8X3p9tkD3FULS1wCBW4YPnYlECXBLOsggsPo1\nk8PFsohHkWIW0tx0mzycGQ2t+YTwZ/gRSHEbb5VmGcaX/x5x1aY6Ln7N1wpv\nm78lnJc6nQsswVDrS0iCCPyP9zNe6X9wGgNZqhyTXiHNPP926af9l0rO6Ffp\n7pOd\r\n=2F+r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.6557a69d9.0","@material/rtl":"9.0.0-canary.6557a69d9.0","@material/shape":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/ripple":"9.0.0-canary.6557a69d9.0","@material/animation":"9.0.0-canary.6557a69d9.0","@material/elevation":"9.0.0-canary.6557a69d9.0","@material/typography":"9.0.0-canary.6557a69d9.0","@material/touch-target":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.6557a69d9.0_1607010132410_0.8166776374723486","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/fab","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"506a7abaabe36d9f9919c9e53868a23f6d3a882f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":18,"integrity":"sha512-Cuz+XYvEeykSIMp6nh5GnA/WeHdRJDM7gPdlAphMyOAsWlpCFE7Utp6aqZDhL4Wikbecp78ykMkQVYnrJ5PXlg==","signatures":[{"sig":"MEUCIDuh2y7k1I3jdrkNuh/fxNfkTBu3XIhJHeFPldPTXyUKAiEAnh7QiF3PUPL6dtrbXJgJ4gIfdOXAK9+bs6Zi+2tFqAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQtBCRA9TVsSAnZWagAACOIP/1BU81QFKhCVVd+umCDl\n04pBDjm5LSey1Y092pe+9al0uZCPWkR7ovwgKzBB71z6x34kE7fJh0ENUChx\nY0+cMZ+H4zu7+CP6WhH6K0gEA/yRSYE9IRMJNLnBmnMw+T6meHPgrIRFBuAl\nCrtYMs4sOTPZyxP0L2DAokHcNyi/t4dYaUwX1a3/ZCuwEDRrgEg7UdRbWOSM\nTYQa/xqzIzmkrZkG95UTB+ZUS0SxjEnG8wx2+HaZ+JCUUAgPJVN80O5OjGbz\njGvDJr4IuKXu421lKYCQHbqKDBEOk/jdJYIr501l3zsmKfERQ+Aa2OQsQDJ+\nPdj39C58BnWIHV2EwLtuec0BGCGE6/9LmLQZnQ3hA/M+2oarqP+B8TjvbRBm\n1RkZAWvvDy8iO627pI20LxqO7RnA6pyDxQCLqDMFceLHQ6mocEJ0jvfMnheC\nnRXEsF/VFR+6A17N2fqyOvFcKvXA+sZmoupJTAx8AjBnzkppcLisk09NJtHI\n//z42RJM0/eS9ctwXIliKWXjyYPi+K8zgsG6ge8yC3pjeYNXlOSJdGmSAgXl\nyJyBMkBBqDaiyxF8lH9bTVysQEG4Q/LUo4A6UCVn1GMSgkphKrIhpzxQ3Ufj\npbdkIMZ0iXdSb/ql3gcKHeVOXwJmufHwCUha8yhkoDMRhjkVLLf7epF0bMe8\nBa2t\r\n=OI6j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.4ea1b7c69.0","@material/rtl":"9.0.0-canary.4ea1b7c69.0","@material/shape":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/ripple":"9.0.0-canary.4ea1b7c69.0","@material/animation":"9.0.0-canary.4ea1b7c69.0","@material/elevation":"9.0.0-canary.4ea1b7c69.0","@material/typography":"9.0.0-canary.4ea1b7c69.0","@material/touch-target":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.4ea1b7c69.0_1607011137419_0.7133183263400344","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/fab","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b8a3c0a42011fab0d2d60def6f4c6b27db59911","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":18,"integrity":"sha512-GimpW5sBHrW+TCuPJIG2J/I6v6PYzvFeq6+uAilinJ7jhPybzGaaZypdBxN6w/dLWEJrIggXUaPcKRcHQPPA2g==","signatures":[{"sig":"MEYCIQClX+m+9/twng9+Tey4qIMCjjT2GbJRRs07/4Z/li/h0wIhAPe6QV7Zp+MPP0C/GTFpGMm9Il7SdAe0D26XCz3Ck90Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRn/CRA9TVsSAnZWagAAszEP/R26o5Dmu4m0vRbok0Cw\nYAlLxRwF0mUmiKHRbu8SirPAp+tUgYwiXPjCA+f6RDYUWvhz9/zb9g8ch8I4\n+qhhKmMxhO2lvbUHxmk+xyRRfroF7iOHVWMmshZYB7xwZJxZAN/L9TksxLz8\nH+85xcYpLtBB+OvDLmYszIeOL6WfoPhVrgFFSkkXTZdd6SwIh6XDkVFjlMJ2\nmfes59/VU81+8Gro6QvIrqHfX27JumrInV5l+CkwWS8KWJ89i7ILvg4gRPQK\nucPIGPGBOcohxTYCOASjKrpA5mco9IWa2542Ebut1wSdUEFMt5E8GcLOH3SB\nrrSfOlobKyAXe4afXWn7gbSXJ5r2p78dYI2/JAE7ZWEnNuYYi22EiJLKr/qV\nGzRdhTQFiCz4zSqeYRa6cQTqk07q+I2dBnZC9V0Q9xp8byYjf3xy6Sq3V9hr\n+bhGMiMRD/EkwKNuc6V+9daoj5IlIjrMa36Yj9fMGZVSa2TOaqhRsklMYLx8\nvO7nwll2TcTwyU4TXVSicwBlpva09mXy+GLOcOPmbJ0weJycavLGJSvSrRUs\nrJA2nAM3L90OCVLTlQgJNRzmadJmvL8a8Bt0O6DZJRs64fYMElkI+RxBZfBh\nnjCa2ufJeKdFj3PTARy8Wlid9pJgxM4wVVcAIUEGT1nISd7vCf2N59QMUkXZ\nzKam\r\n=iC8+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.eaeb78ce3.0","@material/rtl":"9.0.0-canary.eaeb78ce3.0","@material/shape":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/ripple":"9.0.0-canary.eaeb78ce3.0","@material/animation":"9.0.0-canary.eaeb78ce3.0","@material/elevation":"9.0.0-canary.eaeb78ce3.0","@material/typography":"9.0.0-canary.eaeb78ce3.0","@material/touch-target":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.eaeb78ce3.0_1607014910781_0.7652700141625572","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/fab","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da2c2be18db51f424df24e9b109184d5760ef159","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.1c156d69d.0.tgz","fileCount":18,"integrity":"sha512-tpMtOULbO+YJmXZcG1h/cLADKZMo0TvpBiE9apX+u/39RwXaEX1zDZwdkoMub8WM2uCy7eLkFvwMlqrbOCQblQ==","signatures":[{"sig":"MEYCIQDh3jYsQAZk4yjYUhbZIb603TNSTD8e1jcjBIKdobSF/QIhAMOFA/PavILrI7N1F8Flg0Hgqn12T6EbasXuIm0MmIsL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU6GCRA9TVsSAnZWagAAKWEP/0vf9KtucoOBQKajFy9u\ns8OdFNHihtQGlkCiP/vldhvrUg6c2A4A5h1+SzvS0tcR1Gz4/Veu5/Be6HYV\nrN5L2szV20GWEdjML2j+PauoR8QI/23vaRq90wvAkM+43r02vVYeMHnNv0y6\n9iFygXhoinMJ4s6v9InxcdYElTCbjLkBoq+G/KlDDWx1/aKT49lxF/KJ/qO9\niMGEXk/RX/xBTg9l4T/vcYkeMnuQAr69i1Eqt6RFtqHFCXwx+65nVAxWbbwm\nfy9d9//QMf2gqShJf6zJPoeMQpnxaM/a7veb/mzR6UWeNJwyvz2+GvoZL46S\n6WiYYMMAOyp5+nTwQZu7jwp7lCPV9Q7nf/yJCwbEEYismnX+O7RljKWb3jZI\ngbrb+Bi2YasOfdYW6RkrRvpMsofmZY/c0/XBNK+vx2V363q3pxAbL6ZgHPR/\nzzxN5o0HZ0QCYTe1SFGCG8dZtqKWbIFXmaYJ9B9/5m6n5dfF+W6gTEIzJO34\nmOqxH4w4Cy9kuauBJ26RzXOBjgjlOW9s8a8hzPRqRNnOWeEXy6GCwVsuZIaD\nH2xQh+/MXlCpeXy4Y9w5++J+EEePodvcckz4+O9jaj0G7dk65wb+Ss2jLQ1f\n3L2lIeLIcu2Tc+cG13S9GXIfUmsmrOrqyLPVOtZ6ribrezSynfien8YgR7mY\ns11G\r\n=znl/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"9.0.0-canary.1c156d69d.0","@material/animation":"9.0.0-canary.1c156d69d.0","@material/elevation":"9.0.0-canary.1c156d69d.0","@material/typography":"9.0.0-canary.1c156d69d.0","@material/touch-target":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.1c156d69d.0_1607028357771_0.13675647642634337","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/fab","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.832668d33.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51d7a20fc220d7cf1049f20c210d6bd08a6e2c48","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.832668d33.0.tgz","fileCount":18,"integrity":"sha512-ZGg5V0glWezAvMlP11WSEohj9PAnOr8Mgi09zRMYIibb4lR8h77voswMAMXgG+IDgW6zuev2I1vNVEUZpCIViQ==","signatures":[{"sig":"MEUCIQDkL/fqIr0OTECIOZC1Xz7rtpmAWYI+BOtrssyZ2kIF4QIgcARwub9/FNs6KUb1m/I15yMaEhBP1aUCEAiKu72SEfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynqtCRA9TVsSAnZWagAAIt4P/2QQZtcGxV7nYy2jTO31\n9MbCXJCWVU40lgMQHRTT2TcoOGmzsOUPNZ04NYZiv4H4KMC4jVovjyWrTpfB\nSfJm903CrEouWaqf7nUPMZls4wcBTHj3Ni6rOQkv1GOdNSzrnd92Me6tzWxR\nYpLAi8eJvWRuS/qlwfTpsABSqBPOkd/m+yti9gjXCMTltd0Tzzm3u/GRrQat\n7efS59MRa6ZZ1/LFe6az5BxID+5tUBTBXhu5x5E1uAiBK/8c6N/sfSvcpwkF\nVlLHamtWxHklf5FoHQwBxbptOp0vDF4hMxplUz4eeeS3XLoBsVFzGsuHx7nx\nTfHt6p7duhbeaYTjwxYjALtL+bJgl+WiWTQmg2+Ops7RJ92iUW+tMciZ6zNO\naGqmtm9RBcxmXnL1/z7M+H5exlV+FjmRRItQkCvrQWsc/nhkMVqyOk/RB1PZ\n4ssBiSmyigxxXytpRDPEx1M36JDDlmzLgw6q0EWhI3wIIe6TuWNegO2G8896\nfRy4gfw8m8x94Hsd0quvGnPK6MRGaEuxnBiaa+/gztZcL7Fbz+RoLpIGW+Od\n6MawiNHfvnUHOxfpGRIqRqh4TdkittMdAmOGi8Gx7nd33w4E3205LmKrg8zW\np8e+J6dcCkiDBAwhWcXT1vBhMEFjDLuR5AtlHkHBX94MMlI0xqSup4UIx5OJ\nDGCy\r\n=whqW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.832668d33.0","@material/rtl":"9.0.0-canary.832668d33.0","@material/shape":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/ripple":"9.0.0-canary.832668d33.0","@material/animation":"9.0.0-canary.832668d33.0","@material/elevation":"9.0.0-canary.832668d33.0","@material/typography":"9.0.0-canary.832668d33.0","@material/touch-target":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.832668d33.0_1607105197334_0.9182943011868143","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/fab","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.4321323e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de9126907ed944ed7ce659b2e8830730d64e4622","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.4321323e4.0.tgz","fileCount":18,"integrity":"sha512-uolAZv3MNTImuJyTjfMUutzhqqD47RGlvypFVpgeCXxcW4iZbZlrfZTRJXDisaJxApTucSwV7gpCFBnTa/Dn4Q==","signatures":[{"sig":"MEUCIQCaB4bJ8HbIwYcV90gYikhbLULFzlAIihE6tF17PFz8lwIgXLV1e6yN6F0or8wQPxZ61Xlrw+oqbmaJS/xoFyT1rGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhIjCRA9TVsSAnZWagAA2IYP+gL/FWmg44NBn1c9H49O\nrQJC9eImczkn4oNCwg3pbHwRPnoZ3//96qT7lvWse3JSrTCrL712wJJQ8Iaf\nbb9pCzqzjmAWSsN9C6tbGsoyRb3mcLYWalJRCd4x5KNKsGXpuQMy0Q0APHAP\nhYVWVMCkwg5MKnA3m8LM7FA+SM+Jq/rz4C2yb0owInEmilLvmO4a1uHezQ4o\nOf37v4T39g5MyA24tB0/yJjPbNpR+zF+weG3d8lVN3RHb0hWkT7JEbDI0Jwg\nuOjy5l4TyBZH1uqINkXeKAwvQTpROeKXOsvsnhtkzr+OagB+gzoW1WjUiL7F\nAfao6Xq3TefSOZtrGy3X9nUHD6V12bwnmSeRvZ/7j6iK6uAwSlrHtCz4aCIg\njKuPHZbVU1QhnFMjOB1b7ydmep+9hGihYavI+0YYjzdktIvDD/NRtGKOvhjt\nqHasFIaoM3p1b4sd7aa5/3fuX360EjQm8TMV+IHcLQtNlK9CKPzLT3B/Gngi\nkWDrBeB6jyfxZs3qhLechR+PjLc2579WbHImBSW9eQWQflPnq571IN8fGQFh\nJBSHQQGbKu1eLWzMP+dBb2oN6cTKmyZGCctZvnK2NAwpn3GIR97rSp8xPBVK\n6YcEN5Pp/3NHnS6PjCvVVJG60SSCv539Pj/rVsxaA+zAyQzhCew0vESQuXh2\nN7jC\r\n=gjLf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.4321323e4.0","@material/rtl":"9.0.0-canary.4321323e4.0","@material/shape":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/ripple":"9.0.0-canary.4321323e4.0","@material/animation":"9.0.0-canary.4321323e4.0","@material/elevation":"9.0.0-canary.4321323e4.0","@material/typography":"9.0.0-canary.4321323e4.0","@material/touch-target":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.4321323e4.0_1607340578999_0.14497885113004494","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/fab","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d8ed2a556f41f07e9f92fcce46b5f825590a926","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.2d5f32d41.0.tgz","fileCount":18,"integrity":"sha512-7l6BNTEEB4djZ/VMz7rqX7NX/axPZ9pvj6xHmfHDNokrvR5UNBNsgoyBQQrfXm2PS0AD+P2QDyb23a1ASDbR/w==","signatures":[{"sig":"MEQCIA9j/plCZnLT40AaWEHt12zNLoITkOLZV+cMmtBptFEqAiBgEpHoIlaahe9l8tz8pbuBRvcaz1ottVBUBJDvh/Q76A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzltuCRA9TVsSAnZWagAA6EMP/0b997Mumx89GgjiYfsX\nummLtgKzCEykUjCYKQjNsnyJ+3BXcJEdAqs3Uwbq/V94pGeZUGdGMbLQ74Yf\n8fzp/V9IMRXACn1kcRMyzAQLFPus4Kz1ysQfbOU/tmLslZhhNrqsf85QZPyv\n2isdsUHssYy8sa2vQeYFy/VCoTXmq4jc+dK9rQtMJd90xGm/GuTE58HzA0c3\nQ5rr18CMtH8AEhxuaG9c7JUnzdLmjFFHlFacXZQh5KRnujkany5RiIrf2qtS\nLeCkdb/KOT+E3i1Tz4FTeHNPcY2jHCA1uy8RvWBhwgdrQ671jUZzgLYkaSi1\nZyEqYFBaVv8z9HOcHyIQPah1pf0wlsALpqbIIeHKP9pgM19jWQmcYxtObKoc\nuQJ3SeJjF9JjJoSBiedbWESNPC5rrKEDV+eueeNIuQLcl/IgpjNQFEby/1B/\nLomdDX4SCrxFKFtQbJVHIlkECc60m1ZoOykcxy0OFaFHGyialbPDFLLmHgTR\nIWSc4JozgGSpOTrS58kTB+wg28/Kk82/9gZm2gaTVivcYZUX1h54Bj/zB1rl\nxJDplXb/KOzUDKJpulsXxK1lZ5gANnmflEjgG5zxc2j18oU7JdsSZPTmyRxq\nKi8H8BseulOpJ3I8EBmxi/FtalCbE1B8DRTV+2TesAO7ROpsbOfWy338ktXZ\nzRlZ\r\n=FMCZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.2d5f32d41.0","@material/rtl":"9.0.0-canary.2d5f32d41.0","@material/shape":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/ripple":"9.0.0-canary.2d5f32d41.0","@material/animation":"9.0.0-canary.2d5f32d41.0","@material/elevation":"9.0.0-canary.2d5f32d41.0","@material/typography":"9.0.0-canary.2d5f32d41.0","@material/touch-target":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.2d5f32d41.0_1607359342379_0.7938240868973878","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/fab","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.8239afc64.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b8dd3892cfc9f22871796697d04502642521d5e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.8239afc64.0.tgz","fileCount":18,"integrity":"sha512-XlnX7KHYduyDrVxxCAAHcJlR+nDBfGUe3TfpoogdpUnTv0XbyT43m6SupWGT+GkvM4a0ERfk6bgXIpSPR1GEkw==","signatures":[{"sig":"MEYCIQCf7uBSsUjfItfqWSBng1fK/0DtG1+3d812rqbbrt5/wAIhAMqZMZoql3jNY1aKzy7G154qB7JOrigH62SOhGSVwYzf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzod1CRA9TVsSAnZWagAAUsMP/1JGeHJpheWrr2m2HUl3\n6I6lEgyxlpfJmItiil/FBFtKn4fWR+1eMCiLVnR9FQIgHznehmEEt1qUGjPP\nj4gosgF80p0IWVdqLUWyXQbETTVZHP0qPA3hwN5sBg+Ht7f1X2PDjgYieVOy\nIVjUKOdjHDqFnM67waAfkc8/3HlNlg18mTjar2uCCDlZKFx/VqhfVrveqWVL\n09cJDXyQYPzJIVDsEPUYxyZz9FTs8DdKZKI1ZqRryBMnX77v9zUcdkB0yUD4\nQlW+rJNMf43/dwwV6Ks5610RaUDnPj9P61KwZE++hSBxphlMAK6Rzzu5eolV\ng8jezatgfJqoM3BzQNDqnfbKXqag8y7angpQFmqAdWl5FusPsXRZjqkTYYgF\niiecKVFtJNfJ0cw/VwNt0sJAVYGnbXbya/aSmqF2WSGXjDezUzvXdlCy1rt4\nU6T2BQPIxa2SuLkrmRAW6k/bLP7enNGzFLyzWRviQkLEC+5j5ThraXlKYF+W\n5YSmdWuBrcPwnBMHEW9R+IzvbzOmP/lu+gDLioh7hhGGEHXM/DHI7OmaSE5V\nPCG1JozlPOxWspUmkePMFGULrMT8yVp/LJsLycyE4AAejfky0QCBm4NcwKNu\nNuOC6oGqV88Qd5ZqWMgTGZYMheRzDVHDqwjMBKOmamXj+qTEpAvPMzWe0AbP\nOH3P\r\n=idZo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.8239afc64.0","@material/rtl":"9.0.0-canary.8239afc64.0","@material/shape":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/ripple":"9.0.0-canary.8239afc64.0","@material/animation":"9.0.0-canary.8239afc64.0","@material/elevation":"9.0.0-canary.8239afc64.0","@material/typography":"9.0.0-canary.8239afc64.0","@material/touch-target":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.8239afc64.0_1607370612892_0.8762755266581042","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/fab","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.6871336f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93fe1e99172ac26e4802491a717113557182ff1c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.6871336f1.0.tgz","fileCount":18,"integrity":"sha512-EX7m8N1grlvH52P9kNoRf9LyHlUMpsUF5gkdHK1NZ/+pwp98ewsnD7KkdKDEuI2vczg5p3r0AV5g8eM6r2VRRQ==","signatures":[{"sig":"MEUCIAo3SjLMBEyyXDkmB6DlULqhcPWnKCXW85uuzZK7uwQsAiEA1AR+sbgcpr/5J2iRTs24fcTGp9A/Bxojf/CW+EQDFhk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6OECRA9TVsSAnZWagAA0SYQAIKHa7/ClTYfNjVckasb\nNpkinlx/TEDnTS75x7ejnPLnWPCqJ7mhvekQOOTUwDBtaCjzLk/Rgdk6eORD\nXCCS5xtvvss6FKqCT3uBS1GGgQEnbU/XwKJ93XK/H00Xnro7SN8X8BuvtQzY\ngWMeyLY3/HzywA1VHx7dPvyvgJCV5UgBa3xaDt48+SMkUOFXyPBQSQufHze9\nkmZHPTqevALocxi42uap+ZN8isf0dojhwBizPThhx4PjJSnL6/2SyUJewXW9\nMck/5cUiEF0RrKMzCEHfMm3ceeDzgSYlb1yyCQqfKQDhH5zyx9Tr62lAIWR6\n2YccgRHqW78pX1ZVGcd1LQRYYlXIlDJx+Y2lRpV9Rqp2yaXX1IkNqBpp7izW\nJ7WiowBqhMaHMTLgVUU6Yt9n4Dslaq4NL7evGxsdfCAkW+PKplEvpfmmXRX5\nZXyQ76ofL8u6xp8S991i+CCSo/oZo6uoVU/mRH6NV9mbwDZHgOtAQpeiOeiw\no7JblneJ8ZN2JhVXgl3B47A5cmopaXUB3dwGoPyxERrpa6M7Dl/xnZHVYNI1\n5ONvNJBnAjQMImZwvMj7jVeXlQKlYNe/fFcYqd1wf9R6l5CJKOyvMWdscG0j\ngCv+/CgH5zEOK7ummH0+VuDpTqFehBjENC0VXmN21CUVJJeDwbL/wIuErGzC\nRNRV\r\n=wixK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.6871336f1.0","@material/rtl":"9.0.0-canary.6871336f1.0","@material/shape":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/ripple":"9.0.0-canary.6871336f1.0","@material/animation":"9.0.0-canary.6871336f1.0","@material/elevation":"9.0.0-canary.6871336f1.0","@material/typography":"9.0.0-canary.6871336f1.0","@material/touch-target":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.6871336f1.0_1607443331944_0.37742169020620886","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/fab","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.9f718da94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02f2ff3bbc8bf5e88b2caafe1ab63367f7f804dc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.9f718da94.0.tgz","fileCount":18,"integrity":"sha512-OZ5oWuUrgmwBtH53XIHMWZEwjvESEDZLz5ByajY6E+Gyjn9LkjVLrwMe3UBJiCLYcC4kO/PM+R+ROn2/AKir9A==","signatures":[{"sig":"MEMCHxVpERvr/cZbI4EyFU049Oi+hiYPtRwMLRwvHunly/0CIGZvRTwM2O/Emy1BzOJd8Mn37TegznhHWDGeORotHVCI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6ZHCRA9TVsSAnZWagAAovIP/2ljX5/His9xLtJYGnP+\n3oZXm9LzbtIT1kN4SruwchfvT8/iNPu70xSn9MhjT8EENLolg20NmA9jAVX4\n5BiAlKT6rf8iJWdmq3D7pfb5BJQ4tjayqF9d9PKZmLZ32TiNC00C0X0vNKp0\niV5GcyYtlJ0erAmbryjF86KGbvcehPVIj61ag7Y4PJtk/J3w1E/UA3hnrV7f\n41SqB87WQh/mHMCqpB88hlayqqG9aJbvU/JltwvRB0lN6X6masHN683Ol+Ou\nNPrXTmNhdSzvtxvjFEcFDkB/AUeVaBWz+L8FHxwnHjB9JWFzThHeH07LyTv5\n3kv2KXJxIERRJ3thplSjilO0cdGbyJYlAVgOx1dCHA5wSwjsG34O6+DhE21X\nq/WpyUetiSagGlhnH6aqIAgHzGYJOJ/2Of73UpSbVdgmwUkuyEQZA69z8eHV\nHcNo5pqtoOmVEfOHkoDGjRhNiz6EohIBIpFG6+mTN5QOfaSxbJCU2VD2yNEQ\n2FC1vW6JkiZSMoSoKAsNHRAwP3bXeJi0cidcDlyg5JZ0EmXclauDD+u/tvIc\nPI0kWIICRsgCFtwlMbLYO+tV6ToE6XKHSAky8hM03L/hlmH08Ec5AOc3QiVI\nBqb5Rfp+sN8d5tago60+o1c5QOjhZ2+0dVvN9vt+rKeqEZQuDmlOiEBnNJp4\nD/iK\r\n=VTCB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.9f718da94.0","@material/rtl":"9.0.0-canary.9f718da94.0","@material/shape":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/ripple":"9.0.0-canary.9f718da94.0","@material/animation":"9.0.0-canary.9f718da94.0","@material/elevation":"9.0.0-canary.9f718da94.0","@material/typography":"9.0.0-canary.9f718da94.0","@material/touch-target":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.9f718da94.0_1607444038921_0.8312245290717144","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/fab","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"654706a80cb7682f6f86da5a9c038c32bff8715b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.1fccb1418.0.tgz","fileCount":18,"integrity":"sha512-Gztk6NeMmO1SqpuQlJ+49nrLsR4BFBu6Kl88CmU/SWeBUqxKJDvRielXnXyoI2R+yyp/CcqgonPXAR70yX9E+w==","signatures":[{"sig":"MEUCIHTnFfsHYwsWjLbzARBFAzxLapJCVzaCQxwxUsh4FBLhAiEAg+N8Elphp8mLlZPqhz28czZXjmlDrv/gVT4LG52rbOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6nMCRA9TVsSAnZWagAAsWUP/ROXR5xf+UzlcJAVR8WN\n/pbdOIXnJdp5Z4hKpOCwqTYGY8z3Tokq1pAF33dC1VH/A88JREhn8YFXt7df\nwmE0XfpZjHH1WPbH+6+ZAyZ1hkmgstJRD3nPN3c/k6vYb+1aTCi5mFWade1M\nfwYm+jvJ3XCrloJf5zDrMIYah0yFVzb8Vde7wdspwZhQHgBa3D/BzbRRvv6+\nxnGwqBQBMR0jaDFEMFYhXzhZ8/dDmYLEYH/N5u19bK732//tCuAzG5HBUath\nVHJcXDCtB0U8zbc6X1GWPj/Y+K2+dyKlPbDmdpUpNANotKfDZxOiltKVsRU0\nS4+aU8CXgiTLCVQGl1+4qvT6YWLkgQ3jcvp/GXffQDOzuC2Z+iUZCfOHOk1P\nhDkBHr1fhJC5pX+EZvOzuQUZjBgbMe3bVF9jAmaZB0J0nl+WjfEWY/Lxrq/N\nlpzNE8aQPrWKEljF7C5/O/6IshyJ0Hx85/GDb4Xq48uUTyhg9mKp+5LCs9Lc\npVvCjsLl+7583HAuqV3zXuZB0uy++90qoVV3wn0yzicnIeb0JG0fzvNbHir8\nIr9+BgLsPbmWzAOEX1R+7xM5HBAgFaAreTaw6bca+XP/iyMTlFhAfuUbl/yc\n2mummgYkf7ilZYF0ktPMg7Q6HrweolNr6T0jjX8wKmcB5jrnwX1V7wjKsdG3\nioYZ\r\n=a7+g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.1fccb1418.0","@material/rtl":"9.0.0-canary.1fccb1418.0","@material/shape":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/ripple":"9.0.0-canary.1fccb1418.0","@material/animation":"9.0.0-canary.1fccb1418.0","@material/elevation":"9.0.0-canary.1fccb1418.0","@material/typography":"9.0.0-canary.1fccb1418.0","@material/touch-target":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.1fccb1418.0_1607444939585_0.09664715560996129","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/fab","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.afb68894e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0d17602706cba7d30828841b551f650821751fc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.afb68894e.0.tgz","fileCount":18,"integrity":"sha512-j6LLpoJoJm4wP+M/ID7GkekIfe6Hj+ikIDt7TBB2JD3AhF+v6Fn5FHAZ4iQriFaM+gMTyPbBNRXlIOHcoD+Kvw==","signatures":[{"sig":"MEUCIE9ZuHNLq5QUvIKqIYQtjVUzy5brviNFCQyN8OqAgnnDAiEApDx5K45BXdGANs8acJVTFr2ggtndRbwj3Qv6xSsHqkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6q+CRA9TVsSAnZWagAAdG8P/0hnW8k982th0I33obdq\n7PPkltdvQVK6d0YBsBrxIL2rDfqPSokQfxRMP1EWOoUplYYTWkW/vp7ccree\nvq+sm7mmA+VOvtdwFCi1ez3eEWwLve6SO29EpApt9VzgEN7OQERiHWRdpsHR\n/G7E9jc+x+YpASG+tpuicx6u6cOJ7dK32a8MqQK1DeoQMKGmFekAkUUuAGPN\nw1Ihyj8tHWKAagiFxCH+9WvVGx4Tq4T71JVe/u7+7HGxA0GVdRoR3HWFDPyx\nltgZodemh5lG/aKi4xDugBcyWDJElbH+kPz1rBjA3vQOqjQ7jTTyG7xauoaK\nuFs8X5KtsgIAHMtGJsu82GxFBqS56whaSQwHMsXqf1bGPY1PNrw1kt+V8n1U\nDuhsVcuQzNTRNEgdipbf0O8DRFxxNtpRFHogD86igZjUi63FJcwUKSFsdkEK\nKuB+y9YbXPBE2TZjuhd1K6ClnO7N7ZGj70LnARHSjozr58viPp1uGJ9CGrLm\n2UukK/Z72DCC/KocVb1Fjv9R9ZZ/X8/yaxWPbtSovf3BkRuDo4iC/pZfsvOb\nONqnrQ6MTmviOexxaGnekE+C0emKyQDJYc0HUTyyBl8Eopy4/zY+nTTncABy\n2AsNAkcUt2pbFckJWkABycsWvdKiEmXXhqOIIgW9SDNlGz54eKWd7n8+R+t6\n5ea5\r\n=J6EB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.afb68894e.0","@material/rtl":"9.0.0-canary.afb68894e.0","@material/shape":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/ripple":"9.0.0-canary.afb68894e.0","@material/animation":"9.0.0-canary.afb68894e.0","@material/elevation":"9.0.0-canary.afb68894e.0","@material/typography":"9.0.0-canary.afb68894e.0","@material/touch-target":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.afb68894e.0_1607445181464_0.3152983497537776","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/fab","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2e949ac76c595f255b9af893b40307a21df8b7f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.fd88d40c2.0.tgz","fileCount":18,"integrity":"sha512-S6BZXJDurLxh1jvXR+iqaKpPXS7a0GBEFzaDyzJfaJyzYy0ldfeqtiLOcKLZt1hNGkS8RAuVoBeCVEtOr3KJZQ==","signatures":[{"sig":"MEYCIQCOvZiq/QkpxuxaLfJvdNCbYUMudiu1CUjXp6iaJ/Mp9wIhAN546mXUsQhH9QHvn8W+KOtjxFo1wudTK+3RvHCp4jcZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz63nCRA9TVsSAnZWagAAdSUQAJhJTUjT+ePI0OGrFl3w\nmldTw39Odjl3zoCxKXrnrA6pjd8JQIeRlQVrNHkzQtCaHadDdjL0ZfRB/FyI\nVDSFnXw/x1tsk15TTCGJ6rT8AxEqHbwLA4of3/GEdArCxtopJ96IFFVgHTq3\nr+2lMXXXei3fRExnq/LmJ6ozGbMbue5UeDHgVBKisI0gWBaQf58WnEbRThok\npLIaB15P199ZzDHlUuRvAM6XRp3nOZxcbjLb3SeRIpU2C6hOhSkgufl+4IgT\nEX5tH+VqjFrRNsvDC0yzQ8eAVDOxa+/VwOzjec10hmTC35SCjCUUmGE6GMbu\n/W/7FMwIxESIci3L1kJ+z8cazE6djw+l2OLKNHwLTzq+jtBMIrqaBvC1P3qx\nmhOn1x5JoQXDpfxkGcd1v48Q0GFK/CtyF9xy7TMJBig4kiSwQA2hvlO+7L5J\nHmgiu1p6j2MOhL///g3ikTGW130ChXg+vY21QXtCdiTzfAzpyfFRuj+8V+0p\nVhkrCobL2cYevKClXymGDTx1DWC2hy7BAi+wDcHud/ncanb+Mn2qFLQascbn\nLE0acAEA2MboLKiChUvhTxSwFUnv8IN1Yow/S0pCzqaWA9rimg1/UkMZU9R1\niWS61Clnw2Lv2b6qFNBNITsCeFjcgI5MuBzkcUt3dThylIlevr0d4L3hyu8f\n0+RV\r\n=17oX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.fd88d40c2.0","@material/rtl":"9.0.0-canary.fd88d40c2.0","@material/shape":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/ripple":"9.0.0-canary.fd88d40c2.0","@material/animation":"9.0.0-canary.fd88d40c2.0","@material/elevation":"9.0.0-canary.fd88d40c2.0","@material/typography":"9.0.0-canary.fd88d40c2.0","@material/touch-target":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.fd88d40c2.0_1607445990569_0.7658528040496995","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/fab","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b256ba77742044d0e1e20d4adc58d16768c8e337","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.ba9e3109c.0.tgz","fileCount":18,"integrity":"sha512-NaEpAUj07hkwWtVPUULXVwkVBNtc5MdqT41qs1gy4CfrQZwvIJlJu1Hr9Sv1HeERRFylgP4bAUnAA3ZzQ8Ompw==","signatures":[{"sig":"MEQCIHHeVyc2JqrSIxeHnEJYstNjuTFQOwG/E3B6kNNwktWMAiAjorw4i2mNdphBKiV05z8mokVdAP5+U0hLfSrBFiihBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz86bCRA9TVsSAnZWagAA134P/3k8tt+llT4ou314Rt/J\nTrakU1QGB9fVZahFYOCqcqvNfKw76RayyY1xoKRD43fFmy+Cvsxc6cmumF/W\nb4iDrO+5DOK6HxCmRKiTczj3DjeI/RxvcKBaXMcUAkpEEFEcErDT5j5V98Mt\naM8kVp1jcgjFhuj/0a2R6efP7Ks/BpGpX0PgsHVKR5j7lc4plsj7xGD6pYFR\n3V/lneLy+Pndh/BQVykfZrJ5ba7HLdE9PxO8lnwKuGS0yETKSO6lsYS4yLD+\n63mH0AbugioxnSGJOngo7SVu4uVePawD6Fc8dTy1kgtCarIZOyuNPLN8BoaQ\nwckez9vk7tE8iyHySMzGw8oXZFrvhxYKhcebUbevkj8wPE7udsb3+DwHnSL0\nyJbaghKlPbZ+CnJlYgtU7mCZzENYK6KtqFC/uADywV24TXX3g0pLSYj14wI8\n15HgLLOwTUAiFHzfnCYPm/K1VJ8HRMXn7lJ/hPEYgkqVtcqiucu4aU95XK/E\nb1g+IBfWUs8t5e1UXMn7up53c9AHdFnE9tW6QdDT1uXEaAJ+RNkeuC7rEQci\nyqD16kO/rCmt1vxZTzQBuDBj0lIkMb3L6T4DgjhMMmNaL5FxpAs0+AbY2U2p\nTeKMxJ01aUk4blZNMGdMi/uWIOFJfaReCR3ef4ynkf6MJOfnI6yWGqIBkFeZ\nse7h\r\n=6NYd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.ba9e3109c.0","@material/rtl":"9.0.0-canary.ba9e3109c.0","@material/shape":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/ripple":"9.0.0-canary.ba9e3109c.0","@material/animation":"9.0.0-canary.ba9e3109c.0","@material/elevation":"9.0.0-canary.ba9e3109c.0","@material/typography":"9.0.0-canary.ba9e3109c.0","@material/touch-target":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.ba9e3109c.0_1607454362724_0.1200669252069202","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/fab","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5196708b5a83ce8a0669e9b82ed7838db7b5212d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.1085c3b2d.0.tgz","fileCount":18,"integrity":"sha512-tEo0tmWn7W9ymSNKkdK2QglSuxJlPMShEIbUSeU42zbiHOGi/aiM26y8J02BNRDpiHiakmPkUVGRVDqMInO+wQ==","signatures":[{"sig":"MEUCIAJOMRdr1SrLuBzAzgv74VjNKcVUnrhlUrxi1eMYrwMRAiEApzaGnlsq95nlg6UXdw76bOK5OR9jXEzuk6owEuQYd3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SFvCRA9TVsSAnZWagAAe58P/RcTHEOzg5/sooD8AtkL\nAdQHTh5O4amrnHpDN15rDtJ2SEIfB/xrWJfu+K8/lIEAoUmVGtkkVsCyf5QT\nzQ8r0DvaajVPl5fW+5WhHtp7GdVqqX8qoy+BgV9na0rnS88geJOeDAq1+MT7\nPHbAQajyBKEWGWeBs1UNJtyYFEVmBowbpYlZA3M3E3e8XI1KzyZs1nctycU2\nf8s3vuZ5nDAv+PSGXbiHLFxYvWpM/JKDRjBx8iwY46uXxzsxyk4FAmr6EtJs\ng31fWORWhKh3RCJQ2ydf2t6Xx0wOn5dJRAUbh1KhYAHUP8+xdAV+WYiqp2hp\nzioPfKBNKgD7StFjrXQL0GyEarKQNG16Pl9BFji5hFanFCTCUOaTzhG3bB9I\nbSX22TYr+Kf/8Rsw3+513+LPIxv5HijgL0onwBADwxjba/9QdQVEH5E2vlQB\n9AxCZ5uXl+BpAkRqZeKul+piZwH69fG4ndre182oc5jut1AR1ugfCSme2AUj\nSJ1+RZBFGazx4TlvI+1lEtWp29a8B2K2gWa9CRmqgqLZQLL8RH1++PqKZBf0\nI+dHOjpoCqnOaCtufKMsH4BbBOdz3OJUmTWlQH8iAEVk4SAuP2e6/F35Wa9M\nJWcdnHHQODBmStKn0J3NKWREZb+FyuINdH2DiVNrH2Nd1pXoqalr1ROM1Qi0\noLFc\r\n=EV9x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.1085c3b2d.0","@material/rtl":"9.0.0-canary.1085c3b2d.0","@material/shape":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/ripple":"9.0.0-canary.1085c3b2d.0","@material/animation":"9.0.0-canary.1085c3b2d.0","@material/elevation":"9.0.0-canary.1085c3b2d.0","@material/typography":"9.0.0-canary.1085c3b2d.0","@material/touch-target":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.1085c3b2d.0_1607541102928_0.2943268217198727","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/fab","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d51b4333e01deb48246094772b921db66e7fcfac","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.c5dda809d.0.tgz","fileCount":18,"integrity":"sha512-ry5/F9Vy0MLocLq+42YpILDNSokkHwjCpLHAttOcaLgMh/eSasM99OP2S/0+Di/2yvpxACBsV9KKFQ2sVe6hCg==","signatures":[{"sig":"MEYCIQC7Gl+NnwwYUCFBObGXncAfXgZhkadsklwmnvzd9bxU0AIhAOT2SBoUUgvtrm1FDB/sgFaNrJZXGmrnC9/tIhfAd9wW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TiXCRA9TVsSAnZWagAAvy4P/3QtC+HvZKWhQ/DLVGUN\nQIZEs/JkuAuMYr0XaBD0uW33Qr5Ca2QPb67O79hKLRo++jwyB1RJw8aoJECH\nRQBdbfjivCzauD7Dug3C0q68yamxZNb2+7QDB9gs4kjxDBwa+Kx57MFdSEvk\nj5zlWF/Eoi84P4KCRZwsJL82FlSylU2T1SYGIyQZQsz17lhmgzOgmhlBx15A\n7sNonH2DJxdUS9jUCSz+j6vCr5eMwjYiI0n/X90t8RO7gb81Yo7ShiG2CbHe\nW9cNlp1tbo8xHVN0EiVhGqgZbDb/Drtw8E5ppv7YfgFRe+6kJ6UBnLV77jfm\nkrN3WVEUimJkkJrlubqc8lvwnMmErP95Sx6W1GNsIqAoNowOHmVnvJGw/XWv\nFiSNyIyoZ4P+etpWI5cxt86zL7xWPAa0S6+aGtuuzN+8oD06Ni4oBQevpNBk\n8qqs8UAPoP7j4iD1J8ujrxj5KOIvxgubryn1D6jtmtCVzIQMf/H1FoxD5BON\n1OGlF7G5xKDbVs11JCqVFFBISC9HfUrqzPiQUM5FzSJRFwUhpQY+SibMHZlx\ni1NuLxR5NTpVxf6UQ8Qjay1sMxcaI/2m74l3N/QjSkkXNJw7ZSqiFp32fJA/\nQCp1zmyLvproC8unN652mI3uf0z17+T7emLaWVP3ekHEscueisuQ5a4ZpJkN\nQ2zr\r\n=MChT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.c5dda809d.0","@material/rtl":"9.0.0-canary.c5dda809d.0","@material/shape":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/ripple":"9.0.0-canary.c5dda809d.0","@material/animation":"9.0.0-canary.c5dda809d.0","@material/elevation":"9.0.0-canary.c5dda809d.0","@material/typography":"9.0.0-canary.c5dda809d.0","@material/touch-target":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.c5dda809d.0_1607547030753_0.5376326329159642","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/fab","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba3d129ce39d46e66ca422d9a3f4481a5b130bff","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":18,"integrity":"sha512-9T6Y2f5trEtbK4q4n6mSdIR+GB/WRGMEWaBvE17FRANNaR86FwizRYUEQ7pbfIX79LHumokHz50i/mDNaxHJGw==","signatures":[{"sig":"MEQCIBozqw7QkYaTqFlbrHCtBpB9q827tQR3lrp3RrLsjqwpAiAvWq8R1JAArHCXqRmKqiuy2wOQYy7PbW2+xWbdSE/Q6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0Ty/CRA9TVsSAnZWagAA0TUP/RpKefRmTD0lPVhovTUz\n/XKcfQTnL9OiU3quo+6Y+PRGNImgNgmE3WNK9w2Bn9/xTd7mP0GXoBcPfjZV\nzcr/V+XKa6YTbko5CouJOHT4P9K5/T7SuNNIoUw9htXoBhIqCdYwm12gXTnR\nJb9Vj8lfE1y6ZDQ40yunHFz1xTiPhVdFHhwLVos+Bqyx8scLh9rP/ZhVaK60\nSRhjaIV+TQG3vczZXXSFPifiJO6qyUfm3Jnl2W6Z8ToBaRy5n5yFYft1CFOF\naCCrE2MrpcZyZ04rkRDZ+qHAVjXBPv6V814+qB7wSruqPj99qbmRqcqljQQ3\n6XXeBvUSyTnM/i4THBNdKzo8uLzxByNQmP+V8ytvQmQ5+1tLjemBpzZv0pxy\nETPSy+cKIu3Rl4SEBY3p1U/SMpgPsnPn7J8pDImqSq/5iFZzwxnys51ewczf\nkHyc6yPWPuLefasHE+m8AnnbbO+Lb4S5EHHpMqFuHJytDRy1rvb4x3SCTqd5\n88RKkbOhaZRUpsO7fviM+ZBNHLL2udg1j4itYQwzTu7H2NGGWo2XNZsW/F92\n1ml/6Q37PyB8vdZjC8/ehgaJ8y4ljbsU8vSwhg6ApvK0l0g21XhRyJybAQ+j\nlJv7Vx6O5MmZzCIerfkI6VyeARjBxlg8WPRHk3XouUBYmFElzLCEo6mLiq4Z\nu01A\r\n=BE84\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.f5f1bd86a.0","@material/rtl":"9.0.0-canary.f5f1bd86a.0","@material/shape":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/ripple":"9.0.0-canary.f5f1bd86a.0","@material/animation":"9.0.0-canary.f5f1bd86a.0","@material/elevation":"9.0.0-canary.f5f1bd86a.0","@material/typography":"9.0.0-canary.f5f1bd86a.0","@material/touch-target":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.f5f1bd86a.0_1607548094822_0.2448712131715154","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/fab","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.00f38200f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"451311d7d4d53e03199f83aba08853dc200b29d2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.00f38200f.0.tgz","fileCount":18,"integrity":"sha512-eCh0u1BN05ECLGX4KIzEowln58RW8nmHs7euo9TyvuYwfYVzReW8TdsEkr6sN8B/MLwXOOlr9mRIjQXDqmp79w==","signatures":[{"sig":"MEUCIQCVRaeLKq/kX+KToS0StFswL+fwWvM5lbaI3DS8snOq7QIgOcJsXVFB6XdzcrLSV8PDNlJRS0umzLozyCy4mxvVxw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05RTCRA9TVsSAnZWagAAikQQAJph/yyRYrqO0Vb78Vax\n4cfRYpcyGg3PWsaGen5d54bv9se7t2BD34Cy2rB68IZQYEzgVl6chnCdrHU4\nQ8ppaae26nOYcwEs3Awdw0QjjqvUB3sRgd7IQI3tf9PZGOcyEmNgL/kdE9xe\nSpUxxhNrCQFjlTduEM7rFIAimMDZ9+HTZ8p7ajvOVseOK1GNI22znDl8uikF\nZxpTxlc4cRsPOoR4t7z9AoXiP3ME1qGuxIQlwO//hHGKLG5deNDxPaePiQ4S\n8ElAI9JhE6RW2B7aCc7xq5+weOvV4NBgtpxIQ6BykZ+looCfWJ7fjA5YK4Dz\nq+LucHXHbPfeDDVQDVGYa44TdmylP1tqKt8GzCII25VZR57OHkHV9eUnA+KO\n5GVMIZvp1n0Q5pQeb/Utem8VPOc8FklEOH8UXdcwXD/wUf2ZTsH83FReNMC8\nZldlW17Kv4RJkjBVzSVYs9QqkilHPsdmIyfedWc1q/Y2yvKCDgG61LBSzzaN\nDayixoEfcXQJorsm964Oh31wCDKfT99JID/bpvGBP5/Ma/RViMGSEWIN6EZO\nntSFpXays+9PBd4In4oHKPOOtbdAR9IzuJBTMifoAVV1DL5kiat8BMTLFZpS\n4bpyEicG8Ng9MXK3NePtAXTAcPiH7E2OQBIMnzvDQ8wCw/nic0Y9eWhgn3ZT\nQo1T\r\n=roQ7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.00f38200f.0","@material/rtl":"9.0.0-canary.00f38200f.0","@material/shape":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/ripple":"9.0.0-canary.00f38200f.0","@material/animation":"9.0.0-canary.00f38200f.0","@material/elevation":"9.0.0-canary.00f38200f.0","@material/typography":"9.0.0-canary.00f38200f.0","@material/touch-target":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.00f38200f.0_1607701587001_0.550991739188236","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/fab","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9bac3ed288303f77206d5db5ac2c00bedb7e097","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.ac41a5729.0.tgz","fileCount":18,"integrity":"sha512-FQovKtt9AfRtBaHqAatDx5G3cxIfytYSaOyxwk5raxjQUa+BFsAITRekfjnJmllc1ojAioFTm+HxalH1Q0kvBQ==","signatures":[{"sig":"MEQCIFHz4AGJ0BiovShuOM6lEk4+cad2QJzlnkiiewtNJ4vSAiAuQ/mfJ75Qe0iaImlvqpYtPd4vfuOrL3k+yBuLuuE5AQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf055RCRA9TVsSAnZWagAAOUgP/2acT6V2dXy5NDrgQfTM\neOiI2+2m+HBpgtbIn8xGqSFLQwc/uOy9/JtRn3VEr31ioFA1B9/prqmBkBrP\nAWmgKUIVZjJE7vTj4bUfilDX2C81bYL6dZKcQCsBRsLv7GvTuwtOUpxdQsU/\nLQPvgfvEzz+MtYMAIDshysbtZrZNmerfWy+esbe+Sql0k7BwEvcW9cScx6iX\ncjfdv5VEjN6IH/aYKRoCGKNScrDpbbK0KtHblbBbxw+JGoQ5lEM1b8lOwDOq\nfQ5J5SRVeDUhK+E9WTQDJpVSs06t8zzylngPNZodcL4siv3lH1banCiUld3I\nwdV26KmjPHEg7hm0tWB0KspMyYF/YVEKrdtcbZwQTjddmXTjXHqpa5pc88kT\nOm97X9IFKoFjrmip96jrjocfN5m7n1GDO34y0/06Am9uNZAbkRc6Vy0gvTXi\n8X0D9qdjQl8+p7Rox6cmozkcagwsi8cFPgFJTVO1ZGCtFxs10f0QDO1B264Q\nPLwQk88lPum5biOO2Ia1HixEmKai4BjtZ3L3iofWZ+NRubU1/keZD/ZwoNMM\nOYJtiWGVtDfTdtMGixnkzhssCKHMfmGPKbsUiu5e4PoAu7uYECNw5WQXmrmg\nntPDwgRgCAFOedNBjOnoQNp1OcmeiQtNZEySbO32YsvtX+zrtBxIY7unwCEu\nyYGP\r\n=UqbW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.ac41a5729.0","@material/rtl":"9.0.0-canary.ac41a5729.0","@material/shape":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/ripple":"9.0.0-canary.ac41a5729.0","@material/animation":"9.0.0-canary.ac41a5729.0","@material/elevation":"9.0.0-canary.ac41a5729.0","@material/typography":"9.0.0-canary.ac41a5729.0","@material/touch-target":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.ac41a5729.0_1607704145382_0.3535680269688195","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/fab","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83d5f59d893d196604ac7dd06c2b976960a6d155","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":18,"integrity":"sha512-ct8t4Su26oVEi1xZUqL3WbMYMQE+kJ8ny8EvatbUfNxp9/B+2dvohLn/0PmK4n7QBn6sJUKz/Vifx30usbODgA==","signatures":[{"sig":"MEUCIQDo3nLfEpXuX6e7Sv/HhTTA2GVJIi901Ai7sQK1HsCWywIgFZANhTexLxCY8bL14xJ22eMaRfMICO5BWj7QcoRBJgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06cECRA9TVsSAnZWagAAx6gP/0NNJ3IlFB31QIwG7O5b\n7fhT0MoBDx0EQkEB4i3vx788P2DbunDwRDTqof6WDGHVkseFjyIXyeOuh8IH\nsT/6/Ubn0h8AuFhFLEoDgynJgNcz246Th+AeRXqeeYYYFXY9quHvnG7bytu8\nQFO+NOB81+od4wHN4zkWTH82ueP9Jah2In2bjD+Ol/K7j096V5O6xm+vHhGw\nd0D35zi/8moyHZjNCoyiZBmSi4xlhhOSBP1NPFl/UOPjU+6zQl7lwpYaFlex\niQIxlRElX5f4aBN3NKC4ljD0GNVDr+cG+hUBL79d+NbEngEjT4cBGUVkw/24\n4+NLO7JWT1VJMG6mtHi4XpqQ+Ly1Tv/LwOP1D7UmeWj7LYvD72qYvP3jjIyH\nRP5wKhnweSV4qjP2QsEeaBVJkyLa1fHKssvzLHHtrpVZy+mHY0Rk8EcJ94ZA\nJFLxkQQVyaYVEoNLKhNq5BiEUwBXBI9uwCYzl7rnzCssjNqu0DtZVYpC3RBM\ndufLQC0u0kx4zhpNxUkvNCfG9vY44ZoDPW7Kp4ph8SufqHlprjn6I9fdWMrn\nJnyumwdvDGMUJPaOdmaBadwnG6v7uaryLhw7OdvG5FIGb7zCkLYIwrpG9ODk\nS9qRz4aDUlkrAdEaXWsAjHRzZDSQIaxBCNwAUNvrxKxEVKvNjwCtxc+LivC7\n0HB4\r\n=KLqZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.7fe0e4f05.0","@material/rtl":"9.0.0-canary.7fe0e4f05.0","@material/shape":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/ripple":"9.0.0-canary.7fe0e4f05.0","@material/animation":"9.0.0-canary.7fe0e4f05.0","@material/elevation":"9.0.0-canary.7fe0e4f05.0","@material/typography":"9.0.0-canary.7fe0e4f05.0","@material/touch-target":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.7fe0e4f05.0_1607706371834_0.27220864993761573","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/fab","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.9244508bd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2926ac06465c33cad7a1b2342902c0900271647","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.9244508bd.0.tgz","fileCount":18,"integrity":"sha512-c1jypK0XIIPAsgotME2C9s3bAhKtm+/qxR5NeYdeLw/TqrJUJD81LUc4pKgiBPCy2PQIGJ9oYLOxZUEJJEWVpA==","signatures":[{"sig":"MEYCIQDwE1g3oNtRaEuKkEMW65j5Nus1gOzwnTXbZkKHo71RLAIhAKYPN8APL9hIW0xnTcg6Z9GHiSY6vuQeCxuBMUMbhRT8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08ORCRA9TVsSAnZWagAAfMYP/Aiq0KVxX6elkQr1Tx65\nhjh3q6KmEpoMgNPKqMQbN15/r1ktiO8c7tdtQ+rhexDuPy8Xe+v/2xe672HD\nfhJyJEs0pk+JVcJtgrMQ752lOnT8ZVLqxJCnPg7X0zhtC4/k+Xi3rUK5anxU\nUm7roNHfqOG7MBatu12a7AzT2uXdnePzPbkKRoMx154FjeKc4xKNz368hk5k\ng+6plAdYR8YYN/NH8WduQSb/kBkuflS07qBrPOrwGc7gdvBDj54o3tag0Md5\nQnleBgNGgp1zhmUZ9dOeUe6VsXgFLFIBfdpjrL1KJOajFCSD3FjiveQXksba\nQypq+gHgzJBPcRq0s9XygUvoXSiSsZTowPCdb3hvOrDv222+6bG2BbivogLU\nHclSrVALN9Jyq3ZvW2Alssa5RQghJIps3N9i9ZEnrHZ1gFB4RyeoXd0wLgOe\njtJCi+7ksXShh1lMr/OBiTtRGi231ctf5zkmvOUarG2yNijz8sXpSVP83hYj\nG8IZfCv9M2WJtXbnA/bEvXklAEOG0AkQGpfiz2jPfjaTIMknAU2RqHjvWH8X\n/tZfMkNeQbx5TKzlQj55gE5LiRNaxxBOavUThaMd4JFEbsTkOUnsQXw14nOd\npr6Mehk8kaDaons3YaFrAm2xcYKLq1+fyJynfmU1zYXSVBgOw28U0B72MnbW\nRWpB\r\n=NAYW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"9.0.0-canary.9244508bd.0","@material/animation":"9.0.0-canary.9244508bd.0","@material/elevation":"9.0.0-canary.9244508bd.0","@material/typography":"9.0.0-canary.9244508bd.0","@material/touch-target":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.9244508bd.0_1607713680925_0.9756921394843001","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/fab","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c83d2010b0379854d2cd7860266b8a5e29e79b8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.384a8eeb1.0.tgz","fileCount":18,"integrity":"sha512-UaYhaQiZ4RDwB7yiO4gB1HvNcx7qRWJGjyMXew8ClpltTW4p5cnUHJwEUMrw+3pjCMD6nLssOb0smOqyhAHr0w==","signatures":[{"sig":"MEYCIQC/RXblK/g4r5kvtTna5jTb5vcq0GfY0y6AkLl5Xz4pZwIhANJPlIc2SMgLdn6NcuF2vATrcFi+qAr72iybb1NNiEc1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j2mCRA9TVsSAnZWagAA+LYP/12HIcMnsgq3+CaThvAc\nGJ8EuJaLVXpfEhkEiB/xOauc7V0/Wt7Or7ucgCWCNqCMZgXkBDqEz46ndjc7\nAzLcSPPB2NyIoDvpXBeqK2hxxknd6vH4WTgR5mO/f95zfinvAjYBsZT+tGMQ\n2LOo1RAXODEMjD44h7f4oNUL5cHv8UphIgIriDDBUgXcYsJaAgF5RMqyswBZ\nst5q+7jOEsGg5TXzJy2ZUQBMSM8Myl/92zt0i8xW42TWIMl790ga/8iIJEPx\nfQAG3Cxyll/QjIfmIFWmwmA8ERaKUQAAWNrkzank0xi22DdgKrwYpE+120SG\nGloIIGVI91OgwqpkNCZrAWL1ujZAmkwHTi0veZlOuJdPvOnevMRjKdKrlGGp\noIo+m4vKfqacffoW4tIO7+NallnxggQKDxAC94J9zg/CrWasZMtPQLqJSClc\nMWtIXZ1hNrd7u6gcfi3aUTIuDbCe3e8KsaZ4le9Q7kQVKg/xbx/tTZ4kGAbF\nMLIEQj0dyCkwjq3D4LpHEUbIL3s3xLfF7AiK7zti5ud8F0wTm2lsWfTKUpWZ\n/f9JHsBV1obCa7eKF4NG3zfWGRYzDm3wlr3gFINgf69RWs9OY1ZyZoLgWOZS\nZEP5NdxLfI42suRBhqKQRDvWVV2eopFrvv73McrXbItYaynu8QV8aSb27Ng3\nYfH8\r\n=kAzm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.384a8eeb1.0","@material/rtl":"9.0.0-canary.384a8eeb1.0","@material/shape":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/ripple":"9.0.0-canary.384a8eeb1.0","@material/animation":"9.0.0-canary.384a8eeb1.0","@material/elevation":"9.0.0-canary.384a8eeb1.0","@material/typography":"9.0.0-canary.384a8eeb1.0","@material/touch-target":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.384a8eeb1.0_1608138150332_0.18902900440018744","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/fab","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d0b419b4f76a1c27332f8378477cb4430e2a8c3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":18,"integrity":"sha512-c+ZtHLaqEGbe+jstjIMHed2OvB3YUH/Qx+D1pd+5R85oMUSgFgmo8oh0wdBvyKlPhUcVThdGd7oFqtGLjB5xjQ==","signatures":[{"sig":"MEUCIQDLPREquntJN2VAYVLtHRLbA9Yc7c+istAonmXeld/d7AIgZH6Su+jal/Tu4/yAJz3zomjKBQcljf41IL/hMVmc4v8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lHDCRA9TVsSAnZWagAAnlIP/3VEY2ifAFT9wjvk6dLf\n6lB6QVULTOWUbDkNuPLiLz6tB0ixsLlCaAXisLDfNlPWNRssylsmJX3TVYbl\nG6tRroF0iQbXKUByK6mC4p1S6JKs+hN5YN6Y1kSMmZ5BEVNhitleh6aEFjc0\nTHmXSP46WjUwdavlC+Z4C6OFbPzMoUaptgJrW8fEOdlpiO/erBtIEUZlhead\nLnLiXnRKqdFXMuBlLgxvr3jDgi0h3Sd34RGgVwptAj65uC1+C4gRS6FUZwut\n8BZ9Vnd1v/G9QgbVBrUv8SaF5vhQbyZ2WT4UHJBWRm0sS/tycaFSOjuB3UGG\nyKiX+W3DSEvxskB4Zp+g7JmEpQWsh9fm6L1M7PS7JuGXQdGSGzzzWcWG9M/O\nrusUmFl3W/DH7OL7wpxeFUYHiN84/O6kTc7/R6fiBGN0YsP0cxnTZf4VeCdv\nuqydRTvi7gfeXhbrkeDdBrPiw+bvrDqiySyhUiOFmx/wQWB8QSy6VH6gDenY\nhNx9qEc5tVFTqkiGB27vQlTOn3LFp5MSgHpCgwQGDPdtm7YGaT+ojABFRNYX\nYO1xkMH2p/d6RA13cAiV2lra737OHVmPW34CZ7MF4WSHANAL/OFTkQeC8H+V\npVeKS12rp2GQPhyLjH9MuWuF6WXjDxJ9Hrz2dh9oIxBxQk7f7LWWFnOX7eev\nCsbB\r\n=3GJD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.eabf9d5c2.0","@material/rtl":"9.0.0-canary.eabf9d5c2.0","@material/shape":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/ripple":"9.0.0-canary.eabf9d5c2.0","@material/animation":"9.0.0-canary.eabf9d5c2.0","@material/elevation":"9.0.0-canary.eabf9d5c2.0","@material/typography":"9.0.0-canary.eabf9d5c2.0","@material/touch-target":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.eabf9d5c2.0_1608143298685_0.6652405003061777","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/fab","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1ef20a2351bbac1b652e905de8cc21692dfa139","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.30fdfd06e.0.tgz","fileCount":18,"integrity":"sha512-ncX48sbpdE7CkHki2NyT3fLc7XdDrIUDVpcl9HkZMsd0EJbpa1mIoGCO50TpTc7yhgn0hHZ9cXCozxukaNvWHA==","signatures":[{"sig":"MEQCIBtVMprDBSjANxsSHQg/qCSepiIjKRbFY3ZjnhgBw91IAiBPu6/xNloXsTIaXT/0FZsN1ikZfk97x1N8R09xinLUEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lsYCRA9TVsSAnZWagAA9iUP/RHUHyAcAze1D3VCIHlA\ncVzzF/pJLa2Q2W62mluFzx0y+nD2faIk5wLdCMrgEntqymwzorZUMx3FOxn4\n/9X/yGMF0SZBEQnQs9AahZo+hnvyjEsFPEowl0dr0gykWkJzYR9AXBFFaMg7\nCeD48GdGcvD8t3erpsImFXveaiaDrjufhDQZaDlx7iE7w3IUMRRTsk6Ls3W1\n6UOokrJmqBT8HQn9QjElvo8/+KjoeCGDsmN2YUCyOpPsM5W2SWdrllP2E4LY\nQJvAjIdsZ41zMBY4KXL/PkuAhfC8l1domx2jMAwucGBRcxegJtrr0BUxo9lv\nyTIe9vy3m4vsAscmxAI5uWUMPxeSXVEz/pEkV5qxRZ0UA65reP5h5dVC2ap7\npUZ7WicZy2xDGqsLIMue66dHqC7arWEqpaz20NhVkYQ3KFNtZP9+mtgKfJwk\n8OzIPt/RSeOQNM+AynqrvQJOKr5J4WK3mw7q1HB/qEoPqX09pEHAAK1HoDmw\nZCCebbB6URaD2WwuTjPESqF7c/3FHuGjA16sMcGeLTA4OyjRtQrmLjZXjvjc\nH8QYa7u5cTfXQUgQvjLO1RZ+Hc32lG8xPGXBr5UZG6UKm0hSsjTQg1l8TbTz\n9YwFw11UvPuoWRKdAJ5Bka3YG2RpSQWuZKPvhPi5SDF4SY10+y1jkG7CLV4D\nUFOV\r\n=8nv3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"9.0.0-canary.30fdfd06e.0","@material/animation":"9.0.0-canary.30fdfd06e.0","@material/elevation":"9.0.0-canary.30fdfd06e.0","@material/typography":"9.0.0-canary.30fdfd06e.0","@material/touch-target":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.30fdfd06e.0_1608145688198_0.7059536096148138","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/fab","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d9883efd46ba3ffb73e02aac16fbe2238046e44","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.9590a8f90.0.tgz","fileCount":18,"integrity":"sha512-AB79jBbc+bjbObv4UwVEMK0CH121YmgUjlIRUvYE9gGT4MFKoPhFCLtY7AJ+pwNz0ZFV92L3jkBwDBLqBTrepg==","signatures":[{"sig":"MEUCIQDsMADnvmBUgDRZLa6eaVa3eFBEMQkkkf7/ySwhOjoBxwIgR2NyTQGgZXanXXBYwlxK+TpoY72kApqyX56oMgfP+sk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4jAOCRA9TVsSAnZWagAAdKsP/2imbeKU/SKIFYENJXdC\nWS6NRGRdIO4hiwKYMNoURVTOUyF6WKELrXPXvC3OlEx8txgT1kEMLh7MYty2\nVSZQmtb9NHEGveldhIsSSo5ZVnBUlkKEIrN6qof5k4IpepbPtDghQc0iThVL\n/pAsf7ocvknCdeLEElBRaQf/ie7yXBnvMRDratPSOAy1G2RX2TzYlx0N8vHK\n9klTnn3/XfAkjz1szQZar0S6nEPpme+SBBhF9qAbVI4/nPcvMaUeujOylKOf\nQUuPcvhRn9vCMXINJ27PM7sUACAydA70j3AlALPyhgW042qL1LuxnofGqk55\njSOYc1Sni6iB5JCW72wq6viXRq0s6yDsnUoAD4nRDLZpUvztTT1JFn3xsw4r\n1jDDIDZ79uDFVPufHoWJ7Qbg43zwymynofl7c/LZBXvW1zexkeFx70djsjvc\nfaA4lZa4GveUeKWD/zZyCvKiWoERuQg26sgWr+i4NvdNXwuPdcuNfo5+ynKD\nA/jKZ0x70yjs+t3o1SvZFJfzxitf0vERstrfAsARsr6xVWEbt/Py8NiDAFqZ\nfmoGucSYrsRU5gaZVmrMcwii7Jc37rv1kkYNtmVBAgVI7hDM1D3Fg0TkYj4p\nhA3BXR5k+2z3XHkMDNZhp9hGVhCIwN2LCIdx7XGa3Rj+o8Rj3ZdqBODvTWqo\ndhRn\r\n=fHMP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.9590a8f90.0","@material/rtl":"9.0.0-canary.9590a8f90.0","@material/shape":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/ripple":"9.0.0-canary.9590a8f90.0","@material/animation":"9.0.0-canary.9590a8f90.0","@material/elevation":"9.0.0-canary.9590a8f90.0","@material/typography":"9.0.0-canary.9590a8f90.0","@material/touch-target":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.9590a8f90.0_1608658957819_0.3843128051697633","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/fab","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"785303fcb1dbf81b7610de14c79a1fff01a94ecc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":18,"integrity":"sha512-AYgJbe8Ek62yR+cVzxqU8IgUQVs2ePpa7hCTad35g/sfgu/kX9StfkjFiSMuMJyCOGsLWLkAztqTkNX1XSLK6g==","signatures":[{"sig":"MEYCIQDwLY8RBgma9Kad07sJLf6IP4Auth6f8xziczcIH+iblwIhAMhIemgT4Er69/7/Yu3k8AW8BHe1lm2+xeFNl0a/SlPu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nvJCRA9TVsSAnZWagAAfaIQAITQ2cz1weF1xYw6Yf8R\nl8G7vHy0wUTuUGqbG4jq5iRClEYJrtW1aa8yFYXrc6pzGLJuFAxATMvCMU/1\n8TuSQ1q4nXfeD7bhZfa/FY6jaH1QLL5IdP7bE4MyVVQ5A6mDqHxkJZN+KWkh\nMeyPDGtFs2jEK/CXDkfbvkANvFwg2CrXOKzN+i59bIMJ2V7toOeVeKUSuLze\n5bpOyWoFDefdkGme+8NsmXYWlMvsWHAtYLFY85QeEEU/dGpzAWjOIlu+eReb\nJTUGrETGz71yHMiF1ifetBzbecdCkVy9PgVMSVdypmaqf73ct6Y1kAsv5xRM\n/c/ybSJ5sLxl1mNxT2ek5A0eRn3g9w24qt8ZWdok6PdhpY6ORUXsj0oiRYR1\nfU1+dsJCBMwvaWd3pzWAfDhWH5U4kSWoz3yL5fa9/pOUvEmy30hV5GmohIDb\n32QmuMczyth+AIRj9DhSc5A7iiNQN5GEV93VQqrFrf8pJVJExsaPeHcwXb6P\nGqUKssptzVSf3teokkbYl1HAt3LQ1/l6PkNnzhTlPEw+iRbqKL1V0prdl0sH\n6+CnG1K9BzMo0Mc87/Ta9fbRMZxprTklUQ44dJXqCv81LqR36AXkwn6l1Njf\ns1NMKimCr7j66gHOeZPtOcBXs7pxl+hGnzRVJYeFeYMt+RY8S1i63FYl8J2b\nbFep\r\n=WSuM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.f89d8b8f2.0","@material/rtl":"9.0.0-canary.f89d8b8f2.0","@material/shape":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/ripple":"9.0.0-canary.f89d8b8f2.0","@material/animation":"9.0.0-canary.f89d8b8f2.0","@material/elevation":"9.0.0-canary.f89d8b8f2.0","@material/typography":"9.0.0-canary.f89d8b8f2.0","@material/touch-target":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.f89d8b8f2.0_1608678345200_0.40447156884023583","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/fab","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19c113ed94c63dc9109ea15315bb06d5fb31ae74","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.fb194dd35.0.tgz","fileCount":18,"integrity":"sha512-7v1/AAQm/+dThGNjW+VK20pcANPYQpVUGMiCL8SOOI4A2OuTjVtSc/YBFuJ7baaWC1ubHFVdjWh6ukE93b8bjw==","signatures":[{"sig":"MEQCIFBPnaYavYz1RRlw+CLFByGnOid7Uy+VBI5GqwAT7IylAiAbtcgyH0kH3bCJEJzqzzIt8KioVfaOQIhmI5HhxWoXVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kQXCRA9TVsSAnZWagAA+xYP/0SG+67u2C18iN1Bi163\nNyhV3jc3KgPOZKQh4wXjVwYjbpKu95XNHD4/DN4XXnDCHIPd9cIK7d/9YrtH\n1wS4y07st36o0fVZAG9vfDQyo5NEHGtEYHalLDolQybwh5jzWRVdLSHSQaX/\nWqsljekw59COjkjIgZ/ieKSnKtFrsH2kZfgE7BZ4eegxeupTNUexZWs7TcWY\nQjDrZZekzMpYgC/OeO9MxDEwlu65pcVgK9McXDR+t2C3gSmBd+VUvMXGy9bZ\nZppOL7llzbSqzO2y9kqWmqtzfAsNRifl+WivXyRfFdcNJutf+U9F7wuzXtzc\nez4Mp2uGti6y21goxoLy0nVbD6vme/gwe9cErOcjezUhBRrJG/1nGf1t9n4p\numnP7Rj9WaPfHKoFGJwSW5b5F11Y4Zle6kipjwMvbbdIqz0s3U7wCn8wLz4s\nt441KASPGD9tzeYqzf6c8L5BY+peAMIlv7gfV4+Cmj8Sd+i28dfxLunfW+c5\nMDTxqxoxn3qpXTVzFynPsXSf15NYzwSY1UwrpA8V3xmYe+K4CD4MKcbZuV1U\nU6HDoz6TsfGbnO7c4h0W14cDJoiKs23L0xYL/Hew9+k/B0X7k8GGQaLAtmtn\npq/CTuuom2GdWuQJGThH6Ut4wNxHnKdg/5vUzUllzIWHdy7DhS38JcpJ5lZi\nbUQm\r\n=3FXN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.fb194dd35.0","@material/rtl":"9.0.0-canary.fb194dd35.0","@material/shape":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/ripple":"9.0.0-canary.fb194dd35.0","@material/animation":"9.0.0-canary.fb194dd35.0","@material/elevation":"9.0.0-canary.fb194dd35.0","@material/typography":"9.0.0-canary.fb194dd35.0","@material/touch-target":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.fb194dd35.0_1609188375437_0.5255629786858287","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/fab","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.64f36e287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64f6535090b6fdd97a32b8b094b1f485e5b618b3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.64f36e287.0.tgz","fileCount":18,"integrity":"sha512-bXF453GiEoJLNO4mORbMqKp6WuWSz1IUq+ykw40gcLodM1DYBRrRMnVa2Do9iK0spdBoaS5z0Xg7Lc38f3utFg==","signatures":[{"sig":"MEQCIHcTtkYf062ULoDYLz/LdIrjLW5h62tvFD78EOGvEIQNAiAwhnNgJdr1j6X98A7M0XznIyEpjWDa579F0zQr9ecXng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kl1CRA9TVsSAnZWagAAk4gP/A4ut0DYvKZuaTUtBLBM\nxpDDop93Z5usQU8KYcIZAetxZKN7KO/OIDEk17M7wjJt4td7RXrT0fLN+eC0\nr8+2hSJS+Dn26pkEL8k3VBYf+RUVxw1v8TPlD8x0MCZwPLhFsyqxcKxgsD5D\nAhuLQ8iKZ/XS1NiR8ZiYi40E/Ssaj7pGJhjRMsvT5gyzYqV+sAozF27PzxOn\nwWU2hFX3zUpD15EqwaMIphoKPscjS2CuRicBJYNotd+hi5c4oaAnFv7ng05W\nI1ex+HAOw3HtZ53xvc0ftM0ILJ1JdVzcyeMlObJrAHRGuB5lA54FXHADAuXM\nXBwFPAvFyQGwEPNb32SR26hrVpvTj26EuRIMsXENFzdXjByFifnqbsCgd+O+\nPCQbNZUPge6C3pKRo1AuGz2Y6fdG9LhqevptWjlBjrb+2v/n/JvKfItKR8Om\n8SUqYrHQ3QkOqPNz78wuYf0/IPgYCM0Diflt+7UPM8BJ79tssH3PE+56OmRK\nN2vLXgtrD8gHfscZadGp1EEbiycFNNnu50hAsKcO7lnl40lrUafuR20vvGh0\neVfzn71q9Uc29LoT2yzw9pnDRd4heK5Amfge85afqxBN9PNkMgCoT7Ir6ykL\ne16wZSZxGV8P4lMVjOLCFbCDi05tf4o30ImMUiqaSsg8c7V47/7J2C/u5Ard\nwGwt\r\n=DemP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.64f36e287.0","@material/rtl":"9.0.0-canary.64f36e287.0","@material/shape":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/ripple":"9.0.0-canary.64f36e287.0","@material/animation":"9.0.0-canary.64f36e287.0","@material/elevation":"9.0.0-canary.64f36e287.0","@material/typography":"9.0.0-canary.64f36e287.0","@material/touch-target":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.64f36e287.0_1609189748793_0.775983614950259","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/fab","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5c38ecbe365bd0cde73adeb543843aff4867577","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0-canary.b7bbe7022.0.tgz","fileCount":18,"integrity":"sha512-LpRxxY60X5Z0vyIfQ7d6LTYJ/b+pV95gRg05BRAQL4Z9oZn5EdUPFvhLFYFHRBE5YU776Z2ezq1zYw+SABKfWw==","signatures":[{"sig":"MEQCIDRdhiFNkE3T8xDsx5IN0457gBx9ootu2NTq0E+0rgiZAiAKySwZUqTthuVx/jF0kK+0/ax7aKq+tIItwRvGjKypSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63oECRA9TVsSAnZWagAAbzwP/0kyDbfFA2bwyb8XO7z3\n5M+BsDWohxGQOVqL7n38eXhPWBYdSc+2H3x0e2/SYTJZjmQMkqCjUaQxjuQV\nKcSnxo/64E6FWuDI86e7f02q2e55B25pnKaBuiEH+3Yo/Rl2FZ5CdPFwuqIX\n+A9BwgQuWyaciwrLew4f7koztrwIxazFVZZPUBiVKkXHJkSraUWtYv8uSkfm\nfMuokLfu6uPRxIxiU0Gtxpag1mK8AFMsXRWVuOKQC66pAKiDFZefhgJPUUab\nXtqtGo0R1LGtfy0enaUz3K881L+qUbvXa/YRt7DUZ9Rt1hqI3dSFO4FdQTjK\n9wwi9/p8Wu/EdN5TCCookuwOkPMnymup/BO+TFhRJuVWJ7DtQqvj3v8tq4CL\nZWKqmET25Y5XZUcnyFXSrP/8aQpd/Om4NW1/Yxqe4QL+2q8OHZnmJf9k3/c1\nT7yuy1TpOyrZ2cuGnh3P1sUTPiB2zsK5IfJPgDWUNU/KHk048mIpD9h9+I4j\nHTqOvvO9YmY8jDkEoYtNJAHIOb+1az1o34mNIhqbxdz/jkyzrmhyF8HZcOPE\njJD9NGHjhcvtN0I4LnDQnwWOOBflmr2T6d6ia2Y36m/aWk6t84hGAW4miDRr\nwd4xOy9fOA9gp//PWK9MrISJ2Em6OIuTwl6QxKudBgAbiMOrQ6sUYgtzMnqO\nKUWu\r\n=8Btp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.b7bbe7022.0","@material/rtl":"9.0.0-canary.b7bbe7022.0","@material/shape":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/ripple":"9.0.0-canary.b7bbe7022.0","@material/animation":"9.0.0-canary.b7bbe7022.0","@material/elevation":"9.0.0-canary.b7bbe7022.0","@material/typography":"9.0.0-canary.b7bbe7022.0","@material/touch-target":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0-canary.b7bbe7022.0_1609267715767_0.9886024137215534","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/fab","version":"9.0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@9.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d316b89f855d5a1f312563ba85720ccfd4f8ddd2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-9.0.0.tgz","fileCount":17,"integrity":"sha512-A7Z6TamNazWoyI3ruhtXYc6YZASoED1DFt7cO8rx5TXGFcOVfgKJSgrxoQGZl9kDRRa5Y0kUAhNHqLIzy/MBtQ==","signatures":[{"sig":"MEQCICM7ZS0gVvLHpF0d9d6OMf3K1QYcRgD/v/3rU/7z7uVHAiBQ+wsIJNsxaT5yhTNpjjMhSsCuWQOm/SA8mmdnjEaeTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":290745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64ekCRA9TVsSAnZWagAA9J4P/j0k81lVkzDj5X858bWg\n0I42+/KrupTnuJcm0DWTvZTsG0Udof8xZ087J5w7sKJuRhcHxSYhKyOPldnk\n8uRtzBwuvHjX2jZILlFKJY3ZSJ9OC/l615ZrRqL++JPLJ0JGQxVcwhH92wxW\nIMgcd440WbHQg7YWIfl0ovk//lYr1Z4ZLu4O2AuZZkmywU3mJzS0eKeza575\nhef0nFZApg1jynTkpmnMAfL5TiZYNnOGfwh7e9j9HBlACvql1wmR75/FHEaJ\nmWo2nIqIbyNDBPfwrmx+CtaHszGICuq1kLVvst039I7UhSqOUuLTXGxorDO6\njP2Pfdu0m9pDA2ffXlulbvxugGXCwGvEEPnZ4I8Fqjzs9rJvUpSPbrCkjRog\nPV1R3zDbwtryrpJ+b8g14gP4bn+P78ovyE2cIrYzJdUGSMnu64LBeL0iqzy+\nx1ujvT5u21NFqIC27iT1/mHE+Jbf4DYh26mBnwDAT3TBGThWm37pZNSWrVgH\nncolaQyH/w6Wcsf9CtiY269BHOEtIF1TRE8WNwoiVYtw0wPONO64nnqWTQLt\n2BirNS7i/7Q/yavvzFFCxcOwF4Zo4bO7Svhx8hM04LJL9DM49Xb060+NZjjZ\ntW60dMKLioxzqiCDePZfFOd9cAEzi5ZWvR23a3nXKmihsCcy2EdOi6zutyTt\nw2H9\r\n=J0A+\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"^9.0.0","@material/rtl":"^9.0.0","@material/shape":"^9.0.0","@material/theme":"^9.0.0","@material/ripple":"^9.0.0","@material/animation":"^9.0.0","@material/elevation":"^9.0.0","@material/typography":"^9.0.0","@material/touch-target":"^9.0.0","@material/feature-targeting":"^9.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_9.0.0_1609271203655_0.5830201450626984","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/fab","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.776c18681.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7673cb8d90580e3caa2108f3f8a83481ee8f8c5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.776c18681.0.tgz","fileCount":18,"integrity":"sha512-NDshfCd/dxvQfxDGhSDS+WXeI4RHVred/XGLNR3J8u/kcsT3t/uPEUe8BYk1zKv2fSfYapKe1YNfw5D/OqvrNg==","signatures":[{"sig":"MEQCIGSKtXaI17/8eLMqwK5z+h9O49DAxkXagf415AMx6lsfAiArzQ9baVjNPGnYLkh0K8eDcop1Q8RbcFdj6UXAeYaq6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68yOCRA9TVsSAnZWagAAGDMP/2ACSfq1HVfNeyZqZwX9\nC2Z61oSHjnNcrMmWHfh4SSn4TTBGvMZG6ihMQvGsRdVT4oCC4Wd/fNlhauln\nYeu3HXdxHetLT+Vm8Z5VN0bvmq3/Mfz229kDwS0QYdlYdV1YB8hn6G/Xz1lx\n0hT728nzcGKsVF+jlPZddflcMQAukp2lgDBpLWGKdx3+3jy/8cM/8WmAPd7E\nodxkr5uV1FK0pvXnZsCKNYDZdadsqUMadXMdcayIInOHmS0aUahvfT/VapG+\njxWEdb8+xZOqmbkKjjsDOS4cphWb28KuvsyUDnBVybZif9UtuRlREjxr1mkZ\nxNaj6C5a6vf2TUN4Qv/42u1H1P4gmV5r/xz5r3p7YvEcsoDX098nNZWaa/n5\ns2NWyVCwQkBBl+V/9UqhS+rXZh+yWh08P5CXsngwcny5qI18qUQ/igavTXyh\nyRKwtqh+GYtN874fbgVgmAs6Molq3r4TvRT1IYXNWBvQHIHaak5BarYIElML\n0u1aOPg1mdPr2Ufg0XRNG61a7Yu20SABkiARgnnGbztvfIyAbmAWP/FdPFa5\nIQSdVhxA5jtOk8tt63R+9uJ5BmNSiDI1MyPOb1bBwmt4FgvscfcP78whaj6W\n/zoI/Ya5kZmr4Sqw6XK3cooUOr2XPCWseOJ/1vTIBQaw9KybJnTwfZaNSTHZ\nFJ5S\r\n=D2k1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.776c18681.0","@material/rtl":"10.0.0-canary.776c18681.0","@material/shape":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/ripple":"10.0.0-canary.776c18681.0","@material/animation":"10.0.0-canary.776c18681.0","@material/elevation":"10.0.0-canary.776c18681.0","@material/typography":"10.0.0-canary.776c18681.0","@material/touch-target":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.776c18681.0_1609288846388_0.9796571569326362","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/fab","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.671d72d95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"478570f4b3aaa7e34bbddbd7c5525657a83c62e8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.671d72d95.0.tgz","fileCount":18,"integrity":"sha512-HwCNMu/xOfPPpDo/FZ81P/ZRoBJhqThBWVzTSgk4vUgAfT2IbQVW9bdh56b3doP4zyQtFvsyabFi79F8AFubvQ==","signatures":[{"sig":"MEQCIHzrxEtr1zCdlEiY/UCB7UK471dS24vzHHukGPYAdua/AiBKOmClaZPEbXpTqaou0thn64FioOW+IxasB4HAJFhqxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N8xCRA9TVsSAnZWagAAGNoP/Rk/qQ71MqAnjyWasww5\njBUjm8Mg1fJI28I72s4zuWLfpmnLr5DZYJWf+N9JIJtyyM/1awH5BlT2dFcT\nC+X8Rkxt0nJz2vl5SEHVA2WsguskadSPgBt1goR9zzAqg5dddfcuHYQWdyvi\ns9qL6KhBvljDSbv5BQf2eH3xH8zO5fqVk1DmUw4ROa7vhH1pH86M8y5CM2HI\nkiQ4rp/V4OZumF5GWbl7nRS3pBkvQUCmdM/PgeEK298tydYX3kwxAeGlhxUq\nZOk/RmkGhCDUchcvAGH3xFqB1XI9z13vmj/N04OnVSjofXG9bT5vW5gtsMYl\n4mBaqzQCfqyG5KKIbodAgQoUIJ1s9/1EcjA/e+6ZqtwBk7Q9jTRiblcEizEY\n2QcdKrbaINip1W6pg2qdvneFv3GP2IW+kEZKFh2EXBFIK7fCv1Zr/CzpkHYe\n1x+AlJ3HpQmtxTd26KYcJU9SFYD+TZmidJJxoJMmkYJ20/6vfPTPaHNbthtA\nXnFNq2fy6c1KO6iSmmo8j2s0W+gazqHXX/tLQqbKL3ETFOTlaLBSkiB+0xTc\nbeXUD0JblgcK0/SzT9Ae9CFmR/PzhTd108ydSvhctReZp2tqgR/Zq9W7Pk5H\nHOFqeITYsyIIa8BeJqupAXhpbov7MEMKF7MpTk8bhM7v2RdutFIojZ2/07JV\nXZIN\r\n=PFqj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.671d72d95.0","@material/animation":"10.0.0-canary.671d72d95.0","@material/elevation":"10.0.0-canary.671d72d95.0","@material/typography":"10.0.0-canary.671d72d95.0","@material/touch-target":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.671d72d95.0_1609359152497_0.2976725855325517","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/fab","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a03425bd7e175829b48e2afe0a2b7b10edee79b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":18,"integrity":"sha512-Au/n5YlCGIbyYYNfnaRH4uoez/DB8cqIMzRGibQj5utAM+GfcJjMegdDLnb67ii2HUhVRL4r93Io04cI0HsQZw==","signatures":[{"sig":"MEUCIDcWGERSHtB7ppjuF23ZtyuPD3WMpITn9GqhcDsndQPsAiEAgHgE1IpCdt8Faea9rzJkI4yaVn/8N1CwlMCSAXwFoVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PVZCRA9TVsSAnZWagAASxEP/1XqrcjMF3ku94L2VIfO\nZk4SE9ddS0406Mg5uBp+vUxknMgiJ6i7BahoQ+/Odx1OGvz6psjKIY3quY4e\nW6d/jPuznhRkrpDoLkkQrJ7OhrEYsdM12aMOfFg7c8KLUf+1xhdTXD1EPE+4\nfQpjWA4aR1+aOEELpcoiSXqrGKtmxN/tPs3+t7a0fh9ulONplmpipsDHRLXJ\nHctzu7WZ9w7mIJD0LJUEk/9Gd9rStd73oeAAlyKPtP6DXiNsmL+OVvijHF8t\n3iZayAb3ubEFA/0lNx8JQOfCebJoEc6wju+XPBusHggzIA2KfcF4c+/vgM1z\ng7fKd9svEF3BrfmFGtedQciywM1PtLCRh836yKURvcsuNZeLANDLxCbz+qIa\n+sP0oN3hhy3FHv0XcOqz52X/W8HJYXvODSNIXyWNBicYWjWNiYEotQ/NbeNN\nbpsiPuilWo8RZuI11VEcj6iIJmq0u/6mv6hGnyThWcXs2RKFw9AjGzAMhgua\n2SCrLSrgipZi5di+9T7MQzKAJcoJlf8949yINp8bQOjxXqxv+IBb3Bgp8z/2\nSrkupDM4WMQdN0ilnEQGqRtcdOoVjHIY9rc9WskTdlToEQ5+ocL8TdlqZ4YS\nFiT25B8JBHy7EvQusCaHrMu8QI4739NJ4/kHfpc43A/ALvW/htzVw4fZJkNK\n9zR8\r\n=Ih5L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.b4f5a1c9e.0","@material/rtl":"10.0.0-canary.b4f5a1c9e.0","@material/shape":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/ripple":"10.0.0-canary.b4f5a1c9e.0","@material/animation":"10.0.0-canary.b4f5a1c9e.0","@material/elevation":"10.0.0-canary.b4f5a1c9e.0","@material/typography":"10.0.0-canary.b4f5a1c9e.0","@material/touch-target":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.b4f5a1c9e.0_1609364824717_0.5257179016745022","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/fab","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b9090b7bf1efcdefb0e9a4d6e725db6fc7b7483","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.a94bd8deb.0.tgz","fileCount":18,"integrity":"sha512-xX5QO/f0jgXn4K7HMXJ47XbIDLa+85jfXEZlSKGbqPIm+wJQlCOnwqAoUoxtJofqUjGM3L06idT/4whMCjDGmA==","signatures":[{"sig":"MEUCIEboXZpz6bL/t+BXubYAuxlS4c3/0Vfv1F9qr+Ii72VpAiEA7ApvKSk9QYtEvwzW1vHE6dSNDldJeBBrpVGT6lltRAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PmFCRA9TVsSAnZWagAAMdYP/RnUtZvyxy6lzWKqgpSL\njJrueK5P3H+BnMtBfOgPHXaTu351QiqLYR5QNP0OAqTka1OdFi6y+f5s4cSa\nC+x2YQDMEy+8ctV/qjb+wCO+HjhITLMNxU01QmtLtrd8QpKwFWi7SHPllp0z\nugUNv3bn9uU9TOTiQjJJ0fSg97WLJy6s+YRIrdJt0Bp+Zy1um5nn+/+Yu5t8\nXuyjRJo/kfvpjP4RTA/WttCgNtPFbhqQM9Fmm44+tqi6tIXbbrqKuN2mDRac\nQ1xuwt52NKObfG/npPoT8HK2Q9TBDeYXY8uUKGPZSlk891l3dpF+iLLlm+8T\n+xB07GpmIg2DunJTipWmLOzx2EFOdsnc+hVidsqwRKuJpPQFM7dG1loYc3BX\nsbhCv/0BXQIO9qHef0hRhY5NG8CxqtK9qJrq9tp0Y3rpPK+0jwFcowPkJMCo\nfS6bvPftQdcHw4qdUCwiE5uTIQxypkqIMbXKNDwlMWSdf0hSGnWfQAIyDm+l\nqvzifLpJbEMhzfX5mv3ocLycJrlj0GdREZhGBIPoeY+MaixPXjXEU5bjqP75\nlYkEmOuF3EkayoGtKLpbkvFF+cS7/wyxjfYAweQstjUoQLe2EGJzbHVmnR+v\nuc8PgK7u4TnRv2J7nHHsoC604K+z4Ad8i9/5mpY8l1E0Y/VgWDuUIqSx3xkc\n7QK2\r\n=5dDB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.a94bd8deb.0","@material/rtl":"10.0.0-canary.a94bd8deb.0","@material/shape":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/ripple":"10.0.0-canary.a94bd8deb.0","@material/animation":"10.0.0-canary.a94bd8deb.0","@material/elevation":"10.0.0-canary.a94bd8deb.0","@material/typography":"10.0.0-canary.a94bd8deb.0","@material/touch-target":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.a94bd8deb.0_1609365892901_0.1651397948477218","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/fab","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.5d128511b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abb341194a0a034a28bcd2215c4f139d608d60c6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.5d128511b.0.tgz","fileCount":18,"integrity":"sha512-rADl36orbbGciM1gKtz7vRCxeZY5NyU6ERZ/xtg/XCTnFnrUTmKYkMcfkisEcje0JOOgNEJE7j0rAnPPI8KkuQ==","signatures":[{"sig":"MEQCIC60VclHVUuUokT1a6qgDkj5RGQxvzsJe6IbCIJ3oIGkAiAtm+e/GO7wXKI79v31FPKhIjmpFv7AGjcEZ98MEHtOnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PrLCRA9TVsSAnZWagAARFkP/iKQOEDIJDj5HwO0Iobc\nWP0E28rT/XaPO5QLzvGonfJFH/cd492QSoP4La7DMF6IGnO+gYShYK+Qu0E9\n+mavqUpQV9tQuzs6wsTkKqkzsOIAge69lT/hzlbTeltzTtraSdfRkJzn/Hw6\nDhi+Ipj0WMnQeDPVBEvAUSgPT/+rSJ8FHrrLgXEmeBYWAHnhUudK4OAgxFMB\npqUTFFQEtiwyYLsD6uYJT6Pey5kK5xOtVzSERZnIu/W3uib1O03DCmLPGgzK\ns+Sn0BAw5x0rke3OkL8J5kbHFhrGqQ9viLba3bWX0NOiA/nmbp73AILubSs5\nXOdIS877hKfo2JAoxynFokwCnj1glfq2V5Arp/971Dx4UOmqZDd0Ev7lRfuq\nmLdFniVXpFDjLhJm3++OSYS/mxV9hs2ADyyIxovNbZ6X1UhwnFWLa5KGmFyt\nrrOPLbGi1qwLb674LIoEbmsUYDViT5xTTxT0/fRIwhL8DZqBC3cWqSAHAytb\nfzew6spXtQQHPfT1v2WZEljwWp/n3KcITwxmGXXn8WaBk91iAEl+XlIqUI3P\nHFiRQAGZV4KejvX4K4TytkoZ3x+xFF7BKIQICcHcniZB90wFnHI2o2g3Bq3g\nuJlBqbOfVORJOgi6KisayJD4s88aP7M0ybm0BamiFeChdaHVXl2exJVxZWa3\nZ5t/\r\n=3eX4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.5d128511b.0","@material/rtl":"10.0.0-canary.5d128511b.0","@material/shape":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/ripple":"10.0.0-canary.5d128511b.0","@material/animation":"10.0.0-canary.5d128511b.0","@material/elevation":"10.0.0-canary.5d128511b.0","@material/typography":"10.0.0-canary.5d128511b.0","@material/touch-target":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.5d128511b.0_1609366219388_0.37463588198692044","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/fab","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.365c69360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db59c97f01efc6829235e95c9d2294eff296a3f0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.365c69360.0.tgz","fileCount":18,"integrity":"sha512-1YiDK/8lAv65LQ4bSwcIq7FROQBjaNXYlq6tGOzrPM0kxjVj439vv94/sSb5KOWcCjN+04+NveOWwkGAuGoKYQ==","signatures":[{"sig":"MEUCIQCRxDNOMebrZ137Vfo3LjKEVn7hsnI851Mo1LCATxeAVgIgLmq8qNbdwR6VTf9QE8fMuj58hVybwbTSYrJnAcRemBc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KaHCRA9TVsSAnZWagAAU3kP/1KMzSMvpdstPbs460x9\nB6xNGoox7xN1cwVmj2RdB5joFY1618A3hH3N8dX0566KYnnDMwQlajnBB/RC\nVTTxDuNZ+qeBpG1pu0y79DSst3mluEoJfWh1lat/9386m9Xtm0yva5Y0ESls\nbp4rkx5HFOvscdQuEDYzc470msDeeKAIb6woNqQxf09TkykujI8QF6yDwSiN\nBSzvnQqgjIqBkMzn2KMt077zuIPuiAtyklpvbB9L5R/i0J4y7mgpD9OeUTeM\nAThjXkt8ac+ieyoq7CHTw/0EtOLJaspt0mlpeGi/X9AfpoBa9JieuibKfcf7\n7gHDFi1AT33WiRqHmD3FlvEh3QAzKg/9P4pVzvrnHqzD8P9HjcmT6Kr3ZT++\nscdDbzd1z6fZ4U0P8xA48eOsojlTd+DjFf/OInCs/KFqAKWmGrBwap2RLl/R\n5RnM8NCT7xHfcCsTybaCneQjbAkLTc1Zgc/9lvZVIKnjFw8iOan9Lz9/KXtp\nzwXf6d8nsbeO057lCKQK7T/V4E4vD17zQLg8YNUXzbejfVDUG2YCaemrv8QE\ngOpaW60iNEmTAt65gl3xWrNf5cC5ae6JJPRwuonRGoAu7M60ylAYkzmSubGk\ni1/MU2GBYbj4K920rW1Dci8EYTJaPxyc5ETiv75h6JGZGBoksVJO5eaI0wwn\nc0ME\r\n=wuYG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.365c69360.0","@material/animation":"10.0.0-canary.365c69360.0","@material/elevation":"10.0.0-canary.365c69360.0","@material/typography":"10.0.0-canary.365c69360.0","@material/touch-target":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.365c69360.0_1609868934815_0.47878453444872804","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/fab","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.700a8261a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a56477cf339094604ba3a618177481727ddefc72","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.700a8261a.0.tgz","fileCount":18,"integrity":"sha512-avzqjCueHCz4PS/jfmq9FpmqVSQW6T9g+CDlBi22UpOttundxicjXpGQUDtTVctuG4MZoj+WjPuk4pZGjPnCLA==","signatures":[{"sig":"MEUCIQC6ysd3yoagxZPnGXE5g+8PIQv8N4t1P8H1/rLAEF36XQIgH15ohgu4C2b3jg73xVfxTlQjg6mT8siZlno4OwlE+ss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NOaCRA9TVsSAnZWagAAQQMP/j+PX6qXbuUnfA3sJwC6\n98P+mzV+TLjKogS3TsdZpmzOr5ODfKQePKIp1Q0zD7ztVIJrA+njVThWmkh4\nmG06DKhVFIGP1NCviGFO7egOIr3TtRvucMBejYjVIaIA7QvgshPUt70svWUZ\ngK0qSwSKxOYz5Xgc/o9iOYnW3E9XRyTonKn/DTbZH7AFddrcpt1RE9LrvZGW\nmMVnv2DNpGqFsx08zjeoFjHwjOcIK795lSk3hyY02au5MtTa++wsRkbwRVWe\n5BpH1Vl9wGQim5jPFJdxqMhIRtSZBzPqlOlE5gnKAyfPgXBiLW8iSshQBP2G\na4d6WWCUPx3rCT++lmHjCf5gHUybcCvhCLOK6q4BaTejM5XmLF5OpPaMD/sp\nHgzZngW3l2GEE3Fys04wvIX74UyJXg7+9BqYiJO9OM7G0KteHosqe66LfhMI\nf12BnNpZqR/E9dGN1RS/q1q7gMYsyDELTKdddzILwRgaMUf/LMe1Yvh5u09o\nJHesNZVulDbNdqw5219p9Ea8emNqUXSIXDYTy4eexEIL5NsCKER7KPNU7+MH\nb4zz2bbFhfwzDZHafxkDPt7jBUADrRaU3DMJGUCmLUED1/ATem5EXHUwJe0+\neH8NBwvpBvqkFWeJpIy5BSm5klkIZeYSOZ5gI5y9PsF46xY5PbBc2PtiXDG3\nlZZa\r\n=KaW9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.700a8261a.0","@material/rtl":"10.0.0-canary.700a8261a.0","@material/shape":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/ripple":"10.0.0-canary.700a8261a.0","@material/animation":"10.0.0-canary.700a8261a.0","@material/elevation":"10.0.0-canary.700a8261a.0","@material/typography":"10.0.0-canary.700a8261a.0","@material/touch-target":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.700a8261a.0_1609880474343_0.6698177330655155","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/fab","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.766981c15.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02ba0aad3d84af459dda6b189ff28f6c70b6011e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.766981c15.0.tgz","fileCount":18,"integrity":"sha512-Bn6M0QZRfqnR3CMcjhMJvSCv4MsjEJgtd28n8/Fj7QPRxdGKrXGFobPKF6y/GnSKLOcAIyukwAlavIKMXeE3bg==","signatures":[{"sig":"MEUCIDi4vMtRcEmMdQ1uylqQiVtXMmHrg/H/aMPWssrfQLT6AiEAtqDgwIVEO9Ujc2LZWn0XDYOymHrLtJDFMMHQQ5f/hQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9Or7CRA9TVsSAnZWagAAsk8P/3nSodqSssqPReaEVLdN\nL7ecxfWGwiwnH0PxhREDvbJLb4bATFd/CEJN6rAlvqGhnfH8jiBezTAnFVNW\nSVjqmPW5cXA30b9yKBbYR2DJ3+Kv0ldjn26qJ7JLj3qAVgadfZ6ux26hpoSn\niOHqBDC66XbhaB/QqRSUYmmso04UHXRCAgGCO3fGIn7XrXcZgFOybad2kjmw\nziv25MKpP83ebKenMgHXrE+64CQgo75Bqkixl6HgInNDzyAiVQF8Qt3cDN24\nyP9Ps2GLA70D93nvSfnfCaeCB3bofEngoQfZcaAQj31Q5L+ktBqyUrwBFxJr\ne6/Z1MykD6DNJtSWUnkoyqztGu6TfmhoMPfaNubFvrr512aWcVENmDJ9h9qm\nCBEzcYuzWlg6nO+HhNMbywhAeAJPQl2IDax9M+TecG7Kq+UrejAC33vrOAQL\n+bVmDGbVZNand9PV7unh+BK6JpocgALmmdM1JD0zu2s+n9Xqh8FjskHy3UXT\nPW43Vbogb7uj6MLIEGJVemxDkiEMxBPzqtnm8T9NTFPoA18ccin8ZWdqUeeR\nRHoombLbLm9iZAcVI0fExOaqe7bLyGZeMg8qEXyUpDg40MAG243+VbGUZhgt\n652MZHUaigOQ5ZfCqssRKActxvJAyBM/vxBGG4GOK5EhrvhFVxvqiC+fLd2J\ndb+8\r\n=H2pp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.766981c15.0","@material/rtl":"10.0.0-canary.766981c15.0","@material/shape":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/ripple":"10.0.0-canary.766981c15.0","@material/animation":"10.0.0-canary.766981c15.0","@material/elevation":"10.0.0-canary.766981c15.0","@material/typography":"10.0.0-canary.766981c15.0","@material/touch-target":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.766981c15.0_1609886458762_0.10826306412690556","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/fab","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac56051d1a3e0d5510675000d8d0ffdc2bee8d2f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.b28c576d9.0.tgz","fileCount":18,"integrity":"sha512-QhLTMAPrMdNYxt1vflV4Q/CG7ONEBcnBEon/8ccIluxlOiivEmUd/DUWM1DbE0uRoYiFGJpQlrMa+imomlTeVw==","signatures":[{"sig":"MEYCIQCBopHF3fbdSBGmkshPJBKgmV8tXqEIMMIes5rXX3pftgIhAKPh66B71Gx2tx77rY7h6QNwyO77HJ8Fa2MOfxpQ9ExG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O09CRA9TVsSAnZWagAAXPwQAJO7jqspSxT0j8KqAs4b\nP3643Kk6/0z0o/MVaTql2Lf39cf05KR8klfDxJ7BK4kn3fov7rr+4mOFG7Tr\nhunEHFuILtjfomTIt/OzbvEYQ8XZ7NoycrlTTPv1eUEiWcmQqoSBI9VItS3k\nN0gfYzUSgTj05UWo2kR0rgavNpWXIEAb7ecAA1Jefzsf+BHi6qt0JS1BGWYG\nr1b2bzM7zk+QQe9X7LwncBUZQ2larVARZRGov33Zy7tvFVC9OHc5HwpKNgIA\n9HuE2HNwY8zRlSz3RBsnkXrZigmK3pRvxIMyEWoN0u9JX/uNjqzFeIyzDvuM\nh3pNG9ZP8ZCeY9WFY6/EYJJZobFaP5daXaH46olMI/Kn0r7CuBhszPxK9G7e\nlMHISAb3LFgEEUqqPRIZAMPcJq1ibOaijrU0b0pjv1d3lWcblqKyyaXXnpkl\nPKeRgb5FQfL6Xs38GTa2eRVTV5uTZEs1Wqvlgi1InSLlViD7bHEZBFtLG721\n8lqNtNe+YkQSiw+pMlmBA29V+lFl4XNa6OAjWZwPT4xYXZ6uchv0CbL1NybQ\n4NkLxIcgQaPPp1/DTQLMpoG89IIWoTys0FZAwXH6Ps/plFkx2umC+g8YiVl9\nHyUJmEmova0iEPowAuij5IwyKDlrseSSWOYoufEhdROYzDO6Dg4J8DJt7x3/\nE2UX\r\n=tbG6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.b28c576d9.0","@material/rtl":"10.0.0-canary.b28c576d9.0","@material/shape":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/ripple":"10.0.0-canary.b28c576d9.0","@material/animation":"10.0.0-canary.b28c576d9.0","@material/elevation":"10.0.0-canary.b28c576d9.0","@material/typography":"10.0.0-canary.b28c576d9.0","@material/touch-target":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.b28c576d9.0_1609887036984_0.6735524895402936","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/fab","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.968735356.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b8d7b65a9c29eb38e97606cbc12103b0cc15c74","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.968735356.0.tgz","fileCount":18,"integrity":"sha512-QqmD/Fh3om5iwOMXy/HPM3bGJnxazyH65Zxy/J36f1MI/C2J472/CyNFyp1gYhmch20qMAcuM/wVU4TzW3WhaA==","signatures":[{"sig":"MEYCIQD8KkXOhTUiK0Zc+VVDz/0Omq49Mzz5PDVhner7Tu1s3AIhAK02yZ/FdrCzmSmQrtXknRmMsz7IBu+adXboAdTPHcFt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dyJCRA9TVsSAnZWagAAMt4P/j5O1bVuDHkAtUQErJWh\nH+d2w+lrN3syw+uCqkEvbYCqBln2J1sreonHekg/nUhzmlnOHgUP+a58tZRY\npidi3V3iXCypr1VS5r3AqhfWUhECy1Y/bsTlLTUnorjKKNGji5/iIdbgeAt4\naQUkVJ6UOfPi6iU3DaH4A5zTtMiIoF+62LWL+zvhh9TV5uFO2VHneHgUFCyR\nXO4tGjr2UAHuumYzwXe2UngIqHJ7bH+Aj0RCP7+QLw+lSTM1UQVauxyFc3WX\nOxCo3xu1t0ZO0JjU6GabtK90nKAJ+0em/JGV5BFjzjcSTHkydBZXMjHXgS2d\n3zr4lJ5X+3TESiT+JB7W5PNYtZecTZbpGfa8TmMltAW3JRTik4OwXHZlJzmI\nPZCk4L9OoInQAD9AYOMwnGE/IpvdzBWr/eATvA4zizRv+mEM/UE7J9qLWoRy\ntOOOeF1yVx15buV/6HTgpFF465WaQpsvLHtvuHkJNqtjxcpW9abRmzUpYQLH\nycSbteWRwAtyjBFZN6UMs7Ue45YBAwLMN/wWt3oWDSJ6DHCIjdu7wsiw7ZQh\nCxwcjWmghqqDXNrVG4YOEjrr6rnIKRuPUtT1p4qbnbjwevPsSBOHMhj7iqRu\n3thTqqAGOmBNJI5C7m5fUIn0nS4azzMhayzx36zFA2qN7iZqGu/CV0xH/gQb\nVx3V\r\n=mHnU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.968735356.0","@material/rtl":"10.0.0-canary.968735356.0","@material/shape":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/ripple":"10.0.0-canary.968735356.0","@material/animation":"10.0.0-canary.968735356.0","@material/elevation":"10.0.0-canary.968735356.0","@material/typography":"10.0.0-canary.968735356.0","@material/touch-target":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.968735356.0_1609948296635_0.9832019889715062","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/fab","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9ec2cc855671b0459e459f289d9492e19e6c7fd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.c5e18b020.0.tgz","fileCount":18,"integrity":"sha512-t+YwwCotrRf1oAZeEhwMtiixrTHEBhRQs6z8McosPkrplTv95hIg9ArnJP1CuogID5P20leQQSJ4f4UI5KoirQ==","signatures":[{"sig":"MEYCIQCt2Zo7fg8H1wk2sEQlu7X/qdbsBhSQRWCn+KtlAyAvFwIhAPwrhr+u+kJJ+GeK30j5v2CtzFMgWIHfYrhlbE6Pn9Cw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hM2CRA9TVsSAnZWagAAXYUP/0EPlf72wdoYMOHp9IHD\ntSNeqglGMHwxUF93AFowwEJzhju5CZH6DDD25mD/0wFegdkJp/XmgpH5vkJz\nJtaKGEQXp49CkDVQfpnS7QXOpy1tXxMUVfiRXNJBVWrnbsI6g64DwGezjgy5\ninLiTS632v803bcC95zSQNdHxFAlkIHn4QqfFiIcrYmKFd4cbm5NQT5tH87T\nVRkxfe9Qfoi9r7Lh4bDpAgTNUae1jNt2JatXR0y/SAThNZft6kJELId5YJCg\nhr+ziCDEwsAQ4C/JdiWQ1i7GieZCDpohado3MdYXVdp1xPqY3aJC+5diYoMH\nQF22DzyqbzLDifMG6kdKPOzEZJAYB5v9E314pJDQUXkXIATPuEPq7/ezG09i\nLrmgWTe6Ht5SgVO+WyJ9bNBzlcUNJl2Q5HqBHcF4fKCCtT6qdvuW7g30vXCe\nhwoBRcfIZ4jT+zkOAlzR8RGgbMH9v8h8nlrmQanHxIqrZG9pq4hb2Ejlo32H\ns3rQyu6XuPv+ijLmP93btXpTqJDQW3o8y7wfNyIM/dk1Oj4fJQY+93+htiy8\nUdReQYYdgq0sCIZNz9dUfsFWid0LChxVrEC8bSO9vjlgFc+YaWcNb9XuXlzF\nVHBcBgQDBoqZIbO5PRnPz3o+gpT25sti0FuhaLtxVYZSOaBXnCrLaSfgdAEB\nNGu4\r\n=7Cok\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.c5e18b020.0","@material/rtl":"10.0.0-canary.c5e18b020.0","@material/shape":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/ripple":"10.0.0-canary.c5e18b020.0","@material/animation":"10.0.0-canary.c5e18b020.0","@material/elevation":"10.0.0-canary.c5e18b020.0","@material/typography":"10.0.0-canary.c5e18b020.0","@material/touch-target":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.c5e18b020.0_1609962293533_0.5274321387002319","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/fab","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c8cdcb5429942149d80220df0e45d2a91f662f8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.bcff8a66a.0.tgz","fileCount":18,"integrity":"sha512-6uOql9Yd9Kipd+eWV6G6q+34y6ZWgncMb4JpI6SkgyaQz2mXo8QtRnTPpsU2fDEZHOGCEtca7knLqQVzHIhJVA==","signatures":[{"sig":"MEUCIQCJdtwKEGZoaxPLh/chMU7iQJFo9P3zGrBT0APnUralbgIgBSzLCwghvmRmcctACQAG+RBFU8tRIaJBuCNh4kv7uR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9h0TCRA9TVsSAnZWagAAygMP/3ZC023ez1xyAyJGoyWl\nXOHODjZX4ewPx7+GshzHgdVS9e330CUXQTwQMAr0QOUECTgrrXB14zvjRENR\nlZHR4sa37/ARr0KRVx2iNWw/vedo575b2Dfmvp34XI+KY5pcd8J9TaL2qnUI\nq/8R6IUuN0tUrkA0o4GUtZ3EGfbqcmQbsKrouCXwq6tZcXu1TA2FVSX5mXPc\nG+2iZkP9bRlYT1fwHDOe7wjBJfWqlGREHRLo0fJZ+oMcOL6wbrtKGd+qADY3\nGnipga8HsoZjPM4gIE1KLy1NHhRSCqT6jNwITbeYVEpDkaC/Ngg5IGLyYL7r\n6ZFhTPikngNVx5VSh15KCnOwAXYS9tpVQOfwkEi3a0gwNVVAr/bXd0b82jNJ\niV6HFzhYCG1tji+WNH9beP4NY+FbVID7ssIIzZeFLb1nGxPatZnJ6+7s0lBW\nkDmeyI6T2XOn6fSrFYb8dpSDOgxyYGFw2A2jaClXKmhbpK/gd1Gp14iurta/\nrwXXgkPELOfhSVlparK06lGPxkiav1h1aUCizMQJ6sv49nSHFxsJJ6c8MX4A\n33BNYbxKizRIfBDHX4jvsNLVmssBOfsFebCigDm3pW6kbFU12ut82jyUL79r\nE5SjpMhwOJgFOMwc9jBuKF6aLtaN89SgsrfDGpBNxZASWcECRIh0XJJ7jDRI\ncBtY\r\n=IGSp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.bcff8a66a.0","@material/rtl":"10.0.0-canary.bcff8a66a.0","@material/shape":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/ripple":"10.0.0-canary.bcff8a66a.0","@material/animation":"10.0.0-canary.bcff8a66a.0","@material/elevation":"10.0.0-canary.bcff8a66a.0","@material/typography":"10.0.0-canary.bcff8a66a.0","@material/touch-target":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.bcff8a66a.0_1609964818444_0.17241925800746882","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/fab","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da7eae0e318ef75637c686594d623084356a7fc5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.79328c9ff.0.tgz","fileCount":18,"integrity":"sha512-Z6b5lTTDL7uVRIAgAhf17POU6xiEbK7EN4RsYe8M9yUOdmfAa9VZbtqLrsqka0AWUvLEj4sClgADRYO/LQhoaQ==","signatures":[{"sig":"MEUCIDoREQ+RvlcO3XKiLeI7FLCp+3mSr03MnIvB7EL4pfgnAiEAysOYTRWhZJwV1P3Hkob7EXa3/uNpqAJIS/dhHu5w+Hg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nNKCRA9TVsSAnZWagAA7UgP/jy8xQgk+R9XdPIdcP1q\nhpP7cuv6HK4FfH0hx4C53CsiVG8OK2KEkCshvNWotzgveexRDnEaXOYYZTmn\nLBIzM5AxynflbsTJURxUQ9bvys8cnG0QEDHIVOv8c2bJSSrw90w9x+XWiQFA\nDLT0G1Tx4Vl/azzjxGEv9cmbE4/5pSGbVqImuxe0x81oPEhcpdp7mRD0Bf/H\ngzUapSXiIht/q7NQXb89u8fdlgUlUhB9IGqfG9T1UHqz+dOkQzhiXmwDKQVy\nWvzYnCtVmAqJxrjkJ7d/ohznaHkaA4c4pK5oMSx5gc9hUbN4VDmC9+URjO2h\nFOdUAh1XmBGfGWtaMgIHGC67tEi5hiGbE6s8AGyMeRgTYci2cvj8vwINbycH\n3S6laAVcRyMUBbrYw6/RgPOiLYjZLSCB7FWdp/4jMi4fRHgjZ9c+YB5M2iRr\nPl9TlET6y7x90gZTYrEyZKpd1FSQHOvVOeJUfOBDBFAfvdfOum15h4DXRduw\n2V8FWfS5a7yoXlkXVDf5mGSkPR9qYG2q+zmShMi96GvTzIk0j+YMJy+/eEgn\npFKFyjLSJstUWyqOBFgQd1RnJnOsyptl6q4lM/7a6YDx28K4TRAaY6MXCP7B\nLgR+V0wRRx1w3bcCtbLyqcPSspv5QEoCoOEUJLN4yq5L//dlI8ehWscTocHo\nuLeX\r\n=UsRe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.79328c9ff.0","@material/rtl":"10.0.0-canary.79328c9ff.0","@material/shape":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/ripple":"10.0.0-canary.79328c9ff.0","@material/animation":"10.0.0-canary.79328c9ff.0","@material/elevation":"10.0.0-canary.79328c9ff.0","@material/typography":"10.0.0-canary.79328c9ff.0","@material/touch-target":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.79328c9ff.0_1609986890088_0.8556591926583024","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/fab","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.121e1f303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24e323b06e509ffb7d5f824c0a47cbecc87cad6c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.121e1f303.0.tgz","fileCount":18,"integrity":"sha512-oqBt9axdUEqAHkNAkjMxz724EDqWPABNhWpn0lW0WyWZ8FclpFimbRdFi7ko3D66NRqPIW5Ttg5uN84BwoJ9SA==","signatures":[{"sig":"MEQCID8OlCpSXR+HH1EYLSX7noo9i2BOiFmQQxJu+a3AkjM5AiArvE8z3kYpZEDGL/yjxoYDH4YrLBvYpX9kGa+CgNYuQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95dACRA9TVsSAnZWagAAf/8P/jTEAOSgYlIge+YQMfZD\nzanVUrnjtjHjzXN715HILVTpMijmdfdIU+09njrqraaxc1VpS49rC+XYUICv\nrwz/WbspAJQXKgoqu927JymxD2Wzc8Iqr5PbjAXWAjRmtPI7351TvIa3sbSk\n3j7gPSF71M9KWD374dVBz8jsZpVo8u33ST7ukmYatocJ1rXI7jEORR5Un8S0\nioOr17XDB+Bs7R9wkhd1+8mMTO2j0IfuEqZMj1FFwx30kRc5/QJjYGwMFBQC\njgIC67io7RT6TIQW56zx2bKc0QvqAqOESp+5xCirD8GCWRD2z2Rqw8l7HNd7\nm+Gb4uZvYCE4/jLb/t0++aWcYKbreUcIQ5bfkrQJFvcnr3uI6xcCDgcRLyLb\nDR115z7XJaJeXIYD4+fnAg3bNDDFGFU60flRQDBlQdm/3sx4J2DFhX6P5EFc\nQgwSegDZ1UUuj6gPK5VCjDEdQGycqQXmdHVnXbveUbsPIl+lUDoBNm5URek7\nv1HgWZc8PzKYU0VF0arIPNSUNrGSQIIfqefpa9jWXBsHNRdgi1A0UiAv3MfR\nkUqKGXV2T2LOQiFH+qJvJq9/EKWqLtYuIjw6ahO13Ax8f7WDoSoB1LOKC+76\nynxCW/MRKIMSsUBe/duYjUOfy5Yy2czKDHuCPZnj0fp6Gg1GgvVLYiYUzfon\n9pQB\r\n=pyF1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.121e1f303.0","@material/rtl":"10.0.0-canary.121e1f303.0","@material/shape":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/ripple":"10.0.0-canary.121e1f303.0","@material/animation":"10.0.0-canary.121e1f303.0","@material/elevation":"10.0.0-canary.121e1f303.0","@material/typography":"10.0.0-canary.121e1f303.0","@material/touch-target":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.121e1f303.0_1610061631485_0.18070905415600547","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/fab","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.abdd10065.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"825eb1842ca4b76a942eb7af0dfdf270a253d5e6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.abdd10065.0.tgz","fileCount":18,"integrity":"sha512-US9lPEugBVkBgkTJlc9uwtZ2WCu0UmvTayzd25xRTy5GLVCGoQFBBh2/YmiyrpOARLx6UG6OgAS4zZECD0artQ==","signatures":[{"sig":"MEUCIQD/5K2C2e7a1sdGb7lDYEaVpRj6eM1CGQ840nTDQxTtcQIgZtBoOBhYhV54p7XcytXFZW2/xMOtxBPcfwMgf+8o60U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JvKCRA9TVsSAnZWagAAO58QAJY5nGKQ2Q6weT72vS+t\nnW/+IOLavSts8/IsI/M5yGH0RcKioZhbpx2Unxte3tywCP34AQUxRFNdZVAn\nU2tF8Plpw8v7G0qkr2aoiBhHMib49FEBl4ZwgqLKATlUTrL/tHdw57TiyG23\nEF/OWMBU2W8qsEtt7WJZyPWpZL1wkxXhwJXIcgZLQVIW0LXR31bca6xBVkKs\nMewZQhCgqSkKK8qw2Aj36ldwNsqe838elIF8o3yJ2BGTM52hPvJ6ixpkRQ1y\nTjZoyU1+4t+HMES8K62Kdn/1rLjFacuFGkWzsiNj6GJh0QqZj/0XS7CSuhLu\nww3mcM0VUk8Nb25wIpV/cpNB8BHgZXV69v28/CFuF2B3J0/oIytysfXdfQsh\nIl/b4DqJzi/HUUlVHMcQiwqMK5uNWDkvlhiHN07F++HcjE0xmSlAAUB0Wd6P\n4g6ctSfjk7HW/eouphnbmQZ06deXwuBZUEKzo/Rz2WBSBxVRaPSRiQDH5Ymk\n9md9TdRu+/vM4uqRWyWB08a1d+2eLF59BVh7qyr2pA+m6cUjNsaxpekWu7y5\n+Ryvx78mUdkxtjmMo/uBY4+rCD+2ECUYwm3fzkkkmsTbMcMiYzyCZEoDe/Tz\nCSl7PLeoJdfnvk63Nz9MbG/4henKKMq9kjVzik9rNlaUc2aDMLWAnXK4q32Z\nA4Hb\r\n=jOIw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.abdd10065.0","@material/animation":"10.0.0-canary.abdd10065.0","@material/elevation":"10.0.0-canary.abdd10065.0","@material/typography":"10.0.0-canary.abdd10065.0","@material/touch-target":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.abdd10065.0_1610128330095_0.10985111389188251","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/fab","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.089de519c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49c13edbfcd631b2de8dce8cccec5ee1c26461ae","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.089de519c.0.tgz","fileCount":18,"integrity":"sha512-Jx/J4Ch6ZWwFkTMJFTiSrJ3sqWSMZgaxN51ezUNRYOejwss+QVR3riF80Cp0dNpj1sHB3Ogt4ucbDUJMcD7feA==","signatures":[{"sig":"MEYCIQCAyY5EJaxe1EGx3ljUW4Kvnoof02H2gTNKajaizRe8qQIhAPI2glbTYe+/gi6GXxDBbr2R2TuScKnudzj6J5CHElmc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NrbCRA9TVsSAnZWagAAiuoQAIdEcv+9C1q8suBbMiZK\nkaHQ5W1uJ4yYbMlTJAavHkVlLNk9t2n69mMxudSrV3mzcvT87BxJFYoxslPv\nGpt7A9rh+ng6hHtcCgtkfJzv22jRR9X6JebTg/vmtYtAJOlqJM6rtuTpmvF7\nQ2js0zdmIr+gA2UKcs17ucw+ILLu8ySpsV0qhu7x6MRGn0fGHOcxBvv5kG77\nzU78B/a6Qh8O8hxslOr6fLlF7gY1ACfcYwuNI5i7YWsfd3YXrClQ2088GYfp\nAW5pxGF4PMJ1968ZXo3qpHndjhpUEA3LC+FPTg4JKVUWiSgMhVdO9MQKVGPN\n9XgMuQdydi1Ik5XCRdISG+GRmm+Lygd1XMSxOhjLKAZMz+aO6Q46J1+7GAlg\nEXlFEcbYf9OSpOsIazlCERtuMrLwJL6YshvYnPiRTN42ExmleBaNw0/rj0bi\nkWOqebA56Wr5TejhF26PgvU1svbh9DWv49G+BKRcMzLKFFl3Z/NJhUSUM8kR\nzfucS4bRQUe6XTnKnDuRSbjDbFy4qZLklVwwuGpYFBlY3xAFXlBGkLErg0m5\nBE8Of/8NSL1tlMtX+5a3dg7QDDxaoYOZ1CF/I8GotoRp0NTmCjhpKNoCJoP4\nNf//4h+vldZkC7N5SezJ5ykFcdRhd6dtrHc68HXd6MTKHYyMYTzLcjppTPlw\ngrJG\r\n=eRB1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.089de519c.0","@material/rtl":"10.0.0-canary.089de519c.0","@material/shape":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/ripple":"10.0.0-canary.089de519c.0","@material/animation":"10.0.0-canary.089de519c.0","@material/elevation":"10.0.0-canary.089de519c.0","@material/typography":"10.0.0-canary.089de519c.0","@material/touch-target":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.089de519c.0_1610144474477_0.8241836031425489","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/fab","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.163119837.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dcd0f908dc7d529a807686eb3ca0f9f8b725985","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.163119837.0.tgz","fileCount":18,"integrity":"sha512-eN9RW728L/v/P3BbMY2BFgdXpf3S5FSurUovBBJ+A5TO6eDgi2Nj4+N224pJa7huBptSoB8KfrDju/3EvgYrEw==","signatures":[{"sig":"MEUCICkdo0q8fiDPWuCbVHxwZpMnvD8gx3QmM9y+5koxlZD2AiEAjFA8VlBo6LZWDbAq66gtN403OMrQjPqOdw+RgIo4peg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O61CRA9TVsSAnZWagAA7JUP/RlTOqyYPpxYYOK0LiIc\n+Vgx+DmEh0UNmBHfISFOqHz35l3U+rhZZjNVRTD41yI22oxqaX/3AmwRuz+W\nf3uKREkghUzM8p+DxcnzcisVXdDWUINYTOe3thpAEtD+fV71DABbiz9RT77O\nRX9f+b/ZzGWNfuHlG4HNBTpmY9IEImiPu/M3tOoHZSEY+BSJumO9A2cdIcJF\nNR67o7kPHPa541LtUJGm9zHHFiX1EO8mt326U3bdCE+h4prERMmopEpGwn8i\njDE6+zAl9xGIM+/vdkoKxSYcXjbDuzU9SbyXHc82Ag324REmtCim9sViH6Oz\n986trtwXBkv09A6Hj0aAwQtRhYZd89NaJ4l6TKtWWnvyFshZAnwu2j71SF+c\n8MXQxUronAvGJ7JGJIV+D+VaI+4KwSO7FJGwtecgQ+GqKbE+xydpmRfO6SzP\num/1jt6y7EubxfeFWAAW5+5rtmu3VLnFRYS2rgKkVbIpwycNkvByuPoWtwtD\nRkOgW7LU9QN1qlIwKtUBlYB4kinHS9r7u84vtlT4I7h+7jKwtPUe5bYIcanw\nlcJoCw92TXBNd243Z54zaDSS+6YUNACu2KUlTFPwR8OopF1n9RRuMoqtWc5i\ngBVrv7EhlI8p9krYkwH6a7SufQgK3TPWWoI5Xj2N6A736putXzVZrMisXOWX\nNJfp\r\n=cJZ1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.163119837.0","@material/rtl":"10.0.0-canary.163119837.0","@material/shape":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/ripple":"10.0.0-canary.163119837.0","@material/animation":"10.0.0-canary.163119837.0","@material/elevation":"10.0.0-canary.163119837.0","@material/typography":"10.0.0-canary.163119837.0","@material/touch-target":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.163119837.0_1610149556865_0.447299885391536","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/fab","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9229c9b15290c52b2f38ff5b2b2dbc54da17f947","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":18,"integrity":"sha512-Hi5dakjH0xu0rEutv/G5GEa7Luc9cgeLWwwZ1DQ3TTaMzpkuVcXSDcjQxN2f2Rpkx3Ow8ZW3qjzMGcXtLuccxg==","signatures":[{"sig":"MEQCIDf7PAB6+SrudRCGIzhoPGw+qtbHAx8h7K139w+jM6BCAiAMzy/YR++kx/tpiotvXInRWsW7czGfJHWT8QCRBGgv0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HvRCRA9TVsSAnZWagAACt8P/1Tzo27AbIIlDj5tTMri\nKHY8jt5LEDb+rEmw3l8RiRPj12yH//acSqs25RG4perzGCmTNJkYLqETez0V\nWiYAfS38OpPxyE58nfgmuBLDVO6YNa/pK7vNnyJ73fnITo3zCIzsWNwBdeRr\nGMwqeO5O6Yi5SZj3LRNQ1QsqcqW7S1llFqm72UOhua5N/buZrymj6oVDJomI\nGCvBliONk6v85NyFCeJ1lV+xP7IJKYRlXv8wvSUFHUr0Y1uKdlhC2xE61Orb\nlLFx2DrpreuAx97Al2UIA9xUW5yYPEGkcGrruKcrI0rjfeCbaHoUlCCvF+9l\n9K7hE0l5KWwFmr4yKhQhwIDsmb3XIz6joEI5wkxDG0Ao6fOPVSN7m5Xg1cVd\njkCFIfTMBiNoOx+kT5y3GPVkZqck4Ab5gPnH7ua2acg+s0GGBqRKiqklUCx+\nOvYAa4z0gjqUUQ1hkNB0454XeALaNX7Pm5ziRdmJbIpm9HVdiZYwA9cK+QhI\nBzBUfOIQVZ2sNPoqn1OI2CGN7Jbn+7lCLAldNzHM/YofmEGZ4ye1kf8qG1JZ\nGxz1oKdGlYlBO7lWi/hcU3PSnpVPSR7mhgi4ogsRthHvmFvTN8qfVr4/KW8V\nF8Id+6DaIIf/3YTpXW4jF7kTzzjtUGS6gljJGs3o3R6oaCab1Ba07yULLmrp\nIhqZ\r\n=CGuu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.b8a1a58e4.0","@material/animation":"10.0.0-canary.b8a1a58e4.0","@material/elevation":"10.0.0-canary.b8a1a58e4.0","@material/typography":"10.0.0-canary.b8a1a58e4.0","@material/touch-target":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.b8a1a58e4.0_1610382288764_0.8570805146480083","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/fab","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.7584267ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7b5995585eae1ec33819fc792f1634e8deee623","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.7584267ff.0.tgz","fileCount":18,"integrity":"sha512-fYjS3g5A9xLi4mthdTgrYPs1t+kyvWsCT37Gvbh29b3qh54/yhaSxreM3enjGmrU/2ktK60/XCaMn6VcSPxhwA==","signatures":[{"sig":"MEUCIGunq0SK6iDQwTqP+WDBh6u7g21A58VAQCQsPfGLEntIAiEAvsL/mgayFoxCzwvUjv2fpsT3B8BqzgJSt1PLdBBABBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PedCRA9TVsSAnZWagAA98AP/2+XlRuPfoTKvDohOmV9\nY3q3xqzs6ba0U5yCi6SIQcmjo6GJ1M/uCagIwIJSqp5IxUaY90v6UaAnLIT4\nrAN5p6i9lSBa91LUWDHlA+/Bg65z2yCIzcPTgnuT+dE5Q1gzYNaIsFeujWSS\no2Pl5JFv+LvccmQZ1Bl/hDSzxIjaTbAjr5mRssfnLxRa2YAJkkibL0mSGTKa\nnic5dNJD08xkwKrr4/Bo3SYmvjnyfFQuzwxKPFbAqmCTqw14N9fZLnfbwZXS\n6w/F0LrajVMMmdgL2wp8EYdUSGjlyME+60iA7Qn6XLUaHvyOASxwxPy11qgd\nzGxZCnR2OdBMg8ug+FwcnPSt8yLVchhqmr8bJZQX2oamK+VDLTPJPCZ+CQan\nMfTHeG1D7tp+bGORK1IFAaUANSh0Byrr5fE977g5cDsGi3ehDt8jHdYSHSFA\n72HhvVSUQD4lWonPFVreoeHWSqPuYRw8ihe3Vq7RNgy8J8LBuamnF5PJWEiY\nMKOp3MDuCiNVi2Zx7PPVHOlb3A4jxujB+DvkEty9f2sPUI0KAIz5bIioTQJh\n+Al6Zc9BMwhLKc6Ki9kUSpAf9l5iOpCLUs+dYJG4g/9xNq70Vgcx9Sud/vkU\nf5Lv0YVllWCqOvysWj1gsQmSgJrxhc1/7ZnSens/SO1hcht0rBGynJluanQT\nTycH\r\n=a4G2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.7584267ff.0","@material/animation":"10.0.0-canary.7584267ff.0","@material/elevation":"10.0.0-canary.7584267ff.0","@material/typography":"10.0.0-canary.7584267ff.0","@material/touch-target":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.7584267ff.0_1610413981164_0.34879532547379344","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/fab","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2185c9d08cb5449d0e22c048d2901d0ef4fa8e94","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.251ac04c0.0.tgz","fileCount":18,"integrity":"sha512-EnsJzb6cfZ3ZiCqbK/CUZDqljZljssTvE9NOK+abx0av28A1/LVtxNxjQE6HI8Ee8nru/tnOIDaZKdERIDE5ZA==","signatures":[{"sig":"MEUCIFD26cwc9ozdr8jj10+XFmhdc9KiJjUUpHemU6N4+F69AiEAs67QNDhGrSZIqyJCCs1COUCm5/93WpWCr/VbI/JGvRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f7PCRA9TVsSAnZWagAAgdEQAKQMCbY9p3RAMgziiJqn\naxsFc+KUkmSlBnB3XDaC+eUHyyMliXXNB5E+RcFb3vqSlv5zbMGxj+FUU6wV\nZ7NcnlJbtFhsOjv9ttLsfTANWp1fGuUQ063j5I3LrEU9BUclKotuas/SY08k\n/mvViNgPZexPI8K5LPUJ+7jOiFY5Y2GaJSzoUMyPtDGRb9SIwobfIPp4mywS\n386lncIMbG/M+VSMZ55dF8xfZTCmDnvhfkscq53O7QzFoEUO/qSEUhp0RGPQ\neICFbdgawCFD3DLrJcjL93lOL+NW7tUpfXdNfC0PD06VJoypZd8cr323ts/t\nqOPXw+sejg0X68iVJTJoemhlk6ATsR7eBCr6VMy/A348FeC4JCQFEc+8Mv1B\no60M6Kj1kKfMfqVjd/hkKOJg0CWkmTTERwQUw6CibP3NMXdrJh3jCbsedOOR\nFdf4r6IhkwbLz9L5WiV3ULNdhQ3AGZiXpdFEpedvx0jQkF3BP6c5snaoU7Xe\nOuLF3y4Z+LnB90M/XKSMZf85DnjusVfLd01u82quJtdvF4L7soKJj0Jl9UiZ\npQKRPUm6//jVlF+G9UobLZlmjCG92S9jaaYWvGFPBdVL0JUEcN6ZnF6IIuSX\n3EucrC4t2XKaFxBnXAwqNDRYwoG4K7veVsyLmGrGdIHZGVnCupBhUKVOg/t4\nCszW\r\n=SmFz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.251ac04c0.0","@material/rtl":"10.0.0-canary.251ac04c0.0","@material/shape":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/ripple":"10.0.0-canary.251ac04c0.0","@material/animation":"10.0.0-canary.251ac04c0.0","@material/elevation":"10.0.0-canary.251ac04c0.0","@material/typography":"10.0.0-canary.251ac04c0.0","@material/touch-target":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.251ac04c0.0_1610481358501_0.9038097640619658","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/fab","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.772cc1068.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc42277b11add94077ae9b906f86df637975ae43","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.772cc1068.0.tgz","fileCount":18,"integrity":"sha512-ypWK2DDuKnXlX5Y8HkXmX1w4ub+3Fd/r0S22fCUzN2lBAPExKW6pssxPwzyJs5VJWSXzBRv6yPUPnAXDAcP6fQ==","signatures":[{"sig":"MEUCIQC8lTZ5tY8H9nFuoi3D0/NypiEfl6sH0Kxv9UItncjoXQIgIMqZC6i4Fcy/M8Ttw/9qyXZp0rWZqT5MWXonhMmGA5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4tQCRA9TVsSAnZWagAA1+sP/2vdEkkP6WY8O+8MZEBh\nMEbN7GfLAkcVARTkPLon8r+HbPv6keddpNFdTowVDLi2F/rJkh/Ql6WYkIzl\nsTsoXbdFG53AwR0f7UVtzSCsKT0xJ/m9bOogJLv0YIpFbdSjcUBCe6C9mKrf\nXkQW+wMUwj7pAZtG6k0OOg/f/FvCSTQzcwfztX8eJf2v86YNdX31I0aSG310\nRLyyp8hJOGZz0pH2CxWJKq9qtNWGpICx8Ulf4X5mtLJi9qHQFFhb8gC+6FHQ\nuZTBHymS/VJfspYaJq/z2FR3pfoEAtPOv7l/Zvddwltq3Cr71iJH5W1WeHS/\nv2ki+S8NbALhcrOqypQ9l3YZIGXVFneVEQvbz0BCVqOVM7q8cBn7fyPswUJy\nTpBQUFZEAEPBOBLP3bojDFZvKvFuaqIRP/OlrhF36kPG/Z4Ak9AthNG/vM58\nrT75IPyjDsXMMYqQkcoIu3Fw2/p+UCWoQjStKZX6P/pkjgFm0MLsbgn9PmcF\nYDPKRVL4+7+2OKQAEVwmn1dEwRZdmqFPaIX4PLTV6s+ZYDnOQHw3KsZrxs83\n69OqLSE4hZp2g5NzGy0o1s3Vt/UQxRJ+wdRUxZDTayHc6oFrib4qq/5Rlhlf\n93wdVnrCZYOG50/L6xrQURiBzNkO+hvDsYVFbfqIeh33eiv+DjkjhVrnb4NT\n1utg\r\n=XVb5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.772cc1068.0","@material/animation":"10.0.0-canary.772cc1068.0","@material/elevation":"10.0.0-canary.772cc1068.0","@material/typography":"10.0.0-canary.772cc1068.0","@material/touch-target":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.772cc1068.0_1610582864216_0.9258748793513008","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/fab","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f46944250f09a6b0d858fe0f5a2a828e662f0ebd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.fe13dd130.0.tgz","fileCount":18,"integrity":"sha512-dH1zf7RMNQUoMy6HB1dQorItkaDQPTAWJn1a5vbREyJn4YfvAywa05pIxF3PZfPOAN8p3UVzV1zMbmdpF5iJXg==","signatures":[{"sig":"MEYCIQCpYr0B8k2ZZ0gNWzhnT6lPZ8fqEBY+NRrchOGyQwQLpwIhAIxuSiXbjh7ism2YSUfbpiRSFjhzzKkQ3aDoWk9PQJXO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5ofCRA9TVsSAnZWagAArWwQAJBZKyLqdJhmHHX746m1\ntDUiWXpk8wdaE/WyM/mUoJXACp9DeZB2UUxFhVjPFSvg4+/coUZtTSwhW2eF\nOqe1rBzk8JWBtsmzoQsUJh7bFe7MrcnI+dRkwB4JkNlWNp+QygJStdX7fwfZ\nBMIZyQ7fjjMPE2OIqnWWshqX5diczDPfqKUPNiG82WkJTGx6veRWAOqTWiiG\neReCiwfoSHznuReJtdcvkqUQImBQmPNQuUhe8xusV6gQQ87JwscnAI4+aQlE\n1ixg41OwiUgYnzs4JUaMezZ+ido5x6Z0q0AJ7P7JQtSCx49KGSlN+VNp5B3V\nzo0rDl85jfhl3ZOHPxO9v4s4q7xUN/Zlioxrx5TLLPWM/oZLZbd+Isz5C0IJ\n5b8gW3muO1cshNcRWbSHQhGjDN+UXs45bAvg/QdV6YLkx0y6a7BvF7CquO9K\nKDKpSMecnVnLO1iTSOAddBOuVfNBcs4Zn2V+CiY2EykCQPsSgH39CHKosnFs\nCE7EvJ1GoPLZ8I2vLO0xAZclt3ZAkzG/qPaBbshyeETKaH4GjKgnhZ9v4/j0\nVIC/VZwHKrXhlsaw+wy0DttA0WfKZjbH+jx5scP/OJA+HbhGD72PJCJqtzkD\nWzE2SPhKzAlhU+nWLK/4TqJdNfpmVHF/uI+Qxk2mY3rlCqgc1MwwiC/Y2HN2\nwrkb\r\n=fU4b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.fe13dd130.0","@material/rtl":"10.0.0-canary.fe13dd130.0","@material/shape":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/ripple":"10.0.0-canary.fe13dd130.0","@material/animation":"10.0.0-canary.fe13dd130.0","@material/elevation":"10.0.0-canary.fe13dd130.0","@material/typography":"10.0.0-canary.fe13dd130.0","@material/touch-target":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.fe13dd130.0_1610586655442_0.5824965069072048","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/fab","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5670c13ab3d5c055c806edc0028210d3910803cd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.c7c5da28f.0.tgz","fileCount":18,"integrity":"sha512-LawdsMu0LBlC5iv6dVw0poe4Y1tGQrnMveD17ZozGGYe/xn1q75pUWDJi7T9y5qPSERodfnQkqvtrSxparUglA==","signatures":[{"sig":"MEQCIGViS64adJepSr7+T78kXut4va1pqJAtvbL/b5tYg0WsAiBRjuyGVBYUwxqsSDLyv7G7Wmo65Cj/Ulv3YsABH9lDTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5+1CRA9TVsSAnZWagAAs34QAJA3he1K3B1qniyQ5Art\nk0TE3I/b9lk7jrYY5g6MdHL3hywtNT4JYmyBZSW5/Ci64a+6g6VQLpqjHzb1\nP3ddOhKohEJpuyevIP44a4A3+ZALECPJysocIJC1DEcM5bqDPuksyF8KyB1U\nHp/RNw/Xn4dXjaWV22d9EuuBUaQFwykzPpYEiWSp+04eRzsICbKV7SxNZOHO\nEKdH+gD5tlOg93GqPUoh7qdCKmPjAa9eGNeBU53fe1GEnTlJBO6WDlxCNq0M\npY79DL1awTipufq7KfCdC2NgWldLsPtf5iUMjJ/Ijy0UrFzk700nLjF03x9W\nsk9jOankA0D4y88KOsuzhorlbb77tU43H5CelklVxqfwS970kMedmz+u2U9G\nlto3QdhL5lzjI68YxUsGYq9ui3Ah+QDhQ6U3UMXbzAFqvvXEsu587lVwL5Tk\nE50xYqJE1FiRXd2gM7Ib4dmDy65CDFpZCEqWPLNI0CN9Erbq9V4EVHbQytMB\nvDPpjeWJFMmVyvo/E2Q/hWHmQglEHbwDesRq2ehZNJmVVUQOwWgkkRZe2YSM\nIvhXLoz2KWvjxFwjeFamVo3FK1VRNwz8H6ib3SiNUjzOE2X6Un1NaulIj51Y\nveiSGLUYHK+w77sZ2/8inZt9ssF3aeF7g/W1G2be/Jk43qMYz43NnVqloT2K\nYfrD\r\n=VWiy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.c7c5da28f.0","@material/animation":"10.0.0-canary.c7c5da28f.0","@material/elevation":"10.0.0-canary.c7c5da28f.0","@material/typography":"10.0.0-canary.c7c5da28f.0","@material/touch-target":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.c7c5da28f.0_1610588085073_0.3987161333303564","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/fab","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d0a4314056b6c3f2bcfab371ded37e2fd4b8e37","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.b2faa116a.0.tgz","fileCount":18,"integrity":"sha512-R7Mwl9rvs+N29YJjuKBTsZpcQP16y1BMzdsUgpSz0RDvZ7C9OJUJy1wFgXYE7aokTaTUs7dJcPCvijUcfdDn5Q==","signatures":[{"sig":"MEQCIB7ARv/FHVe7aCyEzG+BYhZlZOn9J+kvIy6sYaCxLjSaAiBgoEW1WaE/vhyCh9x5UWDs4YECDKKmOsRnKCjLJZ47kA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzKUCRA9TVsSAnZWagAAJZwP/RCTa05SP1PYroBRlAk0\nxe5/dZ0WEbOO23PGYjJnQ5CGNt8fdcSuEFEx2QERoJC/xGSA89MWYlMCQLB6\nCpI0a5w4KlCe2mqOCo1uXqTPDXA5Y+h5yaQTlIG/IBp2cfrLXFYGnnSShqy/\n/1Uvqwz4VY0cozTOueEvlJCQN7HHWCyKquE5pkm2jevE+Mf6nXnTC7v0b2mK\nYGxrJ7DXPWicOXdf3khpP1JRyfWtdDyvPfsnj9GMyWEpByK1zvzMuGImAARf\ncud9nFWSuaIrKkXYfnF4erGLNcar+0+aWDJFfMJOBOAmvYpudb5/ElF86LEx\nBRjH/aN4f8y+BlPrfBXRHRjbQNnVtGTFZP+2Np786FmPVM0nlmyMtvvRRH/W\nChwn5DVJ7Wd8W3S1eeejtyfCGI1UAu8iFKtW8OkBFsRn6OXm6zpB1KfJ53b/\nmp/1TVFJUCHovQAzXhtdhKTGlQrS0ftZYUF0TkYdBoY/McvrJqSCcCGvgkig\nG/h+leYcUohzh3t6ig4/Hw+VYBUpEfdsh2+J4bLRNXPsu2PGMqGiRn4v7KJE\nbM6F1k+JkJ9KxG9/lcZ0yaKO0UXYbYpipaf/eCVMI3Y/jEk+Iy5xPFgByKSi\npnAB2X60CuwhwIUF17nu4UeLCGdz6/LMNWkJK2LzNqLtmDWQRI2WxIvHEYah\nPwH5\r\n=lKaj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.b2faa116a.0","@material/animation":"10.0.0-canary.b2faa116a.0","@material/elevation":"10.0.0-canary.b2faa116a.0","@material/typography":"10.0.0-canary.b2faa116a.0","@material/touch-target":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.b2faa116a.0_1611084436068_0.11199098797277274","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/fab","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3be25354b1fd3adf9ca00a01fd873dac3e30940c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":18,"integrity":"sha512-/75fneZ7L0tCmYaaqmxXRvejjZJMV3AsYXtEH0aQD3AQK1wvOrbTR7iBI2ESxGvBSlPjX8k6v1D/cu1womBU/Q==","signatures":[{"sig":"MEQCIAWFWBHZy7Iaaz+Pxdu7ZgGniEVy6yRkwCHiezUDAp7XAiA06qj4Qgp0b7qqjAz0sIiGgJylhzo+2ot9HKE2AjoJTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2MnCRA9TVsSAnZWagAA2WgP/Rf6ErH2kjatPMR6uGqz\n5wmJgxpEZfQtIGXIttWBzNrcousFElrfIL7mCs5bv23JOi7EvYBjd8KxekKA\naKelU90oUBUVE8wxgTRh6OXraLlqMEQxLHnI00lFmE2llTQYEGgFzemBJwE7\nyHx3+Zmp5YU8b5HeVOnHWVW+NhkJParlLiqpnXvSL+JEvQy56DIU+wGaQjH5\nmlBHsTerk/FXeBF9udOwVBcus6xGygPk8Bpcx/3SSgDyGXZGb4f1BjyXdWaf\nkqb/M4aj4J+YogPXxKC2iY6tGG3U4QfiJQBQFWTM4x2BQFmf8Z/my1KVRHvs\nGOBs+zPAuA95SMfVMTy2JIXmxnKzudaJST3RsmJBeZTY7xyEULbgXDptI2e2\nUK15c+cgMdzr1KR34cSHiJT4lLzJexjpjRBShWPLYJ43RwbRajY8fuiHckru\noO4i6H58BGpNlz4ahW8a8Wgg/Qoz5tyvn5/t2t6IfFEPvedgmBIijEefKsFK\n5mBZU7Kk5kIKr4+x9fnTey9Oj1BMiYVUdsiubPPEhxMyK35tgjbeOW5IXHAg\ngCM5uXaN8q9bIrsDsHH5dC3o1kt7E3HqsqfdmFUA0EClxs0CPiEjSd88dInq\nfzEqXZA4Rn5STdav2Oa/y6O/F+VFOP8wx29YXcxnx9o1PoPAw/a/XAHB/AyO\nD0L4\r\n=4B7g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.0c95c9f7b.0","@material/animation":"10.0.0-canary.0c95c9f7b.0","@material/elevation":"10.0.0-canary.0c95c9f7b.0","@material/typography":"10.0.0-canary.0c95c9f7b.0","@material/touch-target":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.0c95c9f7b.0_1611096871110_0.9167949855107131","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/fab","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.5268222c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08d6785291182e001e5f1e984c0a02e866d7d49a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.5268222c4.0.tgz","fileCount":18,"integrity":"sha512-g/Sh+9LquhkfsTYEcO/ziUk4eGtU+JFgcgc/DBdymE8pSoYdj7trc6ov3aZKXy8amxwjFV+HS+kjdqmdLl/eow==","signatures":[{"sig":"MEUCIBrzcBCGOci1hTUsAFNYeskbR56E7Ak1w8iTfKlVuI5/AiEAt1XbjWAtOHq6+e6cbQ/ZYwf9ULIy6jnJYxZNOxfAjWI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIJiCRA9TVsSAnZWagAA0x8QAKGdSAPEsXcMewYID+Nv\nfCFpQhNErZ2JV/U91RhbMo8b1Y191Y2R8qJhSQr5bTnc3EAgEo+/kNvjZ/4e\nVO5871x9UM6jDYb0MsjI5ZBrxQtcQhpTpjkMzFIJ6AbUbpy7NwsMYfI1PCrn\nu/zUWK9vAmQtwW8iTsjxp9q87y9Jw6x/HSVPotkO6cy/Wh0z+LxMJ1mHkXa2\nCV+SU+jvZpHq08cWePuNVmGNr9YWIJaKNCsxQtHiAD31GAOq7EogwkXe/slw\nbBHH7Nqx4sHU3oj2vRJwOEKjF3AuN63v1iNECxVfPn4fAoJkyUwebxnvIWwx\nsiIorPO5HJapBE4k0AsFFvUEcv5WWVsHEPNYj0+JVX4VM0W036er/RiUrQAQ\nu5rgoP637nmK5r/yxcKVCuZdxCR5ohyE5l3GhgrbnCX7vbr7d05bcOAcha5L\nVJVPga/CwTf0OZanVe505OG1pPO5rSnw1S8JeN6GmPi39NswEXKSjLdGxzKK\notdAdLENukBhiMW+K0diVjxtVit66eMXV+Uy3LWJfBVlnLc2f+MgHffQtl8Q\n3F680/jBDLmBMeGn7ZQhhhVtE2h/hzSo5vRBb2npK/3YMeB13Gwo3VjXxrEH\njH0T6rlp9ds890snOlFYcu3AUEZYnjORbxzT7QXbkEDuzkMiJAxLcx0SrUBW\nY+l0\r\n=o3j8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.5268222c4.0","@material/rtl":"10.0.0-canary.5268222c4.0","@material/shape":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/ripple":"10.0.0-canary.5268222c4.0","@material/animation":"10.0.0-canary.5268222c4.0","@material/elevation":"10.0.0-canary.5268222c4.0","@material/typography":"10.0.0-canary.5268222c4.0","@material/touch-target":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.5268222c4.0_1611170402304_0.17773679130382591","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/fab","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a860f56b3b680e3b337c4cd6e133f787901ec169","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.2ed2d829b.0.tgz","fileCount":18,"integrity":"sha512-s0USnitASGpdrjoaJUcHoX4T+QXrqCBw711ZYcCDW7uWpe3398YABe2BkdN7c4cUacLCPr1me3qaNT5Fi+4h6w==","signatures":[{"sig":"MEYCIQDCnme+9kipQhJZWnyBKq1RGmiKxk1hEY0QGAAvH45OswIhAIll5OejSpVk2l1BT+sCJ6EBH6MJDRSwGcoIjX8CjaH6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLf7CRA9TVsSAnZWagAAXysQAJjZMHHssnS66Jyrp9aL\naLNVMfp/7trDQpR9NKux3U1yVoKXAGNQqB5dlIt29lhavLsGomrLJd/hWVc2\nZ7ldTygvF2lZADyH6lniwF/v/YGhhj1D8x6gpD0tNkTZzyArhFrofG+r+p67\nUe2UJ5IQzMPgBvBfUhKRKkwL+2S1z5SAhSECmqES1ZT3bc8fccRBmzdACqGI\n7EPZJp77M7LpTKiIZrHoeAJFGV75M/d++/b8Kv5CtwDMuy9tq3wvtJ2wW4XX\nzZ6s5aEbwlGKohFjXV4teyxk3wTfzYzLZ5lAsBoz95w0dLWb8xp2Mtm/IQar\nc83bE8XVbWuIBmFO8N8Huiw3I42yQwj8+nSCLHbn3ivz8AwqKgPXAZB4v5RB\nscBk/s55xwcXmOB4PBblJJOsqdinequP5Dnf4M1Go2N2xQgQWMuMuNQrH5Yr\nrfAV289kPOJQ0vt7a2JLCfDW8BiKTV9kR3y+AYKqWcYsf8ruvwANDTpx5ej1\n1nA9PpBv7XaRNc6G+l28Oimb/XWJslACWLeSwXQokBC8TUP3hKQC4vdVR2k8\n3cOBgXgv01GJzB5f/RVktJbE4izm6VI7E5Mv9hYFlxm5oOiiPfpVxTX2ZOAs\nihUyPFVhXEwgCZJAqFCR9PL0INuT5bAgrfBXevN5G3bzYjHXhvH4tCQ/R3Bu\nHkNR\r\n=JDh9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.2ed2d829b.0","@material/animation":"10.0.0-canary.2ed2d829b.0","@material/elevation":"10.0.0-canary.2ed2d829b.0","@material/typography":"10.0.0-canary.2ed2d829b.0","@material/touch-target":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.2ed2d829b.0_1611184123366_0.7259774042398035","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/fab","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fac6d21971170faddba8648101707e632892bb7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.df00c2b30.0.tgz","fileCount":18,"integrity":"sha512-5H92bXRxP0f1ezbPSELugMNXVmaXFjMFbN7Yrri0wYRiKk4BhFTr9xoavknN4ELnCJJlU2+m0W1hGEccg17gsA==","signatures":[{"sig":"MEUCIQDJoNyqgCieCzLv4MG35mTbVc748G1LBtGBEFHDTxFIQAIga42JDQap3L3+FTqXu+6t2kDX9xXYvsSCwxsQDiOsGGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdw9CRA9TVsSAnZWagAA00gP/Rbn1qUGNoDZEny44HBp\nMQ0dG5v0kS6jft6uG2qBMlk6MsdJK4N+XIsW02daNln39+hCg+1CeMqa5PLQ\n4ncJ97XUmDt/csDp5FEWqwHA2MyXZWlyI1mgHdDkf6tOQycuJqpFo8QEUrP6\nVzoVtojtG0NvyoBHx1lMvPW4oM7CBH4VgnMWaDn/f8ShxNNKIxC/GX0lr785\nVQD/VtGtOcNyo/h0BsmpluaKcnbQcwmh6fV5s8QNUP1qfHXjnAw0v/4KZU0W\n3so5TTneww+TLRh8KLidVNSX1lP+yk5VXFfCo51m91Qenhu28aZIDfajXudY\nU+/ms+qcoK0l3SSu3SJaIC2NThctTIgP4nktzESlTlbybITHAhJfQ1y4tx/j\nC1zFEtDx+5wAxBaM6Npo8WIQVho3rrlKK24EWrzM/xCQkd4Uhgw5ecYKnpVr\n9tUzsEDwy9DQh9jkZEyuxWibsZbjwJ5e7Wm2FREg/A1raeetqKgGgQYsX9Sx\nsksoQeKHpFPYBOmhaFp/IoJZIQjfHYM6ndDZNKlP22uYQpVHmYIo6RTM3Eoh\nFeVVCXpS2j+OfxH5rPV9FNFGu0+WdQ7bGIM9k8Rp/BrPFlcakhA0lrfHq6Cp\nVxTMWE2tt5PIkeBwCByvKVU9hDe4XOZNoAYEDiqiy2GoWazYXbfGihCr6HM+\ndsG1\r\n=A4tn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.df00c2b30.0","@material/rtl":"10.0.0-canary.df00c2b30.0","@material/shape":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/ripple":"10.0.0-canary.df00c2b30.0","@material/animation":"10.0.0-canary.df00c2b30.0","@material/elevation":"10.0.0-canary.df00c2b30.0","@material/typography":"10.0.0-canary.df00c2b30.0","@material/touch-target":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.df00c2b30.0_1611258940627_0.6846543638603466","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/fab","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"060d8405162aa7f064d1eee8e0a3011682b15e7e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.fd61b0476.0.tgz","fileCount":18,"integrity":"sha512-M6CpnCkvDVPKlrJRQ+wm1jYQGQnobSvMf4xpbvoKrAJpqLnajGM1CxuyT4JVj3JWINbaKGcZ1MfH9PDDtc/8jw==","signatures":[{"sig":"MEUCIDkX92SVJNZNTtZSdIDIRCuSCjVxrO14VB2tz9zsjnTeAiEA6fwgOi/3du5vNxAp6m029rjE8kOqeQjBtdLmK6w8Pfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd+pCRA9TVsSAnZWagAA5qIQAJE+lwmG+om88xv3ziau\n/UdtW5ztADtXYl3mgaULsp+L1AqF+UHZZZZfBwpGHeTrGXh7AXXkVBTQ/QdX\nJHM6fE8h7M/Y4qt4O5MGbUGYc2ZMNs34iyBu8Lu2WiAUTE0wmCO8TibPiy/r\nM7UKBjAFDsUbbh+GQ8eaQOfMDSPkpkH47iNpM5bZH1f7h+K0MfN0OIYmc5vM\n0i2/YI4VLBvhC9fnFHfOsr6xFLCyZWYAs5a4O5HjG/vIKtqoRdZxwIUp2YwV\ncDBR30NNXic2v7aHbso8XJlwenlM6t6solrQVtS4sRrErfhOAsFokcL8DAFY\nULOh+SIQAf3ZEK6eSBNA/1O7EuMyYvUIgoErWVqvo/W1+C7S1Z1V7XEoNP/G\n3h9/IwMzeopEc2v9UCfnouT5UUmzgshgU2ZAl2/ErTwFCFZgWvxry815M0x3\nmuRr+OWgMviI8YYaFIk/h825olnatpqU1Xl4b1XvbCoU41ZSA5yK4CpKwiFi\ndpPy8e/67SX2bUH5vyo/Busmqk2T7mZe6jowkbTY7G3CLfK81ONBjDMQvj2I\noRVfYTAlCj9/bX6r8R4YFYfplN89Duihg6DyV+hv15OjC/9VE6W1xvHj2lG+\n2+ucGWJqP+Sb7SlYZzQfwsfTkj3GHd+eyRmvHXtT/5xHHkMzEpP3l39/rl02\nks7V\r\n=yl+j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.fd61b0476.0","@material/animation":"10.0.0-canary.fd61b0476.0","@material/elevation":"10.0.0-canary.fd61b0476.0","@material/typography":"10.0.0-canary.fd61b0476.0","@material/touch-target":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.fd61b0476.0_1611259817110_0.7537651509185759","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/fab","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a0d6f466b0f837f952502c0f93f401f4908b0ab","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.3fb3a0265.0.tgz","fileCount":18,"integrity":"sha512-j6GYQ6DH/G8gQxxrdbxwdsc3HK+CENMzVQ2XLv54Yx0DVSTCdxVfRJyVVLRdcQmI2mUG9TlWhp3WjR9PdyAJiA==","signatures":[{"sig":"MEUCIFzy901AJECLukuqJ/cUkT4hyxC81Vqbrute/KlPvadcAiEAp2vSbxplf8iHXNjdjHpO3TxYqMZxtDueULNkxmyBpFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChbLCRA9TVsSAnZWagAA1jEP/23NIJrxsEe5XZlGCrc3\nb+8itreDUP1ru382GRVDgGX2silhoOPv2iTvDS5RiSVwjx0BKthGWOSu4zo/\nGMshFc16G7ydpX3ETvx9aze2bhDyEJT7DN30IgJuvJW/7UAXWrgQ7YVviRSb\nzo7hFl7pO8KYVkxpxbzlzR/l88WE8809dkkySmCozggS+ZpHFEwxCAvOerJS\nboBTpxSyRTIrfRU21jjt7GsNQc5/vOkdYFMHCBFd36/Lb6PlFeQyA+4FCDfK\n9tXlwb17r5TCE3puGtPuSISBD2i7Na+BN3MSIahTVYf6g/z2Z6M+LKXjXyQT\nR7c3MQOYXyM1bMAP1623peXOl1QvLUvbYCLGe1AXe00iZSOnxekCCyao+8D9\n/0KamSTilYR8FHZWLbtqrmvcDhB9ivSgCaCJiR6wco3LpfpCQqzc0krer/5Y\n1YwOAkjVVCaGwSwPe4TTDXFwvgg4XbQOYJ8vJeasuSp1dIE7lvafmltJ13Ku\nocYYK3QeA1L4hFNmzFLeURiQGExxci/tD5N1b6PEP0Hi/30O9zYwqV9PtY0w\n1qsn+aQc1GtVrMYj0JVUmHDqeShMjfl5cqcaDwRa+x04aSnAkGxyqkS4eumO\nSVwPSWPvaC/kloHHOS4RpCPucca2OMy6jnkp3gngub9AdMsvjtY/+B5+Nu1F\nSbA9\r\n=Iywl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.3fb3a0265.0","@material/rtl":"10.0.0-canary.3fb3a0265.0","@material/shape":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/ripple":"10.0.0-canary.3fb3a0265.0","@material/animation":"10.0.0-canary.3fb3a0265.0","@material/elevation":"10.0.0-canary.3fb3a0265.0","@material/typography":"10.0.0-canary.3fb3a0265.0","@material/touch-target":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.3fb3a0265.0_1611273931345_0.7910046676374727","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/fab","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.07deaec27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd502cd10411e96b7d1780bdda39633b51815c5a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.07deaec27.0.tgz","fileCount":18,"integrity":"sha512-fUFzCAfe+AHlzM7Zs4+okkP/uu9NgtnFk9wka+vbY0mHGFJr9fccJzN2xCw/PPUG2KiKcyBRI7SDBcL2YO6/ug==","signatures":[{"sig":"MEYCIQDbTBWczvBulTHtv67NXKk46vju2tLpgRtP+7nhOg78ywIhAJpU4UVezj5gy0z0Er5/AEqeBlAL+G/kLQHjmZqrnSNU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwPiCRA9TVsSAnZWagAACkAP/jAjpvzcOYJUGsKUHKsu\nUhzxfdGdmkZv2+ld6p4Tf1wPvykRJZ43Mv+ajTUa/SPDvkTW7FpgnouKiQzy\nQceuNuIeC0AUZGYNDBbFJOXvM/9f+43z6NZ8SaXJ0G3g7RlN8CnviKauXnak\nX9fnUQrkp6yxDM8FGb+UFRmXkTu+BzfIvuAU+bJAS+Ufxw1OIudDcwKc/GFz\n5PDdawpTW0kM8UDebo1fVEOTdZoJ7+IbWL2U3Ba09B/MaUFG+p0xt3YugmQa\nUj8CSQ/SRtjLous2TdcXHvzTgxua6Y92hsH1mXNGiy7f66gPwvjX8YIS4tNE\n6ywV7jJrCJXTsnU6WxR+gCNkMFqXLYfWF/4KaC65VaGn4CRkhDfx1vLAq82A\newPVtnxHxaCWVLG2dtugwbjSTEpJSs1OiW9FU2yqVsZNFWeRWMCCOjaqtEul\nNuecG3RB5NuFDkBCKfwnTbsTJKbVDm9GZf5xk0QUAThSJRrbrzqZesAj4Zi5\n4zovp3ifI5N10Ci4yYVHSfSPm5kNfq23AJY4UjS4uN37rtAgdtp4ILhzYOka\naCLwNxULtW0QPR1OuErtJ/NzFmtX33Pp9nRj0btuNlJ+Sgd0gyNXB8sU56Vt\nL0asXgnRaSNlll9cButiGjFiosFeA/BXrfKIBILWzSLamcCUVqml+pI/U3bG\nXBsq\r\n=W/Eg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.07deaec27.0","@material/animation":"10.0.0-canary.07deaec27.0","@material/elevation":"10.0.0-canary.07deaec27.0","@material/typography":"10.0.0-canary.07deaec27.0","@material/touch-target":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.07deaec27.0_1611334626152_0.03315498073547141","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/fab","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2168af477f53e7fe1f0eb3ae47390301e59b509","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.d2959b16c.0.tgz","fileCount":18,"integrity":"sha512-SzeHY5IAHozOi08fD4ZqhBs75NCYat3TXirEk4ltWoOkXSBusBEftTw80xula8btuBlSFmFL2JV0cdHVRAW+hQ==","signatures":[{"sig":"MEYCIQD+SWjmwFvdkvklhCoZ89nsjH7G1kle/wddEUhcTGlbuwIhAJG32muiWdu1YC8V62ZFm+5NOfBBQDkfdiRhpkkCXxfk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx7/CRA9TVsSAnZWagAAFrQP/iPsxijudpOwbwlZBJ/E\ngQ++SyEcwzNW48NUCvM9l6oZsptruYD03tT9nFrEsR4qh460SiG53n9VH2Ly\n7eXlDSrEPRy+jjx+gkdKmmAeIWhlfXgfm+UDesl+VBNP4Lr4zl39n5/nhxDJ\nBgMZ6+KkmxRWOi7D6qLZQrTNJHc6V3o5tU2UgZB7QUXf8G+oRRZITVmUySVs\nyvG33CrQKeBqnn7jQSpoSe5syGlQINcu3DFGskLchOvrC9ak5HQZ2PBtgKHC\nAx1erW617Mf3Rj3XIMDJb2mbVFMBO4+r1Hg/jcjRM2WN8HttRvf1+5ubBTyJ\nBdrR38Bgi81wxTdcaaJ7aJP7Yk1fJWSHpbsYPIufa1SnsQBWYulIAFKiATvl\nyHlk9v1rkAOgyo/IrIc+fIWxeHf3Tpiou6vLGNhDGc4TXUtVhkLCRqSg1e+f\nU8e/HzbROgkrHPvvxjZoDel1wUx+xkJ505FljXl8K/oL1qva7ZplJ4Ff3nLE\nFoOYsYKHBq/oFJmHuxr0jVn0AlbO8KBJ87RrQJ5xkWu334Kw91WPMbLR88av\nb7Hvff8+kYDj6aqoJCf6GhYNKE7WrNDdfqHcgqq+yp0mqKjbOSChasiTlOSs\nZiLFQLcPgT9wLI8zK/Fvfz9Mt26bQZOvFdRmtav8dynIUD5o9xEUEWdIrHhK\nXNWu\r\n=2KAq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.d2959b16c.0","@material/rtl":"10.0.0-canary.d2959b16c.0","@material/shape":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/ripple":"10.0.0-canary.d2959b16c.0","@material/animation":"10.0.0-canary.d2959b16c.0","@material/elevation":"10.0.0-canary.d2959b16c.0","@material/typography":"10.0.0-canary.d2959b16c.0","@material/touch-target":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.d2959b16c.0_1611341566949_0.91217368444677","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/fab","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d320aba945d9bef858b47ad2c06da0ca1147a54f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":18,"integrity":"sha512-3RB0l+OOXo7yQUKqqfr7uWC6sHT13jtu456vdnCsD7YrrpaydGIs/3QSYM6K1IGq3Xm27Y5tdql547+0+Kezzg==","signatures":[{"sig":"MEQCIF5MbkNLN6n22lm9wpjc3PQq60hNiBEI3cjed8UGO3q8AiAsua9rsM5VOBm5CwdX+4rvteHb0UkTx7SOfmhRoYistQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1cZCRA9TVsSAnZWagAAIdAP/3Mq/8xdJn/Wan7PoHLQ\nhTVrDzYIZQI/ZU28ajEO/8NPLDpgIhPsm+t7/T0gLSkGql/dkdcE9TMRFgIn\nSQyU8tA4nBIBK6kjo5S0kuIIfENJ7PsraJv4tzNacR8UNKoFkI3LcP4Ybkz1\n0oOyE53L9fLJ/30tAPdRVvvdhL5SR+DGahuLxYZbYeXOLamOXCFOkf9xhOmV\n0xFoy6Uri/noQ2ia0/vnFOnX8e/Pj1iWLYIXRCWklqTUrt688JnZSr+WhDeA\nbpo5eP7tOHaClTspYZXJG0jpO+cu7cXXIaFiBiQzEUxZbiZA+doOllYfxLJB\naKbPxnNtOgGUAlr/F6UQhK/xbg+YfBQwW/CflFYjbCOIbZ3ZCf/74KtwOPKO\nG+FekCibrbsYnHLVUg6+2lt/kMmZGuXFpPg6Y+DZQ3NtQDJpFUbit8JM4+J/\npf7zSejw9EWwqAGR8e3QSSW7DYY3D0W0TpWI9jg2aZYy2z6KE2mNpi/1dgei\nsR6cxnT/fpSwbegFKpXMZEjUUVsrqfm4KFsfx5ciZgDFlBJ4+i9Om3ceWlPi\nHPcGJCZiW7OKvhIkDkBWKC38WjX8t3j5ZvttmbYpt0pa3j6dPlX0nzhB4rXE\nyZjn4LFITuCPcZPUFPNyZ1ybPo6OSENYNJ2mJMDNaOFkKrANcJA66yd/BFSU\n108S\r\n=0Zls\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.75f3bfe7c.0","@material/rtl":"10.0.0-canary.75f3bfe7c.0","@material/shape":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/ripple":"10.0.0-canary.75f3bfe7c.0","@material/animation":"10.0.0-canary.75f3bfe7c.0","@material/elevation":"10.0.0-canary.75f3bfe7c.0","@material/typography":"10.0.0-canary.75f3bfe7c.0","@material/touch-target":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.75f3bfe7c.0_1611355929137_0.6587659251944391","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/fab","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d579708d2a2e5c265f013c8a52f0d4380c5c7904","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":18,"integrity":"sha512-dHIIzRdgvmrGVBXNAqnuOG22s/bFWTxBG/U7Fxd+OhAzzIRUMtXvfNOATd33Ged042m89vZVMsbpQxc963dBNA==","signatures":[{"sig":"MEYCIQC+A10sCkewRfLSKLV4xW6HSM9z30sdYMnOxNhVAIN05AIhAIIF5dmewXPn09BDCXZAlD2qe+mPsLOumGAgU7NlJsyZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2GCCRA9TVsSAnZWagAABqEP/j+/u2C0F0zPMR7A3v5+\nLGB++rwJyIYcMD6ro3IrWR2d5ohhdeKFapJtVzDNmqz5nZ/hwMJWk2jg3nNW\n8dGYrE+KMDSp7qMCdnmRjcA29kbL2WoFlCo/+pvYZioqPwpaRGpbQJlg20a0\nOsSwW46bN1QQ2vnnmlpzAS+6lih3Z3Bd7F8Uz9Ls32eckmnlbt0BtbIGFWH8\n7GgDyvtUH+XjUrNYvVVeNa+hzSBfwf8UVFQiwnYvXWZHypVDN05LtDBZCjkj\n1/d0ajhoFiObMvC6/2ITGuHyR94rBku626kJpUa8sTB5Q7MnIXLYXGdWmok6\noImqHT5y5GnFvw0OpZAUanRZXQ55kTJMaz0di6exVj5yi9qTfstmcT5crfwE\nKMGbUEv2T5tM3nloadVi1u89N6599Q0X9vSqDzKu35/4Zjh5B62GqZSeWMHI\nxZaIpnx4an10Md+bTDMxRL/C2xXJIWIEn1V401mnaAMc0HRHugOF3x2y3ub6\nl8YQKM3AaReuvUoi5j8zC8DNANC4f1zOKFcooLKsEq+0bd6JTpki928eoPEb\nWXS9VQCtP2D4t4kIlGVNubyxT1AUIwIDE0Qq+9v3Vy/OsTEZ1g/YsdKLHoOK\nY+5hOp/F+YJORD/TbEm862DiqqOvR8uD82IiAZqwmai/ZB0RpzS8fdYdDeV4\nTbU4\r\n=wTGB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.b9adb7a0f.0","@material/animation":"10.0.0-canary.b9adb7a0f.0","@material/elevation":"10.0.0-canary.b9adb7a0f.0","@material/typography":"10.0.0-canary.b9adb7a0f.0","@material/touch-target":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.b9adb7a0f.0_1611358594086_0.6126815251083131","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/fab","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd5e6f27ce46314821a4f50030bd15f09c5d857f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.d29ec2862.0.tgz","fileCount":18,"integrity":"sha512-ijIUEoUDjXduavWNBtev/S0At27ZOLn+iFXwsUtsCHNI0nRSf4DhHNY5FguNybKakILaZXaManPWCkbAKsqBgQ==","signatures":[{"sig":"MEQCIF6mFdeeZ1AS3zGo0/Se1p9KBWNGi+2kvoSGXKVpJ1gmAiAMjfhS5XbvC7PnMeQIV+a3DNy0TwPYlhUpJj3fmPqxHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvDOCRA9TVsSAnZWagAAeisP+wZUjy4qgTVpwvKEwgUP\nSdLSbecHzxwsPiSq9Nu+K35PMz2BKIeJpB5euiygPGjqACLVcNNO3kewWCW7\nqqas0mh3k8kVHFDdVy30TT0Z+d1gAjUH9XvMZF91Ija+GfDKhA6VWMOja1RX\nrM0cgmtAFshgRHS5tJfQxqoHuxbqLAM93fu2ogIxAbLMinKL/20qAQv5E8dJ\n5FvL/IorSbDmMH0LxzrKimjuBa9by6i43tqQ4ENXWRwjqgFz7xK3iNMOCJe9\n6vGWj8dVKS6exJPfuAFXUM+2MUMffX3RQyOgYUkAlkPNlBezIhyR4gmbhCev\nn0QKEHUPniwdyBB5N7/ZrcfZoo3EndQ/RjMYQLyPrECFZ/d6Ao/zAyG8P7lU\ndAtV/a3rSSvES58xyDx5FoV6vGitrQkqXbekw4Zdg4VLmWKck33pKW1l0VcH\nFplm5VgeiT95pnQfqr3mf6+/jTKlWFxsE37itJ/q58rFw3pvqv3CoejVrgwt\nTBCt5Yq7jt/WLkCQS1vfRB7eDXgxqnQG/nOvoNM5JhAiUobX9Yjg9od8xkyB\nINzDiVDsLLxf3k2OfMFViXxaOHAf0KRRdrCSMQ5x38LBiqTtym+84YjAvkO6\nVvyHdYVC5HlyFZri3ZKvBtKR/f2gY1QLIQO7k4riGFC8Ez146n/6mMBqfpAr\nBIUb\r\n=wI/9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.d29ec2862.0","@material/rtl":"10.0.0-canary.d29ec2862.0","@material/shape":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/ripple":"10.0.0-canary.d29ec2862.0","@material/animation":"10.0.0-canary.d29ec2862.0","@material/elevation":"10.0.0-canary.d29ec2862.0","@material/typography":"10.0.0-canary.d29ec2862.0","@material/touch-target":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.d29ec2862.0_1611591885552_0.7322481639241674","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/fab","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.96be07c68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6b28053b2e7c1c6cdd97d913315aaeaada2792f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.96be07c68.0.tgz","fileCount":18,"integrity":"sha512-c8dGq/CPpwgHQbWJc86YD7TLD5ujOBldkWLzfcDBGpf3HeZtiuEK1QIXVPQgJcq/abpazFXB6VKkMw292TjsUw==","signatures":[{"sig":"MEYCIQCGZDwXYpRSxZPKJL7gyqkHInV6tfT+sCobsN3vb9kKHgIhAORJgmrhknO9910/h6a/kY7cDIMPE7yBxWxyqzwVPTxi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD14NCRA9TVsSAnZWagAAJY8P+QFX7P9Ap8yjCYi08hpm\nI+i+Bgo26MRWBqH8H6s/0ZP2AiqPr6fxZLYOcq1qVdV7KylkI4UGqXM7Jwot\n4T5wGnczOC9cmIfbB3imeCv8GKE+FfIEiL7hZphBpMCKFlgZKD9YpPFI3r04\nNiFxY3etQDZNnze7i+vH8flHk9T7pqcbKXbnmVYFM5JlGpnwmVWbPTD/l9nC\noIKjMCGJG9b1WBekwhrHxapQb5WkNz8pIk3XgeXne3iJbHdokmmnEfnvWZiD\n1MIW+wmYHMsK+p3HgyC+GYaXqbe7WheAMhXAnOBqaynM7gvQdtM7VntRsqxw\nCIKo03Yik5tUyOanzar4dXqt8L7PGBKSaH5HPWegyIv+O3AALrVCs8News+D\nQmpRMFyjEm/0qfbe5811Vtct+Nsqwfm9gmCeVF065MkqJ03YKRuUVyf2bSNw\nmA12AE1F4mAJbZIiw8jmu2kfCdaCiKnno2SDLMrWn4IkqLhwac83J4bv6LDo\n3zI7widOz2UcH78qS4DgshlyhJA84v7MGt0y4I5uXvmr1CuaqDs/WE6ZoHMQ\nm7jU5Lw/qZ3jKnb2rjup0rEfgg+Qe0fyVlB8EKIzJVSxRTyzaCy1UUB1CwmD\na+1dqzn67rrEaZ2A1yAQ+BF0YpKt0MdwlDWQAno4F+xs+p7Omzbs5MJCzagX\nzGNn\r\n=F/F6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.96be07c68.0","@material/rtl":"10.0.0-canary.96be07c68.0","@material/shape":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/ripple":"10.0.0-canary.96be07c68.0","@material/animation":"10.0.0-canary.96be07c68.0","@material/elevation":"10.0.0-canary.96be07c68.0","@material/typography":"10.0.0-canary.96be07c68.0","@material/touch-target":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.96be07c68.0_1611619853380_0.6096260079972529","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/fab","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.e383944e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ac0f020892b25ecbb54e9fcdbd424e8c2d376b3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.e383944e9.0.tgz","fileCount":18,"integrity":"sha512-opZFDpSRmETWoH5BgQ/6+GmHVfdc7o5cBcct0xbff+yjpyX1L39clmt0bYRbJL7GCDECSPzBrPa0E4fqqAWNvA==","signatures":[{"sig":"MEYCIQCuXPS4pXQLxZ0GHxUQ8CG7F1gtrb91SZJYFzV9QEIE3AIhAI9o/UepIIHEPAYQAvT2xg6PePLvHDNA+HdvwlXJLPy9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3RDCRA9TVsSAnZWagAA5sIP/RMfiEyTIwbXXBekXgAs\n18+b9aqunKqET/1pHHuG209eik/1auQVobVL2ABud8WNVT3ZAB/+h/Cm6bm9\nrLZT3vJ99CtwtjN9Cb1CY1u6Rgptj/ecyQCW/IHQPu3jeoKkyMAV/Z6tS5Zh\n+YMmfkn5aSCHcySMmowApmYHHCq0sJUypU3Iox8PCxVTTeI+iO+pIbMM1lXc\n2tXANfdq+2c32zsiSVpUTDAmmGC/nryP5kU9qEpujpLolcDy75OBg/qN1VPR\nsrqim4ns9c3eKseVE6RB4oAXpYPfvj0PmoDO6ISBNLlW78mpUWbMs25fbgA0\nw1fDFZMvwa6UBd7WPIBXLVbUY24nrOcGlw051Yt99YtFHjl7pGKBj+RTwoEg\ncJcxoFvCH/CAzdq5LHd1jseB8rwie79Hg1fBNrHlv2TVAAS2NwEpPoC3FU+s\n1uodgHxKB0ZD7+TZnsbeY7QZXYapCWl2uFQOQzi8xFuxft4T7ZWOx/ceODIv\nGjq8LymUf4gF/fkwVMxxdLSw1DZK3I85AZDIcT6/lq/15Y0AXAcggFqdpXN4\n4QSktSk7vO2jFRrDsIqCYAkJtKVXfC0OQ8iuPoMLf1xXX8lVnMclnPSJTFx5\nV2mQb4wCNXghpVeCukjGFETJPwwcAYHtCDMYUW/nX3qTBPmeQZ6ubqfSGSfC\nyeAj\r\n=ihdR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.e383944e9.0","@material/rtl":"10.0.0-canary.e383944e9.0","@material/shape":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/ripple":"10.0.0-canary.e383944e9.0","@material/animation":"10.0.0-canary.e383944e9.0","@material/elevation":"10.0.0-canary.e383944e9.0","@material/typography":"10.0.0-canary.e383944e9.0","@material/touch-target":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.e383944e9.0_1611625539355_0.0003026842211144576","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/fab","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.623af861e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6b14d5ae15c9dd865eea9499891deb7396acc85","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.623af861e.0.tgz","fileCount":18,"integrity":"sha512-PCrZHFW5lXlKS83sTYY76o70qLqIRq9LRrMcvE64IZ0YQz3lWKShv0lCECQyVnrQV4uWQ3K6EkRJQ/mBypxh4w==","signatures":[{"sig":"MEUCIHDt6HFpJYCAjT08HSFqTMNrABPHW+V2ycHxllQca2ypAiEAi/gFnSCtvGBmHjUkuJO5pEIDrcXuuQfmutruj+9Em/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5B0CRA9TVsSAnZWagAA79QQAIlIIkuWVQZxXo2wiESv\nlknWueKAAr2tiH2mA3toHp27PGgu52bOLdo/OOxtx1eIbmTPToD1nacaWaFi\naIm17gswKLCKzL58d8/2HscsAU85XP083vu0T/03opMv8nsLgoRjjQJ4u98+\npB0oK2G5Ldq4wv+bQ+dPb428vonAkFc7Hd8sRRKXPpjtpoj8sogcu9fVMbvk\nsQbJ4OIYngVB2mL0TTKb91Z4uxULL58ztgNdGCWUEMSe6YDab6W3jakc+kKd\n9KCuFp8sS0wzp0jnFuokaPmVHJzmA8JXWDC99JyIQ3Dpx9vF97+4hbcDuMUw\neMunK/H1bmvfd5wLlc8g0jKZdLjPgdqMl/qP0QwrsHUBMfOIoFs4/M0hulwM\nfGESyI4BVst2PFFvcebq+P9ZlALK8VR44sP6C4Jn4Q8CLNX+yodjmemLbc2A\nLGJgZEFxnArlvncLAMG+4ITJkeq9FSjPfbrI+Mn5pNLThWb/yrJOdq+TFW/m\neympPuVeGvtWBD/HfIEYXQ7FBT0ZnZyszwRzOtUHQdI6iS9x7tahXTxfpk5A\n9cCMNZEvyYyw4YMR16Vm3sIaG8tL/K/sy2ol+MCGjng/GlP7FD/stKN4n4yi\nP9AsGpdwAsRTMLISNSYHV70WYEmPZXYl9X46LOuscvfBUScRIFuliJKZKiwT\nkg6n\r\n=jJ9K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.623af861e.0","@material/rtl":"10.0.0-canary.623af861e.0","@material/shape":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/ripple":"10.0.0-canary.623af861e.0","@material/animation":"10.0.0-canary.623af861e.0","@material/elevation":"10.0.0-canary.623af861e.0","@material/typography":"10.0.0-canary.623af861e.0","@material/touch-target":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.623af861e.0_1611632756125_0.24450140128660247","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/fab","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"241d58aa7cb757e0fe8cd388d1866b78be92e131","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.6863fd43a.0.tgz","fileCount":18,"integrity":"sha512-7j2YaKR8WgLMgMfNFUPXaa58xYAsApnikxH2sCOk3cBc+fgzDhNIalxI1eiSP+obPxIkqxnbSfStdPKrCig/oA==","signatures":[{"sig":"MEQCIDV/ZJQGCKcZGlwjL9Kg2rtxy8/CyCeLBhU/M+A4HbmkAiA2BZOy2pzjKM6f53fLhwyU63Mh8tlT3fRIAblUspfH0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIrQCRA9TVsSAnZWagAA+2kP/2rnurOME5iOf1pgEZn/\nREZf3vcBOQvpGwVXMBrMYFTYRcx7uqJnT4w7y8oRT7MkIXC7gmKQn/NfMNfS\nJc8wzvdiIVYEutD411ZVjIic4vHqgQBiZXF0HOAVYWFX+ns1kkGUJMHzul1J\nkOHixhTdIBtQLu4/exHkKV5JiwguFY41Cd3u2aRxFGufJSledeEnwoirryO3\nHMYvJqcLsNTD1C+kZsJ1gps3j9LkrAEyQPtlKf+pvAB7UuDzy0Prh3fs5P31\neAf5sE2nXy3nhByLOzmpXJA+y1A4hkqGG6/6vKnOJqXZISEnEJPBQG15rdna\nvUM9n5z8/Vdolh4Zjz5C66N2PLXYTJOpbXLO5XM45fgdbknU4stXC9O7cy7r\nAHHfYbM74S1ZlZ1WSclrdcMb3EnP9EPgOgQivshOMtnYwp9wZTO6o5zPztsF\nbvygoARFOLrDON2CkeH/8s0kQcqxL1fEh2S3+Bdts6lLheHK00BfOrMXB+hh\ntPLwH5M+kMlan1ulrevJQvrZTNmMWNU9fqHxOGld0luOsq8KO5jeooHN45SW\nStCh9/KoC7ERnOjl6Tjuh5rq+1BqhKKOxAc7IssDtT1BFE9PW5HVJwcz+YvE\nkj2YI6lqeVjhjKsFPsRB6tmMTxE7mhIyFhX1YkslZDnhYHILEAW8rKkcCd6w\naSuy\r\n=STFc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.6863fd43a.0","@material/rtl":"10.0.0-canary.6863fd43a.0","@material/shape":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/ripple":"10.0.0-canary.6863fd43a.0","@material/animation":"10.0.0-canary.6863fd43a.0","@material/elevation":"10.0.0-canary.6863fd43a.0","@material/typography":"10.0.0-canary.6863fd43a.0","@material/touch-target":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.6863fd43a.0_1611696848249_0.5341038953512549","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/fab","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8e80aab10f1800e402f6a2a50838279d0701418","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.ea55b87ca.0.tgz","fileCount":18,"integrity":"sha512-Olgj4KgBN6gN62E0chhPMafNH+ivQI0DURrV2Kq7cUu/eT1SeW+gnRSMAnPTx41JEg8hOCTguhFPzhX7cvIGCA==","signatures":[{"sig":"MEQCIGn1jQ7H+y1LqOxUB6L4naeHEs/7grvlakgJW166mTKQAiBy7StReAnSOG89i1wfn1arrSmwKgKD2qpogWbgck/ILw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKnpCRA9TVsSAnZWagAA03YQAIPTK5qqjK66aHx+Z/91\ndxuVaR0Yh2WqSQVxD90eo5ZlA14fUeZQ8/Bx0kuMrN2zLp8pbTTqtfRNAsdu\nBCpdLCet+WX/WJE6Fb5f2ZUZXMR+LFEhxchMNeXG5PPLFJIMQaRFk/Mbk09C\nGbA2jIiZfV95m7+kQruPYvpMv9VF2Il/75VbZjtJi81w+WjTSPiax8Mz/svP\nuTwF0DUKxkiA6nn61C/jYREfhy6gpQSkOnlnEvB//PCp42IVaQWxPYMcNkwa\nfB0VEKDOZkx9UGTXtqkhX08oGr8x/Cbvbnsp6e8FR1Tiy7qGiM6xfBALcp6z\nvPyyUiGMhiFySLZZ/HhlpJV8xZU2/tVFSRGkLvLSNrFRxghe3x1RHAgy0MfC\nyEmdGYib4hocIqY7mcsD+/kulhe8vlc61x76Xw+2OTCebnwOpJLnHOHukjsL\nI09uGjDxQxknFoQM8W5TOLlCNFc6knQLQ7oqgOXvcNqsip9P8N308LL6Ijir\nxFf/kk+QJnKipAQz3ZCDQgGI4ipm9RAdB3oyv2OnpeEDdytI4SxlFHBKBgqM\ni4PkIZIe5D2MBOazIPv4DIuDUVqvDrEE2uig9vu10L8SApI6dOZ5tSJvH9aW\n9y4lVKxN2cUNYWUvnssnPM80OeKSFWfqqeV5HHy9Rb6kB5WgdYnGIT7aF2FI\n0qlC\r\n=/Wdz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.ea55b87ca.0","@material/rtl":"10.0.0-canary.ea55b87ca.0","@material/shape":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/ripple":"10.0.0-canary.ea55b87ca.0","@material/animation":"10.0.0-canary.ea55b87ca.0","@material/elevation":"10.0.0-canary.ea55b87ca.0","@material/typography":"10.0.0-canary.ea55b87ca.0","@material/touch-target":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.ea55b87ca.0_1611704809056_0.7920920438744694","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/fab","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e119c2e17dcb5e912aecca3373bc4192e6985c0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.e902ff05f.0.tgz","fileCount":18,"integrity":"sha512-XZjmZU0CgPaMEjs9webtfaUPkOBwHxhWVomRmBY5St6vzR9VVK6nrq5y3HWV1q0XpC2JgxDlEPjCQI0J2mVfLw==","signatures":[{"sig":"MEUCICs1HGGn8w7VUNDmawCP9e5vHCconNDqFVwxHBYW3M2+AiEA5kRtQRfGOHl4ydqyzyo1ziNXNYWVFGSNLABIs/rHc9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK4mCRA9TVsSAnZWagAA5kwP/0Y5KHq5dc58vqSmWGsq\nSW55ADjV0Tpmoy2nDR2Ddwpyb1BmBRpBUJQUSf8+1X6Jjj0HhuyDqZgRqGgk\nTXaD/8D9fB7goioQVGbSPu0oe8ffqhdgSCO0f+4h5ZfX9MnvjtuCTHgZk5Yn\n0afMeoRm0Y42Wc5R4uIf92X0gZ62BfuRp0ffbZF/r09PLuUhuKKqdfCbj8/x\nVSVKKpNkhjjhcAvkIOjDP76LcSwJlVidnGFrU7P3aK6J23/GjHp46RaV9Phg\npp+fZsb0TfCdFGSQTD9jwj+Csth14oMvOu/TdfX1FGNGg/NHSyw23h3OncZt\nuFRVeB7nlo8YH7JOZLYDK5o7OEXO6wiRJYHdDVWIfmoX2WNsY4LB6xMmQQjn\nJ0VOuKJWJ4OCdDmWBCRx3YyiPdBpOvsztCIwp3VDB9c0e6Yc68AVgIToRM39\nQi6GG7ktqZAV6wAQlljwWywwnP3U+KhJKQGgPgWFNliCoZbOspQ2q7joyE1f\n1lXnFuKWsGiPzFuBWFqN0iJyJM58H/aXWb/qUXebjqW3aUXk4Gd8nGq7JGxy\ntQVF12EXXeqGBCMkjwcCpQfyQ5Ri8GU1cUT/ASmqqK6dgVtoyHfLcE0zotjE\nnhnO/CgMpx3ZPZg4nXc9KqjoML0r1epqSgbluUlWwGPHjgeb4AXUP7Rzvn0D\nUwbM\r\n=b43I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.e902ff05f.0","@material/rtl":"10.0.0-canary.e902ff05f.0","@material/shape":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/ripple":"10.0.0-canary.e902ff05f.0","@material/animation":"10.0.0-canary.e902ff05f.0","@material/elevation":"10.0.0-canary.e902ff05f.0","@material/typography":"10.0.0-canary.e902ff05f.0","@material/touch-target":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.e902ff05f.0_1611705893218_0.4739404597102479","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/fab","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"563e86389761c754e5df0cfe284c011d783b9375","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.2c9fc538a.0.tgz","fileCount":18,"integrity":"sha512-9OBqrTxqU84k3S0kxvtB5H6CLwC6t4+zTvtFSy655lx+/yTRTe4geiYnqM2wlMjO+bjMe2Lo5OJr14nuKuOOGQ==","signatures":[{"sig":"MEUCIQDDjlD+6VijXdwG0Wp7v/vpBzK77wTpm6eUhUmXv7zqZwIgM3ZlnHCXt0EYyE32Ptaq2t9d7gzJAaixnRRlsAJM1Ak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELOPCRA9TVsSAnZWagAA4ZsQAJag57ktpj9a3Dy+7LYb\nA0VmNGbDbCCNF47OnjWmiFwrf6xuTZZKpMENXhARBA+O7VZOw7+p2wzExUY6\n2i57Vabhd4tX+Z54LYVRlgub/JZR2ZKw87XxGf+aQ8AQ5LPpdRMcf8YsDhDK\ncjgv+nO9FCMIymtLKqv/xBStJff1kFYt4vMo8yY7nCQh2Z+g/mUIh69SCLDc\nT4yEpsHpmRxbq4K6ySbKY3YRn0g9YTY70wmwklVD7MLbjXlgJyPJ1O+mHpaI\nCK5jm+Guhs/WoSsYylEfYnViZB8/MmKx5M+yv0yF+NLKeUcRSGLhzV2TzSuS\nM/GVdc7pfNWiIZhnEyKcm8dEKWyXzLbKv/Vgjw/FQZvtamnFEGLVoJffj43p\njfK4B10sV7d4YawvazAwRWcCUrqVP8N3G+Vne1a/TKDdG+2E/1ALTcjO7qqT\nuSdkFfU8khQd1TK1UeOum0DkjVm6b05yILk4mmi50bFoKYOQLIqPD+G382+N\nY+Tx4NOfXXzbNrrjnqkl6depgp56Z94HDYrSTwUTdO0XD5WoYYaTVJwJL/x4\npZhQsevI8ONf7+ibrBahsFoQM2TqpDGyKrODTNuThVv2HEs6ypWm4MWpI2ep\naS0waN0dPKn3ZswGOYFegImHTGneeWIiTIIGHTVHDNQIEgUCA2TlykRMt4Nn\nBBgl\r\n=cOXt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.2c9fc538a.0","@material/rtl":"10.0.0-canary.2c9fc538a.0","@material/shape":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/ripple":"10.0.0-canary.2c9fc538a.0","@material/animation":"10.0.0-canary.2c9fc538a.0","@material/elevation":"10.0.0-canary.2c9fc538a.0","@material/typography":"10.0.0-canary.2c9fc538a.0","@material/touch-target":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.2c9fc538a.0_1611707279307_0.7398131087882243","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/fab","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"100f465d278b76bc9b19ce09aee1931df05c566e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":18,"integrity":"sha512-KS/eZB4xskARDxFvsevshgHPmynkZ/oV4iZwpIdiVwu3P07ziUOTaZsl4Sr1ykygDpjlvj37yFMvq5Th4oTNJQ==","signatures":[{"sig":"MEUCIH1eGZ1FNFZp5IcI/PtOKdkgWqv17T13qNYyGxOeJcozAiEAtrYtv/icgx2FgCnWoSY8S+DyYIGOXJWU93IvBNNqg2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL/1CRA9TVsSAnZWagAAp+8P/AwdDG8LlNWZ6EJqF7LM\niLzy58kFWd2yHRgZPa/9Olbjci5QOSDFAY2KjswY3BIs3z0JJcnO+HxgNppn\nwA5PWnRYZ2cBOUkcCdmK2UGBDVQ051avY5G4xnvcIFnGXSlhUz8EPIDXTqzX\n39RcnvSAWzjtXJ2ZAwlxtMLoqAAYy5bG61K23R8Jd3w7hhRer+R0RYTY4FIj\nsdT+aFRRgeEdrtSXr3NzPKYy4mB5ua+EhVnGOCOq0mzBaog2NuJSe5aqhzx2\nAWo+Es9NObaigJAIz+Tklc11N1ePmWc5cfJniNwXT1UK1NYt1EZlzfmi2IC3\nJei6aUVvo1dGTuNqZCQKYiW2H4+uNh99yISF9pQ1IsIJsFIsNvJsvChBlR2m\nkYV7JvEK6y1KTYMXRw1NEoTc5pSEI8TJMxSNlWIzM37DtZEJDuzWcnWNgeiA\nQzcjHjj40EQ0a87itixrDbzLNYLBO6OX5X37+zfSs6Ykf8j93+VOnQODgeWm\nDZCX3gfIKUAlS2VXQP+hb+SlwdmfYxjCpU4OGNtEoLdQ7Nld0Sd1IOqcRI55\nO8/3wznPFogR3e8Z2toNdqlf/e1h575/Ma4XlLAF9Xx4DGwT84Bn9JjGa/sD\ni2LhnhjTu+lEdiaDR7WSSVsPaKJunaiRWmd6fyq7ZlEO5NPwBg7OEgS0EPu9\nvhoL\r\n=QziS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.6bf56aaa4.0","@material/rtl":"10.0.0-canary.6bf56aaa4.0","@material/shape":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/ripple":"10.0.0-canary.6bf56aaa4.0","@material/animation":"10.0.0-canary.6bf56aaa4.0","@material/elevation":"10.0.0-canary.6bf56aaa4.0","@material/typography":"10.0.0-canary.6bf56aaa4.0","@material/touch-target":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.6bf56aaa4.0_1611710452929_0.32680166412080847","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/fab","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.994873795.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd5410e77929d4effa1219f7880c489c5e11fcea","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.994873795.0.tgz","fileCount":18,"integrity":"sha512-ME6cbv0AYTQbOokT3RK5rsBxQNpZWEVVb23dcbYr9ud/0BsQXoaJvwae6q3vR4pcIoqOOtr0OlXByWsbjbQ1qw==","signatures":[{"sig":"MEYCIQCeI4aE/QiFTLz4kUpQ/DbfND97DsNisslRlwSU7flcRwIhAIZPALcnfzxB/o682yk6zPuuA5fl5cdSN7T6uSeNlHrH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX4ICRA9TVsSAnZWagAA2L0P/2D2QQIYRHZmV2vUC7E6\nAtCvzrlncPlMM4qsFkdxH5Iaj0EtGPwtgCXgsnzEgSlKSw1TH70FvoDB8TPi\nOaFWY/pljuYs7UzCe7NIKyfksTwkb1IixxepekahD+8RbOnEwIelyovoTkPB\nOUW6pPIs5rjt62WOkVyYqjNgY/OuYqk+1B3L35t1uHhe7P4hQoRIIxqlc7/I\n0yB0pYRA7kvoazFfYae6TH7KJI6Rpvk/QSNyebpgxD3iHq6n/wYbzIBJ/WbE\nZQ33lL/nLBSRdwm4dx30bdz/8bD8S5aMSNi+vVWlyihObsjPH2xCx5uCEPnh\nRYj1Jpxy83hoVoMvbtaYVqnkQ+uvSRJ9oJusjvnDviSilKZDxZU6EU7Xx5Dv\nvZzhjXY5ZZMVRTe6/Lh7QZn5Y1CYhdfWTpeRdPh73BQbBuq8rBvdqyaNyt7G\n3mbF1cO8pnG+On/UOEAqvcUe8FV6DCuwK8Tjq45S7VOl/UfX4DtsdijdLQ2S\n14k+L13djoN0oWt28MCQkueI4pwpOo4jkYmc5S5vj13byA24nTL+h8T/v2Mx\na/TLWBfr0DJXof2+q93HTKDJ5zGlYJafvUY7QE9Mq34QtnIbhqdSt4VFeQ1r\n12obay55jiVDUCnCJDLFNFna2HxzE8xkwzX8RfDh8aqXexHbGX7HQXzQoelZ\nN2KF\r\n=8aNK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.994873795.0","@material/rtl":"10.0.0-canary.994873795.0","@material/shape":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/ripple":"10.0.0-canary.994873795.0","@material/animation":"10.0.0-canary.994873795.0","@material/elevation":"10.0.0-canary.994873795.0","@material/typography":"10.0.0-canary.994873795.0","@material/touch-target":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.994873795.0_1611759111870_0.3039175535398435","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/fab","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e90326f683eea901d24cdab9433b2c2d0775345","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.96878e1d0.0.tgz","fileCount":18,"integrity":"sha512-4k+1UK1OJVA1lFiqzlxu273TLvPkVxTu0Zfv1Z+j9BXGxYauVhXA15kQNM5UzVVc4XC/L+gGW1ZdZSO1zCNLtA==","signatures":[{"sig":"MEUCIQDEMJX/WW5bM3BD+ug+Wy4fpZaIEMK9egrnUFLuWCSdxQIgUMpGvkunyoz8D7I4OcPB4BGPyjXddKPzvL6Wafja730=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEarYCRA9TVsSAnZWagAAPCwP/Ra1LKB3Z4HwoNgpLaDC\ngvkx8e5aYT+tCR8sJJIIHaM4RFJw2GVzTbkYTIUBz2w4HVL3t2++/MgD3qh1\nGRCtDXmLE3xpA3yv1n0XjjZn6+jKJGYT+Fh2WIweSJorEtek8cfc50332OgL\nlTgl8wDSn7HWakFSjqZjJS9+ACb6+QSbLP7zHelRdTV6qP5qXqWjdviLyfRc\nKzEKUBUHa04TVgY+C3bXnT3YiViqDsxOz6FMkR1ORmN1Vp64JL9IWD2p+ubb\nZOQUDdmfV644Lp3ks+KnnzqcCsJA4h3aUel6fHKJR+PdruQX87BNZfT1zUd+\n+smkVKQIYXP/xxGmHTG5qx9x/VXgNw9AS49eyvvkEq04T7D/IRlEVjX6/pez\nN7veSBBabG1x49qw5QudnymtkOZusZNrlBkQUgguiDJfYp4f5lY98IkLTRPc\nFsZ6db8bJCxM5Sh4DpkLUqeiuB6uQwW55ZjJUX0fp9T9osiwvm5ZQNIcrpJR\nq/HU3nlK+mxcaSuaBfEDLCOEVI0FHC6M6RmgU+UfHHwmSGP/yfSrMrcnafV+\nyHNjKtIe/S0M/x1sS5O3kKihwBSfvKehjZp8ad09eplIG80x8ZfFS0yUwWqr\nWWeyeTzRYlpcyjPCsP054bSXBo599O/MzoGxCSzAiaVYk4jTcPkx5ahEzTPk\nrIJa\r\n=sVq6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.96878e1d0.0","@material/animation":"10.0.0-canary.96878e1d0.0","@material/elevation":"10.0.0-canary.96878e1d0.0","@material/typography":"10.0.0-canary.96878e1d0.0","@material/touch-target":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.96878e1d0.0_1611770583715_0.42511115047823145","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/fab","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb73bedcf7294da59b2fe1faf81898fdabb61e7f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.3c117cdcc.0.tgz","fileCount":18,"integrity":"sha512-N7VDWx67frU+vq9XLPi/BS63kXP/41+qySQlceSVY5IdAKSGdyZGiN3lHGuB04jc/0bW5mT+sHkvEEHq17Av1Q==","signatures":[{"sig":"MEYCIQD2Rr2Mbh87uSvWAGGnndX2Sf2G3fYX4NBzVPvpqGXfGAIhAIeAQW0tQ9AtGZ/DxNL6T2jBwtn8PMKXwtibukFH4LI5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbHnCRA9TVsSAnZWagAAEm0P/R1DPvSvmMSu0rxfjzWp\n7BPzZ+v0KP/pY8LcjoWxEF4pgdYCKuWtocBWujlLbjBaAY41qDjxrDThLLDG\nJYVY7pHUbNxKqcpS1m5Ty8ii0SBIhL0zpGQi8ERMutAwmGiRMBJIuSdQG9Eh\nbsUX/b/eFJLNSsdPwz8sECCIkyitIFUiMGlZM7psF1Oun6VtKg+blKPdi+hS\n1FJdQ55FRs1+DOdeOwLb88Ug1n9J1LT5a/ZbfZQCpYxOFQLPsSYmGBUUD+zp\n+8N1nyZa4fa5a2KzRSRBbBaFQXEABq9QZAlZuT3/iBjd0ozqjfiNP7Nk6pYx\nHEtTxzgIxXY8gTCoqVqurTpUjL1yybNzocg4hyb6V8vxBXQD3m1V5AJACZdt\nzbGb8Q1hWXBnT2BEe0DIIeNufZ9pbbDoPWv+UOEKb5m1BXdeeRpblamqiZ6E\n+dvairRO29Oss0OU0pLuNWupINyt45KiFZTbpFUWBT5PYgneJek66FJp8YIh\ncPlJ12gNIrjtpNKFa0QETFLFKUCNML8N7WlRfcRf5jbWxXTzLQ6fMyXY4NrT\n5NhZD7vzYlYhG8JVj9lRbiGbmCoH73Eiq8oy64waiGKrDm4ZLksYLLSr2LMv\nBCnhemlJKMFgLKl/tDKXfr6AWpiPTM5LNaq/dPVeVZoWlBc5X7+he3XlSu1p\nHuCV\r\n=9IF9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.3c117cdcc.0","@material/rtl":"10.0.0-canary.3c117cdcc.0","@material/shape":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/ripple":"10.0.0-canary.3c117cdcc.0","@material/animation":"10.0.0-canary.3c117cdcc.0","@material/elevation":"10.0.0-canary.3c117cdcc.0","@material/typography":"10.0.0-canary.3c117cdcc.0","@material/touch-target":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.3c117cdcc.0_1611772391341_0.3188309182026021","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/fab","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.b411e7033.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52ab587c38280884a9a8edd7ab7b877637ef876e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.b411e7033.0.tgz","fileCount":18,"integrity":"sha512-V2RMwIbg23LHDjhFtN9dRMTmYO1vKr4jrJaQ9bqn4eXSjxneEVYfpAMQWS6+Ai1AsyTTmcuaoXC4mXGzt0vAIQ==","signatures":[{"sig":"MEYCIQCmawe42W5mo7xTnAGcL/MMg0NLdo8h0VNpmT6/Pdww1QIhAIUEQlCpTUtKqtDzhOZSG7N0JlKV41FFl8wQSnGDve7c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeNqCRA9TVsSAnZWagAAYYgP/3NoT0HY/+mJXy6NvZLj\n2GlKrVA4gwS2rWEtG/hJKf5DKbAtSSz1yx4tEscAxUKrQ/P2QDU1ic+wh6cO\nV7XeLIcgFZ7Nn09rC5o/SnLWz9eHFKFQ1TUbz021+Ikjd9QBXGPH58bO1KZK\n/CeJLy41HkN/uKx8mMmtFAXDqcWBY938iRtwx1CaWliiF5zH6aIhUU2Q3T7m\nxdLPEckzpbGegByH5ZA8rQbW93mSHHN0MiNxw+CHeh2ufTRI6O3i9KfJV2m9\nMdW4eXzrDnrQGhHPxNMhW+FtjvlnEsbsa0tSHh3zgh+pmGCUFtz8mYeCIrR3\n47w/A7VYvuWvMhnrZOe0FYgf0MruK75WOT8prYUtD7hV85pGDqELH58erSug\nNpszpp3EdoDd4OQnd88vxKHxVDsNveKJAjxSRO7aNO3VwlQWfnAeOZHwXUNl\n9VqUEoUdzaC+F2kj+35HrExFhkGTk13Nt1lr74O5LC3czYTktQ68FTNOy1DF\nEGcjZkXMjtgk1ddGHwNPfH2IdbNljYfgWDESXsvkL0qucs0+stQjso1F+Jh/\nilSirLBgJaaWJ9Pt6wzHjzPZguD1klGoOE56MEAdqCfOwqad/QlUO9ymFAuE\nXa67R85/LfsOMPOmjAqnb0oBc5hfCuln1nTzZpWi4a/iO1+5zc8h2ZxPTvzD\nnz4d\r\n=6okS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.b411e7033.0","@material/rtl":"10.0.0-canary.b411e7033.0","@material/shape":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/ripple":"10.0.0-canary.b411e7033.0","@material/animation":"10.0.0-canary.b411e7033.0","@material/elevation":"10.0.0-canary.b411e7033.0","@material/typography":"10.0.0-canary.b411e7033.0","@material/touch-target":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.b411e7033.0_1611785065799_0.5363865048884382","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/fab","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b21d396cd0a33c5a1fcab3b5315624c0f53e944e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":18,"integrity":"sha512-zJ15u7fhG1W4Adm/hKdhR7HxJYBsOHBAGfQMS70kduQ/k22IABEKrH2s3hklFMliR50exnk3JoNkfpbQJXgeZA==","signatures":[{"sig":"MEYCIQDxABZNlrGQhTSdoAKNv5cNnd3ci7rpdQBR0svDlz2ibAIhALBEQCxquLq+AQ2UpI80KVTmGAcmDIqbGH4VzFCp3GAc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfFzCRA9TVsSAnZWagAAc0cP/3XCHn/wmEn1HdDII49e\np6TNfoZnjnS0pS57j7gMAhkZpvy1aVWfNtAv01yCi6tzA9c+XoAE4iz6gg2Z\nlXwpPL/0L6f050g3YeEPrkgRyhjKwC1DQq9WUHLe3pEbnwDba7i1gm1gRCtX\njeWMKxcbbkmVpCBUYsw8+6+e0U/9jYpJEgdjCFtXocMmmf3BwJibIoL8vvie\nOdTwr+GbqczGV1dJ3/NeWhm3diTm9CCHCgQRG17TgU0jNNps5hqgzz2AzoCk\nOMH0fQzprZG2ADSVq4sWgeJwmVQMEGGqw+5ddwBMqJTJRcePSte2GH849qy0\nUGqlQWTvAFnhCO1ayWu+m8On3FjfXkWXP/jCBpRLgueOgpFog8Iy5F09BH9W\nNExNMXfmDC0/4666L92Nno9kxaY3VYonn4DKvQXOwpyeCoh/AC+p7uHarp9+\nBKIdEHhI2nY28VNs6eecF35gHg/zDj+HI/j5XJ+tEyoWrqDZhDGiqORCNBwi\ndc0AlQ7q8CnTMpBCGRXunJGQfAuZbD996wx6skRql1VBt4pkHeYfLIHtsFW+\nCyNtGRRXeK/hhKKoiqY0K5qlEC9aRopFBnbFPqVY5vM2vHrGz+2iC0U2lCOb\ncHmcObHbUjDcoKH87B/9mML2YTLFfMt/78UmCyD6AHVc/IoXvBiehfmGbPl3\n/S5z\r\n=3Bvz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.a9ac16b4a.0","@material/rtl":"10.0.0-canary.a9ac16b4a.0","@material/shape":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/ripple":"10.0.0-canary.a9ac16b4a.0","@material/animation":"10.0.0-canary.a9ac16b4a.0","@material/elevation":"10.0.0-canary.a9ac16b4a.0","@material/typography":"10.0.0-canary.a9ac16b4a.0","@material/touch-target":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.a9ac16b4a.0_1611788658894_0.000181284705036866","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/fab","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87e070e8fa23c9d63e3079ab3f827136a6eb078b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.fec7b42ca.0.tgz","fileCount":18,"integrity":"sha512-9CmK8kx0EZokbm7SI5nBR5Jay2e1yltRblflzkJ/lBLXliteFU/bKOpCcidgmrFb4cXyuApNYVSaWIPZzayhxw==","signatures":[{"sig":"MEUCIC3b7J4ayS1iphvdMsCWLCtb9HBC6DAp7y6YfGuN7IVLAiEApxIUYHOfPSYeYOcCaeqvuiM5wks9fLhnd5K2bpVo/C4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw1MCRA9TVsSAnZWagAAUq0P+wQtGuB07ZgvyODlQZ8b\nO7bw8ERFhEI1p+PnjoE75mhXHBqveWD3y+yuczBTVErl5FBcA4fCIJdqhepo\nTe+rnNBYXAEXb0EgdYL3G25c7JNNfdfq1Iisj1UnL6Vm6ovkr4snfwICdRbj\nfU0+jLXQAjkl7QoIgM/vnTBnYWos2CZ7/odSbh24l3h6t10cOiI6UimRyyfp\n52t2+MJYpShjqGl1Q3A1fUepd7gDOhuS+CsHzy+GynBb2whlvgL1Yh4yfDdh\nltustE53iHgvO8Kzjaib5RDnbQgO76bHI0eTntOPQEHi1EnBaqHYP97fGPGe\n2T0QnqciPCqZZ6Q28FzRjnpJHUv1LmRShvGKPGL1KSfAg+VMqTq8+ktIdpI8\nRtaLOhcJMH1FG/GxWGTNnwG4aO/t0iCoDzl8uYDUL6ybIne2M4hRenSAVVhA\nyXK/jTKkOZbGZJ/DkEagOKlbha8Qnaup85aVe/VRf+bGpMfq/vsHOCo0Hwha\nmMIuZYkWxoi48Z+AhPAcyQAEVpCeninTuZuMLZg7qjSqsZJpjMe8dvqfUvLD\nH0/pKYiAHF+di10ZRkd3lpMviVtBeIqqDIixXD/PMzqeKRJezlRuK1v++RPN\nglKf0CCf0pzEEGcwOE7uAXx1TCzsla5Ie62OyHT66IyVGVON1NFZfMiHitPt\ngiU0\r\n=eHd7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"10.0.0-canary.fec7b42ca.0","@material/rtl":"10.0.0-canary.fec7b42ca.0","@material/shape":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/ripple":"10.0.0-canary.fec7b42ca.0","@material/animation":"10.0.0-canary.fec7b42ca.0","@material/elevation":"10.0.0-canary.fec7b42ca.0","@material/typography":"10.0.0-canary.fec7b42ca.0","@material/touch-target":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.fec7b42ca.0_1611861323856_0.21143440334724883","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/fab","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38fe09f9241280c403e84d5eb7a8eff9a2193117","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.8e66dbfee.0.tgz","fileCount":18,"integrity":"sha512-CRxczv6dmjD6sBWbuul6Z/k1pPESo2fFhf0P9zKcLhXunrdMYM97NMpfW5gR1TflZ3OVOGeTG1nsJz7qtKiN/w==","signatures":[{"sig":"MEUCIQDn4ihAr/Q0SryATPGc1JNo1ZWnucGGTh3xPOGMIc02PAIgTcLsG+Aw1GGVNDoi17E+oQHJfUzWoUiWpU8RtpLUJvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIzmCRA9TVsSAnZWagAAfdYQAJjQLkoHAOecqa8bTdq+\nbqRGHl5bTMBJU4y3xywTMml7zOIjnvS5meMg6DGodQt/DZ6su8qqCeXYVyo/\nYog9VeRY9MZ+1CwRWcXtX5eKnuxVujMKe8jbNB8XnyNpbt/Y9ZOHI6+BWMZH\nMqRbZlP3f6CbWrmqSpyBdRzPWJYYjISQ6Rps6rBEbRY3JWEzTDlVOdFzF1yQ\nNSBrGFcn7Xts1FTJzcZjOMk932d/9Ez8GgTZ4R6w9f/F8vST/iAWliwxkI/Y\nuSwIHhk7ZkjTqNjwII8MM6rAX0z5pcwB0dJHyaD7FQqmpZw/8g7iVQHu+9rT\n7zJdwcdoVertmL6m15NcvLMdbgGlusNH1+r8/8V3zELIRVhrC2rx+Xxstuub\nlwkds+T2BwwnsukvBcHCrZG2My+cRm1RnkBzBtgTn9Yd4s/SokhPtwSC3/BL\nN8hwpoV1StnQM3x4sll4S3nIO02lckv42YlyQp0Y9p65ZSO1JR7yLTNY2edn\nGGt3Trtm8kNUOtEfJryfBeKWFlIdlNFipSKnt9OnqDZHyV9EhTY4KZaCjBEd\nCK4DULlMICWs+/18jSuvc+LJjZPkvXOTK2q1lXTYBZqthcS+PDZ5q7aWNAPy\nHpsVvly/PHoRAdbMo5rKy8OXzx2LNR+CfyHVSXaKD7yCNFYixYy0hOcCpdLr\nKFse\r\n=KL7f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"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","@material/ripple":"10.0.0-canary.8e66dbfee.0","@material/animation":"10.0.0-canary.8e66dbfee.0","@material/elevation":"10.0.0-canary.8e66dbfee.0","@material/typography":"10.0.0-canary.8e66dbfee.0","@material/touch-target":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.8e66dbfee.0_1612221670046_0.9178786863764228","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/fab","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.637d15da6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59a33a55bba697676b4f84fe57e450586ffa6b3b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.637d15da6.0.tgz","fileCount":18,"integrity":"sha512-SJozbDpdKTsDCJJcGYkLYqlo21/Si5FXbFGOPDcDLrwp/EjiB9hvz2eB9HLGuP/05MI5g4IL5MBTpmyFj92hHA==","signatures":[{"sig":"MEUCIQDgLe7IXIfLn1HHJoDe1QK4k9Z/ZYMJDOQf4GSBqrRIFAIgQXxO3h0qApBJMKF29SiUUYOQPMREX2In+yhV12ibvho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ7ZCRA9TVsSAnZWagAAZGoQAJsQxU7YsleoUt67WDZR\nseazgKds77Th9WcpdXkQy+mlpHWh6OeNUMF7z2vI7TrrE+4tFa9e9DHHItvS\nXbD/IZuAZcGA/kiDgjlD4o7+JPunUczzsV6NkLaxrQR4PtQ/Xbz/ktP44Em+\nuyShoPBwxCvsm+urMw8rSNFNwpN0Z6sif+WnOKsfYaXysfy7RKHgIzEjquBO\nXaIO5+JycKP2RCIt7ysw9COXn5a2Haug/eoUIPPuZKg7eqP992L/3HYNpKF6\nqf5RH0W8oUI2NDFSqi7g4GJDLlq28SBEkI7MGA5hDNdSld1jpxnds2UHR3VY\ni37hj1Iyf989IYss5JlJlmwAigDwXdZeAz626l8biYv+YvEY8SnSaGcJNJ4H\nhCUal69xBirSGyh6BIHRBhlytJBYy/EuIOcdWud06Splxz9inVOXy+zGpVZf\nsM7Y3ZtYMQb0atqryhhbr/eDeOhfm3wqX4eAUTl/cQQZrBHO9dEC8CB7uPYh\nYKbKlceR+xwmvf+24nVnS0tUwyHnC/nuZf3cxDo6+BwFODpJcEOVO5/ztvFo\nBDCpd/zW1fTSeWcPJnvmzs0hsz/DIbGY0bDrAo2BMbFZi3HnSzBKwSPys0uX\nvcNIxfnfpGXnOw4TzxsBXXcTh+v+e7M45JYF2PqLEnemPKM5fcxPjjAxiz3y\nTUE3\r\n=3Wf5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"10.0.0-canary.637d15da6.0","@material/rtl":"10.0.0-canary.637d15da6.0","@material/shape":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/ripple":"10.0.0-canary.637d15da6.0","@material/animation":"10.0.0-canary.637d15da6.0","@material/elevation":"10.0.0-canary.637d15da6.0","@material/typography":"10.0.0-canary.637d15da6.0","@material/touch-target":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.637d15da6.0_1612291800716_0.24134748783608062","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/fab","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.fb793939e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"327baf18f737bc8bfbf85a3b47160c631faaf0ba","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.fb793939e.0.tgz","fileCount":18,"integrity":"sha512-ZjN4wYtA2ePxmI8JUhBW1vHBNqesRKcpvszSawawLUrCUFDx788F5vYGcLKKv6xm0jZC6QKtJOkC5YPjmTmQaQ==","signatures":[{"sig":"MEUCIQCX5seCxM4gg2L/5qK3flqn62gY8wEaOEMzB1B78wCMiwIgBfwDTDH00tR6/wHfFmx3LGwbdZjMVgWt+2Bt7nSTB5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeOzCRA9TVsSAnZWagAA180P+wUdHh5uz8xuw7DhV0Xh\np6pQ6yf9NlFJ1IV1pTYDEv0FEoCniLwVupNWihSDbz4IPPvfOrDdqB66JoOH\nxCjZ2x4vBPsMiaapnr0lddCfLGC64ZZsCE91BJJn4Va01n/qt1d2zmY6F9F/\nOr9ImbG9dHLY5ihtkmwYQaEcTjnsvOO7Vdw9cNjMe8DDIqJ2mKyYVpNB6Jdo\nQ7Vs8H89N/TFgBWxq/uP3ZabW66Aev1Xp8KcbQV7ipCn3cNQzpLG9XFnpBlW\nS7NFA6064R4AhLCSboCcYMxwFYr404gmISjnNTzTFA+OMFTdg3NJ2Vp8+cPA\nokIDzluFQ+nNlrBoSNWjDAkJ+aJ+Vj9QFv53g1xhw2gFpNS8uVbvtqPpc9MP\nvglCMZ3ofP1jhI40fNBFnXt+wKZwI0WF/ekAdUDSd4VUYI+1IlDRJg3SBn+C\nz6qQtma6YTZZ0Zz1WLVOCs54SUIhI3NTW3k2TcPY5kAoBgxNEu7/GY6CE+PT\nWPF0agLd8K/UMsA18KFJIAQkPasryYtl6XBtWFnA3YVYlLxG2wzBmDWPbU62\niqxeFsWLLPtFdQAb3ai3akr+zal5Oj9pA3JhrsVJpDCbg/uPbhQLws6DYQyK\n9re4dT4NvzmZe0ocOUTmJDNU25WNJowVu3fwrrS4jFCV4AT8ldDPrLQBAwKu\nscyU\r\n=OeG6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"10.0.0-canary.fb793939e.0","@material/rtl":"10.0.0-canary.fb793939e.0","@material/shape":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/ripple":"10.0.0-canary.fb793939e.0","@material/animation":"10.0.0-canary.fb793939e.0","@material/elevation":"10.0.0-canary.fb793939e.0","@material/typography":"10.0.0-canary.fb793939e.0","@material/touch-target":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.fb793939e.0_1612309427187_0.8392746146399825","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/fab","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b2737daee3283d520ee27a24a3182e1297456d4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.15a4d40dd.0.tgz","fileCount":18,"integrity":"sha512-uceCCI2UKNj7xmK7vqM7dYeKgW9hdz7iWwoIRlPkBdmAE+vXx3Z0oB0dML8s2IDhpYv1F8oeacxXa6oYeRyUSg==","signatures":[{"sig":"MEUCIFbxAIWMQBprV1ZpmaV6BUdXU5IdlRxMRRWRXqZJ7ZxOAiEAry3bKFAw687aHMsBF4QLkJJ3UHZFVBwQY3QEjADiphA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgggCRA9TVsSAnZWagAAFy0P/jzwm1HofhuD9hEeaNTM\nK05nFXewHcm4CHY7Bci+Tb5cb0J4HYSYSild0O9XDMevO4S56EczXH95DpxY\njT3AggezE+gGxnc4Z3k0D84NMphe9FK55B+Of+qG6pkd/Gp8/ZaEN7ZqJQhb\nwdffuM2kt15n9g2q2DSlte6PaGk4bAVGrQ+B/v7COWRnevlY6+nlbDmhpo5Z\nrHt4pmT7geyRTugOUOKank5aplp8A/qQqSjZWjP9aiahVmpOXNrPH1Stjnt3\nGus5uIdpeyuVxVOl91/DhK+R7lNWMNeGKVOCEuM+xdQQDci6Y18uzWuBx+Rw\nwsQJmvrYE/ga7axNFW4xcl567o4HA1FRdgNjtgJkLDCOMcCZc5p7aZuLHYfv\nzZqhBx8WlkfkhFu2yDFLTj/OrylUnAZzMi+YhKibqPFq4pEO7WUxwIrjsxD7\nRUqqJZZbtOF35qpkk7WwHA665hWvV7X3rgAQdzlKEKRML18J1jKRryY52sD6\nlkFnCgFjc6VhjK6tJLlo79JUCgn6/CXQ41I/E4LPdP+19nFUI804eigPWnSI\nsfLlZpoO8LM7EF0w5xurhqnUuCaZuiETJ2G8siFZJiUdfdNl7XUkgZop2jh/\npW1R34oCXDZcICb6Lkxfr2jCiLcnQsIT05HG07uGdjB7zXNvsuhj11Ynbo8L\np40I\r\n=NVf4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"10.0.0-canary.15a4d40dd.0","@material/rtl":"10.0.0-canary.15a4d40dd.0","@material/shape":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/ripple":"10.0.0-canary.15a4d40dd.0","@material/animation":"10.0.0-canary.15a4d40dd.0","@material/elevation":"10.0.0-canary.15a4d40dd.0","@material/typography":"10.0.0-canary.15a4d40dd.0","@material/touch-target":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.15a4d40dd.0_1612318752025_0.05759107706467015","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/fab","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c842194e67c4e087ef0b6ba6d5606d938d6a47ab","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.7a003acf0.0.tgz","fileCount":18,"integrity":"sha512-FpawgU62RB33eQVV0RAbuX8jetFsUNKyll//LUJMmIkxLFOQus0TfQwTJDxB49FRG1yJXRqGQIm4OlNDRVpdJA==","signatures":[{"sig":"MEUCIFDYHYI7/QBRfQ9pyxn9tD0VWK7E0gyzWoLSeEXFDifOAiEAo3Jo0KpId88/ONp2UczeirbnwQQjKaL0fPhdi8f6lzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG11GCRA9TVsSAnZWagAALnoQAJrCiPOgYr6wUYqpMoPL\nXUJCZRz5wXJ1940h8YiRl3+ADgfTqKbcehNHFq34gUK1fF5ygZUec2s2itEx\nHHWkTiOzOJjmatkRrTU3y4ip3CL5JcEIr3doS9vyDLS29Tp09lbpfTMqPiYU\njRVkJmbiX0oNcIop3DThdPXT5iwhzqQnKpkBUoJOgpjBjrVmFRms3CQWFBd1\nNPgyNG+77FZUr7jn12NoL1TH/B5ZiPTOP4saulMHaHS4n12iTnGxg18qYZfX\nxXjMGKFbyv1YwbOwxyEavKcFrsPTFVNfpfMMqWYTEFKgzmvIMY77BYYewIm7\n9GvOUAvl8XeCheaiOEeqyEBI7idtY97+ecSoV3BW2dAuZYdGDde4w3coWJuA\nAV0PuCk0TBztLo/Z9lPFQgQ4vJ8XnTkQ6v/G82QsWoh3WVBxM1ffV99cqpd/\nJ6YfFOueCzIgqHlwwGyvll49qVu3+PCujdW5g6fpOE837sUUEkoK11WqsSrv\n6pSjIXwqzqSn7CSrknAzQFnx+8CmIrBjz80y4aEaPuHDGu11ZWzlbDmcXk9Q\nE/NoZE/BuprzBwfXzkYsG7UOPyWj59WMiRLrFX9/0PX3MquCx2LhTTzqxECZ\n4Cw2vFFKTidHa86V2brriYOC0BsPEbHI8fZctSkttf/U1Tp3+dvyG4BESPsf\n23gT\r\n=z6qQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"10.0.0-canary.7a003acf0.0","@material/rtl":"10.0.0-canary.7a003acf0.0","@material/shape":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/ripple":"10.0.0-canary.7a003acf0.0","@material/animation":"10.0.0-canary.7a003acf0.0","@material/elevation":"10.0.0-canary.7a003acf0.0","@material/typography":"10.0.0-canary.7a003acf0.0","@material/touch-target":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.7a003acf0.0_1612406085796_0.9260525181840147","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/fab","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.05f249666.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ea429b0247eeff16fde8428f0594d3749e7fac2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.05f249666.0.tgz","fileCount":18,"integrity":"sha512-5sctfeTRu5mCixVjnsTzzLklAYmEEWsqcML+Xs9o+lZtptIQpjqyOUXrqbyEBCo2LDepHr3SagY5uns71BOPwg==","signatures":[{"sig":"MEYCIQCYtVmAQKrzboorKuhDL0bHTqDhJiMSoa+BcKilfCgbdgIhAKMNRB6owFDh9UeKhgXZL8L1y7O7Wd/BWNToNoNN30ex","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDQECRA9TVsSAnZWagAAB1MP/RiYb72GghpO9oRTw5uO\nQTrABGXEPlOLaTUUFNghUW5hDy9wvsPgHH3dnPXwS9aeSKiWkKbK13d7m4Km\nZQ5TAEsWDTNKzjWHbOnQqAOovyR8MnBC5pn8Ea3ti/OZEL+I676IhqkZ3fnX\n+czbw1efzm7GtDs879KmcplkAbCHxGgojHziwCh129v03Bkf6UFUPuV0aMFK\ng4uUs055ZRErg8+2s+5BWLG2NGNiX6vmf0G5Ezivqhh3Bzw/DttaS4JxqlgV\nK6Hho74GSY/EIMj4MI2tlv8Tzqvw1KgpA6zmCbwGk6z9p/Ns3+5Mg9QLVX2q\n0NQLe4ui3lu8EvTjYO+wKCn9eYO7btQ8RrlGEffFK815c7x2JjXdEVPdng5S\n6XuDQOMVhBYhufDBii13NrdwWLVcLZRwSTJXL3a6n7C4BztASvFbElqEa/5X\n9SxUh9LZcNaiG5Ahrio3s4k/aw7YFbrm/7lhpRZuQ6BcmaJeEXnVUYFPHTKn\n3Gh3H3kYgJNthJGdwzg9AJKo2BtMwIacbjdRNHzKxPz9fgo8rV9CT5+POyWS\n/AqeMxCZrtLT/Ja2Rbe7S9QtD0q/c3p9bsE8nNz8/U5CaEAJAnW5QjtqpXhh\nexgIivAUcmim94nI3Nmo9Uq+CflR3x1OViD+M9pIXAhR1tVMSWsZ6pWjLzGA\nLif6\r\n=gzNu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"10.0.0-canary.05f249666.0","@material/rtl":"10.0.0-canary.05f249666.0","@material/shape":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/ripple":"10.0.0-canary.05f249666.0","@material/animation":"10.0.0-canary.05f249666.0","@material/elevation":"10.0.0-canary.05f249666.0","@material/typography":"10.0.0-canary.05f249666.0","@material/touch-target":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.05f249666.0_1612461060308_0.8922380952587126","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/fab","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d8d2116fb8a4c8d820c04f0eda3cd93c46a6398","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.1a3a39629.0.tgz","fileCount":18,"integrity":"sha512-horflDzQXF3VmsmvL5V1f6MEwrIwI0z7H5d+QWZma/9UQhosYdR9IWKss83T+kY6lbiDuh/7jB+NQ6suFOVZTQ==","signatures":[{"sig":"MEUCIQDtS+kRLC3fqDbKkcWQTXhqBkYIXYhVG4I99r889ELW+gIgYhOV2Pf7t4vGYUY+M+txsHDS9ZAR3JfuB0vHPGLwAJc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEBvCRA9TVsSAnZWagAADAkP/0hdIiXdcSb10yvLL2Xb\nNf1x5D+JSZVBg71ZBn4esYTq4dWgpcBK7IwX8UCjl6MkHN2ola4IqxPuT8Lt\nMchPHao+AYuINjAVooKNKQAGNhhXw0LuyFskVPj3kFQ3eRh2wAxkixXjIABy\ndH62xFp+RILqEG6TMZxhVYOP3xN9BKLh2wIjR50sB8fvb5GqqcWU8iUtmIQv\nqJ9nuBJmO1sketgVXPhLrb6jtpRqw1TyP04rC9pydf1zwVgliQIZsdixFYHa\nWa54jgk6+aSuDYd0JkN4qOIf1VfdmpwuvLF7rc9+aN32OzO9H7AkjNbUy8nh\nU6Tal7AgaUfT6Vbm03GYplyxzxmGxJmyPAh2xPSfu9EVajwAmPMsKVk6NoS4\nM648VSARos0+HfYYrUR3y7+wRBi3PPL5F2yAhLT73OLbWS27DXoUjEssr+Sy\n+8m8U/yBXHttTgVL/w/FRAAaEy89/IlECy1HmUi/y3/CCjqfpqgivYPF8Ygf\nrWdS/pIl0lMLuXmteshilBUcRWiS2lmdK7g6KCKPr17ZxHWNSKBfi9/19LYp\n1j5IDGfBYJ1jrYfkii64tOd3eYPMuDn0IJU2qDzzqGt1C6TjWaW5OjZEnT21\ndpFvVtzIa4lkqU5fCrndRRvdC8Gc2QybAvp7otO934/EyMZrFH4m8wncq5JQ\nQB7E\r\n=gJnk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"10.0.0-canary.1a3a39629.0","@material/rtl":"10.0.0-canary.1a3a39629.0","@material/shape":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/ripple":"10.0.0-canary.1a3a39629.0","@material/animation":"10.0.0-canary.1a3a39629.0","@material/elevation":"10.0.0-canary.1a3a39629.0","@material/typography":"10.0.0-canary.1a3a39629.0","@material/touch-target":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.1a3a39629.0_1612464239166_0.6446370494851121","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/fab","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71bede739dfa9e59ffeb91aab443ede0b29488bf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":18,"integrity":"sha512-XJX0rXZf+M5fC8WFrLRahPGI5vGBJUdTSAuOVJdPNIlRTKMp08K3rmXsZoo68TXcao6wv2/3FIGyXBYCY7b2dA==","signatures":[{"sig":"MEQCIGdJIMto4YyHbVmpLdT1FnCzYo6Wu8jZsg0OIC1ZtyxhAiAgya/psE4hTED2pmASU5jshECbS9XPF8CsJD9RJT59sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHa7CRA9TVsSAnZWagAA1A4P/3UVk70JFqt6mX6Tt3UE\nBb01ZL0ohekeOTIV7s9n3uX/Lc6yAVVDrsXPj+V+z1Cz1hwL8Wp1l/a2+rmf\ngeXCiOa9Htl5QDeTLCyLeC87C8RhKdjWz7F/r5ZggkZM62/R0mq6CG45dFBL\nxOPqDLz7z1lQDtS6TkUatPmOz0eaXoomQ/Tii8xmeZZnbokg/1Yw82AZdkql\nDv4Y0/DqPXh2VLhmYFkJqLh/Z9QgPIs3GKr4mIwg8eyQl35N3vbHxAhEIHJm\nbtB04I30t839GRSV5JTsa5/NXrbh+RQTT5m7OmNGUaNIu5Jzf1IQvB2ZJ1jP\ne8IW8vOImlh7c8ZnBNtwERAec80/n/hsi17x220CxwkPCDUb81kSIpEEqIZ9\n5vcX8vnRYHveC5Q+aNppYHITlWoxTsDu3rtgd0N3dA1bpuA2nv/dy4RE16Qe\nyMwAlFbNHGjQBNOuipmDqrMhcWbGheCYMN99Xr3OO6Yh0hgfRt2GHFBhY7D2\nD1wPUXuGrxZbNnw6XfWdb0LlpB+KrmsRp2/SjjBxzIGswcknIfXzepnb1gd5\nvh/r7okMFxErSrC5f6t4f7TzQelDRqEbuJjPkxHaws6O+q2aSOTvOCFt/X+z\nvS9prx6jtsuI7CLSr3zUc1qG8gRm+hDlZnA6153t0zFLzIADKZYHYLtw15zL\nY6za\r\n=3AxO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"10.0.0-canary.8b1cdb1be.0","@material/rtl":"10.0.0-canary.8b1cdb1be.0","@material/shape":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/ripple":"10.0.0-canary.8b1cdb1be.0","@material/animation":"10.0.0-canary.8b1cdb1be.0","@material/elevation":"10.0.0-canary.8b1cdb1be.0","@material/typography":"10.0.0-canary.8b1cdb1be.0","@material/touch-target":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.8b1cdb1be.0_1612478138508_0.7302555983201224","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/fab","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d87cede402d23f34913316cb5277c83a4cd45c40","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.8271f00f7.0.tgz","fileCount":18,"integrity":"sha512-cchz+eaLUrSDiyUnmX24xNdBZqjzFZzAg2cbzBU+QF0IR6+BEkX0yVtruUaabuBSCrEJCtZXyFZ7h7N9tc5T2w==","signatures":[{"sig":"MEYCIQC/bEYgCFCCH13I04EaNfuBOGJ9iiY74Ef0VfGKuDLr0gIhAOJFB0taMJDGtJogrJxs9TIt5HXJwKYUTD+Zv+5BG0oG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHzACRA9TVsSAnZWagAAfc0QAKPYR16AJz5CVQ7H9clv\nm9aWwUGQi9ZsX4Kaa7OeZYxsQvt7PQVnLWH8E9hMEG9EusHWRnp0USeIN928\ngOEotSTsSLYxiYhkY4JsDsirUNlGh6uB6Hi/N1fadzGPs3Eoh3a8mIfoiGC8\n1ECDNtoQiiXtCu+SwXoZDd97gQj7vvON9keer9uVDAMrAr+yFLQ4zNaTB0BE\nvt/u4T+mQnX2Epao+fRfI/cZZLEwh0srD3tSEUWA6sPNNvwo6IhO1oBlT8B3\n72i6l35JGR19o5TJllnbu1zjKcMMUDZaQ4cQWA0/FJN7GQ7QD7FqpHVfUzKe\nyhVD+kbcJ3VWg/9ACl53NGi/9ykFXPUuxbKo9VoRFwbnmT6iT8ijfH2ypkp/\nDlMaCG775bVe5tg8QtoXdYLzrcpU+VhF7RfsDVQbj1c1hBgOkm/E+8fpeMGf\n7fKVNVzuYNL2BCVhDUiPdKqKXf4EeB5b+VGIGiqKq/N8NnQqG+kk4t7fJEEy\nRXeE2xXlxA+iFVa8wM9yD1Nb4cKMR9I/10KMjXOdWRqlrGBhu3ZqzX/IP3gc\npmvOTijZbbE3czu2qrswj3zqe4nKJ3CiOj2Z28XCWEQrAV0rtaYgnSo7CqJq\npIFlXTUrruNNAg4hIqgiK4TR31I8G78igzLuzpkkTNbRaOs692tRmc7eN3fW\n4sJC\r\n=RT3z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"10.0.0-canary.8271f00f7.0","@material/rtl":"10.0.0-canary.8271f00f7.0","@material/shape":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/ripple":"10.0.0-canary.8271f00f7.0","@material/animation":"10.0.0-canary.8271f00f7.0","@material/elevation":"10.0.0-canary.8271f00f7.0","@material/typography":"10.0.0-canary.8271f00f7.0","@material/touch-target":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.8271f00f7.0_1612479679399_0.8067064851451307","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/fab","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0-canary.533092a90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74cde88bf5f9a58712954c47559f2e03d9650d84","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0-canary.533092a90.0.tgz","fileCount":18,"integrity":"sha512-pGbHGj4cx1viIQ0lxLIyf+ZSHMbNB5+IU3R8sacuJjLfU11hev8AcxbqjPao6gtINQUuq51FPU8476MtmaMQ6A==","signatures":[{"sig":"MEQCIClOsSVDKXHi2KWqaKmcBFTL4IjJK2RMwzRWLUfSVjpaAiAbZvxaxBkC4YweTAYRslCzJbYcI+/OvzwP89fCjUijzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL/NCRA9TVsSAnZWagAAlcoP/inzAul+55TENvszviks\nf+QuRrEZD/UhueLG6AN3WPDPIfBo1KMSRbTwB+A8ZpSq8c6o24FGaCrKF9UB\nghuU5nHZ3vu1zhBrXeCiLOooZ1boDvsKeLvCMYsAM8bWH5eh46RJmk7JU6cb\nHKATeWNWl5G18w4WT1foLOff02I8O6mX2iw2361r4cMe+E1uEADOjiyvanRC\nGjJI4reahsNsXy5ByVeSQ3a7j3DIkBMGp/jsVG8+kc2kv+2dbcRHjS95S1L8\nKtH5KpsBNozXUZAU3yCEdCF2vzxb5wVfxj5y8L9ofMjqXWaXiJIrK8NZ6crS\nLXARScdA5vm0P00Xf3BEY4sIFo+i8YypDGg9WdJwCJLW+URe1cmwRMJfD3AK\ntySxYL+x6VUDvBxqOnW8lbpGDfvBq3n+Z+w/hP7cOmTG9afQriRhPDCcZZdu\ngBC5d1xRiBiuAxfmXeUT4pIuFEujfM1zyg9vcoixs1UXhAxAt0aE8nrh6fUR\nqeOspSq2MzLDQPNg01Ntan1cMYzElwn/EY5qqqOmSxEL3Rt+17MpnEc3pCGy\nG0VyFndUaLZX/9oDQowKvPtLPq7eY2QBdGQ6b9uj1+2ElHdx/OkBABuVfH/W\nmEM7mYMmeTljZUPxA15GbpLs2f+1Gy0nycIYdtbz1GwcRyA6AEgl9P9zLxXm\nrexq\r\n=FdVK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"10.0.0-canary.533092a90.0","@material/rtl":"10.0.0-canary.533092a90.0","@material/shape":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/ripple":"10.0.0-canary.533092a90.0","@material/animation":"10.0.0-canary.533092a90.0","@material/elevation":"10.0.0-canary.533092a90.0","@material/typography":"10.0.0-canary.533092a90.0","@material/touch-target":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0-canary.533092a90.0_1612496844976_0.34318321981204214","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/fab","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"084da5adf129ed55da91db1ca3d280caa39a3758","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.633a9fc7a.0.tgz","fileCount":18,"integrity":"sha512-xe7yQhyUwFqYGAS+z7Tk5WaWOiOnq7ZmFgV+iJXXEp9HlrS9L7E2slhKj3jKPvqQ17dTaoRQxWo7pkoXosAOOQ==","signatures":[{"sig":"MEUCIBzLqfls/fr7L1HwN5Y2JvbJ7KaPATHpbr7uFqK2iCwjAiEAu+ev+ok6pW9bs+hdRQTcNKuhFykfx9yXVbV10vX6jTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/HCRA9TVsSAnZWagAABxwQAJWU3ii9RyXDQHO8zunK\npj2DTYtJzBoUNPSsD82Ud8dUAekc4Ik8Lrr4C5Sd7zriZFJURPFldo29ZbWD\nLDblUEmbfa1SqVhC+bICEgbFiMgwBi3vR+gHa5mdQDO7SP7ojOKyyt9YhP8n\n3+kjNPcMydtA0QvB6hrUtQbJZvhOBmp4aOYDmgxhb8fvuUrpf4rYlphQMhmk\nxcxIEYg6uoif8JeGn4XRthciKfH/tB3auUDlwaR6xsUk70ArBc2miZsCJmOD\nr3hW6GhkKc7RyJppvlJQUdNCJEFG7jzl2HMHijxUw8xgtlaImTaH5YdHugiH\nhIWjMs5/l0Zf7sBStNfPY8bRJrpayF3QPApcP3hemyb5ig9pp+j66TOFaWPy\nXkSPqUJKMPjNNey93BkWGDvRpu5aD5mod1USv9DS/XC7rCoSPqBoS48ADeSc\n5zYPdzlJHoctb4w6Z50hu69WTSz7tA2gPvf27mPx+JI9ZhHfJwNR3ndDz709\nnQOLWbcg4LUcT2+KnpSRIqnEehrlcO03hguH8lrg2td1XQzwKTgXPAtcf9DG\nkMM/pRxm9opWuO7Bj8pa7WssSCM+Ttlsn50iiCQoWYiwMVng2duiRnMiOakH\ntABhkGLMXaMH6Wnba3sadHGYsN8GfthOkpLjSm/O8jIvL2DoextUV3rxgv3o\neY5G\r\n=B73k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.633a9fc7a.0","@material/rtl":"11.0.0-canary.633a9fc7a.0","@material/shape":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/ripple":"11.0.0-canary.633a9fc7a.0","@material/animation":"11.0.0-canary.633a9fc7a.0","@material/elevation":"11.0.0-canary.633a9fc7a.0","@material/typography":"11.0.0-canary.633a9fc7a.0","@material/touch-target":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.633a9fc7a.0_1612541894523_0.06622216694851257","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/fab","version":"10.0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@10.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a97bab9b8988e7da93856ae1ac3525adac99992","tarball":"https://registry.npmjs.org/@material/fab/-/fab-10.0.0.tgz","fileCount":17,"integrity":"sha512-TR+xGD0fjwyP9/E0XkXkmHBhzgsgYLEOp/uMf0GRoSXlDypU9E83oh3ZH8w4u2MrHfSM65xB3tMHchSNzXkb2Q==","signatures":[{"sig":"MEYCIQCVBrUfJ5f1ZX2kYRL1sHjAcfTRr+7AAeJpCWs9F56PPQIhAOQevx8VffN/5hsvScy37I8SOK++13nekf9IadtUOSj0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":290796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXAdCRA9TVsSAnZWagAAMMQP/RhQK1urBtsUaMwfH2XK\nvl4Y3hp+vgmcZwabAhdQGpyR7USnqFoqpH2SD5WZIAfYMG2nKJdRc4OwbpaQ\nZPPFg5QqCCJdTNKihIbIn/f7CPLHhvBdOmAw6uHbpt34XOKyyQs7pMOLom55\nG5PTLvom6gLRZEkU+czUXvLbOlD7CHVXZmt1emD7vDop4XTnnEhN1HpmolHU\nbuRm4EZ8RGZZjZPqFTzTYicezqumLjYRZ81C9kAGfEHrKurqSEXit5DHaaX8\nli31X5NKHmvrCsF7SOLuuboAvZqBsHFUfQWEbuT3KOZcHDADvP0VVDUnwYPZ\ncrqzgg8cLIKZ/BPR1+EVpCqAAvj1cpExorxUpLdfP8sVrA1fvVi9AlPTyq8A\nd0kUgMGAQyxneUg/jDPNqrsh86r4fhPuSDqPcqkEpKjHkMcgcCBjZgEYt0Ym\nWFS5CyoFW9+RLF6l3AkknGOS/SFsU95HzgVwkeUfLjCt0Z0gTv89QmRpT5q3\ntMnNYNQTPneCHJNIefGuHXrJedOY1+ULlghu5VHAitfzs7zKMO1dWzhDsnqE\nOWpn2Cp1cdPGxoww4fVN1j/Y51L5+mw+bu5X+NSOC6nMxm8CxY/KY0rtB48v\ndyYwnqzqCNXCH3gze9eaTgdyhYNHGfzKFx1ocYdNg0Sh+zSmz9i6yNefstnI\nYT++\r\n=7/cp\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"^10.0.0","@material/rtl":"^10.0.0","@material/shape":"^10.0.0","@material/theme":"^10.0.0","@material/ripple":"^10.0.0","@material/animation":"^10.0.0","@material/elevation":"^10.0.0","@material/typography":"^10.0.0","@material/touch-target":"^10.0.0","@material/feature-targeting":"^10.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_10.0.0_1612541980761_0.8934111023195446","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/fab","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.b5227247d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c2ae1f656be3cf1a137bf6bfc1a75bc51a45f1a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.b5227247d.0.tgz","fileCount":18,"integrity":"sha512-je5wuFV080psFtoX7a2T5x1472xynVvWufmzy8ONuOId0nrAGhVjzwxRm9fX2CEhyFPGWLL0fNAOXVTb1ytV7g==","signatures":[{"sig":"MEUCIQDv5XYjHPysKT8SToykFOJTM4I4KAUP/kZH9+Mg7sKn3QIgJRBZEWG5Qn9+bvOEBqxk1GfYLXXNXI27GcksgnPq10o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYOaCRA9TVsSAnZWagAAWSQP+gJCKj4Xrn371T0VpSLB\ndQMvH6Bvxo2zCK5/YwekmRP+XuaaN97rCiprgXdDDE9nrlRtFSmPiEyapjoF\nhqOayThoRTYyiH0WLoFRNIn7LSZZfzlN6B2iecgUlJRYI/lxHMTer9SOhYZV\nUbR7yLKgpOF15zJMuhwuX1TtS4yl/QWUci2P8AVaHKTELaAvzcpTt7mTo+n4\nNYmmuNuICKazpDRTWXgfE0g3YzF+m/89oQEyYzpMEJZKkE/Ub7ML2HIM2ryp\n9TvlqNjNO+1lE6jOU3J4pkg5Ao7BtHfkSNEWHj1ogT+2O2iMljYeiiXOM0+C\n6inDPLmxC7XVJtB1Q5FPf3SjR0r30HTCDyr3bdP7tFRooyAKIf6zQNzQw725\nIh/5T/sY1i1tpXo6CLiPU4elnqO9x5VjoWT4ij6YNCQ/HB/VouTKmhD3JjlY\ncIHo4MNWu//axuphEAVbzJVNxVg7DMUynJdvnziESZ2HoJabC6CVzZWCalzg\nTbswjnc2QqhXfpk0+W2RBhY8RamxnRlPz6LnLb1cERshR88JCYHaCPSVdHNy\nAzb3lScVlTvBPHPaDzS1vVFJ5F2/ixSAAmvP0SipCSk/hzijAU3q1Jh/krZz\nvTnl88y5Zcoc9AGuG7c67cva3UgVcwIxz70r7McPGPLzmnn3DTgLqDe5ZRnC\nBEfG\r\n=FQU1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"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","@material/ripple":"11.0.0-canary.b5227247d.0","@material/animation":"11.0.0-canary.b5227247d.0","@material/elevation":"11.0.0-canary.b5227247d.0","@material/typography":"11.0.0-canary.b5227247d.0","@material/touch-target":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.b5227247d.0_1612546970482_0.366933071517781","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/fab","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.95322b11e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"176f74fb15231a8c4d8513d54ef0966b66038be5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.95322b11e.0.tgz","fileCount":18,"integrity":"sha512-LUyy60bQfVdXfE0CWiOd5gHi890sLohkGdCiZywllk2PJf2SmbC9FnNeCaWsuSRxAJ6RcbWlCAS4iyPoGD+rGg==","signatures":[{"sig":"MEQCIFQTenZ2QaM5E2UzDEaqVp0DnZ50oNmDXbvMGytCqy+fAiBU/swhnCua8BRupN49EGE0kR3i/WTqsqGECDGoM7hsiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdWFCRA9TVsSAnZWagAAROsP/j7ABNVz+puFvfPt/V5T\nHbn49JXKbonkBmASxCKkWjQ7ydjNtf7l0YkOKCcV2wTbERLZ6YBJcieseV5x\nHajIndWeYpnDCPXgohtyKog0R1UZ8aczeaTHDSMzPtRugtC2EDjQZcQobi4S\nh46S5vC1kjARQ1if8R02R05TkdOVjuxXqvWXMILKTFWtx43Fw0HuBAqt/0j+\nfDKaH56hYyVjsBlGxKJ8UJB8M3sXKMxrQQZriSRyHv38eems2TF62o4ouPDz\ni6bu0nHgji7CIMpDDtVkxQg9rnHFZ1fY2MKC3iGTMYXYyS6j7BZwBMLHLfGf\nOAb83bZI9pCmUWR3cSnsXmalErtnjlILkTY2Zf3P+CXDfjF7BWu5wBvkZI5j\no8KZyB0Bpp8HMcQ45jfvcz0T8QAUMIMSKvBw1E+SQ5RgkfwS/H3ZO6WYSUui\no5BNbeaLgcUiQTX8Zn2yDkMz7p1hx4NrFbXXxwhK5FlGJRoMlzDrftGeg7jo\n76uKW48lyEcfYEBV5m1qcGF6SbKXXyJfp5tqp7Bp/IgeqGCm8/SnbhOf23uH\nPNi7YsYOHy1HrnyJaWERG65akZtdcA7cujt3SWopCcA20SRStL5rvHPZuPoa\nG8TXh8/QDJ8Z0d96iXY17S1t6ds2T6PiJgA+1kVMrWOxg31AuhyNHegsiI6N\ns5YV\r\n=6Ql4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.95322b11e.0","@material/rtl":"11.0.0-canary.95322b11e.0","@material/shape":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/ripple":"11.0.0-canary.95322b11e.0","@material/animation":"11.0.0-canary.95322b11e.0","@material/elevation":"11.0.0-canary.95322b11e.0","@material/typography":"11.0.0-canary.95322b11e.0","@material/touch-target":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.95322b11e.0_1612567941389_0.6499275477272612","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/fab","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dad825e75c671deaf4a3148a2f7ac190a1190bb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.1f318ff0f.0.tgz","fileCount":18,"integrity":"sha512-6nyd7RXP7QijjlfOdvJaYZOKshjf/Jh/shDk41sNwLmyxWvdW2/BZb0Ajv4uwNvZakNPckAuyq3JykoWuyHFPw==","signatures":[{"sig":"MEYCIQDi3TjaxVK/vKlYqa8d8JDyoXL+mPX28c2FrJabP5qFiwIhAOru6EYcCeEyRs2g+vHecOou2318yYeJXmSjoWq6woWU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd1LCRA9TVsSAnZWagAAVGwP/iOMh7GGZcGBlbyqOVL9\ntakHeMEVcFwN6Wt906BpPgWjw+ou8jLyCRbifXa+aZ+/n7iNlTnTjIqdfwsH\nSOC1Dp/t/4Zmw9KW0fQn90qgBAe19JQx/cCg5oISeCj0BqcJw5HkCERZ9fbK\nCsyQ1DNxrXM8BmVpKvv/L8xtqRynq8DJI4Bcck55IF+9qgaQMehnmWaAsvdk\ntacELD1gNU2vjlLycGAFJvQVKWm24rcj6+K5WpcgrhM/nayBS4H24Rs/Ua4r\nFpJie7LtgM7QjMJ2a+G/capKUvGvwDkqsSSj3OsSPKPe+IaJqsJlFiGUYkaX\nkyGx4ozpXXl0u1k2G4o2eDKwC5cnxaRvWxC9X/ok0GNUHFc/TTQqLfpyHXIO\nPyj0pa/zPAMR9o+MM0hPdRaq9dMNs/5wS/8J9RAwcgkmA0mEEDP55dsfl+gf\nZKvjZMRE7sI7NzzVxxdmPHlPaiHxGr9o0jB5jQnYKbp9/rMuW3PN8gBOir/Z\nWXjtgK+RozRH329SQf3ubzSRmF5FeCSE2aonTaLhDaNbtq5VrvPnmDL8U/pA\nMaelX+jHIYPYnbKvhjF1jzS0hNFXUobOS4OnnDyLNHb2U9edxs3fGbi93LFk\n1vMcbgt5pULLGVYywuJCv6qIng1H9rWPHeiH6O2syhhqXTjh9/i4xJtmlo36\nQl1r\r\n=UvX1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.1f318ff0f.0","@material/rtl":"11.0.0-canary.1f318ff0f.0","@material/shape":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/ripple":"11.0.0-canary.1f318ff0f.0","@material/animation":"11.0.0-canary.1f318ff0f.0","@material/elevation":"11.0.0-canary.1f318ff0f.0","@material/typography":"11.0.0-canary.1f318ff0f.0","@material/touch-target":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.1f318ff0f.0_1612569930787_0.21718545187799854","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/fab","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1388d32c4c664eac07c39321aaefcdc08b126dc1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":18,"integrity":"sha512-CoMSYgLC0Fit92vnezwAspsgOyGAU4GBlZ73ul3NPkpwDFg5rdxglc08GNsxYp9rIU+uhZvdion5aLKM54LS7Q==","signatures":[{"sig":"MEQCID/Iv9nEXIzdEzKODxpDWV2ogkkWGlGcGIbwD50Klvt+AiAUbfa803PVKR7PTLnMj1QNO5odgTP4cwpZ+wXZjY+WXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVLzCRA9TVsSAnZWagAAh4cP/0ckBF+RhR+DaWj5aiQg\necVwMGs032ExQf3EmzP7ioofcUaLtJtucig7ax+6h3AkoztJ7ta2utWDulcF\nTXchGGZakXVNGdVTGIUX/DZaJJtyDHEe5DTnEOfQzYDCH/ybdR66V3J2e+aO\nmbMGXSv0DlAHx18Gmbi5qPKXtp/xjqsrzoiA9SuSkxGuYXVKKxbFWP8PLEYR\nksUmqwaDNLf2zRmwi12kNifuvcV0lWghFU4/gEzfadO++9uhC90t3nfm2mP7\n8IgSPr1nRdwK1X7xt2vn7nUXOWxO6sUP5ykGYOoEzz1pnehDOxoRtYoMRBHF\nywyOooCYVcoKZyjCmN8Yk3gFKduDvH2RZ0Kwy7//BgLv2Ciie4cuU1bDv13q\n071fcnP97ELaUfqTNbH6qhHAczx5HYsg8Kv4ZOeQJXO/gOWRwNV/R7pAmFCa\n022+6oMwciVonONGQ7Qst4cwV+cXu5wfBBI5dDX5oqwMcIYl6g/50gcIsC7M\nRufMHC80dxrAyDVRM9b0OyxB5Eu5QkdeKK6f1OHU1dAXbgiTapPnvc11vjxD\n4pdqCBkhPPsuEacg4VL1w2qQF0wZo6KLAYI0TwDNoTWlJy0e/pC13Ib4oOdA\nKC67wp7JxsB/o7VZ84ZX4/ZlRmbrTqa5ZuSNhDNJOJkOk6FV1jxplJo55ZS6\nlstd\r\n=XSDG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.ab12cf7a3.0","@material/rtl":"11.0.0-canary.ab12cf7a3.0","@material/shape":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/ripple":"11.0.0-canary.ab12cf7a3.0","@material/animation":"11.0.0-canary.ab12cf7a3.0","@material/elevation":"11.0.0-canary.ab12cf7a3.0","@material/typography":"11.0.0-canary.ab12cf7a3.0","@material/touch-target":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.ab12cf7a3.0_1612796658886_0.7002485655946411","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/fab","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f2adf0ab887e0d4c47866da68462e468e7c3323","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.98db2c5ec.0.tgz","fileCount":18,"integrity":"sha512-IJPzKvE4DEVGu+37LzaeAO9DoX33N+DeoWyGtoAmbE8FMa74s2cM2GT5AyoFKMkn8yOtBnOjbmrigNe/D/L3rg==","signatures":[{"sig":"MEUCIAwk/A8nJKZnYVomYOHVZRAa0jmAFuqlGRGc73EBdnWhAiEAzlHGs/cScWXXmbsXOonOuFX/cYkM/+q7ybVOBH088c4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVo4CRA9TVsSAnZWagAAhq4QAKNsSUHqxYVqAh2RV97O\nbzB+WIfyjWwFJD9CzQHKyE00HXk+J4sDikr4Y02n9SYeaQL6fsdWm3NgjPN6\nCaDIUYUiJPA6/jzz6/D0P5/TnZrJs8JWe+zsN7hb2nRgMIxmL/5VOlDec+Bo\nshDsRep2xVyT5Zk5E0ONQUH1VHlvZS7Qsvvy7/uYmbGraCoesJYOLfNov/nF\n4FEb7hrb7xMv9/+2dpe0VA0xXLjXlG0rAdchQxbwO+kxKuXepIYUVsJ51xQP\nMDx7nozSyBgv/tkLCMiafc0nafULdWQ8nCxS9L2XtDz/JCbAWLRcWJz0+SIT\ne8QBzb2cFz6swwC9Q869eIyf5nxn+z8coSffqDDzb4bG64xsk9IDclCqT0KF\nulFeMN0E8XIF1YFxSmvKekcZUaX7Q7QdrgMY+jC7h33dn7+oU09lDAEp5xz/\nGwJsMIaWN9Jhs9TRwT6pESdWTz7QDPd6Q7o6OXTSC7X6nO+Hf0enJ8go2jdr\ntKqGD4lIw70y7q1kqcvdQbY/a637kmK+URTdjNOsna1ih54ehMHPerwb/U9p\n3XqS84nDJAOzBTOgnIxx5mWbpPaMogzTJ+uNaMv9S5L3w5i4YEYpcWVjNGJL\nMb1I7mdtCrdLHEG6uDowc7/8+wPcXFnrNwZjhX9BP7XggInI7b8fQZVYU5yo\nXlbK\r\n=vmxj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.98db2c5ec.0","@material/rtl":"11.0.0-canary.98db2c5ec.0","@material/shape":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/ripple":"11.0.0-canary.98db2c5ec.0","@material/animation":"11.0.0-canary.98db2c5ec.0","@material/elevation":"11.0.0-canary.98db2c5ec.0","@material/typography":"11.0.0-canary.98db2c5ec.0","@material/touch-target":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.98db2c5ec.0_1612798519955_0.4823340767843711","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/fab","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9577844503059cfdc6a3dbf8e903b4d50b8223bb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":18,"integrity":"sha512-v+J+HKDbX42Gy1ctpZRjQZcGnYV8i6YQLGebgcBQCQXdS0ILY9BZXbAVSzbTptLYUgRJ3hYEYQ3XGVcp5xmQTg==","signatures":[{"sig":"MEYCIQDcmQO51W7W0W+mApcaXIfsHqUIXahvebnFTtAE50UWaAIhAKDST0yeHWg2alRXl5ByeKmuFIh/qM/1hVbf6rtXtkpF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXJRCRA9TVsSAnZWagAA6sMP/3lkjlZ4Ng3UC17dSglc\nIHNZxonkpQVM5ZwB44Nnrb0Nfb5ga0ITmCWrzO6r51TNO8QEOU2UKesuvhEW\nylevgKRlDBug/OMOvD+7QUcpo2b79SfpkWYbN6bCDSOudD39uo6AmGMPEgTI\nn2vExGEePLgvX18Ch9pnLF+h4Cr1k/ly3rA5yxlXC9//iCuifVt1WfH3MRKt\n5lX8OpDiAA27ZGsxjxz4gNsDHfg/vzBFSzBbFuS4bLWo6DnBGYo+ZOLD1oc+\nQHkyQGTe522Kf5AZYoYPhOctAUKHwqW4aRbPt5veIxmunYMLKlLWRjHnRSlF\nFrk259L7KYHIs+8kr1SpTZsfHBzhhQEWRrczmdS+2W+NsZ6VfjDmrpAoCo1/\nSNIdCa+f2lWZEZU9KLMJu6H9AGcgVmar/SnVutFfFj11EuloT/61KfZcbyZS\nuemrbYjHOQDOZFFHvIX0nsIbC7pHnEdROuowLQM+qDaRJnrhO1/7i8ledaAk\nVGbvh3b3LYbOi7I46R0vqFrQoHVbinE6Q0xkxAhn9Ns0xvjSZMLn9Nvvw9qT\nLNaknZEz1gaghQAuBSmealm7TdyZthc2jDeHYVK/Yr0+7xrnVJNzHrp1YkaR\nhXIXIA8Z51SaEDkH//MZaHEFKzdmetbaUr4IB087zr/BNUi878cgZoIiSRr0\ntQxr\r\n=uczz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.1f86b9f6d.0","@material/rtl":"11.0.0-canary.1f86b9f6d.0","@material/shape":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/ripple":"11.0.0-canary.1f86b9f6d.0","@material/animation":"11.0.0-canary.1f86b9f6d.0","@material/elevation":"11.0.0-canary.1f86b9f6d.0","@material/typography":"11.0.0-canary.1f86b9f6d.0","@material/touch-target":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.1f86b9f6d.0_1612804689500_0.9744160548316299","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/fab","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1487a55a228a957c2ee34d4bb362ef3cdfdf578a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":18,"integrity":"sha512-pSqKXUmI81VY8YRM+adDU81Sxm903mXvJsZQcEN3y2IEBLEZsS0lyC9P9Gc2Yd4LLwLKHHNyts6UkOeDxAXr4Q==","signatures":[{"sig":"MEUCIQD+y4cBhfNr0DPt8RluGxZXVbc4YnP6j/b80WoPb3TE+wIgctALH+Zk3ZcEzOjTDCL3/6HyePtdqJqVQItQQ8nyo0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXxlCRA9TVsSAnZWagAAQCUP/jSWrqV069f8tttdyRPz\nr9HwlljqLpCGXd47ZFFpz0Y/DOA0TC4RSwvBXAF7uDY0j/Enj/nKlBAHinri\nens9mQCtY4zjVGEQGJEbKpVp9/kVUWqgwe7uFWycykNZ6k81Cz8inqWkFq77\nAyzmC4qypsMx1xvSoGrAJzYtmyAGL0ZiXprq4bvK7zAS3O5aYGKDwgsqezom\nnXqtPivk+VbicK2E98YCAtYAkH2NmCHp5KxPOcJMNv+Gc4OwUZQ/siI3B8Yw\nBIMY2m/PttwyQnFBy+ZtoO3LSCSzmSEF9+bT9UueFLsQGs/IMix66aHCVa57\nkkWLwoZGIk2SVXjCxcyhg39Ixj0F5pcOCptqZgdWMn62JdK4BbsSGggA3HXh\nOLQ+mloENE2tK9VG7hnTl3l6nrRuGkr5TnLGzMaKTCTifje6FUpZ1utvmCoR\n7qcW9fcReIHekra64/HchWjwW7RmJuNHdSSS4QumdZmKRyvNKaHWAFpI1sLs\n7Y7yeMdKGNH7nxj1Vtg6TV+CNtMjgs7NX+w4wvZvADqYwrZjE/vlWRHBJgDZ\nyxO0UHDBbZxyry9DizzBWOtrAmKl27TiZEZ83dwZSffb8lDOsGKznZfBGk0Z\nTdS4g9QFHc7Tu2WnQRzhQspJ3PLIphBJtXfwT6i/y/cqQ/hOsyvlWQOIlrnO\nmqAF\r\n=Dvme\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"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","@material/ripple":"11.0.0-canary.aac8f5d9a.0","@material/animation":"11.0.0-canary.aac8f5d9a.0","@material/elevation":"11.0.0-canary.aac8f5d9a.0","@material/typography":"11.0.0-canary.aac8f5d9a.0","@material/touch-target":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.aac8f5d9a.0_1612807269299_0.6526456544040335","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/fab","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ee789e1101dfbbf24e308c20a09fb6980119e24","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.750e18fc7.0.tgz","fileCount":18,"integrity":"sha512-plb7FBDNQRyG0u00FXyBBcLcy4/xGBpvkJ3h7mkckJVAJeUGCwzvzJ/1wFh1k4wGVnIBI1ro+u0FPoeztGvMFg==","signatures":[{"sig":"MEQCIBHufdLH084gSb2uyulUtCpQHPvMd90CTpKo8XeyybI1AiBI+FYVtWH0+SX33t2r7Vze4p+oQ1GqbDRYafeUFa62BQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbApCRA9TVsSAnZWagAAcvgP/2lSfcsGaEDgwUF0+Iyo\nBlSoZj8W4WtoUOoE9AXW5/VRarzJ5uUCmxlTsOGX6jhapCZgyGdmwDwhen0o\nkK2qdtDM2TE1qjUIZgu0RbfNxXQADAGsmD5PVbF6Br9hkymvAit6Lx9KcUn1\nCsa7628pFCByKCHO46n0BdPCfdLeFH2UaUJ5+1JcO/0z7BkR+ANNRI/aAljE\nlnoRCIS1C5ISC3Z03oWPCkeLnb1Mp3ivWpSe4e4dktGTjont/94ojNFCnN4f\nzCTOTkObVVYx23pbZMnguws3DDfY5tpkPY7PdR+qg40UAsRQZkpIUyoaoIBx\n08+whEiXil2AMTnUdsICOX7ZIA1Gfo9qb4Et4LVcU69Wg3YnGnzky/3XPw/T\nkVqBVUaNpE1Dm7j8lL9x9fHEdtq6cqUrOyuqs+ueqeFrNMDR/qXG/Ke+0jd3\nC042a2Qi0nBPAxws22/Vlf6L0Q5WHeXO2rbNiaH9tMZAf2B5mdjNjjkHbit0\ndSG4GvXhRZRlhySZDid17q2Paoy2Z+RUqacHTXMCtsBmauFspUWTUfPOgZJI\nNZvqjRMX6uEfsCp7su1/Tbq8tuRYIG97Ic4uiFnYywwGqwi8MUpx+gB5cAMa\njotZtmRwl+S5W5xfjvX8vyUS3ty/RVoYWu4Hhe03rahIiUfvBg6pqx6vTkLt\nYWvo\r\n=J/Rz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"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","@material/ripple":"11.0.0-canary.750e18fc7.0","@material/animation":"11.0.0-canary.750e18fc7.0","@material/elevation":"11.0.0-canary.750e18fc7.0","@material/typography":"11.0.0-canary.750e18fc7.0","@material/touch-target":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.750e18fc7.0_1612820521044_0.8341030701817913","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/fab","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e46b1fd7d085301390e50d7089c9ca2b5d044395","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.b62b1266d.0.tgz","fileCount":18,"integrity":"sha512-u90RTQr2DY82cHXv9LbOX7krJVxD4Z22J0969MAu8aKJpeI1j00C0+jPWobIbbHyuUUnRR9xCe2IKIokbsgGmg==","signatures":[{"sig":"MEYCIQCTpe9wv17lcds7lDkuabxfT4nqLo0Vj+alZvQwXlT9qwIhAPTZ7BNoJFEqrHPVpyKlP7PHKetbtiLGXFqsFJzkQHIQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwRTCRA9TVsSAnZWagAAKU8QAIYvlNSUOf+zlvIkTdaO\nYHrHiZR/FlrHNrnwhDLk66Uk7arrX0Phmjftkz937bbDnpktVfag6J1i8W54\no1vGCPZO87m6IkNAgGs1PqTiPQPyKstgED444C+bb5hhbRE1xjDoqLS63fws\nPHA1vfDeylpY/for16CuoCtl0JYqI4Rt8D2GvwlZAGI5WFlgyr9uVv5h5KUJ\nmLuQIPsD9Ta387zwPs5J0rMAESRn+UMhThGQapA72xK00ZaQonZlyj6MWhhT\nnwPidhXiD9ngJrtX3KfKkjEAh8BHor3iotvCOtUesObziYl37YsHfIKK7C4H\ncewJaq0IyoRBM0alKfqFKns2WcJaoQB6m+Zy+meRuu2n8YiE+g3YlCiOr0LG\nl/TmqPPrW54XBasHeKCCQDlwre46tZ29RmWwLxe3bhRgBvE/3E+uNQkM33xk\nvVFPiRLFZdkrRtzdx+uU/ybfSAhPrPJL3deMXEUyTUuXasRhNMgJpEEH43xL\np2II8HPBYYnp1SHFdqm4lAcgVVb4QzDky6kW3x8bAxsy0+jLe2GKpzMTSPQK\n1Fy27zkdbspHk0pcBs+S7qNRFeILMujsrMW+mCBsTh0vquZlPMaaP1FuWdXR\nCq51NAUab8B67fcVAx9Nvhe6XzvTHJaoXCJ6ojDNqQY6P1qxd92jnvA8yPMH\naRko\r\n=ZPQy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"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","@material/ripple":"11.0.0-canary.b62b1266d.0","@material/animation":"11.0.0-canary.b62b1266d.0","@material/elevation":"11.0.0-canary.b62b1266d.0","@material/typography":"11.0.0-canary.b62b1266d.0","@material/touch-target":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.b62b1266d.0_1612907603169_0.5001538522151456","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/fab","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fd1bb93f90f90cd79a91fd8a52b6c8e29cc7cda","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.a6b3101fb.0.tgz","fileCount":19,"integrity":"sha512-R0osloJJpYIQqOoJgTiX8VkmOj/TotKVpbbQj9m7jUIeK0FS02BPIU7BPcoK5tjGW9BL2/NGSQjdpBKFs130YQ==","signatures":[{"sig":"MEUCIBeAmZEWa72RKctzKfvJuL/u4XIz1lV1ixmB8W/Y3sKwAiEAijOrZomDOC6QhEa/SqJnVWG48OQQSzmXwWMn8r01RvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbsRCRA9TVsSAnZWagAAl3QP/0k/i43++HxAH8ZuCfSZ\nYwlsLrUslefzmGrbAm6ndGQeFBh1q2fNvc2yETW0JBknxsMs4jrF3ctcvnNv\nrm33ajKMn6BLBLt9HX3Bq9kOlq2i/BKQJY7PbC8deH9lSp0x5MKqme4gD4Cv\ns4XgsXlVc345953LK9WSYhRf4TPXVN3/0g/fucMEEYPA6VnAwbfAW7b3N4hN\nSQDgYjcvb4r44NhwzWUUWpqMF0+biRULLxYKziT+H6NcmIUNCTFhMwX6J6e2\nRTJ1WRchdk1kvgKhYYhTgBcHDsy62v3O3dH5qImNXAv/6e2/m/NBXP3uNsQF\nGrkS2i6cbOn1BaNFSJcnKlfB4I4WUXwrSXJtsb5m+Tq0YpIFUf3YKRm9x7aW\nGvSHZzCLJZL1Q2L7Xq1shdCjhKLrcj9QTJFbHCqYEb4Dw9QGwBRfKl3NzKns\nf/1M7OaHEp6LlZOM12228i3kGJ/jq++Ro9DuLCquGK7YXyl+sYTf3e1Qfi+e\ntpJBmuR8YO8MAPJf7LdSxYfBaeuX9zgQH1sZ658b+nVaq6dkA+WzXD1jLrh1\nS10c0DQLIn2HEsqKfoFNBtW5+MwiaDQ3ezdZk8VB/dwrpKidV1p8JcWrckXH\ni+Av7QIdDSPIl90kfbBYPMgrSS0rX3afJ9StRI6CI6iox4LIWc1eiUBqNWBn\nWdSk\r\n=4/uw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"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","@material/ripple":"11.0.0-canary.a6b3101fb.0","@material/animation":"11.0.0-canary.a6b3101fb.0","@material/elevation":"11.0.0-canary.a6b3101fb.0","@material/typography":"11.0.0-canary.a6b3101fb.0","@material/touch-target":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.a6b3101fb.0_1613085456837_0.6038485662094102","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/fab","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.ed88df700.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d07bd7be824ae7e6ab141ff83a594b9a7740dec5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.ed88df700.0.tgz","fileCount":19,"integrity":"sha512-wNQluw/Fgm/13qVkTHG7Ddp0Rf2VddOhN5OQMHmNuJ2JCZpCacTVuO3WZcCcyJXMlw9J7R3EAG5cHHe/7nXD7Q==","signatures":[{"sig":"MEQCIF37N9M3QRXBeM0Ow55/L34FvTnO6rInn5jyARByEYk2AiAu7b0aLmtjiICJP3BJZNLspKXHKoXiW6jEqpQiKc2jHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcbICRA9TVsSAnZWagAAISUP/1rydz90IHXqkF90iAn2\nYQyli1lce81LCsh1LEZOTOf1lmcxU4wVQbNyNb8ikzAKbcFa4wP/FdywV1PZ\nM2WcKnmmRx3BEkqkMnrdHctBvsI37um69YEAQLgJzdlQadJ60La5oT0p0F9m\n+Dr3K7yCeiB5MnoiOwZ8bVvLfNccQ2iM2OBBTsbPvHbfkzYI3XewxOZqEwUD\nlg3caa8Udg4bd63BmoK/FTbMq4QYHm/3zEybLnApkRdAC5mFYKv9PJR0dnlX\n7RxMZAMK9haeFv1fQe5Il3V+38F7x9MXyQn7R4nqL0gAFazzI3Jzi6el+SSf\n4BiJ17fUUsgqAXmg3s4kZJN9gAcQkyyDEYnvCQCVSa/mOKWxI6F6pEkOpP0B\nJpY5KZXATuudOO+xTv+fCkNhIyDFyNOBZT1cyc8bRyAvzn6MEAc0jtCVkZf+\n4iwBaXTwyibRm7c1UD3Wnh/kUBZzGClEn2yYJOVuK23cGp+IbaYg5L8yWIlP\nNFF8joqdHCC1MbEqbl+kbdPmmHgk1xTlSZsQcVNxYitA9Y7r+E0wDnhkWN9/\nr4sickBT4yARiPoCsL79CxaJKY6sbVmE6wTtNcOg1Lo4DeonkGQMTU6+OXQB\nZxBJ9o43QOLtmPm5Km5Nxolh88wH/CQKoXjfExqeh5i/CD05/s0yxBE2netk\nQ3yR\r\n=d+uR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"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","@material/ripple":"11.0.0-canary.ed88df700.0","@material/animation":"11.0.0-canary.ed88df700.0","@material/elevation":"11.0.0-canary.ed88df700.0","@material/typography":"11.0.0-canary.ed88df700.0","@material/touch-target":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.ed88df700.0_1613088456508_0.185198478574228","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/fab","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b96b80be1a1f777e904910f7824baed7b2bc752","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.d30efe6b4.0.tgz","fileCount":19,"integrity":"sha512-2kjuJiPrDHz5RMwq4WPVNgb235kIPd8OAnR3ameEvtyogGOQWN+gJ9WXuqV0EBCrFuT/MXWESojrajBs5sqmgQ==","signatures":[{"sig":"MEYCIQDr9J1iYPP+JkFUICH2ttSJCzD0QSnHFJoobHV7R8t14AIhALgZ3kl4eovKswC/SlYg717I8jU5QtUuwcyabqCD34nC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJesbCRA9TVsSAnZWagAAmeEP/AlaA8E7zP+nUi/aQmfU\nrOd1uTZ1RYJKX0xce0h6W/DcymGFrYzVe/tdbXdzDazawM5A1vhSwCDDKJlB\noTp9xXhLR3htdd5Aad936d3I9bD7Oc8XM1vztc2W6J4hnZgAyjQwLiHNeBQW\nRGVSdRQhdlQTaDSQuMfPQ1voT7u6tnuuw6r7HITDaP+AMtlrLrvlReKChqXG\nacfgGjziR3/ya+ywO+u+0WbKvM7cvXf/caT+GtE0YfnM/pyk8vh+PwSHRjot\nhSWotBcGoIR1QAq2NV+tK19fu3ufF9vcYMijwR43GBSIYBhmJP9qaV+4ofXT\nXzL4YHuYtNwFhs6+DpiBKsvikdsWG4POklkV600yfWWRL/UfqrZr1hLI+D9m\nfcC+EYmZ3hrY9+jrivkkD6spWXRjZTsXv6IVgzXK+f8cwrJOzCNkItifJkLV\nO39vq5hS+WO8BzauXQDTaEC7/GEg0pjamCP4NxKMPPHAGHL4BNeTeYP13isw\nPN6h8QjsxICFi3SuSM4JAbqJMK1wWT51OYeNwitUeYmeSOR0Gdd2gXhu6dAA\nzPnKiUicbmCKBi4qzyB68a2eCJX8xKAJqsHBW+5gbHvtwacmgD+1zZDZlyqU\nVXGVL4ZD0miux6FMdTdordO2I7X1Ubfk8dELZ2bWIobIBi/jj8bWHcVTnlqX\nKKuy\r\n=Kmxj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.d30efe6b4.0","@material/rtl":"11.0.0-canary.d30efe6b4.0","@material/shape":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/ripple":"11.0.0-canary.d30efe6b4.0","@material/animation":"11.0.0-canary.d30efe6b4.0","@material/elevation":"11.0.0-canary.d30efe6b4.0","@material/typography":"11.0.0-canary.d30efe6b4.0","@material/touch-target":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.d30efe6b4.0_1613097755428_0.6691734877425835","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/fab","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e419ef7af817999f5089f65aacd69cc17cc78a58","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.0393bdc4b.0.tgz","fileCount":22,"integrity":"sha512-AGLXfqQTw9JZ2g3os/+cdvB+3higmWrIIgTEFpIgQDLlUGmnJNahnUrJwAYnalBXbmkrW+XK2smJ8Wffa1J4TA==","signatures":[{"sig":"MEYCIQDhvxUYX3MW9JCWWwSgAcpKjSR+9DOv5OQEu1/w+SSasQIhAJpKKchMeueBrs6fy9yQC9AKt+6Rn7hQqaJrfRrLqYLU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgSqCRA9TVsSAnZWagAA0IUQAJw0Jv5jj1W4UF6/vQau\n0lLPL5c8R4B5Jl3+7axRR7l4PSzwzceV6FKs6WYzWskJH8FFTC92OoOL7/AW\nvYMip4pJODp7syMBTezgWaaXvDF7mRBVIn8guyA9RR7izyhgzW75383uiqYd\n516nBAvw6qQd9x4epWPzuucJxLit2gBv2El0/LS5OOKmln73LcaegnEYjrAy\nmrYDLNId3wW/jTZPI6CCEccSIsh86MIfqODqhZwxP0B+zrVVeJWDkaXr3nYZ\nBSzXYVl76Djm85Tg/JdlQ6tl/9XQdMSBRl2FzugSqJNiGYuBh9abFCVy1WBQ\nBz12/XP9dFSt1H+l23AttEaJ34ECk85nx6ALNcPvZHy4UBAChRzvS7u2VDB+\n+7v46o7T+Rk+eSAQmEBkZR/e86qJjE2Nz2egxCcQjhtYcjIBrzclShwEUbTq\nhgie8yrGdtSPYI1o+xVt6HOViirHfcRJeMP/eZBlE+sfdQ4WKvmFOAoTCnpB\n2ELNTqZ97uuATCj6BIS3Do22+DeNBJwTZtVBkEyE93jXZc43IQKJcfp9Prlh\nt7YWRL1C5J+5hS9Tzj8wyKnjF76qeKLYdar1ocNHAIEOVjG6+BgeNNuGK5qi\nednCHX3eiVlaYKsu2z+++kJPCGOsZNMyFaTFqikmG2gJ9mkKMBy2Yh6V0SSR\nuxZv\r\n=j4Cu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.0393bdc4b.0","@material/rtl":"11.0.0-canary.0393bdc4b.0","@material/shape":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/ripple":"11.0.0-canary.0393bdc4b.0","@material/animation":"11.0.0-canary.0393bdc4b.0","@material/elevation":"11.0.0-canary.0393bdc4b.0","@material/typography":"11.0.0-canary.0393bdc4b.0","@material/touch-target":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.0393bdc4b.0_1613104298203_0.3527766789523965","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/fab","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a34ae462fed641bdec7c660c410c4eabf0f2c46a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.7cd26af4d.0.tgz","fileCount":22,"integrity":"sha512-8qsxHCNEVR8gALQ2FbbDG2rUd8Ls38aejIdbyWAAWeGYEk/Kpu4nj7Lt2ThfTSP7T8xDng9d9fvN9iH9nPSeFA==","signatures":[{"sig":"MEYCIQDroSfccyPXSACueukLA1F1Jz5kSLnOUlsaNwx5p31ryAIhAMJjoqfngL3oeP9+kGxBDd6XSDrw9DOS7YGwgzwESN4H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqYHCRA9TVsSAnZWagAAMtcP/2+iHbi4kj3BP76Es7g0\nS8a1yQf/JpGCJGkMOt5vU6PXQgSK93vkyg8hHVf8JbNCF3Q4Nz6RopK+fiEv\nDPUYzqgVCL8H+te0zFQuq1UdNHDWk5glhqZuJS8WwDGAeePlMAYPKHgo6EyK\n/10OVZ3NDcVztWWlPk3/A4asxYgLrS9CWZjf/ctMfVUzrmC7O1QnjTP0ik7K\nq0jPt+HZuEb1apjWbnszvZMBOJBQhvze8gK8zmeJH4blY3DZPsZgmeZqW1p+\nLpx6rj5KcWS6o38OFcujsvd8YTxRdOPVqg4+vVNo1zlx5/Y9OybsoP7d8I1D\nyUdIsideit2Vjk31ZvGzbfuPJ986Cp+l7ifQR+7dr3Q6sJqwlg6HbK80Urw2\n3VXrTp3aOvD8qvkmjI9clObVImuG6APKgnIWT+Dle9yfiF1W5K5EzQlvsbjo\nPflDt2yN9+0YzbrY+xrKkr2joAiIYX1n42lgjwsUpK41bsPN7BBbebkhiegi\nUYu4BqvbhhPBtX1ICw/sDB9r7X5Km/mUNLvm7tnM0xmA6cAq8xrif3XcG7/L\nt8PqkNlz8qcVDPhXe7BsDmMeAIjPDNJQQmIBtj7BaCeCSV2v5XqdazI0Q9vR\nDvMx614YhEWltVWbKBlRYjaZ9d/H1mB653a8qjpSU/QZh9yVB5CcnJ8Zusuv\nqWpP\r\n=aEuf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.7cd26af4d.0","@material/rtl":"11.0.0-canary.7cd26af4d.0","@material/shape":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/ripple":"11.0.0-canary.7cd26af4d.0","@material/animation":"11.0.0-canary.7cd26af4d.0","@material/elevation":"11.0.0-canary.7cd26af4d.0","@material/typography":"11.0.0-canary.7cd26af4d.0","@material/touch-target":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.7cd26af4d.0_1613145607208_0.13891391015405374","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/fab","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"884fa4a249b58fb09017eff2e59e96385fcac363","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.71fe9a067.0.tgz","fileCount":22,"integrity":"sha512-J3Q0pnpgigTKC6klwUvIXC3TClBrN5O84NUV1Zv3smTHYSqeCz9c4b6EgxEFO6cPT5QIL5y9riApb75Yg8SBMA==","signatures":[{"sig":"MEYCIQC3RVwzBA+yZD0y91mV6V9AZQv2A3WnfBEjp7oXGwMR1QIhALFAolehuU55jeHtnjmUO5IGj6emZx1AXvHhDkhSEzQr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq1rCRA9TVsSAnZWagAAJoEP/jAUfiDiDXxTTcJ/8O+B\n+/w46H/3UWwb831xbVc3AxnEA162+2ss4eAYjjvaC9dYfgM42Yhz/08GPlHi\nDigTIr9ad6rvWj+TA0HkrBbhZ+fdFHWCaUuCU3bPHF9CVXK2Ki3jr7vvhdWK\nMZ3/igwD0TI2ytjFkEemWi6ZEv5FHDRLxYohF6j/Kn4vrw7OZwpk0LRvyiLM\nTrxmJ50EzLH5POXku5goEf5ROIeQhkLt9v+8aYh+Q3zTXpaERN78Fyu6eW4B\nBwEX89RexQzPX8Oth7RQK4o0ZYANRPhq44dA0tjL3ndm6ZADzxpSsKWFagnt\nZCQzHOkK5MdaX9t5MJ94NB3rSMCvKFr2KONQPRlYXh5YxqAqyDh37Nw/7SYe\ncJ8VqfKP8cTcIbDpGLLQr5LHVe8POMWjQCTNDdZqbCiaco+YPSPtlO0gvJow\n3ZRS8VYPyKEApbPLdAmqE1EexrXpBlJ8RiP/JcOil/Y8y9hFDEcG6JIHRVo5\n/5flMr41Fc4UT3dt0GGjZxLB+W92Z3VGFY3qpp33Hf+9SeYAXZe6HzVUZVh3\n26amoAsqfixVLTYSahKy25HYdQfaC6GDoYWs+VxNBQXJAOf+FM5OwPebIxE5\nrJw/BymPibXy0rvCKkvyTlXYBtLlk0rurdv4uQot0dPb1ZvHGL6MMJs0OMjY\nt+2L\r\n=8q6X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"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","@material/ripple":"11.0.0-canary.71fe9a067.0","@material/animation":"11.0.0-canary.71fe9a067.0","@material/elevation":"11.0.0-canary.71fe9a067.0","@material/typography":"11.0.0-canary.71fe9a067.0","@material/touch-target":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.71fe9a067.0_1613147498817_0.32511163306883684","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/fab","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc641afa7868beeea831a98af16c1580af9b03a8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.0fd56a86b.0.tgz","fileCount":22,"integrity":"sha512-NAumSlY51KytS95hnir3SDKTiTk4iUm9zbwnFqjjOhOY9fyE4hwih2moJBUs8cV9wMDtGvoqwC0rUAh1m+q1kw==","signatures":[{"sig":"MEUCIGEYnhLk5DOviMUlWRRm0JVttj1Lsq+wcdtMD9OOCxqfAiEA/zgtBwma34sS4f27ZAWEKbfIdVdB7ehB5Vfv01Uh4bM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxloCRA9TVsSAnZWagAAQXcP/0NcwSUWeUVyYPBoShpA\ndOZO3iXrX49fgPmothsFAxpilie/tJwg+EJgkhaVwI1NNhKlMtMGiSi5vB3m\ny+jbN6lPRxfsnWAuOgdDNr81tNYq0opOm80lrXFhucguHu1L4UVHM+ijE/zB\nKIo9mqUkbmbc8RE28tmEFNWHBhPrTjVmVIwZPFVYe4oVpLjICZsgyMIjq3xH\ntPNyT7non/P26Fltv3HgRecX5o9XIQLRnPT7+usQiIjpXwyb/nTOjo68zDNw\nnnloUTIVA5XMW9AWdLDd2dRzUsWrK1eLfjkxYf43gA8oMPWVTmjjKTcN2uOw\nypAII1Ikc4ha8V4V3S27mHND/bEUjGSTXFK76+5VQTHFSpOAf1uHtF5CmOGT\nROfP56T+QQ3jlHD8AUgozBLTE7dgWBsUtsM+5xDEsF3blRSwD/b1PYD0oDhn\nIFU2OTkj6oYgP2LZ1xepUW6oZy9VODtzAsT2OBoNXcgO0UhYkh4LghSkB+HA\nbdWWLQeRlToz5tzr53wmlB6QPdonAIFNMxRk/u9cZ4f85oIasGlf1t7kxBkk\nJC4Sfu5xlulbr97Lm2Vu+bLFJ6zoNiZsRskIunBa/BmddKoh2QFSdRn9qPk8\ntETZ6VCdhC4gOuehPZWbQquQzS4YioCHtmy4T+lFUdJXYZ13vAzE4aajfiBI\nx1ej\r\n=XStc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"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","@material/ripple":"11.0.0-canary.0fd56a86b.0","@material/animation":"11.0.0-canary.0fd56a86b.0","@material/elevation":"11.0.0-canary.0fd56a86b.0","@material/typography":"11.0.0-canary.0fd56a86b.0","@material/touch-target":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.0fd56a86b.0_1613175144022_0.30629944367530815","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/fab","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56aea5a65a0245b256429d5d2d74c298eecfa847","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.f19bbc4af.0.tgz","fileCount":23,"integrity":"sha512-NaeGsUg5FpDPzSXxSTp/oPgdYz70jcOjpWS2OidVWVs0EbaC1k91IkyyfjMpI90V/tTeBM6oTvqCcu2fxfbogg==","signatures":[{"sig":"MEYCIQD/pKy0Y5WzgyAUn2ESYz8MbPdgnJ/IL/vE5i/feOLBwAIhAOoyKWKlahOTPB0tfdQj4tJ3u4VJOWvsTUVgXzVxek1P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLERdCRA9TVsSAnZWagAAJyIP+wWXiYrHqmdWnZUgcMn/\n3YQI8p7adp8/sD8syzo3ysa2IhjJya7vQUdXyRv6mkcCS9r3oXi1EnAAXVfv\nXonCGtizyYl8OUUG2Sq7PxlcyRblsfjihcm6mvW1qrlyt05CSoin11Df+2EP\nJ1PZIe+fXiCxCDeZlCsJ8DnjMcc2+QvYscBh00JAd86MmipTy49UWG61t3xD\nFaidieED3WIQBa+3Gz/rmsIRRx4x5OwH714QIeYrafASJ2Z1Bkc6riDnGfyF\nIcye/dBfN83sxT5TIR0jy8Xno1zsnQkC0P3hvA3rhnr5++TTZVTxup5lw71Z\n9JmS0oE6kgEEkg0avatcVZoUjpsVlfOYSRrFsm84G2fHHxfwAQy1VTmmb+K5\nJopvnfYZct3mFCICLxOHmcNtfTUtoRrd3f/lK0K6Tvm7+yoMVKuEoB9DKun8\ncIS1CnGU4IC0obEzG5mmcsHphB1i2N3s3OHjLM3YDiW7mfOmNMLNo+rfKRhc\nIwyFzXwIEcNhuD3SonZNNQhY4NliFi8kpGhSvFvpa7YbKSjBZobh/zPIAbnq\nJ4y0peiqAyRoeBEFDr7W82bJ3UX0KjcWeDxu4LfBMZuADwV12EnyTQgsNY8+\n+mmFza6doAH47ebxm1tYSwNP0ZMiTtVMSEQFUdNJu+9n8ul+iQjhrA56QL3F\n2V1I\r\n=/PnU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.f19bbc4af.0","@material/rtl":"11.0.0-canary.f19bbc4af.0","@material/shape":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/ripple":"11.0.0-canary.f19bbc4af.0","@material/animation":"11.0.0-canary.f19bbc4af.0","@material/elevation":"11.0.0-canary.f19bbc4af.0","@material/typography":"11.0.0-canary.f19bbc4af.0","@material/touch-target":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.f19bbc4af.0_1613513821212_0.09130236238997047","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/fab","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28845adf97cd21cb6b9c6f2a550047c3d7a4c166","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.f9cac96cc.0.tgz","fileCount":23,"integrity":"sha512-LVH55WiGRAkxHUGL+wLg3fzn7ToaVSliWNYTT5R1LRV5V1oSFUaoIIxtG51RBltFXdxKJpygIeX14pUk+qhh5Q==","signatures":[{"sig":"MEUCIGfk1d/STW+azmpATdjeq7luBXesyyiYxhkT/Wc8LxI6AiEAhSAXPnhRI0wzgNTdSpb0QuNWiAMb5lnB8CGsxCV9Ht8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT/+CRA9TVsSAnZWagAAxo8P/RzGO3NvRhnYXfM/grj4\nlIBQo4OTgl/A6jrMUDRKOOVWz/9IUlL/fsxKhzOsAJ1aPBjklO7yktbCjGHT\nj9SEiPO4R9dSzijvLOqXGXd0kRMgDcEZO0EHxFDtavnFfLOOw8tPGrXA+ZOJ\nZWHsy8xkAv4ZE4y6XgSZuaz2SY/MbBmfEe1A0NhsDxhiGw0hAiD00/iSb/Uw\n96xCUEPIdOrWkm4M0G8jsELDSY24k/yDy+2I+wv8oluox3hWEChcTYgDtJxn\nDvT7n0WqAPuuS3ciqlz+yr8Q8GRv/3h7FLndttoU98NYuL+OciRCboSiabaQ\nYB83F/Az0bJzyedfC2Nh+KXI2myH4OZOa/OtmFpTPKEszGlh1od8O4IvuYV+\ngUu8vrccHMjE0S20TjwQ9bBm/MZd8ALKQpF9xkFrEz/PeHweATjeA9NQIvMg\nBqkAUvKctBHVhKvrapeu90GuBzg5hnAalhdYAxNkQ94dSS204LQDwtGG+P2W\n1jqEsU9qoxcPhqhJ/k66XsI3uuq4UNYhanD3b8timnu9NMMlrTeW0ln5rI+Q\nfOr8qpqueDo5NsXFKVFATi7ZieLzBm+GXy23gx+WNTR8CLjsPXnVMYkgj3I3\nYEN2QoA7iq3/AEPT2Gfqnw9XtPPqY+EHb7Q5xr6/oeL2ZbIPb+J/fACKJYbp\n0D4+\r\n=RABl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"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","@material/ripple":"11.0.0-canary.f9cac96cc.0","@material/animation":"11.0.0-canary.f9cac96cc.0","@material/elevation":"11.0.0-canary.f9cac96cc.0","@material/typography":"11.0.0-canary.f9cac96cc.0","@material/touch-target":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.f9cac96cc.0_1613578237678_0.7866653720847567","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/fab","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3f2e94b551acb4868a8777fb40b2ed8dc0923a4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.79ce0878b.0.tgz","fileCount":23,"integrity":"sha512-jGjisqoFq4RbXKRnk+kspdO/+RQTkh9ltHdJKC3+06F4hw9aTIPQXNWyT2am64xC3Ie2R7n3elvu9rAiJeuukA==","signatures":[{"sig":"MEUCIQC/Yay6/04sU9o0SIGYypGhfsQ8jkZuDiZ3aqQZXmTR0QIgFLdCeXG9NxsXsLf5ETLh6jdJLOBB7skvbmvgDDIuMsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW28CRA9TVsSAnZWagAA3AsQAJg2N2ITVxQi1sj+0k5Y\na564tD4ijJn4MjLBo4pK5WbZWlpEoah5alV5RQCMXO02bev12sCsDxe8caQB\ndyP7YrRTnBxiFtpW4QupcHYP9aNvcHVccgRDDYbvRyZYyTHktAjHSfEefVMn\nA02cGakQefHCcA0cgRV1LCdGzLWZ5Y+vmPCOsfNyMLrHRZjGmjPT/ZwWLjI0\nBMjsAds/vzUDkY+L4qG1LnouCsbIIGGDEdzSkreZEmm2oltmlkV/ud+owvjJ\ny3eSDQDkqaARrSsgUOJpub3QI1OmMlRFuNWLaF/589sxYOxhSgKW0BgTVyJt\nJf6s95rDR1F6ZbeBz7BMjWUaVtxKiIz3ien7YV+u7AoZ6WzMMeddtfX6XT/u\nC+Q7rrmxskq47i+vBQCkNlg4CpTDQtBKmKcrjRuMRsKspmQaBq8rmtvzZFW6\nWiyrisfG1FK4/pKo0UOgYe67x6YsdyQX80ukbztHzxpqUukXMy+cm1xOoLP9\nJJhXqQ1jDcqKS9QC3biJmyTLt8RJlURImWCkadtSgxn5tmNX6YByzz1mLvZw\nH+jTyjDg0ceWrmfx0k2tucdF77+BAeQ2fnR6gLp4VE1CCROPPInVtqnZJh7T\nYq9S2CFts7qPlJRUg/Ct9ILcpcX4eQaQadxMItrWQKSEC7aPDvQDejl/y0gV\nIbfb\r\n=We/3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.79ce0878b.0","@material/rtl":"11.0.0-canary.79ce0878b.0","@material/shape":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/ripple":"11.0.0-canary.79ce0878b.0","@material/animation":"11.0.0-canary.79ce0878b.0","@material/elevation":"11.0.0-canary.79ce0878b.0","@material/typography":"11.0.0-canary.79ce0878b.0","@material/touch-target":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.79ce0878b.0_1613589947879_0.8507966551303401","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/fab","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efe633131c61ba38f4250b42612855747b2213c5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.d6e507b5b.0.tgz","fileCount":23,"integrity":"sha512-a1C6TYgYAW9V+RGKamUA3Unc8IbOfXK9HG6V25ESx/sj6EA5yX3OxU1E83F13myAmYKM/tZhitc2r88llBX6Fg==","signatures":[{"sig":"MEUCIBZj5+bhTFFMJwp89ETmA7PL2HZnUf61ZJeiP0rVgrS2AiEAzcXYn+fEdpBJHVHUFSirRdvJHJYXKjbmqrvNRCaJ7cw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXV2CRA9TVsSAnZWagAAKrUP/inZKWpZqFcMSqrOjpIz\ne8XJ/atc3/9aEsrw718xuJFJ8+ZsgN1atD43d562/S5vfiY8+4sqwvQ+feho\noluxX3vK+w/MEfVLXK3xXBVfua7oo7EMO/5Jsu7pJ3A6By19bErlW+MPMSTI\nc3M1K1Jxx5wY/jRCHpyrGAjTdw86OnEkzkmMkbIgoHUl+qpu7L3DehrqXJ2a\nDUnGKXzGvtB/5m7EnLURQI2JiN8qbz1SQ6LY5GN/J5rX0WaMq6HXxdJW63Qk\nM2+lNRkY0NZHqSTHfrIXhRZ3iMKj6oKgJN1+ljjJSBlyCamLebYsInkdERE7\ndMAyNGLGV0ui1lfiQ7uxhcYHS6oUvRG/D6citvR1GIyDUTgNaTEjcWiyb1Tw\nrtBoYsOpf+YTxXhLxabmkmabd7whTFK6za+Q09+xJMemffVXi0s5xDB4Df4e\nCLA9OYgcmxA1kiYL+8x0ef61Xj76rVCdid6XaN/Amz63A1woJ4Y6iUSvFvjC\nQ+zaTSsoNubThUGr/QSJUyV3aK5mReZcFraKQFNX04u41Yu2RfrpPxGUkCt4\n6rBk9UhiYcQY9xI+MGnSrxNxTT2G8qno74929b02ZXSR94oeQLuL0vbAu3sR\nWHQUeESCdnYDUC9kzrjb1qsJonN2xHsVMj9aGfmEKydgM3vbMzcGhYlqQN58\nqe03\r\n=qE7B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.d6e507b5b.0","@material/rtl":"11.0.0-canary.d6e507b5b.0","@material/shape":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/ripple":"11.0.0-canary.d6e507b5b.0","@material/animation":"11.0.0-canary.d6e507b5b.0","@material/elevation":"11.0.0-canary.d6e507b5b.0","@material/typography":"11.0.0-canary.d6e507b5b.0","@material/touch-target":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.d6e507b5b.0_1613591926040_0.3480580820142283","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/fab","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.f2658381b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d88cac7f82d2224b89112077e1f722d89168c98","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.f2658381b.0.tgz","fileCount":23,"integrity":"sha512-k7rtO2YJqDVE0K5nWxzgSj+7q00LMljepeIsLWgZVTonlMvu4/OSwyM75WMl9b8D3WtKmDLIHuu2Qze0TusmrA==","signatures":[{"sig":"MEUCIAHExPSoeIjsM58jq2mCOpgYf92FIxvNTtv7BQWyISqpAiEA0OnMQLCG9DnYhOjJ3pXMYTWTH29StQwomidOCTH6jE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZyICRA9TVsSAnZWagAAQckP/2abntjrOD0AIAj5Iqja\neytvAiJRzzcRvsIMSRNcPB3gzIN+udgt4BMGPTIj3rt70QXHCqVusuVTBrZ0\nnPbBDEIPYgLEr0GnwVh/ln8L6x4pDRW06gwg1wUsE4AMrtJ45UVty7EfmZRZ\n+is7QuIG1qn89vstW+ngEsRCDTHfJJtDzCLS3V1bWSHhzvg+ZOeG5KWE3udS\nuSZjSSCDRMoG/8tpseJgRYB/m+2ik1bYtZ1IxhOGLo2tMC/yfjBQ5ZJ8MgsH\nDtydUIJLClwnwZVjf7F69Ecp3Wm1tI6a8jlIqWSUqp55RTOhZMo6Fk7MJ10E\neUEdjx0Yn4T0wnMULfYMlsPBTQEvZJEiPIdNXcQoV/GtuCqt7qjCbDGGdoNM\nLxlKEkGcbM+tcwlpyI0BExn/WZOqvXCC668NXfp5D04Ln3AfnRH6uiyf6ghm\nDvp90yIFWjcY9AWTDt5WgBvXHTB8Ex9Ee08ffbglMYqTqgkBZwPIKWD0uBWd\ne2dFo5hbNcNg2Tyip31pBgPAQQ87/ZCeK3Yik/qobN16SwU0pFm0IC0ppxlM\n7tMBDik8+QcE+eZ8H7I+Vrv3dqfg5Q0JPBbgkaOGcZqa32PQovy8lpZ0kh7U\nYy3RXl7linTW0LbkkOjEQ4fMEJ3ZwRUsHcFy6lEtHvOn/XMaD7B9wPHA+plz\n2IYA\r\n=qGMS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.f2658381b.0","@material/rtl":"11.0.0-canary.f2658381b.0","@material/shape":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/ripple":"11.0.0-canary.f2658381b.0","@material/animation":"11.0.0-canary.f2658381b.0","@material/elevation":"11.0.0-canary.f2658381b.0","@material/typography":"11.0.0-canary.f2658381b.0","@material/touch-target":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.f2658381b.0_1613601927575_0.6850744187844118","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/fab","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1f0a2d0c5bc096ac7a315ec567d7b2fc98ace7f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.97c4d4035.0.tgz","fileCount":23,"integrity":"sha512-VQow2jEQ/OGd+cD1fFwGxzHGr/qdB+UoWQtrebkf+EWbiIzMbxMt4uWlbiWLUxaqLPwX5ydqbmivoOGfMH6UwQ==","signatures":[{"sig":"MEQCIFzND+LFvXeRigfhQaqiGyKlIaTx0I8aIt+jH1Iw/jgqAiAfu9RE2MH8i22VF1eJZ+ReFzFkHVwa6p18iNDyM+60Yw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdKBCRA9TVsSAnZWagAA2XkP/jbzCQLGFfc00/P0gWGe\nDJcj0/lnR5fZ8MD59fZI2F8/dp/M4ABk4B3c0iFvGe0qHhBpiZpN7L13AerG\nBLzdqG6UoWcvA8leDkj4q+8bugXdnPHhYXec8p88+YsPj8ADqKrP6tMqOLtc\nSBsUiDlK2gJFK68EmQDfIboWCgBO9oBoUeVXI7ZaGi7REbxqj14lSyBuWuyP\nWjPsE4ZbAztLhNzfp2gsA03HAMorG2DHN7rKGDCXtO3P04lRNruU/0b9j8JW\nkfs/D/f+ThPQN+n18xRaSrg4Gcv5O+vNPKnhAhCyjUgM6kdmip+kNSHHr2gV\nvqeeTb1fjcOvsyfkPKDXZI38gma/CTmUongjDzUuchDTmon2Nt64o0SkRhGc\neOviAa9F63s00w+w6wGtwqXfm4f5Wqp6JS0Tu+nvtGH/+SurIDi3X9GuEP0h\nNtJzCXcwFbETpSiW/FivA3JWK364hDYyZIz1wGFPOcr4ypYnNuQshTdnNt2p\nUf4zoWgyAB3i/zRXUA85dbBrwECI0qvisjrJU64hy4QZiUH/tLfCN4Hxdc2j\n3x42tceTLGPXLWIW9M1WKnKrZkIgolmq61QvB2eMndY4OqSh/XEEacY4UKBL\nTslJAEJA0/HFfhdhD+JknpzdDYZzU27ibN1C994Mfju6O8SsNhKucg2GrwCk\nR1Y0\r\n=SGSX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.97c4d4035.0","@material/rtl":"11.0.0-canary.97c4d4035.0","@material/shape":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/ripple":"11.0.0-canary.97c4d4035.0","@material/animation":"11.0.0-canary.97c4d4035.0","@material/elevation":"11.0.0-canary.97c4d4035.0","@material/typography":"11.0.0-canary.97c4d4035.0","@material/touch-target":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.97c4d4035.0_1613615744676_0.5219283339031304","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/fab","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c255a93b0f4ecc47f303ca2ce5ccdd713cc05aac","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.f5bb4648c.0.tgz","fileCount":23,"integrity":"sha512-7yuYdbq3k8wVIu6KAjuFRTf+PiS5NSU8LgbkyD9wKnO6us82SudzSjh12REwNq+K2E/xnGfmkVgg7kC2Hbp1CQ==","signatures":[{"sig":"MEUCIQCopoOqoUGHCGTDqub7A1NNFIEGLdSZAgec4KdQHEpzdQIgYahulOadH8gVvYSxa9OykemIBmHIKxlIoVjXJ/MBDvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpB6CRA9TVsSAnZWagAAgRcP/ioTHPIJY6OUdHaOGj5n\nSR5tnl2S/WVANazABkxo6oKsgdAJYjRTLWjLQvnvZv70U22O8AVH2Pi8azfx\nniFIW5dgEFqsDVOFNorRZxLg/5fxua/MuHfTiUPcPawdq2aCoiR2mE8nP0UO\nzXGB5pBc9q1qGL25Du7GvyDTiBiZSc1xu+MfJwq2HsdegFr5MD95xT+HZupl\nZ0Yv76KIlNneBfmS7NbbcacHFDlbs74QgPEM8529IJOfbLSdBXJU8jhefmEd\ndSMUy7FJbveUFZjpVxgS3ISoPR73pUdQ/8GLWbcqxcvUgOeJ4TUrbC+CNtfk\ntvhShLke2kIMqiibI/KE3A/Q+FPz1pkatp/wtnH3ZGccgSAU613Xi+qZUbTR\nVx44UwNUsPsri15jN6VjKMl0p7SP26KocWKCuY+5b0qk9lvU/xlvo42MEO+J\nfxZSuWPqXG9u876gjwGsRT7/L6KkS2knmy6jjQr9cw9QVwFgwsZi0TcckirG\nk4D46hEPim3b0czbNmroZBjyemaBBwxnwXotDQjZuzrCZKqDw2weaE1V//Yi\n+nwxXBdrNLedZ3v0/X6jEuyDiM6n08kT33ufa7jeQ+k9eWafHeWxd2p1XPlU\nZPku8KbekImycIv45rJvbJHU325LGesJ9MFZKuowmniTEXN1EYKFocQG89Gz\ntlNO\r\n=oBC/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.f5bb4648c.0","@material/rtl":"11.0.0-canary.f5bb4648c.0","@material/shape":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/ripple":"11.0.0-canary.f5bb4648c.0","@material/animation":"11.0.0-canary.f5bb4648c.0","@material/elevation":"11.0.0-canary.f5bb4648c.0","@material/typography":"11.0.0-canary.f5bb4648c.0","@material/touch-target":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.f5bb4648c.0_1613664378230_0.37543602798471576","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/fab","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.302c7a960.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e47afdc0073fffd0afaf200a89b8b80ac1fb2c44","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.302c7a960.0.tgz","fileCount":23,"integrity":"sha512-ylG9wundRUCTGl04o0F1aHARDH7nJcQLw0lUIglE1PIbrdM7WPOWR4LnfERFOhvPn/+wwvl391rPvVDWFHZxGg==","signatures":[{"sig":"MEUCIFzLaCgRoBHwW5yI/ngHMLp5Q3gsLIf4+yAtqzwj4xKlAiEAxxIsYxkqpRcl8pnCF3zKCjuWsEmAi0GZx5mBrMVwM8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrRDCRA9TVsSAnZWagAABNQP/jhayda0wAqmUlLSq2J+\n0kr3cVr16DQcMOJ5bDq2ktw0luh7O4P6UDR7Evt1lpbOKVPcIRLQlrruoZwP\nvhmm3qAzNm9zwsE3uUB/g4SbupvwiT17NdlE/lMEsQrILq+OuoTciCSpLpg+\nk9xBKDqAXKVuDhJVYDyhd8iDq5hICkHlE2rDVJzFC8nvxo6I9HCt/ZsZ2DJ4\noSjydcOOIp76rrb+gkVuV8/A6H//+TBQ6IksE1ZXs/1EhpnPEE/XLbMd0c19\nBVXmQd66jldFIwpIBSm8SIPWcitMn0C/oWglmSPNgE60DKAHDDC1xbSZswIy\nc99bURJLxkP686mJht7+DPcwLrLvGbV4yBv3YrZjNaRVVj3LbqxlUZlybv1+\n6ID8SkiC92N9arIBnFe8NQeczUoYZmAWQvxvaaB35NUe8bgQvDhk+FmoB/xY\nhSuMohqemuD/qwLWVzR5tiHzxw1/1rcSqmbhZwq3LfLMmbRw/D/LJXMdHCX4\nRipdDNeB+Vy/ejVSkJaIgKPu6VNWLj8uZBrd1RRxc+Oap9KzQS8ILoB6zdZV\nSv9KmK9u9KEY7E7ef4xjq0BtpDs1P2FsJm/F9CW+FRFc3KtYydeEEufjd8zi\nSXhP82Hn+g1UVlmetZP3TCng3FcaOIxvlnSFI1Y7ZE1TAOfm3UYnZBXj2mrH\noH0e\r\n=iSRr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.302c7a960.0","@material/rtl":"11.0.0-canary.302c7a960.0","@material/shape":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/ripple":"11.0.0-canary.302c7a960.0","@material/animation":"11.0.0-canary.302c7a960.0","@material/elevation":"11.0.0-canary.302c7a960.0","@material/typography":"11.0.0-canary.302c7a960.0","@material/touch-target":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.302c7a960.0_1613673539512_0.007805624546440182","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/fab","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd90b3dde87541e53b67a3d06c2452c0aa50e2c1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.aa0aaf026.0.tgz","fileCount":23,"integrity":"sha512-foZZ4/pLNVmhizDQulQVmKIV6lbYap62Tae5VqtvX/dTTqHhFSKoKSA+MFyZzUMxWDFefs+M7HvArY1C37x49Q==","signatures":[{"sig":"MEUCIEKs0Cr3KRs7SojpqsE6wh1QBqCyDBosaMQAN4/jQtCdAiEA/T7F76QGX87P49uuPp9WMkKFAwATEQJdQFbZ0ZMJ+GQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr7aCRA9TVsSAnZWagAAHRYP/jRHhX5POW7as6+uRxHJ\n1bwFhAMCm0hJT9mV0F/cCyGEVL8/UTG8ghm1QGpwVK4eHMizgmlkPQy1fv0v\nrXNjn4m9pjHATk2+mJ/91ppu98HLXjfD+QhbTar7NkqbC9p68OrbYfHBE1j7\nuo6hoAg6Rsqbj6ApjMA4Cc2vB77qhszupK3CXEQ2zW3LZJbpPIAeO+VK7kcL\nqbIXEL6/VSt8spK9jUETSjfA4ruB6tE73Yqq2SMUabRcknJMLFJPqJw1xjOc\nep4P70+F3EoYgqNO51kjdVBiYtDwhpUp3mdjNMNLXMO8pZc012CXUpTnzdhi\nmiKntOkdXEWvCbea4Zg6uWcNUxaYrBy2J7ZrGJDLCtmQnhRD2l5fgUbuJBF/\nWKAVYaESqlWHcLGA3avnR/zDmQbDzPduXQwGR376SVdJa8HzO4vBm35PXnjk\nN8HSBudNq+Od26wDTDb96bmM3InayTTyena3kzgN2ne/QVxV8+5fTFRgrDcd\nSLYX3m4K+JrbA0gIxkAHaxIUiEB8L6KgVTLMWUesAs13Xxlx+wtbsEvjCCul\n0PASM8CBefXPbrrFN1K6y9iqu8Jy+l1Hi5yw+2T4CHo6nqGB+MYpWtt24YQM\ngJ3WnrfQbFPksq1/Tz3IOMq5rN5tMp7tAnbIkNvA9iOLD151OGed78329WED\n/Pqd\r\n=fr+s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.aa0aaf026.0","@material/rtl":"11.0.0-canary.aa0aaf026.0","@material/shape":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/ripple":"11.0.0-canary.aa0aaf026.0","@material/animation":"11.0.0-canary.aa0aaf026.0","@material/elevation":"11.0.0-canary.aa0aaf026.0","@material/typography":"11.0.0-canary.aa0aaf026.0","@material/touch-target":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.aa0aaf026.0_1613676249526_0.6121035724634392","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/fab","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b42e090deede51b2085875a7ab8ffabf7204e1e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.07ff0c452.0.tgz","fileCount":23,"integrity":"sha512-lRG5n+dXQZMzUY+UwqxOPlVn/B7a7S4x9JOm7ZsRD4JNNK91DpJIniA0J/2BLAcbrMDgznh9yv/elYjM9gFpuQ==","signatures":[{"sig":"MEYCIQC8SGt7J2uy5qsLrMpTlKmfADkw9TbgMkIPdvyd1rHSEgIhAJbbKzaHay0u9SXuyHCMaXANnXJYqDXVbtR0Ij3I4Xft","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsNLCRA9TVsSAnZWagAAXDQP/jZ2IQ2kBOgZvLapGZZL\nb8CWmTd7z+/xQHMWFZMmAQZC3/BG9xDbG1S0+6cNzg04RSjfYvHggnfJ8+uU\n0VJD+GjO02SJH9Yh0hGe7m2Q+GX0Z0sRL//t9zihpn4818L3ES5eKC2+2yoQ\nf8Kk1VknLJomi/IoEwLSX7c6xioER1DK4AchgoJS5ovAygycfA9MxUACWcxC\nbylz4FPAbu2qqsLv5rc5bqy16Pd1tnp/z+iKKHoZNYfKRTIF8DuAtvMHbYVn\nbs/2c+BDW22FHDwPxsWOIXk9H8EpaPnhPilefIAqaBWUFUtqjM0gKhHYMW7w\nYogBszFKZic90PXRwRK7kcZYVPukj3KlR9O0N2cf/nWPE+ZgggnabUueyRuo\nqv4jzvWYHSTy988uo02J8zpkCN9XSL7IKPkAV1cSCMuDHykEDReFgL8qwEAJ\nYA7N3xTt7hcOL4Y9TqC94uq+XWCQT3sJH8o88dmSMZVq6OcBz8IjFq93n05z\nP5NGXB/ohKCSAA1ZwHcOXsPxQdgGhcY0f3/+9C24qP0/VzF4Dmy6djFw5pKO\nhA46843kSvXEWVYpV4zqu2dihQZDfExEdkP6pAo0nMsoGS261ajrknT8F5bg\ns/AC2oqAzNSTXDhHaEBeiLENESAbZy4k3dUPN91WqhSu9bqaEWq1TwraipDH\nnEXf\r\n=KQkm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.07ff0c452.0","@material/rtl":"11.0.0-canary.07ff0c452.0","@material/shape":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/ripple":"11.0.0-canary.07ff0c452.0","@material/animation":"11.0.0-canary.07ff0c452.0","@material/elevation":"11.0.0-canary.07ff0c452.0","@material/typography":"11.0.0-canary.07ff0c452.0","@material/touch-target":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.07ff0c452.0_1613677386745_0.6517230067665234","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/fab","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ceb8bde7d6a24bda2f5887f7b0ccf8a9ccd9c9d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":23,"integrity":"sha512-IFIql48TXuLm4ZeESR4XD0n7EiJrs8mp/DA+YAfU7DnyrvY9UNb+7sS6WpRnRsXgt3YbpR611kj8j5mY7KxKrg==","signatures":[{"sig":"MEUCIQC9Idurf/+GvMNiTJoHv9xfOEM0ns/cpDXrBQdP3+0F5wIgPZHXR4xGeQbkgb+CGr5SdXedwZhlXIuxRPg2aB6qgKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvgMCRA9TVsSAnZWagAA5KEP/jJpi/oYJ4TQsgi7yZ+o\nhbjhmRZbK1tNBZlXBi4IO44mh15vw2GBmD8zYc4BFp5YL5NGVU9s/N1TQfXg\n3nxnc5C0+JQ/pKPtpFgJ6rmjj1X2YQQj5kSCDItabuiFukNxPu4sodG55kc/\nc/GP7rpUb/Ox+gwr6DFjYuspcf+5ek55ugLCwUiJQM0x7fByi+OsiVgG6qra\n1YMrreH2CWVBQQX8lPulZfdKWPUOeRNfN05AUFBEcgPRmwpv02XTHUS/OOa+\nhaCfLXQRupv2Fg3xmtXf0b2u8xLD2ydEZUYDCtB3qnCWXnoxVxfZonWSqUGh\nvBObkmLcchF4Cfm3AI9MmpWvl7kzhQAaNV9bTnUVNY5JfuaV7B4hei8dMNsg\nhaNY8QKqPU1Wcj1v2Gyd/UzTiIEqvcjLaPE4J/YqgkBDctD6MSJkCEU/yZIw\niqJdR1fDv0Qu+Ug9kho4YI4jLXnWPXeHHIaO2oVIycn4rlrx1RragG2nxeES\n/FdPw8fkfBAiCDvoArOnVe0M1c1OhKerBBav4M+vho7YSKdbO2aRbKsNmSwF\nJp/BqW29MZit5ESPToY7CYRA4V3MRukQUrQNDIvEgbTS4hFFYBwzVAs1bXV6\nIU6VRcw6duT4OPAFFMVpP3jIKEtbcPsodKluNFHk8WIdWVoiBzXxla/nG0D0\nlQ98\r\n=+gCc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.bed7ecd3e.0","@material/rtl":"11.0.0-canary.bed7ecd3e.0","@material/shape":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/ripple":"11.0.0-canary.bed7ecd3e.0","@material/animation":"11.0.0-canary.bed7ecd3e.0","@material/elevation":"11.0.0-canary.bed7ecd3e.0","@material/typography":"11.0.0-canary.bed7ecd3e.0","@material/touch-target":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.bed7ecd3e.0_1613690892343_0.3571671032907091","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/fab","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaee34c421d5cdf08c8d8dde869c4420d7026fe2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.06dead2d6.0.tgz","fileCount":23,"integrity":"sha512-TgH0GpJgfV0moVpN5R6PF13PC8oBs03pkeeieJaYU5VNstc5Y7oj9oYCU8GT0pPw/9jg7rA4z4L+QjmvHuOMaQ==","signatures":[{"sig":"MEQCIDTd3camtI3xvZl6YNZbT+VZInTSLPfqwwLanFgTmJg/AiBcRP8WsnYR0qngnT9iYzIfapvCVTXy3/BHe61tNKoRZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwhWCRA9TVsSAnZWagAA3ekQAISxrf4nDtWij26Wmqwp\n/PJfjO8qPrgAAbqb99LIHZTUEx9oNFDylaXzzBEMC34bLu0gQQbZuOvB7HS8\nzfqu9n7N8TlJMTOSqL+DisYk6Dy5zs6dNv97co81jxb4w/0/6kG8idm5qV59\n35WjQbWQg8gj8vbN05xkB8eqNNe/u9Mm+5bhReKw5yJK0g9pUnHm0UPhqJMy\nMlnN8I30iOs8+12Lyg7wW7l3Q8WfdISowOwlqbKOFrVJ7yfCrBG5E9aLsfJt\nl2t1Z0CLuO8A2dQ0smKtM3EDTdaKDjWqQupZ/aPKNPSJke3BnGZJQgJ8Ek5z\nafcqhsYI9xNg2JLXrbRZjz8n2IRaEqNH9GSmK8GoxLApp+Fr525SeD9i42Qc\nEKfttbh1vJ0Bs4ynDZhl9Rj4vJcdKpacSYLTzpTg1Mr5pS/zc11ky8PKW7KO\noyybZsAfdKWHf9wWSCRAzXUzxoGasVTFOqiiTi9W4Ccye+N8yUjxJCH540IS\nImeo3frjGUzfXRycb2Ng2MzBzeAsLHQhQN0T3QHV7oyTHge68sgdwvZ/9h6L\nbJFTqF/v8sxBxVDjfNN2tiU9jJhN1QxZmcKD4RFIQdmdXyNlhvg9YMg7P3rK\n87ajCphwIsMjVVIhQG6nW0EAEoZzN+dFqtOlYAfxSZ+R9ybjClBKvjefuTjR\nWpM3\r\n=9YFv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.06dead2d6.0","@material/rtl":"11.0.0-canary.06dead2d6.0","@material/shape":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/ripple":"11.0.0-canary.06dead2d6.0","@material/animation":"11.0.0-canary.06dead2d6.0","@material/elevation":"11.0.0-canary.06dead2d6.0","@material/typography":"11.0.0-canary.06dead2d6.0","@material/touch-target":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.06dead2d6.0_1613695061894_0.018500011775886227","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/fab","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.cddb03553.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec82cc5b414c827fa1294794e0f50280b9eb12d1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.cddb03553.0.tgz","fileCount":23,"integrity":"sha512-VUHij7qe0mMa+PCyXNu7OsPh9Eb6uPi0DOWHmRWv8JzT4suNGO8CEUC4vuLYOGf/TEycA/KzTPnqHr59vN9BpA==","signatures":[{"sig":"MEUCIQDA9QP9NeM0kYcMgi09DLdChxMsPmzZRoHyoZy6jVGfkAIgU+PnMPzTJ+P0M8DMi+BryVbxCTtZa4ci3m9zymXWR3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyztCRA9TVsSAnZWagAAqyEP/iS4Bfizq+jlysH5NCrh\n8+ldX9RXcIjfCy7neyX8Qx+G1ABbmTW+Ml2Pya0aQAcDWA48mgLcaHk2tlUm\nP5zIbTh8Ck82qiXK1Dy7En7U5dF0ya9G8jwFyK2MWCSRt/pTe8RdDYhsJj0a\npDmZ78ChHSXaUj18hwYnPB2CvGOrb/fNTyxol61snx/ENcFka+mlJDpIZQWk\nrfRjMlLfbQaWlxJ3Yzubl/pR7Mzs8DoN0xJzJbiCcKtyjOCjOSgvr9lgIiRU\n+Br5WOwZQ3WZIwHExjKgvgcOoB5HZRjX/omng+Wncg/9uY4aZ7z4xuZ1fF8W\n8rOYMj4ChLto/xL9QRkqSsPE5TbHOgl1DgQEBi3vdPvR+N2p9dZMmR3q5CEa\nkSycbF09JXtbF23Dqd8ZMacjBEM/4wubu3E0DvNI05GQeJLb2eSu29ElVsW6\nMNbZxX+6HmshuhDA/1eexcY3hczqyh5R360Tl+5Xt2PgrcBaIJ871Bfm3afm\njm6KkW/ygFegeF8qhl8O3M5g7yKt/+zUxU33cuJ9KlY95724biQwgbTN9Zrx\n7W0+Bk85Mu7A90OxJ0K900tdF1wwcd1DP9vZwVBADRrM75eT3jjIVFuLOVXH\nx31M077M3ReJYDnaSZJUJfHaHaF3+MV0QKWbjJokqHqazB2tV5vUj7wmJTNL\nphPN\r\n=974n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.cddb03553.0","@material/rtl":"11.0.0-canary.cddb03553.0","@material/shape":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/ripple":"11.0.0-canary.cddb03553.0","@material/animation":"11.0.0-canary.cddb03553.0","@material/elevation":"11.0.0-canary.cddb03553.0","@material/typography":"11.0.0-canary.cddb03553.0","@material/touch-target":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.cddb03553.0_1613704428947_0.9625810674305506","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/fab","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b78e966d65f9918cc687ebd2070b0224dacd7384","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.d6d8d0476.0.tgz","fileCount":23,"integrity":"sha512-guhn8uMdHD1KXLIlmyAl40WcUfXNRDc2Qf6NEvnpP1uhWvVcRTDminh6FZWxy5bFWscOslbrYDyA2t0RcfTT6Q==","signatures":[{"sig":"MEUCIA4ljfZ1ymtYpOwyUzZTHIDViqkabCgh7JcDoZPDBvExAiEAmnrUYtE/IH/rIe9wenT0fUhtcT3JaGjbpYV4cMfqDGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL06QCRA9TVsSAnZWagAAoBcP/2uTgP+tw1zy0g3Ad3/8\nJd6NtsYyO9f2fwJwXoFq+KO+LCy83vFk0eplv3R1H//5P1TW5P06oXLpwqTP\n+K5Qqq9RGm/UI3HZSqPaetsX6+bexfv+pS5lur4yGYMFkprpFrDhZfb6Vft+\nvso3qghp85Ug8RXUJg1NoLuDgD7+T+22TzelOQQbxvkbAVEVaZFVlLbGgPAH\nGPNImAshLllX12PBxp6ElZOi7NI4m8mNAx7JmWwmiBxxoQxC9iMprphwl0YF\nyMYw2lM3E/HzJLFstqBb4b3oo0xqYQog8nX2VDthdeR9ORmA7sSkA+w1xQlG\nmZePq46EwiLcO2np18WW7SZpF4rlnK0vSlswoqogmDyr76qh3RfKlDaGnLLS\ngZ/1thy7s47Yp5MWgHRjdhqql/OwcV4U/uHaPUIqKBH4obM5u8CxG+TNy4e6\nY4cQ/x1EtlcV0ITSX0oGCdnaAGAqZWTaHA3IsELwKpsiUStdKLWXxtLB7JD6\nY2EwnIt8xiM57dwWHyWPaVfkjl/qQARtmYU9nkPwJCcOkyABxCeZYyjEBo33\nq5rHvk/U43H3VTgxHv1aZSLbC00QWDzuBHA46dpdhgWCtWaxOyzpV5L4BYOi\n388mbIIp9Uz/YOIVqtF3hAgPoNlIBWn6Kc4W4Err1YkFeKRzBCIWwmK6zhBI\nKpKD\r\n=SS27\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.d6d8d0476.0","@material/rtl":"11.0.0-canary.d6d8d0476.0","@material/shape":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/ripple":"11.0.0-canary.d6d8d0476.0","@material/animation":"11.0.0-canary.d6d8d0476.0","@material/elevation":"11.0.0-canary.d6d8d0476.0","@material/typography":"11.0.0-canary.d6d8d0476.0","@material/touch-target":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.d6d8d0476.0_1613713040169_0.6256473216357235","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/fab","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0785a3e0286b68ffcb8a5e45aec1e6d985dab937","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":23,"integrity":"sha512-xNzGHunoYKPX5KPqLzrsHN1LgR2VjwgE5VFtmS5/9dcdVnTPaodKctlq0qJ/StQ5hKJxI49MoUH+kyVdszMaJw==","signatures":[{"sig":"MEQCIBLL9hkRwfBqrGR5rDWmL2DRi73AmPYY3S7JFtEjZ5LMAiAnHGoWsKLVy99fal6oczyVDq8WPIWwfTfvDBLa6OjisQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL91SCRA9TVsSAnZWagAA6EwP/26d8hA4d03HE5L35Kw2\nhOLQuwvLmW/Tav3DLVW0Mtd9HufmzG2keGGXQo4aog1HSWkUElzZsWJ1jHYD\nLfNql0Up3TjjevCj/WZ54mW/C+3fz03gT/dxZV2XYMj/bREjSTF3dMmFEM3+\noQK+xv1GILPBm62aURfKOedaaUbqPTUON97d2hH8V4gN9e7Lrx+cQdK9FdFt\nIDHNG0ADPmbeYcG6U4kQmalTOwr/JCHY3pR8uKogwzCp+nqIbvLebzd4m7SF\nSS1h7CH0pE6VVmVOYQ1InSuqWUGeedE47CyQDAs/E+3ShVCg8P9b21WuPr4X\nhUbmg0Q4Qi5aNPh1R30RsXGAee4dl53981noviGj7SseVPubV+hjhe0ck7gO\nkwPwovOzqI2j9ncSW157SHj0bFE+YDk3utc8r7GPuZwMV4PUFbbpvXe8NMPi\neshaANsXMZzRgKnwz1d3nucnuET8Ml8jyLSAS2Q1Gr8Y6QPwvi2bUOTB3640\nEpw+MQIOoHSiaBf5hYmpqyIdDkc9NPhEsH1eE8MEM4I50b2ALivlFIrmKZWh\nS0CwHzaW6jhxTTIn427Ya5v8z2BVAMq14Zs4RcEnc1fHDYHlJK2MA5wmVdAU\nky1OtlsjNcif1j8bhEqajWfnMxGJs4lQrRRUpC5jdt4/GrKIG/kXTgutp/OI\nNzsD\r\n=uU6F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"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","@material/ripple":"11.0.0-canary.0b4a4b2eb.0","@material/animation":"11.0.0-canary.0b4a4b2eb.0","@material/elevation":"11.0.0-canary.0b4a4b2eb.0","@material/typography":"11.0.0-canary.0b4a4b2eb.0","@material/touch-target":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.0b4a4b2eb.0_1613749585740_0.09579271870974426","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/fab","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.3201cae47.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b362848f83a7e2a5b14d5ba631e21c3be4b7780","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.3201cae47.0.tgz","fileCount":23,"integrity":"sha512-/wsDpRnUhnJ9mkhqlXLt2K3zC+yRu1a/qVwpJ31YEEuJYJOP/sSEOvv6Ce15v8/da7lhfrhLPmFSps6UtdN6nw==","signatures":[{"sig":"MEUCIQDigll/2YcR/cLbSEF2YWOTrdz2pJLrN26DMZKMyFuJWAIgN6FrszronHh22ra+9q59kEaB2n4dFrtWB2qyA53BZnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMENCCRA9TVsSAnZWagAA0w8P/i/IoIBHQzHwrFtAh5Yt\n5/ovZwKOkFZEzcuOWxjVEVUB6vDZ+UQeNP0vpJpyZoWpCHuhjgyOceE8KN5T\n4AM5qGo9Dfty+GjTHnPvVXpAa+oEm5gMR0XNfM8m0KyLcgglrBjRLGeSJnnS\nF1AjjXbezDv0YG4hbZBGLpUDyCpNa31fhldPg+RQ+V8I1RRQijy3hmDBu/Ba\n3DU7KdOqmZem1YrdInQRg0PoplQbNs/627RKjYIz+siGbF+Q+FxYuKZkHXhu\n67pgximxKTI2GGPLVZ5hddLl72BjrwmFd83mt8YzrJqqv4GDkxgUvZN4u5dV\nBINOlb1NzlZteI6WTswJncMG/7/CQXdHySanD6saenT3Rj75YLhLHefE3sDS\n/gJ0SOmf+8dy9fC/1x8+Zct0YJlG2sbc/KJWrc1k28OAjYvRwBkWnraTXaa3\n/GrYwPFpMwolNaaTB9d0FKVmbgm8V5AEAIHwNh4ZbjG9hM0NJ7vXAjzg+pS9\nnUBYC0r+ApEEg8h7I/RWVOSBubRAzzA4ISRNE3WgaMpL5E2KnyPFkQ4x0Wbi\nNbjeTKqAMgyAH2ZFpWFTQxzNkhwfr4Rsn5ZGta5AB8YHsYF9JC5Gw0ri+ss3\nI90beT5uE+UXKBNekjNeKvz4echQldCei3ZffVB42eJLE9MjdjT4Y//SaY/+\nMwA6\r\n=1evf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.3201cae47.0","@material/rtl":"11.0.0-canary.3201cae47.0","@material/shape":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/ripple":"11.0.0-canary.3201cae47.0","@material/animation":"11.0.0-canary.3201cae47.0","@material/elevation":"11.0.0-canary.3201cae47.0","@material/typography":"11.0.0-canary.3201cae47.0","@material/touch-target":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.3201cae47.0_1613775681446_0.939232681027744","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/fab","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f1a5cc3e517f9f3b4d46e3eb8fbb29d3fe83cce","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":23,"integrity":"sha512-pTke6TQE3G1uPv1FCiLVnl+3oxOWEjDxUfgXwgcmblhyxy6xSAV/yIIimGa/JNzdy0CeRBFGV+4KpTwpch3Rmg==","signatures":[{"sig":"MEUCIQDS+TNT5x994hiNihibJt+CcqHTYXGYYjtEYhRmElkQrQIgfzzA6PMtBaC25B53Tgy/yrDoL3ji/HpH7G6VzUMXeqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNArtCRA9TVsSAnZWagAAFhwP/icjblhPQ6ieV5ACgF4b\nh0YEvXmxej36gxcF4Sw4E6JP42qCof0ZVB3yficadJvRKYuUoNX/xoCayJpH\nXLoKPxIH7KEtvN3j6uaf/1IogzGi4K5CkQ4XV4Wi8MSaV3WaftMQI8tG39zT\nU+P/iNCKmsleSOSX/QkH8ZUUF9Bca2HnytH9MLjrF1zjeGtdmyip0E2pQXgi\n1gFQUIGmHSgO3WjK7QHrkVgq52Mp2a6f2l1wBNCwFfFi1tKJhq/WueI5fKtu\nZQihLzN3VEQeIGmsuscYNHDZg5t8RMJVPbCw2i9dn95aJOwuFM3XVEvKlhwp\nTq2It1EHJyLIPESOaaheqBr6R2q6c+dbPXPCmsHZGfV0TZaAuOaUj9bkz/ip\nU6uTNdnTp2VHJqeTFJ44+atCCfVybpvsyzEGHbvAnDKxX/zLiePnUhFFL/TA\nbLjLgwBfugzgM9XwL0owc39TQGykB7YihFSulqupIj6Sh0MVqYZN23pXT2ui\nZRJ5sTUqiCJCxkb4WhfGSPForAdy+RFCZmiSK9tZKWVsrMfk1QmVmchkAVjL\nAKXamvzV7J8w4EwAAWLECJturFGGnHFWnCdvNfZxqx+Z0NFnFJBJcRTnj004\n5G30+8ZRZodZ2vc6+JARBrXvReUD6Cj87IN94pxIsJDvb/45Lt4V10kYTg/e\npYwe\r\n=0ae+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.f1b1fd5d3.0","@material/rtl":"11.0.0-canary.f1b1fd5d3.0","@material/shape":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/ripple":"11.0.0-canary.f1b1fd5d3.0","@material/animation":"11.0.0-canary.f1b1fd5d3.0","@material/elevation":"11.0.0-canary.f1b1fd5d3.0","@material/typography":"11.0.0-canary.f1b1fd5d3.0","@material/touch-target":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.f1b1fd5d3.0_1614023404888_0.5210130170378002","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/fab","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2d2a5086c369759bffe21e1ed763a8c6ca86022","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.7899e0fe0.0.tgz","fileCount":23,"integrity":"sha512-IZG/4LBlzxECyEHEMIhAVNRTEGPQ1vVxwRayTdWXZ5Lbqt/92pJExyVLNWVW5GTzzGrbwcPtLAmNpyzAfrTnAg==","signatures":[{"sig":"MEUCIQCGD4eWXayF1enBAPIfa7huEjL0bhOlKv9OhPZSsZnE/QIgf9SDJYGls410jgNLCQX6FcUdGRAXgG3LoQTEaXmH4vM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDRHCRA9TVsSAnZWagAA6CIP/3UXcYDzK+YHXBAbPvzf\nHLXseaaNFbHo8gtDY2LrPZFin2/7VUhqHIq7IFdkxhva3OFTG3uAb9V3dWUK\n1pbt2q4/I5XJrEgcFZjxdjOH5yDhQ1g92/BgNZ5ImMLjOvUq3hGy8CBimcAj\nkQHJPlf+GaRTr79yxGjGazBhuhFSwFeKf+SX5nxPGZyAs1cnW6Qh0g0nYjJ0\n28UfBW9uuOXErnqIqKHuIZiGtYgsnx+Z1WdsjtVeEN9OVod4XIOEreOZ6Mo6\n1KNy5lgkkJ4EFszR7EiSsL4vNejVCBM+JXj6rtPGo7EwZh/R8KV87X1a++Gr\nE36NT8n/d9Xt8gA8il3Owy2YZYQNCmGyqUIDKbXrYlxPEf6+js8uFZTsENd6\n8P8HOlefaJ6YhcAfQfJRpHGYxF+15ILfMNI7MFtctalVyv0T+/AxOD6SY16L\nB/JG2+i57p7qwQNM+BhWpTesQua9qWlfv48gf0Houxb7r3bbfqpXWFiOL9N5\ncIy1FORi7dUfQF3+6AMn+G+GpD5jIAaKNxTxpXyH8tNJyCnc3JUhi7yUO5hZ\nXPNK551hUhhGv8rye94BHS8DQumjvEuq8e0y9OG9oPsF8YkohFf7Z8mPfnSy\nzP7nO7qrYhia8bgdEPbIUQIhvGBYWdBgrMZRgoos1/b9KpijYZsutimR0acw\nwSio\r\n=1HPV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.7899e0fe0.0","@material/rtl":"11.0.0-canary.7899e0fe0.0","@material/shape":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/ripple":"11.0.0-canary.7899e0fe0.0","@material/animation":"11.0.0-canary.7899e0fe0.0","@material/elevation":"11.0.0-canary.7899e0fe0.0","@material/typography":"11.0.0-canary.7899e0fe0.0","@material/touch-target":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.7899e0fe0.0_1614033991156_0.13736262323203996","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/fab","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd52396e2534c7a111f0074ca8a9ba4ff81599a3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.f19c86d13.0.tgz","fileCount":22,"integrity":"sha512-1gJSenEMN+EjDBOTW2Ozb4jygf00fGXQH9SQJJzXdxUlyrW9E9p9yGmrlRiQPvk7u1jg17CeCbR9R9ZJzFX8BA==","signatures":[{"sig":"MEYCIQDQb5c6wsTLwn+QckVbnnXDVgj+05bJOml9DAqjB6zeWwIhAIHcGNRz6Nw/o0VbMrdIypOEZ0YgG9a/bn+6q/82oUnA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND7ECRA9TVsSAnZWagAA3KIQAIKsvEoDVRL2FBs8Xf1h\nYqsQg/t6KTq+LMs9g5X+W6DmIe0d0OcyO2HQXoyShPNFgS2s6ZC7kjyrz5yT\nef3WCrBXd62p2VqCXO3rbMEteqkykUK2+mqyjwuGoBNrJTXtbo8b2ebqWsvw\naYRNn6CB+pKdxdW7KSJs0lY5almrSLEL9xslikt17iYEhryAjFil/vC81GdG\nhP4e1DyiHlNygzXvvt3kxV/7YqQVVAZy7Dkle45gHdcPEngeGPQqqS+UqMvI\nwPENVlFHcR9LL5DebjmlU8xPozu5QV6TGluBz9JqtpgQdu/uyu/C2XwbHzVT\n0sLGllzqsOcQ9PXBECSfjYC2seovQa8Mh8wPL1CuTZraOzhA23iY49yblwNa\nxZfn0azAgd1hYORkRjw24C6uP1oSYtQpURtHMSWk3bHFrumQTOOCB6xBDz8r\nurW6B/oTRzHE5IMRmArUueXkjLq0uHERfmgpOqyq0vqUJdtdlddWjN6SVPLn\n43QIcY4BBd+RDw0yStwLaJsCRbR2H2Jinh6c4Rf15v6qEZrYlLu2IFxbOGAQ\ngiSTFcaRQ/ehr7LDH2fVqz3F8jl2zfOg3qx1ePBhZDY86jRjlPzKUROwh/Z1\nhHk2FdkSvcg8hr8Gg+QlXDTwcxVDy8Qr5myw/oMbNVOl6hXLszVt3hVLw6OZ\n4+hR\r\n=+Hbi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.f19c86d13.0","@material/rtl":"11.0.0-canary.f19c86d13.0","@material/shape":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/ripple":"11.0.0-canary.f19c86d13.0","@material/animation":"11.0.0-canary.f19c86d13.0","@material/elevation":"11.0.0-canary.f19c86d13.0","@material/typography":"11.0.0-canary.f19c86d13.0","@material/touch-target":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.f19c86d13.0_1614036676349_0.9462416549361476","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/fab","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.60e892d79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad3ec615a3a3b9d771f5a98d5c3ca27f12140af8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.60e892d79.0.tgz","fileCount":22,"integrity":"sha512-O+pwk3rRIDBKFRJI+2b5eYVt50+InTms4IkldyR+N8vqj5WF9DMzIZS4vF5jwuNXX/K89Q+ISmmOpatXXGiugQ==","signatures":[{"sig":"MEQCIDd/FSHuhyxxdmv8AAkCKoVlzTAHZpd8lwk0dDE8MnjkAiBr7k1zRrOctDIxXT05WtRHhkphq4iuKLF1AZs5jocO8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFcJCRA9TVsSAnZWagAAOm4P/i7eCy+UdoWPCRUXkXn8\nOzyF2hWVrXmZsnJxSzKTuOKRwQCapQNqiExpLlos8+z8CTzOGg1QQhtzOnTP\nqiKDViE7YQSscaAZd524DgOZ7FqSdQx1fhevyNJ1Me07K/sWHK3YBV0QWwWW\nWJ1Q5z16JT6M2kKbR8b6UvC8bDYi4bxlPTKFUQzZ8oM6jolX8sAjpoTtyqpa\nZSMkGN5VwVuIYdYNSfG7+f1A5Sst+qSxMAXIt6taz3+a/MMO/5fwNiEZ2dP+\nvcIn+oVS1kyxP5BqJnEmRr9xX4/PWNFJUuzdg+Tguy3mizYXCvOfN2EcuyJf\nrP+6bsuLeEi/3HhkLpI1/oVlEMZZGvZ6xZRiJedtJjlO6sp3opP+zM6ozoHS\naRDqi934EOjnkZfy2lMwVNuPC6qqoK/qSkEb5qlhZ1fodlJnzSvgUb0Ghr7k\ngqHv3AoficA8EU40riJRafpyXEl3NAso3Ia1/6CE3YVyBa9NRa1TFN9mqXIl\n1Wf8yWWR3QEIdeDwhvzrHNy8bY974H9VohWYVZjMilqOF8IMToj+sCZrSVeZ\n4GSOV6Cwgm4BZlk/49TtJNpSFFi8wU4784Kald+fiEGk+mbvgWeSt7fUL8qU\nw4yeGfOqUSK29K57mDuT9GZWhiTfkSY2CAZzcGvmwKDZ8jDRuFHXu0BEJdRQ\n+MeG\r\n=W6J4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.60e892d79.0","@material/rtl":"11.0.0-canary.60e892d79.0","@material/shape":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/ripple":"11.0.0-canary.60e892d79.0","@material/animation":"11.0.0-canary.60e892d79.0","@material/elevation":"11.0.0-canary.60e892d79.0","@material/typography":"11.0.0-canary.60e892d79.0","@material/touch-target":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.60e892d79.0_1614042889474_0.715571298249652","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/fab","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a387eac87dc9f09031fb3584613ab3b2729251ba","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.c96bfa495.0.tgz","fileCount":22,"integrity":"sha512-fv5ATbqp9ly3druUmC1CyOPBgMlOyO+vbt2hsbdMa5Be1gf85HxGLFPFnxWr66IY/+R0ETpE7ieO+IxAeK01bA==","signatures":[{"sig":"MEUCIBIt/zkifxQZM3E11w5ppKy347EMbSHSOUl5Uc02HxGAAiEA18lyiQrmBO/XN92bYvpO/baAUbg9Woa3p0F5bRneZNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVidCRA9TVsSAnZWagAAaqUP/i09CYqjzY6t2a7kxErR\nQiQj1WqzfSTOC/JfW81xphH6JMW7lj5OmPZitzVo76IVs6JxIpjcOp9Ou9Di\nMXryqb4g2jCN2l7cD/2JQfeDIm6TE2VBnRE1D/FTRTWBIi7+WNPmmUou9E9V\npXnopQTrXabH2g3C6eCpHVnHPJw3y7MMdH/rGMdcypgtXpzM+iD8OIu6J/QJ\n/AsRBGne5qY5rF9r2HI+N8HLP8gSxcvAvL4kXuG0j3y542qTjgLHNxraOubJ\na/KLp3UGv9ii+sX6s1QF2y90JoYw2alfulGdACYOLC1Gs+oQ4hQpvf/b1wT/\nYy8UTL2r6aN+2kE2EFkM/+cUkVzq+ogHNfrYO1MOm+L8qxPE/bSCMGjb1Qd7\nThmo6oAMfE5f1IGJpIBzADd+A94hAoqXJOqocYdImX/r5yeHQUQt65ImKCxy\nDqgTxV8YvB7euMylraDwN+3AC2gU9kJyxhIpII2zQ/WSTi6BZyJTsstgCTkV\nPAT5MG5mk83oG6F8FtCQdw5EnSkq9wbVitTbWWOr3hsaOJUg9emgE+G4D/hy\nNqDq/Ezbqb8Sxz0Sn8zSj1srHZn9v5WYzZ/LbeHH/JSnDuYGTRDsXbjEnCHV\nr0OBvj+DeQdddG5j9IAwFBYn5YHKy+gbXYzdDs7hLR6HR3+4uOopTqPkeThj\nL3Kc\r\n=8T6W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.c96bfa495.0","@material/rtl":"11.0.0-canary.c96bfa495.0","@material/shape":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/ripple":"11.0.0-canary.c96bfa495.0","@material/animation":"11.0.0-canary.c96bfa495.0","@material/elevation":"11.0.0-canary.c96bfa495.0","@material/typography":"11.0.0-canary.c96bfa495.0","@material/touch-target":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.c96bfa495.0_1614108829049_0.9298241067779471","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/fab","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbf1058ccdf2214ff20cae7cd8c9683c10a15455","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.fa9b59f67.0.tgz","fileCount":22,"integrity":"sha512-gOAr5Jt06v4FB1tkapN4q6MqPeDnmNEdYtjttBLCHXZHksegfgFbFk50oHz55hc4iAEvpBiWYs3/D7t+ypBZLQ==","signatures":[{"sig":"MEYCIQCy3HrPvw0eypshZWDsMOuBl0ldoVG5g44dix1rxcRV5gIhALZK1grDwBQ1HpF5GxJ3rEq5Eo8TV0pz3ZY88jJXRokC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjoCRA9TVsSAnZWagAACgYP/35dRKfyagLTP2ejebp/\nmceV8liAh6/kIRfPpvhJQxg5JJQ1So2hdBB2fuSs8HwSI1fZ9FG9bkJJbqsf\n8ruISiZijZhMMOVJ+uJEAlfeZgB3OqVZNPghLzM0DPkMI62BAFItFJqv+xas\nTeNqqJTAf4Qtz2MMVwDU+83RSUV+TtR+6zycxoKgD04jGrjYrVGMsrOWeyBq\n136Qf6smYfADOT08T0+PAkyc4+0sLSKVZG6bzwna9TCF76OBEpw8X6TbcNcp\nOftvGZdOMi4zNYmLC8ujl4V/tG5JuG1XL4VvHxWGdXghWD4KGRzMDCl2xwTs\nc1RqrzQBmrDH/QquvjZm4C2gUf9Bfbh3PkJUgm5yCNsWT0LdjQHoGORcn7Bf\nbGAuAAHzoyPVwaLv5oqECQODoMF8fI6mcfbImjbEUm2vjcBKysYP4vA2bfCB\n8Hz3k+6f4ctbzxvNwfB63FNg7Uugj2XpRSZXda4QTZVwSJnBBNS/4wlCEq9h\nO3SIVIGLcw/Bg+5Ls2UKeyYNIRN6Oy+zkzI1JhJCc7ORy9AZm2dmLcqaxc6E\nnyhjuKXCJsC0wL52Fx3PLygkYQqWGeIia4/q8UFSJ29NBMVhkkIP7P2sFcsv\nVwI2Dq83C2yG9JguAlfjL5LUneii51jRsuT96/6NkFTejfIn8JL5yygLkBDA\nMSIj\r\n=QIfj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.fa9b59f67.0","@material/rtl":"11.0.0-canary.fa9b59f67.0","@material/shape":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/ripple":"11.0.0-canary.fa9b59f67.0","@material/animation":"11.0.0-canary.fa9b59f67.0","@material/elevation":"11.0.0-canary.fa9b59f67.0","@material/typography":"11.0.0-canary.fa9b59f67.0","@material/touch-target":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.fa9b59f67.0_1614108904379_0.22636910880268535","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/fab","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.869e3497c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2217f1f816aaa1b0db5a2b1ac0f131482fbe4c9e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.869e3497c.0.tgz","fileCount":22,"integrity":"sha512-afwxzksKP7Mxw4vqWqOXldYkBnZCirxSPaAXoz1F2eBA+r7LARB62U+UXkRSA6ktMjrObgG5xty/CwbaTW2iuQ==","signatures":[{"sig":"MEUCIFBaA98nacWxA4Ip9pmdJjSRPJRZQC5n96z5mqbhepeuAiEAlVzhTgW/obUvt2A0myFCZaB/aW5FDTfMkMrB+/yO0NA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVkFCRA9TVsSAnZWagAAFvsP/1VcKDd15qJ8sWwCT/jx\nFgFG3y5sVm37wgL6cTMzEY//MkR5IBjrpHPyk+Q0KxSNnc/wwIkljqn6BZb6\nlmYqsw8PrQTGFHtLHNzXJoVx8FtpPHibjGn0P7NPGdExbZqShyjmj8g78lEb\n+YlORsp3raoVnkbfnNOlmjilNXPzJHZg9oeiaMeaiWhw+SFiTuKSbJD2l8m2\njzwU1Wf9iIcX+nVbqWsiGJlUOlk7RT7QV5IBWE5R/Xx4PL3537NTh3P7+/dq\nxTaqfsbJR+ScMcNyYkZA5gDErmXwegBaDjKRBIhG/d1VJjPW3d6OB6s12k5P\nfPv2KdtqJFbSzEQLpdUZvnecNBcUG+cyExtDZkVZHHw1nYJl40b+jexo6utf\nTlIlpYqvFRRIYajHv/BIHD8bvpQ06kx/lVlP3SXbVzUXr0JaPhf2aRAv8COT\nSG2cx5D0x2naec4PexXbVQAx46d3OBahFblXElYodrWC5vxmYtPs3PXBd9sq\nJC/H7qLHgeQjDqlgxnZe1YyTYIBWTq2NckaofuiX1tCbA2L6F1Avhekch9rc\nC0BZEFN3wKo91DKc2I23ehgjgjP7ow+B8zF50QlDyTMMB9CsPbVhJKDRvgZ5\nm68ruCMJBk6iZwiH8ZY7645vopZz33SYDCDf5bWZ8lM2YNmHZpqDC8zFYpzK\nciGx\r\n=xyYY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.869e3497c.0","@material/rtl":"11.0.0-canary.869e3497c.0","@material/shape":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/ripple":"11.0.0-canary.869e3497c.0","@material/animation":"11.0.0-canary.869e3497c.0","@material/elevation":"11.0.0-canary.869e3497c.0","@material/typography":"11.0.0-canary.869e3497c.0","@material/touch-target":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.869e3497c.0_1614108932433_0.49106899514290014","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/fab","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acc5c086f78aa3dd5f2fd90b049203a610a1ecf1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":22,"integrity":"sha512-6ShmhWRwg0Wl6lXtobr4IrqSP5P+aF7gwvl0IOY2VcKyY9H/Jgm6s6VeQjULRXbh4F8widjqAgo3WMXh3Owdgg==","signatures":[{"sig":"MEYCIQDSvFyhcRWUXBY7H/V9jdjINv0lUMfvleIqvKnI2kkU+QIhAKut7emFmvJL2Cq3JXkr+UQKM+h9CxFo1uZQmZ7ffhWN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVy2CRA9TVsSAnZWagAAFjwP/jNR5MiX+h4UBa83ewqe\n4tAkpLggBajUGYoZ3Ol1it6V5u61/DHF1dbxGNDA4Jzs/lYHsDr9gBvveXWr\n1D+BKSUhuLsGlSvEeyzCY03jGYRGSZ4PdZi4ksNUpzvZMgmzS1isyFQq56w9\nP85aTamfnsebbxhjAWaV7NwHfSeFAyiYMjcyfuy2K60dur5xcRPRRNgV2Uhr\ncqgusGWl2wm1bKKpXY/JQwp9xvzyxIEWZAymXe6nojoh+lMb4D4zSwVIo8Ez\ng7ZOCGXT0x7N+vgUlW0C6Py95N4EsVrRoDovneZfobYJNen8H+7BmWj+FN/a\nHrix5aFNoBSyhUWy6jjkBJ8IMtHhwLwi90w+WMEn4+4MRj+p1JsHKLZCkIV+\nk1WNTwxCYY6o9hvyrFlXYq3vtjDVndcwj7oL+EsyrAQSFNAKf4gMsT0CzYnE\n0DhNu2F/RjyUxtUZqvwvuTfvuiaxdtzSQnqxcsjfcjiCCqbII0O0B5lkhgzl\nHZ0KDAAotU/cxLCwRMNSCKa2NiPuiS0CrljLtQ7mN2FnNlAVW+mVniTJ5hqA\nHqmlVO66ZmtiAOAyyPCcFHiuE6VnxAN0LFtVQBLmlub7py/k8scv7BWweh3U\n2puZ2vObx+Wy7PuEjjbtJSwWRrgCbTLl9g1Kc2Zu2y8NJrQZijJoLy/gLCgz\nSuQO\r\n=U9Ww\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.8ecd7c9a9.0","@material/rtl":"11.0.0-canary.8ecd7c9a9.0","@material/shape":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/ripple":"11.0.0-canary.8ecd7c9a9.0","@material/animation":"11.0.0-canary.8ecd7c9a9.0","@material/elevation":"11.0.0-canary.8ecd7c9a9.0","@material/typography":"11.0.0-canary.8ecd7c9a9.0","@material/touch-target":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.8ecd7c9a9.0_1614109877591_0.07737428250133638","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/fab","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c1c066e657fb0bc67bbac8b89b7d608e13a85ca","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.9c85d505b.0.tgz","fileCount":22,"integrity":"sha512-pNcARu875oI1wZTASMFOhGlqVzxUHohZG8laWBNSsIf6nUXoHeWSdeEKVCpd5romyYNzZc8147hBzQpflIcD4w==","signatures":[{"sig":"MEQCICMr7KLs9qES487VVn0zmAZx4TtmzsZI3lTHxKa5vnfhAiBpqFyi68xPk17Kf5VwrJZQQQ8rjaL8dN0WDOJqSWkozA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX6xCRA9TVsSAnZWagAArfwP/3/a3vJskF5HDZ/x0vDL\nWWRE2gaavLEG/Rt72layo6I3tEmLKSzxU8IZAgkA6IxnZ5uU6RD7hffSYltP\nKMK4RzX3wq8Vq4U41STjIA6fSDgT1FcnHKU0rt8nU9Tmv9YYmmXy9RRpbrMW\nNAJdCLF+q/ZgIRKQ/p1OtDknJ81OMdYx2ZrL0+NjQbVD+j8quQZTCDGoWPRR\nlW538NbIhDWvZSv/qll7XUf0/8vFo9uTSjvyvv6mSxgkMs5bwNepR1QKY4mn\nu7i9M85xqWmgeV5eGpHvBxEXxY2LF3OLbyI3kkqOEzIkMXtyLpVGugW+pE5H\nuHdTph1F2xg40xwaTn8hBMgk9sBJPrtzyrxyiBXeDE56LibwMszncBRgDPS1\nnRqTUQVlCcb6c+o5YOB9PAZ7n6Ymonu4cjLYxkAGu/x4MCP+KcRL+IMyLz4A\ndo6TP9UWDWo3SbNw1MYykKZOO5/eSdrX5Cdpyr6ye0nr2365lq6nA51cBdXu\nD/KovkQYvU6yo+GXlAnHlQs6Qn30Vu/txrpgNnvgHU/NeKbEytMDreSR0rr2\nJ6eGugQD/WDsnxG8Frulol8d6IjB7s7LhCv6MyXbhw90Mhm+xu/mHb7F7F4v\nuP9obyS7GJlKfYWzOWKD5yV0whkSL/aBbVxDYQoiXvOVFCXKBsFUCHnm4qtB\nYGSU\r\n=3NGh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.9c85d505b.0","@material/rtl":"11.0.0-canary.9c85d505b.0","@material/shape":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/ripple":"11.0.0-canary.9c85d505b.0","@material/animation":"11.0.0-canary.9c85d505b.0","@material/elevation":"11.0.0-canary.9c85d505b.0","@material/typography":"11.0.0-canary.9c85d505b.0","@material/touch-target":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.9c85d505b.0_1614118577427_0.9937123334338109","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/fab","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3c61c2b0546c520cfbeb7420a1a9146542dd560","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":22,"integrity":"sha512-sSlq9nfsOv6rbmYVKQDobzbNZk+DtITFpdyuRTdyiXMEFAOtGaHIko34dFKOw1sopxGUJtAwnENV4Qz/XYKqZg==","signatures":[{"sig":"MEUCIBuxhjbXTC7CDTClGmlXRzlqnEQpVjSMWM1RuWHdEFPnAiEAxf5MDp2qxjYPgXh5qwySfDUw4eDTMdW8NFOPS2BhCTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbCMCRA9TVsSAnZWagAAcrMP/jkSVDq9TQP69k6WKPsq\ngQJVk1DH+IjKXZdemj2MKQdw4oDN0Z8rpE2r0S2CwOA9YHuqYUW1givl1tTo\n1y4v7dHrD2zwLFgyPGs0tnpSaXzWV3NeCMLlOu/ayK/6UJyUeBdIsLYfc0rY\nbWImfp8OhYkA7FBXUmGHmDdzbLP1pcUjzbwMGVxRyVVSwWJwHYNDMtsN96tC\nJfivzLoFIJN3giTygz/RNuItXyhSAdSn168PP1zJJzRkQdyfseaSsMGdEtZM\nSrnJx5rWUTc9MX8ruSlRkz2g6qR8hzIf6EhdOO1jgH3zAmRnd3ZlbtWA0l2x\nxaCVIEyHk1i/6vorH5xkXLx7vhOGCH5+hGgkLlNvimRoVEsm9dBo6FRuglHy\nKnnA5+3NSRXmWLfq9dmphl2nQMBfz1QCYloeS1mwBiTm241T9CpKisZYfIcH\npdxMHqorbTR0MKE5+EoQpT/pGNt229BnlV0mCeWTau26mPiAm5WVc5Ur2mW5\nfIdJ79Na/oAYs68TU4ROOe//9j1tX2Zpk5sD3bhipH5n8PMuHj+/5V+IOVlP\nyc42uM1zRYfBb8vQ5MAkCgreGe9ATLrv28n8CAnlMtONR3SNSp2l4jdvBkTu\nHhcqk5TS+gWCBTZosOf47peIFSGeuST+39kybo/L8ZWiMZb868iMweIZYngz\nsmj5\r\n=a1Qy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.9f2e85fb8.0","@material/rtl":"11.0.0-canary.9f2e85fb8.0","@material/shape":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/ripple":"11.0.0-canary.9f2e85fb8.0","@material/animation":"11.0.0-canary.9f2e85fb8.0","@material/elevation":"11.0.0-canary.9f2e85fb8.0","@material/typography":"11.0.0-canary.9f2e85fb8.0","@material/touch-target":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.9f2e85fb8.0_1614131339936_0.7368702312269808","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/fab","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"796fef1e525e605cc5df5f58958b028550988c97","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.19c4f29ef.0.tgz","fileCount":22,"integrity":"sha512-H6QBkDXASy52hqa3urQKeJGPudOmvIGhMp1gWEE3c72Y05yuESbEoL3RcmSn/eALzrPHdBCaAR05S4LWHPNlJA==","signatures":[{"sig":"MEUCIQD9xI/YJ3X/QXkTLXRxFxqlSUYEiZEkHT1HhpPZ2hczTQIgeXe0LwKArYRCwrr/L05B1DITvXwtTNJOIsn6E9HFBO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/kgCRA9TVsSAnZWagAALYMP/RkaGE0ZAd62Z+urA5Y1\nvM64knfg6a1o4O2QZHbgo3u4k1pOB6Usd6phMGps/89TjRKsJtHd14/9/UtL\nlBjk11lD5y+GBfnPY66G9EOX2AL2SuBHGKkvJkHLDfsX6F3kRDKPhFTzzRhM\nZShtEWBmuGGbGrw1qQFMiAm3ENeKarhopTWxZ2MYoau6PRwbHkGIto4Sfguz\nYJ+jqz/b/Y27JIm59YCGFeMB20cyJR0mtFMj4I+ArQE5wWwGuR2z95evT/Od\nzbidgwDRzEbzLxpKEtLYMOOVli6LzulK38b/hWad8+RdgD5yKv6E7IJkPHGx\nQ2vrUp+tRqqZri3WX6ZEjWZwtQilqd4UTqq2kYQQBFf97SkGdOAEKzh9RuFk\nql6lNjq9AboA11NtCljYEzOgNX3IhY4M7WiyCFjK/suAUIaYc/E2vEmFBbZ5\nq1Sp5MQXfhnWKgh03vyAn+beN1NB5KaNmv2KRDQ9TthujoZdapzjoy7DqGXU\n1H1aTQ6JEfGWBtpEvONGJS3ndxMVIeShqgShQ1ET9fIwFO4P/JdxHIBkAvUw\npEt+vlYKxv1U5z1gVixn5zdoOCJYLPj5IyKuYLLyQL3VeZ2iDPqbZCiMlVk0\nw2mlKNm43EocTS2UpCzDFcF2i/MjgUC4rmxoADDNt9n0v5U9VmId0uNlQyaf\nxdbD\r\n=ugtf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.19c4f29ef.0","@material/rtl":"11.0.0-canary.19c4f29ef.0","@material/shape":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/ripple":"11.0.0-canary.19c4f29ef.0","@material/animation":"11.0.0-canary.19c4f29ef.0","@material/elevation":"11.0.0-canary.19c4f29ef.0","@material/typography":"11.0.0-canary.19c4f29ef.0","@material/touch-target":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.19c4f29ef.0_1614280992396_0.09529930993155245","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/fab","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdcbcba59055ea75f04a02bdedcc3ecb0e9697ba","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.63df6e9bf.0.tgz","fileCount":22,"integrity":"sha512-QczaarP6NfrU1MdJbXR4neJkCi4E4tksC43oInnwAl+IymZ5EgAu8opMm6+EvuDqpdlFCUIqZlhp9IG6vj6YGw==","signatures":[{"sig":"MEUCIQD9HN6BuNlypEz77B7PfQCqhorD9ss5GJj+/zwHI+imDAIgfNKWvGMco6uSThfAyKE/4ajzVYmqGq/E+9slwjyYlys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/yPCRA9TVsSAnZWagAAhsUQAIsLRITQJREmP0WSzih6\nsqc1pSIv9tj7PmChrPoGjqwg6qza1zp7Ob5DODSZQEQgEnN9nfwF1F6PVU+V\nE5gtpNWfZcH7bcvw4tbGPO1IMF3jIEDNcTZK6pUTg5zq2d8MoMJYqNjS2wO5\n9hkVpEDWCDJdMiuPrRJejLIGNMva3YQxWBqSjFkxSDy3cxMRzUBOAdwtBkP2\nCMMDjxCVDsMqe4ZGinhaUrS+54e48D+KwyOIDn2eXj2UNXQ3bFq6y/ULLeul\nTpYkr/R89cBafvUw6e9vNKn2eOkMEmd7E6oTA0HBc9yCcE404jFwjOa86nNg\n2yBVidZOuYCId8juUHClOXDFkwfygwU52tDTX1FZduKaQedpmEV6+6v26GcN\neMPyjKGTXm/gRJA2GpruMgvzALKelk3sNUrdpvf74eFQo1Ef1c8DaEu1ZHfZ\nHyaztdgbFbqrhvN6C6WLN4BnDZyyi41Cl1oW7Z9vzUPzD7ZuLe5hORzGT/Tc\nItMAKeS8RskCsxpeRuAouFzZv7BHKezAXVUcM5ld6Ux4bTUnl/XK9U5DVTkX\nvoZVzJBOWUtduvNQ4vrF21ft3/DfRwP+1FlRllbtSBYkuFgyYw8n6SkCgDSN\nn55jZu4sr6Av75tHj+aw78+RUTs9QCeokFH90B7LD1dVj031JoubT3HtNnPC\nzMWW\r\n=nV2o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.63df6e9bf.0","@material/rtl":"11.0.0-canary.63df6e9bf.0","@material/shape":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/ripple":"11.0.0-canary.63df6e9bf.0","@material/animation":"11.0.0-canary.63df6e9bf.0","@material/elevation":"11.0.0-canary.63df6e9bf.0","@material/typography":"11.0.0-canary.63df6e9bf.0","@material/touch-target":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.63df6e9bf.0_1614281870962_0.48433416264043405","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/fab","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.981ad970a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c1b3780becf68b87f23cffd5ac6938c6786d817","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.981ad970a.0.tgz","fileCount":22,"integrity":"sha512-7OnceqH6swqsV6pkorJvBT1dHr9Q6sWqC7MDofpbcwB3lwINp1VpLfbvVABM8DGzo88FFDYXRyM3rAmYy5Y3/w==","signatures":[{"sig":"MEQCIAKcqxd34FmG/nvBbo57ArY2PCeFNzEIrgupz9YAAIHTAiBoJUyil/PTCbbNNJ/QYbHRrhDUZYbqLceLDF/OajxTaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODvoCRA9TVsSAnZWagAAnuAQAJIo3NxS7ZWLhCNM7pzw\nNiFj89kLQWHGobiwT5E9AbmroS2J/NS8dZT7cogQnPOGLwx+9xClE8YMzFOG\nVtAawI3UNw+MSqeWSrcSObAxf29fHpMxR53vGWF4wuAJkDkUxn62LTHdp29r\n041dkXsHQPFULQznmxC7s43+DC67xbj72P7TNDxFkvY2EsWBZI8v80ihaF8O\nUoyOZ8ExGEohoKo7fHRvnQGsGpuLtLoQ8aKDJABAj8zQOUCbFMrup5OIhfDE\nCrnX+ENAdAFXeR1fms0qk7bfGfNRn1mNJBsp8v1v+1WeP3NFp+3DihvEH0Mg\nMSpAV61qcNefL1WaAQaEuVtgiWcGB6lT1K6NPWqJmmNx2iEuLDg9ZSRFkiie\nJHIU4qQj67xPj4XWVucUW/UzmgCfh9bZVp5+0MvtVlNWPWfk4IlCXnpXGN2a\nmrdGixAEt+VfuuMnJ4i1DQ1PXZ1rv6VUPnjp6wnOv5E15t8fusVbkoB2MmZn\nTOpOdbecbIRbYchhy7IriMKBiUGTTWQYjItKONr9DSgf+VIReWw1KfKOtz2W\nCHmgwATkyr5vCt+lWGNbh031JstumUv5OndI2UWMCMN5yZ8bE2RHa1AqqClm\nXtjpA3TNzTlGTEK4aKD6AymfUDudUrANPWTt5Y7ni+y+uz+46C6nAij2/Kvq\nDG5y\r\n=gF+q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.981ad970a.0","@material/rtl":"11.0.0-canary.981ad970a.0","@material/shape":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/ripple":"11.0.0-canary.981ad970a.0","@material/animation":"11.0.0-canary.981ad970a.0","@material/elevation":"11.0.0-canary.981ad970a.0","@material/typography":"11.0.0-canary.981ad970a.0","@material/touch-target":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.981ad970a.0_1614298086032_0.8660486548851838","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/fab","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db91ad04bc0d5b78dbced303976126d6794ece0a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":22,"integrity":"sha512-mVPgo+PON25+TNn94TkueuFHZ/tdN7vw+I20E5akpeRiLxPduy788+KuotHk5A2pjoN0l2uABKE/ZmUxcxISOg==","signatures":[{"sig":"MEYCIQC2KMapMbBydvbb7+mRkLbUlYWFlO3hkJVe4c2MsjKwiQIhAMfpyGd8N/UyQpX79A+YyC32lIrPXsf19k1Ql1GO2nd1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUBhCRA9TVsSAnZWagAAPIYP/3QbwLFRRdEVRtuKMFMo\nAq73B8p+tGqxatpDouGQblYDnSZzf7B716cWqIlfxsu4XZZ1qE+GA959Nx37\nMjgXgEX7LJpgcgqBm9ThzYF9nS9dYHJoBcgu1PqRzd7jR2gPYE7tlPNRTtGJ\nRGdbtkTiQBZE/gK2YYOMMZb2KLXqLQZMpWGYLycLfIZBz6ZfKwWYG9/w1kXv\nOeLMJ4woQXXG/k6fTYW/iuir2PdCCI7fPh7YRo/xRdlSksniPBhWgqT7/h9O\nOCePKNiJDckPdGo0xxArBLNQ3f6ZEGa1DUvfcFhZpGLoAPGqci8fmS1iGS6c\n7Z6XFoD5HGi/cRTur9vavQijoNJbL9+atnFsy7JRmwyko0VAjJ0535zNYbOs\nzVQ/GIK9NKkUcfKHmXxzGfGfj3ESo5KEQkoy/2h2ct9SxHWTlk8PXDqwyc6V\nP6RuKaTlCOcP0Qy2fAzB4i4DUCmczmFWlpabkmCihDgH5wDh6l8KYv7AhjsH\nIEbxs+5Y2qUQ4BBhOiq7/2lMGJW8wvhhDBhuIVC/tnfnAfBo0eHZ3bFSxWMo\nvJTUy97hhXg/nt/P0yYd9uZl//egTyIiqQNnxdkI9sUGM4L8RaTh8Sh+kTVt\nAdHFyJk0uqh3q08O9AAaPlg+FhAV7/2qnPRh2vExAyvx/QIOzd/k4expDvIX\n2/il\r\n=QAIl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.f9c9e39d6.0","@material/rtl":"11.0.0-canary.f9c9e39d6.0","@material/shape":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/ripple":"11.0.0-canary.f9c9e39d6.0","@material/animation":"11.0.0-canary.f9c9e39d6.0","@material/elevation":"11.0.0-canary.f9c9e39d6.0","@material/typography":"11.0.0-canary.f9c9e39d6.0","@material/touch-target":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.f9c9e39d6.0_1614364769045_0.31038673611058387","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/fab","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2ceaa4e8dda5dc61f36a3c1300468cefe16f334","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.c97d7d881.0.tgz","fileCount":22,"integrity":"sha512-wMT0OS0dc9vBPTvybotSaOLq2I/YJjRoLSISXE8p2NYcPA7UKjBqPcZs5dSX9TcM2Gq5J4HvxSrVxu6gsOj9Eg==","signatures":[{"sig":"MEYCIQDPzOZnrTcEdrV6pzVRe41jGzPPiJsEdiVKHVD4oZ5ngAIhAN6xbw3DuhSRqrdUcQopisaV6FafG3NtshspWobu1Vey","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVRbCRA9TVsSAnZWagAALNcP/icn9tYoSDRzp1MzU+N8\ngQeHpH1JmSUFOwLVQqznn+/be90xCIU3OBhsy4dZ99Hlii52na/d+ZUGDAFg\n+Did2PYABsdkGkapDwbGDVmBZPRQLktxRT0iwC44C4NNK6te4forQQZM8xup\nmaYyLZ+tcjRKAeJXGnumFgEBvVXZieVpWRsCCekPE9eNhcTDQAIHbKfQn10U\nhrw5G4u3FszNlJe3UJR3iz2Xj2sSNCpkuL1/9s1B6jUqyaSB6CJyltnRZjOt\nf3Hj9Waz5qDNqNyRDTRedU9AbufQp1ag64BFDya9i939IevWBKWzJJq5FI4w\nxnWSqbH3Lg2d+P0vH1vAbWOPPjGFvdocwHje1rgCuLsYbvB+Fy7pN3wtI6BP\nqMNjxkoWBp9gess8GTvc4JyqcBRB7+h0TiEqTcACOxTUFC2oVg3jUXn9Aqx2\nt+pwHRQZui5WDx6Wh8GPIvu/AHdp3YGFqGZt+2toKF6f0k7DtjkuMaAAID2H\n9AJM2mX3aseG+weXw51lRxhUDj3XsdrFkzuG2MGb0mnRSua4q5F9Ja6DCZM0\nm4a5AiuWRHPKOQEOx0VjbmhGS9hQIfVAAjs/rXEoEN9Qd3jQ8H0AzyuoSwwI\nGm3c2gX7Z7i/d+LjHwk17qMns9mUNbWXx9qq2Jwk4c6q22O2ss7SQ1R5PFpt\n+gAK\r\n=2nTz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.c97d7d881.0","@material/rtl":"11.0.0-canary.c97d7d881.0","@material/shape":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/ripple":"11.0.0-canary.c97d7d881.0","@material/animation":"11.0.0-canary.c97d7d881.0","@material/elevation":"11.0.0-canary.c97d7d881.0","@material/typography":"11.0.0-canary.c97d7d881.0","@material/touch-target":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.c97d7d881.0_1614632027513_0.20997333817740182","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/fab","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00dbcf5a4551b844eeefdc07b74c5a4cfb90c843","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.bf670dad7.0.tgz","fileCount":22,"integrity":"sha512-H6PR5xPtfd2KLYMSYNTimNwrVZ/iX5R9IEWmMTyaPiL2PM4AAppWEcO2pQURa55XXG3c3lhtu9UHMN1iRjCH8Q==","signatures":[{"sig":"MEYCIQDrtl8h/JgnDJTd2RogwHt2DHymijEnatkLvPTh8dnbywIhANeJ5hOwXYu13U7v9ysXNM1/oqLAfeqkhcwysE1Ver9u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtaVCRA9TVsSAnZWagAAW8UP/j0zFDTUuK4gTmgaeZ0w\nTS7NnzYyIbv7OHY1nxkL6qnmMq1wQ6ve7Qw6ocjAVYMO+xplZQZrq35XW66+\ntaO1wZ6QlfJCTlR9mAEbWaBzkAmN58RJdyL5AQKbd/Xk5NEmKc2dGyarN3aw\nIoQkBoRjr5IK8RjgQ9sq1gwEWP0wKcb7dbhu+H4vwirjczBxI9VxfSRnFPKK\nKRJGvPv4WYE0TM1i3sGuOsIb4E4Ce7Y/xsrJJcIpDHQ6/Ph6hQ1h0G7pWctu\nob5u+J82wi2zntVAlBDiXnlsSkyQmFVkVAmvG6nNiCcWt+iaKacY5CHE/HV/\n+H/ARFB5raN/QTCpMcdVVWtjaDrlXN72JHsklB1pFvFEGbAC8MpE+7HLGtTu\nG1JbLjyt76lOk5i4yziO2K2tqzTGqiH5YQj4ta3wtfE31wCcsxY8ezbTz+ul\nTnF9AQ3WT4KPBZXE5X5Ie1EsrfOIT/4wY4QqdDSM3oph/6gF/ZNXa2wAKNVI\nQpqPf0cuhv+GysRG8seGM5nRRiZI0Q8Vf54IBoX+4Dgiakw2RrFt03bKd686\nCFY5bVTNzA3EKvrUDaeGFRjvdXIZlQGHfkA7g0x4TFZCck9qQIqQejUES0Kc\n4Ka8rOFGJF5+hOLVVt6aVaify9VT2esPwaaeLm8TPDaWMvLWrx58OV9XA9zg\nIIt4\r\n=QSIx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.bf670dad7.0","@material/rtl":"11.0.0-canary.bf670dad7.0","@material/shape":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/ripple":"11.0.0-canary.bf670dad7.0","@material/animation":"11.0.0-canary.bf670dad7.0","@material/elevation":"11.0.0-canary.bf670dad7.0","@material/typography":"11.0.0-canary.bf670dad7.0","@material/touch-target":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.bf670dad7.0_1614730901190_0.0813169127415514","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/fab","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ea363e7074ff2600368b0609c8548f796abd810","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.c7d98fcde.0.tgz","fileCount":22,"integrity":"sha512-vQEE1eeKszzz8sIPFCV8dkW/b3lvDYMf9rsAGXpSbG81EEOWTeukXruCiYt1axHoaDd44mRQX5nDEXgh/7OPmg==","signatures":[{"sig":"MEUCIQCIPfJ7QbLA9po7P2GGs3H9NUrdIac9ihOw5QAkfZ6mwgIgblS+NlXYuoemeP1m9KxIDsaV4mRcJPtPINXZxFLO/yY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/JpCRA9TVsSAnZWagAA//gP/RB74ve4PnT635k3Imna\nQ1SFw0cI7uzEuaLPaEfD0pHS+vC4wvfd54I1L7PXv6eZsRP/6dVUb8ezjWb6\nZleqVc/d+WaJSMJVoXoQNyJ86sp6Y7P3mIK/+hF6sq7z7aVlFkuuUHlbcY8S\nlGO2F3AwVrqF5f8tgCxvsJa2VKsbmYnsZLL5tI/6wMgooNEcOITHjZeywNbS\n3dlVMIkNX0WwHCrvNcPTXmCytewtNBa9W4D0gCKlaung1Ha4aF1e85gIGH3Q\n26RN5E7x+n4lw8VuDbEDdILfrvU3syZwynuiwfnE1ur60uZBmzTnjkpoRdIv\nGE8E57ZDHkF/VszYJFSAxq7Tjr2L/qHlPyN/WBpGKHwmtXsB7qcrCrcObFNL\nuV9jDGozbLc2lCRkzdHJum20D3nvLZ3lgcwIv6tMzESDs6zAI9D56A6anouk\neCNY5rJZMCjL100aISfv99d+xpPJeIKvvVh9KIleDNJo2CerTMywwHgbkxuH\nMrrK4CA7xDkXhQtSkjuyuvLrumPe3YApsQoQil5kTAEpp/neVPHt/V7EX3+G\nz3d6jzTpmZAz1FlzA/5jz83jf7/3npjGUnwXyc64VANDAXEdxmfLizLsEDrK\ndreDSSRAl5gzIE7coeYHvPjIRA4+qifzNl7eXWtT+cwMRw0qRbbP1ey/dG0O\nPfnZ\r\n=tDLv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"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","@material/ripple":"11.0.0-canary.c7d98fcde.0","@material/animation":"11.0.0-canary.c7d98fcde.0","@material/elevation":"11.0.0-canary.c7d98fcde.0","@material/typography":"11.0.0-canary.c7d98fcde.0","@material/touch-target":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.c7d98fcde.0_1614803560578_0.15283232433434812","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/fab","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5b55d1b9a4912ffff129fc6acd546a250067d32","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":22,"integrity":"sha512-WDZf9ClBEdF4TAFR7OfWe0gQaAa3TMlGhrHVmy46yLVi8RlqWmq19qyb6K8mEtJ8oC9ypjRwMLi+d1xdYtKMrw==","signatures":[{"sig":"MEUCIDwEZKj04Kuf+wg51f5g3cQ816JNZLwPnVaB2ymUgSKfAiEAxt0H0IUn0uM482zQ+0nHDh4XCH+sy419WLKNceIfKIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBrCCRA9TVsSAnZWagAADxwP/R1jISR9AHA/wqfCHCDC\nGK877fKr25iC5tJ1MibB3L0pQVpw3tPyEKPxdfRFOV7q05yjlqbhN/ScoNkg\n+blrxHvH7yZ9ScwwXHvKydtukZkLi8EbAOtH4EObEo2SM/nj7ShaHhUnvcNn\n7Po0nV5xXIs0v/jzVJ/kMwleNlAHkjuBov0C2nq1p119olVQiX5P52Lvx04S\nCJS96HwmujwCYSPIwWcPLE8D0IYWev9LvlwzsVMhZm5LnUrR2lTA6s5QNfaN\nAM3o4U+A3BUUVMkZHAKusr2fr/0CnFuH5CaWoNnCyTXmi6ZpAUMOdOk5t31g\nwTzXZ31090SQ1Tjuq9MfhWp0iVlKKf5e0eod4HHssRwfZFSvPwyMdvxRz1q9\nL8uQWYMhQm64sOi25HHYYE1rNC/yW7FZEpLDdt9+3SD6+FrcBSPv6hWa2pdY\nzuyJCsMkWb7/AOmnEr5ecNJ2N6kD+U+j8VXeeIypvKuXFkzbDC7lJfKcF1JN\nGNV4wacCGsvDtMM3mzbW/yG0Q2Qxp/ynEcGu0IHLiMC5ix9PuQXADbs0ZFFe\nMg1lVDRN3nTJp12JTIg330zq9J6y1r2ywsWORR8CpVcS54V/77ZwGgJ87ghz\n+NUhE/xOl1gSls4DsPT2Wfq0Gh7KRZ4wvBSx4ctnyfORHk6PHw6S2asFaDjk\nlIci\r\n=JlSW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4fef8bc1e.0","@material/rtl":"11.0.0-canary.4fef8bc1e.0","@material/shape":"11.0.0-canary.4fef8bc1e.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/ripple":"11.0.0-canary.4fef8bc1e.0","@material/animation":"11.0.0-canary.4fef8bc1e.0","@material/elevation":"11.0.0-canary.4fef8bc1e.0","@material/typography":"11.0.0-canary.4fef8bc1e.0","@material/touch-target":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.4fef8bc1e.0_1614813889907_0.9155659867324948","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/fab","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f86843dd77ce63f00565a21f068ac2086fa2a0d7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.afae3a3ec.0.tgz","fileCount":22,"integrity":"sha512-RHIwgPYA4qrNV8w0pgqq10zvDkIALEdlmdU5O2zim9/phCUdyY+foh8BG2InVZmvOnoR4r7+nnVJnys4NMb6nA==","signatures":[{"sig":"MEYCIQC9ZuzQjfYu11qpChQVRh19T23v1gE4GSck166bGRwLNQIhAIontNjV/J2l8pooqn0Lrgpu4fOw4+kU1qxRGbfVmNXC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB73CRA9TVsSAnZWagAAk80P/3PuYex4h7DFXXYgMClH\n7WB3nr4dS/a8AyL5Cxamsg+GyrFwweA98kIXfgjgyMz0UveaAptAzZnk+Vq0\nKKQI3n0GAFDUL4ET/xHofueVlyzwNsABoWIpaPEK9OU6wxVwJZdQetOm00YG\nhQb9ay6oj4PlAEUGtIAgHD1fxQ61TTGhcuDzh1QiiTnF2tV8QP/QabsdZ2IV\n5bHLPue7ryhJyKAQfJE0e6WmxSSq9fXmAMwvm+HLTqd6RuYtgMFdE6B9uEzl\nWMIH0g8WRuPpJ42kN7u94wiIAaoveanA/FKNM0HQrncf6uayghn4Nz494QBM\naetC4WcLoPneMqL9J0MiLkrBQGjTOR77WuFAN8TXoc338XU766+xfEHxqnLa\n/tsW4HwgdwAL7MtAMZ/FHplyypLPQ/WPw65gMRouMWaHdaMcpaAhg36T/pJc\ny9OOmoDv+aOmmL4fho9j++3a3lRJYhbYvcfmjAkAb6nzmbDFkQfC9W3aMPx+\na9AnneAU6bIid4MUD5k/lyQk0ddXCoJhfh/dLbqFvL6m9nbxUFWh4cXxBKjG\n2y+Ei85E9utJE9JkzXQekwfzafXFP4oXZ+OmVKiKMXIVDNAAuryfSItX6gY6\nXc3lwpHJv5+etA2Q76FZaQg5Zhw7B+sO/6ZlEKteKQsaWBc7BHaET9Peog5V\n/81i\r\n=aFNp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.afae3a3ec.0","@material/rtl":"11.0.0-canary.afae3a3ec.0","@material/shape":"11.0.0-canary.afae3a3ec.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/ripple":"11.0.0-canary.afae3a3ec.0","@material/animation":"11.0.0-canary.afae3a3ec.0","@material/elevation":"11.0.0-canary.afae3a3ec.0","@material/typography":"11.0.0-canary.afae3a3ec.0","@material/touch-target":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.afae3a3ec.0_1614814966819_0.4972495900640408","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/fab","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8744c15152d14f3ec774d5947b54bc30d8e157dc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.0a0b10f22.0.tgz","fileCount":22,"integrity":"sha512-RlAWkOvEKQFmAVsAc6qq2fOxmRuyDEvJwZO4r/dEdTzDRE4gK8EnTwH+fOZysmfaF0iDJunRbpLfbUAd6FHLkg==","signatures":[{"sig":"MEUCIQDJc/SG6U5IQ0hTZqPokht7ZJw7/erEID0QxgV7yHgV5AIgF5OT98Usrul4rWZ/J2Qn4KLcOCI/JyJtzALOtydERuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCNiCRA9TVsSAnZWagAAhCMP/0vWFSqZc73/uIdX5o2B\n6yOERkjYyCiivl5TM7yygdmlYkYxpVxse1IyJv0boBe7IarIlDBxROgDEg65\n04QLZQfjpv2rEIq8O1rsB4awhw2quYmu1fYKy3heSRh+/dfRkCU8eJkQIWWp\ny2AFNLYsDOqixfpgoYK/TWLqk+x7gPgJmjt1/QmfQFaRkFqDszvWn7vuyt39\nsvbfUEYU8u0G6Z2r4j20tLezFVKd0R5XCSb/ARYJTHZNTrqdMHXqR55kzRgZ\nRT1hD4IGc6jEMidODrjp/9nqS+s89gxJ+EGfUquRkckh0gZEcWuxUQm1F5Jl\nbpG6ASVmgqIIvUcz8FP3B+nz6b6PPyd8LvRcjlZ8j6y8m39ExWVs3pW8N1Wq\njYYKBJIJLnJKAky/vwQx5BFc/xo7EOaoktqKbBmWPEM+BbmcNAazA1Ecd35T\nefIqp0jxL6ThKzPGAqwzPsnhAnVDpsGE5X+9oxwmkVOqxE1sNrHkvE3xwThn\n2YltFMrm4ehEfXiyXf+wl93yzT7htYoZITTiPUkDfByIph+TQ6bp3OnWwsJX\nzwnNlTZbZ3J67h25SwKOAqM09MmDUMs8G+MWwrn48HbHE8TMhLE09lWTIyDW\nmhMxpP9Tb9haOulkDRXhhEqU36p7TEUZs85Rse3JyUf2fypfqLdh3D6ajnE6\njZUx\r\n=zyDf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0a0b10f22.0","@material/rtl":"11.0.0-canary.0a0b10f22.0","@material/shape":"11.0.0-canary.0a0b10f22.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/ripple":"11.0.0-canary.0a0b10f22.0","@material/animation":"11.0.0-canary.0a0b10f22.0","@material/elevation":"11.0.0-canary.0a0b10f22.0","@material/typography":"11.0.0-canary.0a0b10f22.0","@material/touch-target":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.0a0b10f22.0_1614816097726_0.8980373958406278","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/fab","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4094f6e50a8ce71c2be2c2deb3c832c61f22965","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.6f678a91a.0.tgz","fileCount":22,"integrity":"sha512-P+yKp8mCdSA+L4nRtxQTbG2BuBnD0DrPjCFcXRBXz+Z+YzZyZ1PP/L+4j2nlmLkGRerIa0FRS3AgF39q1iODSg==","signatures":[{"sig":"MEUCIQDeai4Db3RcN/QO2TE6MUC18zMRbPjfV93S841iAgaMDQIgYjE1e93LCrqtI043z3sfH+Tu7YjaujaOByhhHwuBlTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSmwCRA9TVsSAnZWagAANwcP/RWiXKqfjdnMErphu0Kl\nIfetTQVJrbSzjPPSMtKYssGajNLLefCAoCTxSCxw++XwD6nvlsSdUZ1fbeDJ\nPYlWTNMQesMXPE3U72F8fjHZc07pjYH9nllI+AwkxLtag1GR30H1BZqzt/t6\nXVEOmxap56+sssoLTIi+5pa2SuVoN1S0hR0I7pu1OxwKGyETNaNnu/y/IWq1\noxEo7TtSz17m8NubokScL73nXP158+fFoOH1YTbz13hHdREkBd3opgcWb9/j\n5lUpF7upd+EjcPj7fpCiC78hIsGb7YGcrGw/zQiuKc0+QiO706ImyBhHJMu2\nlN4iKkoonncgZ2CqGwFsHbpQbNwrU1sVKTVoKZHrZUXajxqcePhUJdK/ygRQ\nrS7CkLQSnrXhkDj3qIyJplPICtk7f/D08+fbC+er+tT7+7dVAG6SlLDsLoiF\nZiFc3JVpYaDS7CbVRGiQxfjWPNzrS8pUMyW32a+Apldq3A5d3HVmIuwTDAca\n9c16u2D/RwQbn1Wmjzcbw/tkhk+QM+LdVmgGz1PIWb6pr4TDBIACog3fqA/v\nx7v/nhiDyNew3s3jQziZ2Kir6OZiaS5ADS+Adt/pqAi/su3ue+MjQC9OtUf9\nuudf9u3FZym95YevNc3llP2n3wVNuMscOzWX5gydgw6JesOO6SdSDmk5RrwY\n/5i5\r\n=swo8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6f678a91a.0","@material/rtl":"11.0.0-canary.6f678a91a.0","@material/shape":"11.0.0-canary.6f678a91a.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/ripple":"11.0.0-canary.6f678a91a.0","@material/animation":"11.0.0-canary.6f678a91a.0","@material/elevation":"11.0.0-canary.6f678a91a.0","@material/typography":"11.0.0-canary.6f678a91a.0","@material/touch-target":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.6f678a91a.0_1614883248217_0.30865530911098693","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/fab","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4a05a16630b353cdbc6157c811377580a64587d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.f5f1b613c.0.tgz","fileCount":22,"integrity":"sha512-++u2OsNk9b4vU0wsxwHF/JEtz773b+ZTxBIoJo3aBQS3k0/PrFPmePiK68TIz9Q/LHjkdm0j4GFDUgEWsRdy0Q==","signatures":[{"sig":"MEUCICLDN4t3+/y/lFCo2TyaJG8p9Kvzgc3j1Gw9ym/mYHiWAiEA9E9KBTnukFfaRLvFFEE7Fs3dskX/mzejF40wFuQMcGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUgBCRA9TVsSAnZWagAAhP8QAJ0FVcJ35ZPl2tc04d71\n1FTQysY70Fe6n+2aOpnHIGhdoHYOk1CUUBvdi4M9EJI1VylCMwjpJRCjP2Hq\nmhhgW4W+OhXyyLhQerq8zvToIa8Ji8LlJ/jNVTfGpSKjIQL13EoXXYG2VhXZ\nxxrEfOFClIDZCPd0Iu7Qp9ss63RXIk5WWlS9gHt+gCzWFr1eKUgN8PgleEIn\ncHAa2HV2cpwe4O6smoACgRr9hOqzbLA17u/0rMa/WMCEogmiXF8CWxKle9vO\nui3iwWua9lJY3vIdPDw77vNc0yfb9qXPfX21O5r1h94jhNyEyA1KqfaKTXcN\n1g8k1ZaXxIDBN3dMlsiPnWaHDuHvBMnIkCsKJgfX0BsTdMSAgbQBFuz1JK/s\nJKmI9NpbstWMRcgPK2dM8z0la+cyWRZVgn581hA2eMYLJ+MgKIOZlOpe7rGr\nb51agy9wwcmklGo3Fs+tzIWtIHEypjHyfx99YsluMi2+59Qbs9zVDR/zv0br\n2b1+xOHyxlIa9v8mFZSZEVbwp1oe5+sIicm0FMYo3zI0ncfRtou4SbJ0/TPq\nijFiQaw7Uw217xr/cDDvygFmfTsg3MnoKZIXzGEt4XB7BAUnyB8gJFBjRmmJ\nSCgZ5jD2Q8+kG+1cRJgPpqJ/L/SLWBWK5PdFOite0qS5RfvvGBtMzc48SDAQ\neYPN\r\n=bDte\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5f1b613c.0","@material/rtl":"11.0.0-canary.f5f1b613c.0","@material/shape":"11.0.0-canary.f5f1b613c.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/ripple":"11.0.0-canary.f5f1b613c.0","@material/animation":"11.0.0-canary.f5f1b613c.0","@material/elevation":"11.0.0-canary.f5f1b613c.0","@material/typography":"11.0.0-canary.f5f1b613c.0","@material/touch-target":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.f5f1b613c.0_1614891008293_0.19556791794412698","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/fab","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.606e767ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d78c07af6986ab05c4133bbd921ec6b948e9663a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.606e767ef.0.tgz","fileCount":22,"integrity":"sha512-GogAlR9eZOQjGtLHew3jIxSki0RonKjdEoigHDnQrRNiCOGeFe9tgtI6Z+yMjmWYyL8cKEFIxkuSzDCfL63pkA==","signatures":[{"sig":"MEUCIQDe0UCB8pIwdw62RAmUppu++kFMCk4w6B8s6Et+7BeujgIgbcT2WV9Gg39E1/k4yxVgK0V0qIjMNy88gS24H1TeL+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVUsCRA9TVsSAnZWagAAbhQQAJn7ZKn7FILQR4k5rm0t\nMICfJ5gyEkFJDXSEBafed1VikXYKO82+BE/w5baMmUa64X6wcr7Wv4O4NWY/\n6S4e9hxU4jADCrT39tMVNXvnq/5tPUwK9YZhVRqTUmzQxyZfmeKwlExFm8o8\nChkkWPs/xdhM3hd9JFPoVYUe3foTRBcFT7SIMPTBAQB8o5fGWB/Ae96LB/1G\n5odx63tWPXq3Bxm3nbYoH09kinQTvYfAcM1r+eDpvbHNZU4cUD2CuIeOnFYb\nZJuBGbgV5Y483D3S5v8ABkLAdkN3s02AGJfXyLo8ZIsusE385XG1k4qBNBSg\nwdcrWQH2SJxMZwgi8tFaxZTFC67YfK4vmqcAgkDDdZVZl3MGcO8YeNngcLN3\n0DlGhSTlOiPZHD8Y91i+/6uEl/fWhacB0R3e5WQmbc7jyMvg41lNK4HRo1V5\n8UwnwEeUfxBPwjaXorg+caCRQQpmI7O53EGpBu+XEzJZTg8qbhuPILBM6onk\nlMMYNXjC4ZISkK+Ei0k6E5RS+40iYL27W5Ofc3jFT+Mc7pNzT1qkv8RCKS3l\n9rZqp6jDzq4Rrqq/XftiR7O0ONxfQmyCr8Xs3qoa3QVOaJB6UepPsqcr8+jx\nSZ/9X4aAgVVRdGsk9QB5u9U6PrhMsaS413P/JYlVGjC1+yddKsOeGUsNNgjy\nkFHs\r\n=+fbI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.606e767ef.0","@material/rtl":"11.0.0-canary.606e767ef.0","@material/shape":"11.0.0-canary.606e767ef.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/ripple":"11.0.0-canary.606e767ef.0","@material/animation":"11.0.0-canary.606e767ef.0","@material/elevation":"11.0.0-canary.606e767ef.0","@material/typography":"11.0.0-canary.606e767ef.0","@material/touch-target":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.606e767ef.0_1614894380360_0.5888839183201879","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/fab","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f3685860714c4a55b68d1cf390cb335033215bb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":22,"integrity":"sha512-Z4FwJ6A2IdvA7Z/ncZK6+uYrkOFNExOzsZbpIfLGfK51kd6xfBLoMpanKJb1JhDyGLxEsdt7tzvkN5LO3ooHIA==","signatures":[{"sig":"MEYCIQDqlL3BRx6YJ8Hj95RRMQTE6n28eM5XJGe5kaZUaAlYpQIhAPaGmPGEqhz/F9WWp0vJOSQArjU4nNCwMwBzC2NZ13Vv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwe9CRA9TVsSAnZWagAAFy4QAJGc6RTzRcNTyQMtuWWb\nuht4KNdWwiyoMyk+nQHilkynNq5sSVEVytgjzCHBZlVKFushduAzVWXy66xO\nMrqvTgIBe7OmVq9eJOo1/d44Pkvmnej9FrvLfN8UN5x7QhXtXXgshWguZX2V\n+FRNOl/ATJvCKcIZtRl8s21ewK/pHkBQ6Y+p/gHoDbTEJ5CzBhWbfpRsfZwv\nhttUg9I1qahJt32lfHdMKULo11X10zSKRTP7hI/e+yAdutpX7i/CwuCGWZVa\nil6PkNAXDgJGY8Zknc7OI0s4d7ELpqYsXgFaQ/uU4NrY+tMgVrbg+QQYaXY3\nVmTMkswDNDFGXu/ce5VKohl8uvfonDTSq0ZE4TB4nYp+IgNkIN/WPStMoVdY\n/4zo7eTTHEPA3McnLxAmdBLa9RicRL9vj1as86wu8eNePQyLDten4G5ENcgG\nMlCxSXka2wdv0Ansl7Ft6QiqnKNXOa1Yr6RmvetP8GqVEeza0c9w9KhnntE4\nAMIYlpPZn7VjQnOrA4fhecNDwM4lS9DN54kTNsCr3S+2PO8XbdFXubYCJvwx\nwzacXipubzA4CHJ4Jiwvi++NhbC15Qog36BgsbVk22qw1L3rmL+Bg7zEsQ+Z\n1YAJNFzRmErzt+T7krOG/1s0ZKvFJOpQcqwdsazVMAyUgqah69V7BprxkEyF\n2KSv\r\n=Rsga\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77a4dd1a.0","@material/rtl":"11.0.0-canary.f77a4dd1a.0","@material/shape":"11.0.0-canary.f77a4dd1a.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/ripple":"11.0.0-canary.f77a4dd1a.0","@material/animation":"11.0.0-canary.f77a4dd1a.0","@material/elevation":"11.0.0-canary.f77a4dd1a.0","@material/typography":"11.0.0-canary.f77a4dd1a.0","@material/touch-target":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.f77a4dd1a.0_1615005629278_0.15832705345716036","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/fab","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9a7c74a55150c3ce1d2c23489b5164fcf057081","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":22,"integrity":"sha512-/T3sPZdY3Y8AOxswjv/77Vx44ilojtamEQ2HtNfkDNgTWAZCXrO3AkBBhSqdH9ytHfXCUo6exVghvOLzFgQncw==","signatures":[{"sig":"MEYCIQD+dIF7dooIcGZcbDecgfOSetMMiYDBBAktcZSFtGtnygIhAJcVAkV4Z/8B55ilJnOX4woMji8uJmTaX84Wg1DhXJrl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqjdCRA9TVsSAnZWagAArsEP/RmF7MXxAqPh53+CbIbV\n+DBTAgE4UQxCnMMuRllzIwgn4fly5xNxxb8neKsOBmqwGlB5BcyUtlI/avkg\n42W+EAj5LxaUVadvUmlnsSjpdtBGR1zk3UBezYVspr5tsiZdoEuTabdeUsn1\nKVPGeV88whucX9BshdBmhbajiYc2IShKtwzOxpMRybDQZhKcxQJm1ILvZCzh\nv9wSpbkqvsFr5HYHoOd6PSvTXzMrgMscK6WZrzEwSan1j2kRh5HqdVtUgIwZ\ndbsDGm7i+CG101Nbhs14hwv+eZt8hyhyAUUNGI4ADen7ouN1GeHOxBn1LwR7\nj4smdx2Oqi+P0hYOPyna97YqhiqPU7SoWAgTUXMg4qRpwY6vBI16Yzb8Pgeu\ncIo8n3I4q9AwmZc8OYfAwc0x40pRb5KQ5p4Lz0m2D+tVgdH3vDogdfnB+PVi\nD3Wi/kcfIvRQ4ZUUki77hriLZEKKHNEAm49NeIxCCMzyy9f1oh7Q90IOhJzW\n2OqFAKb23z1Z4PN9PrQa8Qszf2j1cLaadHXkQGwKf3tWGjrI+Ib5+MqEudTx\ndDxW0SqqHoeymSCFlTPWpPQwnnVdFarTbBdy1abH9o6Eo4or1rE4Rc1lPfDI\nU8/3YRhRCicB8CcV2blsnV7w08wawMUk+YwbkJAR9fvV2vp9cnVF1RQSsGNy\nxkxG\r\n=ioCp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.2d6ba2c23.0","@material/rtl":"11.0.0-canary.2d6ba2c23.0","@material/shape":"11.0.0-canary.2d6ba2c23.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/ripple":"11.0.0-canary.2d6ba2c23.0","@material/animation":"11.0.0-canary.2d6ba2c23.0","@material/elevation":"11.0.0-canary.2d6ba2c23.0","@material/typography":"11.0.0-canary.2d6ba2c23.0","@material/touch-target":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.2d6ba2c23.0_1615243484640_0.4726948920522209","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/fab","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9168212e88ef68bd16d6bdb421c8c3336f23452","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.7522dcaca.0.tgz","fileCount":22,"integrity":"sha512-rFcDCyMovf9ZIDprFlH/WB7u2kL0aOReD9Ppk1fc4v737Z4wC2cZYAcXUcDqqFiaWBMU0+6+clM7+HjqIR/MBA==","signatures":[{"sig":"MEUCIQDMqpcfMePCD8TzqfOk+s27C5b2EPTFHSyBlGPPtzK1TwIgJ5dfyKT9li7+Jy0OnQLqmTimkmH0sce6wjMvmCh2g/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsEYCRA9TVsSAnZWagAAQnsP/122n5jBIqbI/m4Z5nEa\n2AMO/J0tCDrXXV2rio9cWkWgTGrzN9WMFGlvl0mHlGYmQumoQ3wa3Up/Zm+C\nNTdfswl1hhl83I9Q2b2EfIxEzGpeBWBEVl+TqUckI6iVmK3dTpJw77M4P1sa\nCHF3sKRp3VN9gf7fZs5q2JPcUYHrkpHfsB9XXBV8Vl4ua0uXkY/CDJxRdbS/\nnlZBxC/m+iOXDAbHAHXwNxtTMb1L+kO8B7q9NzK9YpB5UQXkISXsajMF4LZQ\nXhIcBrCsxnrAJC3tBn/2klPaqCNlY3gkZBwwq3mYnodkHR9/f2qLm5zU4Dau\nQC05Uokeupxdnk0EJv2rqj1xqF+meXIddHHzfkX3UULPKKof41/nmxO3nSW5\ndgwkjoP/rNauSDYWTh35DeLSVlZt07StIEHHsgnU9n8EeqrNjRS6/o91mXUV\nmEnQBNJSMrHA2UMF8JWX46Ksh0DeOYyZz9wMH2GQMIXT0bgo1+PXpzg3SmwT\n3zsZG7ZA8h0CLKlYr7XosaEbjKhAM0DQlj0I1/XR8S3foJYZWGAkDhlI4CYy\nMkFeDMRcc+pWCJ2X5GmNActRq6vKWZuiMscQUJXlsnkSxITGfGQnb0GRcZ9u\n/rgzRMKj+j2N5TgcH1rbryHcrn+o1IfJ4cdKe3ojNPvA444AuVxPI7P9aKB7\npDKk\r\n=3i/G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.7522dcaca.0","@material/animation":"11.0.0-canary.7522dcaca.0","@material/elevation":"11.0.0-canary.7522dcaca.0","@material/typography":"11.0.0-canary.7522dcaca.0","@material/touch-target":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.7522dcaca.0_1615249687607_0.12729744789923148","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/fab","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b54443274ef06fd0ff4774e0b6c1bf139ec4680","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.5c0ab7401.0.tgz","fileCount":22,"integrity":"sha512-kgyjRnyCLO2PwWMzCR9GRPybwFbSw3qcQmBO2E6+Oqwt3e/NtdrAML8phSCsQ/PjzZ94BYgiZhvl1S0TsI+5ag==","signatures":[{"sig":"MEQCIHN4ENcBolXiaJdAVAWISzi3Hm5IGB/cdcI3aNnleUAkAiBjJKSOCUlqgvjZ8yku9OgXjXXitiEz6fnPIGV4906OUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/xMCRA9TVsSAnZWagAA3mMP/3NUI/2ClCKcLurcCrVa\n6fLCyajZyBTA3h3j35bLWewWOHR9lGAAbqEL1I5YKHtYmlbEmP3FoFXGb0N+\nWZKhiv2t8yesDX0/7j3AcbCNtTsqcv/4W27thRQJiS6iaJ0/UvJVFnW+NGn5\nFol8C+ngM1tu4x89bwZ4Zb6yJOyIDqYkevZbPwEywbc/4Z4ZlsNFqp4qDVm8\nQ3RNTSXfUPr19RYLM2uSb1LzqNmpG3P3WqASnMhkHgcnnrq5Ykm0T3J6HnLZ\nI0JLzC/SI0MJ8A0591B+bPIUUsgfYJn8pH5IGtX2qAT/09Z5+WW1RCfyHsh6\n4N5R8TWuEaBTb2GO/4TVCCTsseC4lFPwjlCl4mph37yQh0mNk3Y0sBwmAx0f\nmy12G05bqYHCRnBI3xvpBdsahuXWb2s92dBmc2LUwMOghI6X4N+Vw64PAuaK\n/5DqPIv4Oq2jPU6KPfaUijQAZYY68C8nX0Dvk4wMorIiwmoI8bBrROmMKlp7\nai5GG7Ta3ru+Dxwk7moGNnbt28hJl0eIEwuEJFt+6AlH94q7elMliveQ2Lee\nGbw90qHuP2Y7yoJ/7EtlEPTYhWlQcsSDqy2vP6rkLn+DHh6HLc5tFDndC9e2\nB4MzLb6g1dRAs7OxGPKitonyPsrOcNXLlUcwfMAm+f5/o7Gw9rJR60QwqsVt\nNf0X\r\n=BqDz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5c0ab7401.0","@material/rtl":"11.0.0-canary.5c0ab7401.0","@material/shape":"11.0.0-canary.5c0ab7401.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/ripple":"11.0.0-canary.5c0ab7401.0","@material/animation":"11.0.0-canary.5c0ab7401.0","@material/elevation":"11.0.0-canary.5c0ab7401.0","@material/typography":"11.0.0-canary.5c0ab7401.0","@material/touch-target":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.5c0ab7401.0_1615330380194_0.41210288008556906","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/fab","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98421fea1b7bb9dd4d1bf6ae8ba7e6c51cd21e87","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.59010b6dc.0.tgz","fileCount":22,"integrity":"sha512-lBMXWr3vWqoQ6xd2gRvFu72XUK7wnNaipcLY+LU4jdOW5lhM5qKVO97l9tuWHzjG28K+73srhZPcyFbEtTpo+Q==","signatures":[{"sig":"MEUCIDGZPA9OPy2jYpWNxBw0xJf26s97QNaxQd8vh+M2iMwCAiEAjsPa0lC2oKG7ABxOrCjHhMBATyJGZMkA5ujGKUYBbEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPqaCRA9TVsSAnZWagAADB4P/j3fZTvGDsgJGMPPjK0X\nTSbg6/W7YH4DRL6xv0Eqgna6XOoViV45Amgou9HqOmFQMoESVoH8jYa9zSJh\nxEGRgW2gK4YEJjSm96SwM7P+rSnVCSauzcUIyOzR5hZXcMAr/KIxg4tHCeD5\nk0ZAGfxToK1UbsHR9r7R5XTYhct5G492/WOQsG97by2jFnUSQFU7JE6Y8TSN\nqh8JZRSVikkRv2BvD2jkoED7EjQrN9TUO5MTzKrwPojhvg+77neCcjQQ/mXS\nc2FztPI9efdOurAocq6DKkEMTwaNdFEu+d0/wpGtQS1db/WZIokVVqLODOVP\nq2E071geI1Rm9i31T4LIqbautmeiauuD+YwAlaeL6YliBY2QcdvJz73MANEE\nrjd8xVtlrvFDblSR3A2LO5xx+sie+WNBcB/GwK4cqY3AQ4VeVs2VXPQsgf+f\nKKnaDLajeOSSGXAcl+Ey9YeaPB156Ywkykv8YKSslwNnvHTLDZ+oqQYjfMOR\nxcOUb5s4APg5qQouRnSl+CRpujn2XoDSMCquTzL52wXls7XAKJOZf1oFU3KE\nYliYLMeOwfcMQFapVbzkEz+8nGmlvSQfqTyzi6pLJvMMMGrVLSdqCXiYSb3q\nlaJiCoBKpkK6BG8nT4Fmn3DGtLHQ7CRRfB9/xw0nlWrv+5tD+7Iz6Q5urUul\nHEWe\r\n=DONN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.59010b6dc.0","@material/animation":"11.0.0-canary.59010b6dc.0","@material/elevation":"11.0.0-canary.59010b6dc.0","@material/typography":"11.0.0-canary.59010b6dc.0","@material/touch-target":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.59010b6dc.0_1615395481584_0.781724630365076","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/fab","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68d47ace157b18b85734a2632e48f6c6fd06752c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.9e52f5544.0.tgz","fileCount":22,"integrity":"sha512-QwH61AOo+VlgpZYnXXHj9HS5oEdc/2q/sdrQ6O8lrKF2bFZZNZmY714BKwBOJ82kKv0Pg3bDXikvcNWJ6Onfbg==","signatures":[{"sig":"MEUCIGN5ARHgFOdc6qbPlW5uU0mMCYaLeshZwAVVx+0Z0G2iAiEAxQ3b48Pqq4bQUanHqdI6vEJVtc+FyGnJSw3vGI1hfBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVVtCRA9TVsSAnZWagAA9KAP/2fllYj97/qDmZ3f1glb\nML7efZ5HbpRY8ceKorfx7kfiIcYIftkO/AL6OwA9VQMrTr8MOItp15Av31CG\nHptmU//eas3+v0MJrvIddfHWZGXdKFmVH/4bC98bRnJlp4QtdvALpnrssqlc\nT7cw4Mm/+F8rKlpU7/PWetNHUz43hlrEtZ7nxrpRqPwHEXQ2E+JwbIC7GbsO\nHffHWNHAec8D6FtKNEktkYkUbwVLAqj+uj1JK5FXoE0anhT6+7ffonUXAeUJ\nohcSALd5cheNDXVJb/oOOU2wgA/DXSbugU71dvKb8FLcxBGu0xY3z5xm/BHD\nDCNG5eaJUXqFW/1VxlU9EOW8oSho3Dy2j6vA1qwFsDZhgZhtsIcpuHb/Hhag\nj9jY6DL4eFhLUEYTElZ5pdCrihLkPm1u9RjZmdxSlsCiJosxPCtjM0jHH7vY\nzXiBUJuG4Z12L6Awo50ynIZMGcJqjLJRI0VhGg8/hKDqI9DUDzwry3Jc9QQY\nd5kkiUv4Ux8jVCPewuP+OUDxa98q9YrQRJv7BwVzA2K859OD1X4Rv62iS967\n1v1YiIEg2Y+/rDZA4+FUp6YvdiJwU4DbnEyllqY+fYR0aoLneqKydg+MATlk\nxv+BUIjzhr5l8LnmxxaRveJIHmIZ2EhcLYlNd09VhacFCduJF7wLuVxu9n0f\nlxkv\r\n=4Osj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9e52f5544.0","@material/rtl":"11.0.0-canary.9e52f5544.0","@material/shape":"11.0.0-canary.9e52f5544.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/ripple":"11.0.0-canary.9e52f5544.0","@material/animation":"11.0.0-canary.9e52f5544.0","@material/elevation":"11.0.0-canary.9e52f5544.0","@material/typography":"11.0.0-canary.9e52f5544.0","@material/touch-target":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.9e52f5544.0_1615418733296_0.8230225100648889","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/fab","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.a678806f5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01e4cebde56d1e8d4b18ce574da6ea673154a9a6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.a678806f5.0.tgz","fileCount":22,"integrity":"sha512-rMn5r3TrmCjEEYEEFBGPvv5nVcRhGYVKzskFTLiuYt6tsPrlhnLyyllHz8ejGUZQaYZYK4Cz7XPnQhy+rEFGqw==","signatures":[{"sig":"MEUCIBHmN+MWh+90fW5yGwdx4jM0HTTm9gm1I2AUdm2Rbe1AAiEAg0qUVagqIzZPv1ACOsmXc5Eco4uoku62lrpwfQ13Hv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXdjCRA9TVsSAnZWagAA3BEP/RBqtaWN2ZbUM4cBbiKk\nvFlnrW8Kp8YviNy01f69T0kIAWXIvSrMJopQl0hqy9eNPvPeDaZZkTitUnFI\nWirKOWNJH5E1L33uB7a+eqP8BjPhNCeV44VNHtD7olFDczz0pFOZVvIapruG\nlPI7Pee5Eg8Ln2NjyuKAlpCRuuNAu0tnuIPFs4RIpG1oOna8x1T9LaPX8kLZ\nYyJE6IwmzYw+8Wr7XflhpQ2AGNFvETGnABcNI5LVLlSsE4EtlGQP9G9eTop5\ndCYwHj7hcpBvSjYGyB7EQtRXl+gZKtfeSVi0g+5NF22rjmBGZsE+TYGnx1yW\nbk2bA4Q1MfRUfcbhwhYU1knTSXv1PQ+6scVYuVUUdsJF9DZ0MTptsd8u47Dr\nFPwUjgapIfB/wmutolDjMpVidOMNHicDPQx52IwpEvtYStXHP+D3L9IYc1ok\nsGi0V5VivsOOfpuj8LYZulI3tpDqlKlxSCsh1zExhxmMHQGZj0ZuGAlS1uPm\ncfuQnDIaYiQn6Rc5rBACF/T/wejr6gKxoPAd/Z/Nb5/HgPJ4pv+sD+zEhzNK\n51DOInEPzGU64dM5bmy+M4w3WnV4gON9RpX+DBNiBBJBy1eCIjbwA5bqoNNO\nqpn/i9V/pVksycfA0vlRI0zS3OPzDjQPMFL4FjcZ8X5FSUVYIeF794cfM6yp\ngy1X\r\n=7N1q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a678806f5.0","@material/rtl":"11.0.0-canary.a678806f5.0","@material/shape":"11.0.0-canary.a678806f5.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/ripple":"11.0.0-canary.a678806f5.0","@material/animation":"11.0.0-canary.a678806f5.0","@material/elevation":"11.0.0-canary.a678806f5.0","@material/typography":"11.0.0-canary.a678806f5.0","@material/touch-target":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.a678806f5.0_1615427426781_0.5443577343111472","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/fab","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50ac01375817e3276b85fb6266f7dc6457a3cf6f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.b2d22df5b.0.tgz","fileCount":22,"integrity":"sha512-aYXpVTV3DU8u9H5p8gx1Dm7nGI3U/+KNUWOOK2xvWhpUsDkj52qZrhXyjOVz+rNMJ7aps4o204FVHPgRsPVHPQ==","signatures":[{"sig":"MEQCIFkF46o0Vg2dwJN0DotOhnSe20H93VjuC0EFNZ+O/xDNAiBLng/RYSjCXUnGGhRDHCAqkBvP/vtdhhHn5gYdz1sJEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk1ZCRA9TVsSAnZWagAAPKIP/iiDrEyuJE4wBQ2Xvein\nvPtjT7QqmBF8XAx8gEF78RR9qGXmM/XBJa+v42Xwgm6hVA1JJkRgqwXbE5JN\nrasv3qW6zGitRUGU7uIc8Nsmx+CRt/Cy5WfdKM7uYPwJQxOH0wxIUzAwbW26\n4pcoZ9CxCpdhjg4XEavi/GzYai3D+/wpYECHXPxL1GPYQLoOwFj3AQ+g2VeG\ntS7g5WxlVvHLHsBsfmofSdCxXikdVw0Zly3yXPcHGKQsHvzDGKVP+6N+rDMg\nNGLqEPZtZI9GzeKe+RxHBSCpLfVyhJFza1NOgKhxL22Nd3gy07c8UWXLDpZO\npcuTPZx2sdcKpRI+7xhaqrvNojDg0V4fgHTHt7zC94cLtBHMgL86s+HbeIYD\n6sDE6iEDps7ls4z3DcIeM7dRT2LvL6ux6qtnGd0zjqy+iu+qdC492PRT76vo\nMFctE6uUJzNZei1hBTc/NECBScCZoZ6kPlHZ6Mo+bkCu+DaZWMD3fCJIVmey\nEITRRcyRktwEOuelheyR6+Dx9VP69PvCAFDnW4qHkDM8Y+gGOEJKiOkUzhCj\n93bk7QY6pMyFabjeWh0D6j9Ye371KZEqDiOGPfAbs9llYB+buqGvOF0F8C4T\nmjQdv1fot4VtWE3o75H4YQqewfFbIpWaHbM0eIP3x4kGSp/LZQfmSGiiOfEc\nZQKv\r\n=LNzN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2d22df5b.0","@material/rtl":"11.0.0-canary.b2d22df5b.0","@material/shape":"11.0.0-canary.b2d22df5b.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/ripple":"11.0.0-canary.b2d22df5b.0","@material/animation":"11.0.0-canary.b2d22df5b.0","@material/elevation":"11.0.0-canary.b2d22df5b.0","@material/typography":"11.0.0-canary.b2d22df5b.0","@material/touch-target":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.b2d22df5b.0_1615482200613_0.3391356557451477","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/fab","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.81911b707.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03e0b981359ed212b86be13d946a47f971b1d70f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.81911b707.0.tgz","fileCount":22,"integrity":"sha512-Z10474fPjB+MuBlMLKB8ltf5k/xgRQpoz/pN2AGHou7bc5bkwWZPjnnBX3vVXGDUHFs8IZUHX+x9I/TbF50N3w==","signatures":[{"sig":"MEYCIQCZaU+nQSS3H/RJUMPgxsbASylTZHdqXrwNHjcaZbo7cgIhAMlnd1m62CakJ1ZPKIFn+ddyeNlXiNb/9+3hhz2jrxD5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmA5CRA9TVsSAnZWagAAAQoP/RFeIv/JAiDYKXWSIxqq\nx3rM5Cr1uPya85KiPoRSQmEr7XL6hxKj/kuPQeXldlKgVplLmmZPXK6JFv01\nSE1AqNQB3h5JIPFDbvWu62wmB1ARkTTBxUgv/t5sAI+cWgvIQKJq343kDdcD\n2Jrc6YnNtP+3ewyjKFDdEL26g1r4apGerGXolXtaMIUA9QZTMCllU4W47ysD\n5L4kkBj/QkJLt6+fod/mhLI/uI2ZuEYmXdztn9xC6cxByMHgOyFKW2nN3oA1\nCLJo3nJmlXoP3BYvx1vVsH3PgT2rSOkRpYv3dfs8GVJk8MTRTOn2J5O5Vns+\nLL4KYBdLpu07WScTCushCIZFgJIViS9qfqUEeHtWhiGqKeIQmzfFVeBCrAbh\nzwd0q0dUjaWbwuCBmQ+jBEtP7poROsoytbL8fgvPBkWVymTUMqNTTzVyV5H0\nfHow1p0UJMYAVeDP2WEk/NiaBP5pe72T3iDJQK1J0EBSEppn/c/AWSE48c3k\n4PItujF0W0lSNx9cLENlz0jgXeXpGMUpLEecbrjs4NIJU9JO0VPLtuRLYKp1\nam/E14vP02wIU/4jF3GXLgUX6tYfd6WQCWDuWmAdQfmgiMaImIr4jtNrQqPe\nu9PaexAhdOciPMwAiPjRs2+QKoNZRwBpWZC6QknlL43I6TZlV8j1CUOrYci0\n0Juf\r\n=eFiz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.81911b707.0","@material/rtl":"11.0.0-canary.81911b707.0","@material/shape":"11.0.0-canary.81911b707.0","@material/theme":"11.0.0-canary.81911b707.0","@material/ripple":"11.0.0-canary.81911b707.0","@material/animation":"11.0.0-canary.81911b707.0","@material/elevation":"11.0.0-canary.81911b707.0","@material/typography":"11.0.0-canary.81911b707.0","@material/touch-target":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.81911b707.0_1615487032553_0.1293653992410826","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/fab","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94fe1234e9816e805fe50b6ea3df9ad935dcc5ba","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.9eeb35c38.0.tgz","fileCount":22,"integrity":"sha512-FMZm1jSDEba1ioA72OoDHL83oYyGq+APUnIsVQZ+W4MNcPx1y7SmCsrUshaQXjClQnWYtPk0feYoZNPt7UFadw==","signatures":[{"sig":"MEQCICr26Dv2ZAMKDnCa2aZkbyqec1yVb6wM3+gas5QFvdcFAiB2o6C0ZJV78s6cmNezC7DOA5/ENmM8hB1h/3CClAAPKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnF2CRA9TVsSAnZWagAA5bUQAJVV3hdiGSNIfwJG2iJw\nym9k5PlxJaZehqxftaUU3gvdLejZI33TMMpNWdPWF7Rr58eiA+sUC7R90ub7\nGspv64fqDUqVUKNwNtX2sDPMLWOWgUFhd7m8rH957taLfiB2QKqBWyVCxeH2\nEv1mTtnvohnGcZIpEV4SepsmhJSb3NK9vbeenyMMUHFfHNQXluEY/xjYnAXu\n8DqVRlE8ujr/Ibf2vYypVkki0qe9NgRC1hah3dRanUbs4Qfzr24bCK8btSV/\nVAibc1d6TOiZrFvn/CIAi7K8lijSXjwI71TzsasFmERK6u3NIe6798qG2BYX\nvPzjgqedlro0zJbQdiwq46IF8mGhekj5niDoOWLwFKlsLyk3BBUScdfQozhw\nlppvgq5zdhZ5bV1Rw5//TCQEqe6BV1M8tS5PWhf80N3lth8O0fqR+GELhaoU\naGhBYGlLSWzZhMbaibvnqUa/xeD5SrUYytdklJe65IlAnKaYkAk+bqpNuE8B\npp4S9Ne9npP8FjHKth4NziQ2bMNOR0Yytgx2wlk6DXE6kgtf7dJUCsE9hQTL\nJmADwkC17Nf0P6+6Uhz8U/3xoh8AibznjWT/wElhNI7sPQ4bDRTh0FDbfQNY\nKGZSdx2JvkURJd4WnmEhJcwd35DPQT8i+cs4u99dm1NqaNzZ9r4ngCYjsI8i\nx/dl\r\n=977U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9eeb35c38.0","@material/rtl":"11.0.0-canary.9eeb35c38.0","@material/shape":"11.0.0-canary.9eeb35c38.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/ripple":"11.0.0-canary.9eeb35c38.0","@material/animation":"11.0.0-canary.9eeb35c38.0","@material/elevation":"11.0.0-canary.9eeb35c38.0","@material/typography":"11.0.0-canary.9eeb35c38.0","@material/touch-target":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.9eeb35c38.0_1615491445835_0.224014818202799","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/fab","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f90372b054105d7eb63ce46d1b77f4d527da60a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.12be3e95a.0.tgz","fileCount":22,"integrity":"sha512-T7F1bFfv66biR2C4ug5lmAYpFJM3R9QQFazXw+ZDloCe/I6dqaiBmj70QaWfP6cIxfSCRtARwx1HHkkhhPozgQ==","signatures":[{"sig":"MEYCIQD9ovUNcl3BOtDZvW+Jn2EzCO+UIN+M1y4XoK5xd3pxSQIhAKdqSsuxXjb4aUsBtYwxBNdPsu7j6GTOw6XyGPahklhC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnc6CRA9TVsSAnZWagAAjRsP/jIuaAjNR2ozBJjdVXm2\nFT5PtF+/KeZ5cP8/bXfBuIKUbzKUEzyW7+N5nnLkIjIqiZonTsF0F1YnsZdM\ngH/YsdzhK1BcFrjAOAZRBuhx7HDZtt+HAZcDHQfOpsSO4T2NHGqO1neOT2bh\n2mySoPV7BrOjW/031fYVQ/TLesJgPGAFQ3x+FQf6aote1npKY6pmBtHTYO0B\nw1YWcNU5H7jawcqydCtaUTFIAD/uWENUuJJrf3j44VhWSih4kklPmMvr+Wqk\n2F4h5vdycJETJILl8Pje59jz/LLVfQCOnLEeeeGz6XKTOCqlwKYz/eupZJRw\ncgzm6HRVW8lRuGgPI/vP/ugUtWUZM+PiuqgGAevof2cqvJXME1m+Kl6Dek7C\nxb2x3fTF9eWdfmdbovmlMX7Essj6EGuf1dyobLvSgHza3U1F//g3YHe+hbcv\n/gVNF2b2flujT7Vo7MbgK8RWnfdkscj7UWWK4p+s4zE+vf4a0g/+aUUGHc1M\n0xlZ3UW+HWi7k81tIdgKy2mCSOCrlmdoySpTnOi57sVbcqNhGpY8gYwMj5Aw\nKCSmx6UcM/13bNd7AgRbYCYsg4LZnRpBtEcwpAueC/lTYCqdT2P4zZulbIgz\nYaRNBskOqR9lhu4Gj1/KL7bJEyk7qVshCUUlIMsTroYqf4G7oYkjGTlAp5Ah\nItGk\r\n=HikO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.12be3e95a.0","@material/rtl":"11.0.0-canary.12be3e95a.0","@material/shape":"11.0.0-canary.12be3e95a.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/ripple":"11.0.0-canary.12be3e95a.0","@material/animation":"11.0.0-canary.12be3e95a.0","@material/elevation":"11.0.0-canary.12be3e95a.0","@material/typography":"11.0.0-canary.12be3e95a.0","@material/touch-target":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.12be3e95a.0_1615492921687_0.21060165159936473","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/fab","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1aaa3b27a2ef8702b50e4f66f18e8f126c9ed7b6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.e683bdf4a.0.tgz","fileCount":22,"integrity":"sha512-dBPKDZeB4AFQMRLCIdfsNZxTQkpbRyi5BzYwa/Pp05K45jJZyMLwgRI+ndqpN/3iE2tcZa8uPecX7tXy8PafVw==","signatures":[{"sig":"MEUCIQD0vg7QUgBaxEt/iv3l5lfBCo26uEhBHF3Dlorr9qh4YgIgX2iHrSCdkJr7qjx0Ob2xvAbLqu1zNyoycIIsa1V7ZG4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnj6CRA9TVsSAnZWagAAkOcP/0iT1zV8HDbUr8YJ9a22\no06e0d4jL1PY6PYWc26RYiMwxeXK94T22zu8U3Jy4VRcStC7EziMlZgTnMKr\nR7taBfaiu8Kw38W7s0IiI0lB/oP53QPFzXTuMtc/1DzLEDRje8XWjB7gn4C5\nwXx6lT+tkKV2O6R9ZmKKVy0UiV28e0sdNOtlyLjz2zbb8GQ7YBzUJHMKo0aV\n+WvT0fo5SZmlWh3vuwMTry9V7X7bPxO+t4mUWG0yp/DpcxX6FjxwwMxP5EM2\ncVZciLoqM9pp6MT9x1reWKKkNc6zDLESEorj7lGtzvcBYGDGBletZ8PsIKJQ\nIODYzZX4x7zm8TZMx0rjc+mI4buOKh3eOBiFDlPd+eybAB/JgaNRXyxs2y0x\nv5cvAtDbOF6AV6BMTDo38C4IRVgwD1HT3feKk3go4/+f9ZRuIy1KCOfILfQW\n87E55g1vphQUx8pRkYzZHdyg4Z+tE7O29pVi68Uot48S3UfxiQARfYzZjNhE\noh0ixKORLmpriUI9MSp/qhdf0ABlEXFC4ZfjpXBftlZGo1t+7rtKqRQ1aWrd\nx85uqRD4Gb9UpxHrHYe3j8oTdFO8rdTXDdP79pS9FKXB70tftopy+1F5Tpgz\nW1L5HDqhlgFvnSaPO5940fhV/Iqc3D0ndvbdmqGccuLt+7ODuY3MnZNjUCKT\nOceu\r\n=ShTK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e683bdf4a.0","@material/rtl":"11.0.0-canary.e683bdf4a.0","@material/shape":"11.0.0-canary.e683bdf4a.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/ripple":"11.0.0-canary.e683bdf4a.0","@material/animation":"11.0.0-canary.e683bdf4a.0","@material/elevation":"11.0.0-canary.e683bdf4a.0","@material/typography":"11.0.0-canary.e683bdf4a.0","@material/touch-target":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.e683bdf4a.0_1615493370240_0.8303974436794197","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/fab","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5257ae6df385a67170a3ff98e616f6e5c1de40bb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.a07b6d486.0.tgz","fileCount":22,"integrity":"sha512-lah4VGi8ArVhET9PaX2dgGIWPt3VOMtOadUHgGAsA/nKUYUXebKfQF+g6sk6gzkwq9S5bjB7TA5XmaDEEs3BoQ==","signatures":[{"sig":"MEQCIH8JsnDFRFmTI9KXB9Orc0xSbWYHF3xpHKphd8/NTym7AiBq+tKhlApBHWbwupbhbthEBvEc4vDi84mQD7I0b3rDzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn6tCRA9TVsSAnZWagAAiZ0P/0gFYbnqLJefmWSIIc/j\nareqDfpvpy5AV8hG7obLvtZPqCqB9dvJQPqIEb0ysIq3WrSHPmfUEHIh4hkx\n3RxqG8JKAQSjG8htEJMTHDL1djwe0x0vCixhDr+Q4uyJVTM0Y/aJrSA30s5f\nqNotvPP5x2vb4CzvtAyYSxGaSjs0RsEWuXAzKjKyfb8g89BDmvjNi7FapSxt\nbRpEWHoRz5ZDWiIvjbwRDBfs4rB4bBv2XBxqjNTtlHKnrYX7+uV6TGDqch1K\n1mNNSiI6StgMNyctSbSE6a+wLqb5WjWGlALJbCZcMbqBZc4NEQKkluBHo8ur\ntE3i0cARaIbTLoNLSKPUUAqubbyEtH6a2a0WmkZaP68hwH8igEdmEcwaL8BF\noCVfjp3x8UItbMU2N6/MyXMgstesUnqERJXC23ePeKE1KsqAPDJSrPIU9H+W\nUxNbRhhNtBMRsOK9HQhoQM29oZvZlTFp4LDVotGNVAfvThcvcJ/wTSo83FKZ\nrHU/PCidUoqoFFHZV8N9nJU9bGJHz2hQnnm2Rm3b9iKcqcP5GKWFJSKQ+nq4\nPR0qIJzw6ohpG5qKmf5giPhVJVLRnoQKN2KYzp6x1qaLcvIRLX1K3oXfAfYu\nXlVx4M3PEjI+7rk6JIlPfT8GapTwyr/Wr0DwwElaa6uZhAtbT1wUINtrZgzs\nImOe\r\n=2uOP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a07b6d486.0","@material/rtl":"11.0.0-canary.a07b6d486.0","@material/shape":"11.0.0-canary.a07b6d486.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/ripple":"11.0.0-canary.a07b6d486.0","@material/animation":"11.0.0-canary.a07b6d486.0","@material/elevation":"11.0.0-canary.a07b6d486.0","@material/typography":"11.0.0-canary.a07b6d486.0","@material/touch-target":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.a07b6d486.0_1615494829032_0.3965035124519045","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/fab","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.1e0653477.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"153d787ae108787fc7f05a4508846f92b88f1d12","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.1e0653477.0.tgz","fileCount":22,"integrity":"sha512-nZHMj4Lew8mIOSaKYUSDTFAO/iIsE9Wlths+C4eC4cvaJbFUTqaEB5g5j3xLnPUdFBiNd6Eg2nthkJ+ZCsEY0A==","signatures":[{"sig":"MEQCID1OPASZS7RT4KxDoJ6S7WrIeS2qLzDWmXZcYrxU9RgiAiBDltD0uddGSlz5idDxVTufptv0RGstemlNgRHdxvHrEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoBfCRA9TVsSAnZWagAAtQUQAJpwgu39E7igIcS/4Mza\nqfIchLbceb4tzG8NQ70/Dravw9bemgMQw1sZt+44tcCEBnYsUSwbmSHtNeEA\ncOFP/WFosNCpMBZ56u3U8zSksLsVNdt/Vh4OSTNZD32Pw/ftrcOfYquubeMO\nageCH+O/OptMFW4ey5OSWG8J9Uznqhy9xPDO5eMf4TzJQUtfX2xJ2l56Q/2W\n+o9o0cWx3MMUIxlXXIx3Uw30O3Xw1cxYMFkDQXZ/MPNgfFEzc4VNg07Aq8dc\nWusuGOUaKy20tVXgf/gMQ2sS9xgSQBrFfVt+Brh/NTVp7W5NCDvzu/E4e8yI\nM/C2rrzBeXqkrWglMkvdOA3Yh7OKc5P6/K7I0khprrSJJT9sFG/+EW1uT2Il\nQYGSrGTFjASIv2V0a5OkuyKap5DmhNy1vbOrBYxfYiWacuogMFcQIy4xUkcJ\nwG3zaMVNyJKKmZnVTB5iboe0lu/Tn3NGBOyac7zBN4P8/QKot21PI/9lvF+Q\nyNkYCFnYgW+yK0+8d1/bT0dxxZj+GF3WAV8o+3Btni2IeQAtdaqRVpsextpJ\nzGijXGHlT4GyHD5Xf6TeGHEfy52sgmaQ8JBX7Fqq0PUkuf6gEomB+D6Lm1+k\nO6+8bDRd7WLhNv2UxR1gOe1acT/pPSAFu3NGmo1oisueGti75xJWyi3Av8pU\n0ami\r\n=s6wi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.1e0653477.0","@material/animation":"11.0.0-canary.1e0653477.0","@material/elevation":"11.0.0-canary.1e0653477.0","@material/typography":"11.0.0-canary.1e0653477.0","@material/touch-target":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.1e0653477.0_1615495263004_0.7340605255076169","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/fab","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0010bce657773466a28979891d8f743d7cf0a49","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.148e8cfcc.0.tgz","fileCount":22,"integrity":"sha512-wHsogUGcZiR5ZGYC024ZHfDR72/ilAYg8rjBfmUDV5g5oy9pAKdF3Qwhwk1k9BCNZ08JKSQX8BfZxuwY/DXpdg==","signatures":[{"sig":"MEYCIQCP0a9NWWvK/oakX0DMflD3p/k5VqNxtH1jZqybbJPtWwIhAOCcAQE7hVnfIHp3AgIgplQeTw6CXMMyA5nhc0laZK6/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp1lCRA9TVsSAnZWagAA3msQAIAzw4TGGhsM+JPdtThE\nQawUi19DN6DdBKPffPaYAES0GNRR/OiX6wL7NSkxdPwUn+/OfEECFIP3pikm\nJre2MRpQOzf10qYSt70SVmvNbbndmoNDw0/aNYxCKS2itab3ayYlu8QpgkYb\n5mGRaNxWN4tPa6/c1tnSXPZn5eAj5APXzWeYql/uSNhp7M+8Eyw/GVkr2TkS\ndxPgH68RsHuLErmfSS6EtzUD1hTOUDQw+khbitQKoRM8IPYQY/GOY0hfQUua\niqREnz2fmfJQDc+Mv3cxPxl0/JYT1X/7zEp9fmpd7uPeulWBYD5RqgdljYSq\ncSV4TUYnDPNZHkmvJyq7qg2nfI+iHp5p8HAzd/W7xwcTTVZomMDVVVaSuNUb\ndWHuuMopve2enRNUFgq3BMcvJBEXRarNXDydR6W12UaqJrtXPbO1bXTUabOX\nPVsjgiBTiolcmzcbNSfqb3fUTcUPj9oWQ75DxL1rLxdqBPF+IzODt8pEiiUx\nCl5UBcAydzf0vS9tAOnYiRXUwFHN9HUgDSiXc3QsURKJ37fRV6MtJD6X3U86\nfTfRJ6YNMKxhRwOxOYIBGAuO7jjkJ5OEjpqhgbR06vkAsYAx+S4U0NY9Il3V\nlnabpH95onEgQluSrCugXkYQgWnPPuS3wZwkq7/n8aFRcByMsMVN2cRN22ZA\nQoda\r\n=hZRW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.148e8cfcc.0","@material/rtl":"11.0.0-canary.148e8cfcc.0","@material/shape":"11.0.0-canary.148e8cfcc.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/ripple":"11.0.0-canary.148e8cfcc.0","@material/animation":"11.0.0-canary.148e8cfcc.0","@material/elevation":"11.0.0-canary.148e8cfcc.0","@material/typography":"11.0.0-canary.148e8cfcc.0","@material/touch-target":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.148e8cfcc.0_1615502693342_0.44629978288309746","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/fab","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.73a227194.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be48d0204a6cadb88e401c1171b4f9bdebf723f6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.73a227194.0.tgz","fileCount":22,"integrity":"sha512-kFIu+UQ19zVt3p0plsfCwoCLtoLuDezsK+0AJLzQkDva118IYUaptcriOVmTJsEY4vqDzHGzCMkazJFSOb2Qag==","signatures":[{"sig":"MEQCICEV/urgZf+fs1PDs+CRUO3Hr1RUqJHXIFnOOzXrCAHnAiAZl2BO3msG0TPaSc7KZaVwLWDMGOqqz/roms81kQnf3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrTJCRA9TVsSAnZWagAAYkEP/1KPwLqD4b42sYpDTe2v\nBhCuUGRCMyi1XgahpzePTzZQ7vKYxqw1GU6Rbvn3zZ9ZzY52FpqEAhNaS33N\ndX0nyUnPwLxcDsDnAM1OBO+nMGX08o4JPM5Xg8DWIOSY8ztz4lyCh7EsX6jd\nbf9/T12JBxfZ/GGuqCTJDaOojtaL8R7sRdtOSWRs4p89daB5Hmp+qKWMACkD\nXvB45ASmTZinmFHezdEyVlr+xdE8bRfkrHxMxlGig5kmJgF5xMREwS45sfMa\nWJngllMLza6vEOuj+UG4rxuIEMLZ+0rzoU8iH8ATt9XlsLlO1EoKe9LL8uA7\n2HRGQjr9dQMZwBGfg6rhPlvcV56RdVxs3eDiitDYaVf6igcxlgKoj0T+KHXb\n+bxE1zL44QmRnA4aEj/+neT6cCwZgDdWUPx1LDFw+OlE2sxLiq/WLdBNuVAq\nvewKVzCBia7wCaCIeoz1QRrSnDz18zm5qL6QleaGyWtLhB7AStvOcfGxbHX5\nXwrsc8gULQ9bZjXkTDYaT3cRpAyALSrFqT7SOWRbhX7TgQ6KDzNGzJXqKQHQ\nyGuW8++NiM46V0NJ9g9gg9QeiOoYuFAZ6kHNfAp3n/rYzdjyPGHw+rJx2Y9Y\nyvrmZ9ZyTiy9lBchVR6/EFiKAvPt10JYI9CubfT42RTPRzza+MjwfAQtkodH\n7zem\r\n=f9yS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.73a227194.0","@material/animation":"11.0.0-canary.73a227194.0","@material/elevation":"11.0.0-canary.73a227194.0","@material/typography":"11.0.0-canary.73a227194.0","@material/touch-target":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.73a227194.0_1615508680623_0.6247622223978757","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/fab","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d97a17f45e5c0e81fc7464a9bdb3b32aa77f485f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.f8579b7ea.0.tgz","fileCount":22,"integrity":"sha512-fncVGeyr5nWg9DZrdyb2ZmLN3iumxu2eOHzvGHSO5QLvzYXP5QWjIFJGxhjVFjN4CUa1fmiQwSv0plB4x3POpQ==","signatures":[{"sig":"MEUCIHIYlB7Xq+t26PcTU1W0WiGhJpT3ojZOTU2kScUGnEhiAiEAsuNS+EJg/L6nrMJioQ3DDbzE+L6NR55q9w3Vhp2R/jY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB17CRA9TVsSAnZWagAA9HgP/RhcZMh/ORTzZ10mgHST\nDi4ik1L0NoSz4ERe71sLqz6C5Ysmwmbt5mo5zprZYnkor9s1m5WEJMNH3Ims\n1MnNkznoa7Uq6KMqkXfN8517bi394KgRe260KkJwIyWiEpzrnB2s21RuUZRE\nZP45rwCfhMFz1BbF6oB2re8Jc11Kc5abxjiz1KXT56NZMSyH/8pT2sVG0TMq\n8jmw3tRP6RgPCioHpBG1lzzgqWbTMJ/46ckLjUn+LHtpNwF+LLap/LGwH4Fz\n4eUUAZlLWvcRtIlXs2c3gy7YjsU73G7DMy1V1k5nCbKzgSGFiEGC0DYS8B76\nO0qGybtLWkOLNaaFuHrtlm1mRjQbCFDwTuXTpvXp15xb38Yg/4Lexo87zaRz\nNwFiHRXao2YYaFI1z//l0RSsZBZKW+tSWk8DTKdjrRhn+B5OxQInh+YbW5+Z\nujeLkoT1ANEWu6k3lcAOr3Xdml2snM6CJBUEMMvNtuMp5p1J8+szVPoMA0hw\n4Ud3IBMJOfij1DPNHDsyIyOGjZykvH5Jt2lhBvcwqqEI0n02SdHOUEF5hby2\nd2+m1SZfyNa3Xp2/lXtqt7hb9H26bR6pG642R+kfjRyEBdO6YC8p4LJHVwR9\nNX6Rp+AqMHA/aker9bInqmDo7lWX+jefhN3FtLMp8Ncn/WlM8LQuy4BF3O9c\nviyI\r\n=O0pI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f8579b7ea.0","@material/rtl":"11.0.0-canary.f8579b7ea.0","@material/shape":"11.0.0-canary.f8579b7ea.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/ripple":"11.0.0-canary.f8579b7ea.0","@material/animation":"11.0.0-canary.f8579b7ea.0","@material/elevation":"11.0.0-canary.f8579b7ea.0","@material/typography":"11.0.0-canary.f8579b7ea.0","@material/touch-target":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.f8579b7ea.0_1615601019391_0.6408232333894452","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/fab","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e36a9f6a7fa04c51a52e9d5a39a9d4086a22167","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.d2a39d300.0.tgz","fileCount":22,"integrity":"sha512-6eFoLazfKzZLVoJHOH6xiRVTek1pccigPcic0O/0eIt8ujIdpqY4OZiavWERukhqspYPPkmzdyph4NslxbJ1bA==","signatures":[{"sig":"MEQCIDmF1Xb1bAf3Em5PUPUI8wvDxDkqZnlqlwls2lNPacKbAiBEsEluqmlB+ojZdxDuFGXj+jDVl9JMz5fX4aaU4qXXTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/1bCRA9TVsSAnZWagAAhQQP+wYGxr/GpOFdh31F8vdl\njP8eInmEssctLbp5BC+OkrR5Pk9vVp9mHp41XGBSn0jX6fwjHbayaO9b3Pab\no3S1iHrnxl/jjKWCWoSFARODxMDgeNU/fnlHVzZLbAoNJB6cGrs9P/gF9Vd8\ngB2eB28COcS27UmLaf7BT9gEjp90mrnC7iqGo1fbXCdJsuYUkKzm06wXBdTt\nVIYC067Jy3K59d4xUcyAofic1adU6CI+1xikjqy/oCHILiqfhIpxisI5hYcY\nEfGHITqHSw3z8xxDjYtlbyow5yuR3A48IH2dTKK98akUrmecXlvgs0cMSd95\nc8+TweHTHeUStsAn3mqv8w5lBiTmG2gMFdj/ssiNmx9eFoeEfgMdsDI75p7T\njj/Kdy8xF5iNEdebJkwKeXLSFhvORB4+ds0FtAlnIS+s1INcl488KBz7c5Zk\n0DQIHug4q3qbKrD9BpsUpBFW1VqHgtcijS8dmOMIEEWK40/6h1HJpHdfmk0+\nmbiDr+Hx4U/T6xEW4D+R8z0lzel6AsiK41uT9KwqUGX28ghPzt/QvttM9dZi\n9Y4jQtzb+lYMfpo+PIMO2k8wF8RrJG5+EIpZoy5PrtWHm/j82SS6A8Z0PILW\n769LE5UvoYz4n1NmxcHVjp2NVZU5etkSaxORggD2v/kgO6FS+pRMAJG7Y5kX\n41RL\r\n=eViK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d2a39d300.0","@material/rtl":"11.0.0-canary.d2a39d300.0","@material/shape":"11.0.0-canary.d2a39d300.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/ripple":"11.0.0-canary.d2a39d300.0","@material/animation":"11.0.0-canary.d2a39d300.0","@material/elevation":"11.0.0-canary.d2a39d300.0","@material/typography":"11.0.0-canary.d2a39d300.0","@material/touch-target":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.d2a39d300.0_1615854938534_0.16144901394611333","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/fab","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68c1068160f2c6396c24a7afab16ca88b3106f47","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.7cf67823e.0.tgz","fileCount":22,"integrity":"sha512-HEQzuHzaLmDKiwRoz56gBX7zEH2yWiHXgZ5GgPIfzUWhJ9tDZONLuDz6/Uh8guUOCtYHBRmOE+ONcyLLBYRtIQ==","signatures":[{"sig":"MEYCIQDVEHCq6x6TgmcAtzTkgUqoQkXgKCvNlkYeSue1DpI+zQIhAOR5aM0qtVIvMzXSo2ZzeTGhYmkXg06zkJpSjjkmSBSn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPb2CRA9TVsSAnZWagAA90QP/35VdGN6z1btZ1yMbduE\nDMO2ZKIbnSCYbfBOjMDwBadRGiGEX6HIgDS9+ZozX0hO7kKvhIWgP3MlibzR\noR3kdpaTzc7++hmJMjaXioUZH0SxhMUwD+H/m7Yj8fc5u3pC3zl05Z1lxChF\nC2ezRQAsp/QiK6VBmPV4kp2lqONQc2rgZ9Grnoywhhnt33pxjAi1C8Hm3MOk\ntY3oQMEhvpBNY9kFDuopM+OmjJga1bHhbT/4BH8qVohHqvH5EL450fqHXW71\ni9Gnb4xbjHqO3AiimJHGD8RGLXyUe454cqVFCc7VFhl61FPG8krEbY8nW2CD\nc+cVVJiYOGufYLAgDY4nqxogNt+bXzVN/6VxRmxEYswGC96U6QN++l0+ZBE6\nI9OfsdvI/u/D+1tr15tvvAUvUiU4qvCb2fcOeRwwyrQgpY/yk5aDF1saeujx\nJAOiXOPxCnLHWiWtceASxBoWplD/xtiEZ22RYX5qSAT6IGYYtO/3lAa2Wsyo\ngA/sJ/NwQLqJtKiNrBzY/iWyjHsWxez6gkP6OFXcDNmZ3Yd29B+jj+NaYHX9\naOsgPOX33nu2kvETgMapT6olVA3h3eF3DFJEEra4/JmH7kF/tXjOu422itLa\nSpuT+O/j0Z3KWCMLa+H45xur/dqqDeiNJRpE5qmL53kbk+UP1NXsydiE2mIP\nTzOF\r\n=GYDn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7cf67823e.0","@material/rtl":"11.0.0-canary.7cf67823e.0","@material/shape":"11.0.0-canary.7cf67823e.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/ripple":"11.0.0-canary.7cf67823e.0","@material/animation":"11.0.0-canary.7cf67823e.0","@material/elevation":"11.0.0-canary.7cf67823e.0","@material/typography":"11.0.0-canary.7cf67823e.0","@material/touch-target":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.7cf67823e.0_1615918838400_0.5480034681395569","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/fab","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.67d780c79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6ee13e9be6c1ebc0eb4c96ac05a96fe4157eb95","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.67d780c79.0.tgz","fileCount":22,"integrity":"sha512-xsFRPkLs6Jr+pRdh9O2Amawl8VCFb5ifWA9FeU02Rt1WYkVgon4DJBN5c73uajqgjoC5q27TqY+EAEgFbG7Ykg==","signatures":[{"sig":"MEQCIAu8kviYmCCsddlLxriM59JUTRXbNjvmR1pnTBkJoxPbAiBq1VNLCOvWfIvC1nH6Bw0XjEeohbz6UGeoVdg00mEg5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQuHCRA9TVsSAnZWagAAAQIQAKLEaYQ7oK51kiplxXuI\nFmfHgt72XriTKZZpmMKzTYQ7Nj8tUXQzbIPrNVoHI/w+CevZyLdNTbTblXxK\nM/glxxtXXJ11Fz78O9eb6HXbFCuP/6+nfbJACFEj/htP3GeYMuHuprCpuuzw\nnLEb26AUYxRjrsGlgtQOXL8jbEvp9oRXdsO5yljSbChS7NCMsG/v4ZS398F1\neDuIRf7D8m5uRyXim2cqUtPbcH/D6Hd3zvBL10AlwiZKGGbdhTKgIJwiWmXC\nJYwCBClY0dBTWzYRvoH0hsAM08O4A6kFw69Onh2y/ePTPcU07gUUWbpIwegB\nI9HFnjQJ9uXP8/hM7QqQPl5oNFdu1vWw+d8FuJQMHnkJqLcxYLUd0uhcaRZW\netbFbrrMMfHQbFFLp+/dcp+3VNgcnQtTp/EYVGS9+hKimegytJn+FSWSxBhQ\nXkjHYCE1vVTyFeTFbP9aakSB5WY9ZJnTY25qLh6j0q0FjxCZVpjkc0YNu80R\nlacVB5O7tvFgqS02ejAgLS9nmrWyBFRzHmNta8DFGA8MPXG/pkRaXNa83a36\nTSQq3vjA2SJxaVMuN2yq+re3nO2a5P0Lk4xNVyj4xNjJrHOxvFyyfZH0EzZo\nN/CGuutY9JTEkqDNusXVyBTqaoIztLzmkUbVOzv1Jo/NpCuPZtou45i0hoVn\nwdpP\r\n=QEMU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67d780c79.0","@material/rtl":"11.0.0-canary.67d780c79.0","@material/shape":"11.0.0-canary.67d780c79.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/ripple":"11.0.0-canary.67d780c79.0","@material/animation":"11.0.0-canary.67d780c79.0","@material/elevation":"11.0.0-canary.67d780c79.0","@material/typography":"11.0.0-canary.67d780c79.0","@material/touch-target":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.67d780c79.0_1615924102533_0.86026192675947","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/fab","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"171a737629c7e23328aef9d59ee3da6bef3950b1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.0f358ddae.0.tgz","fileCount":22,"integrity":"sha512-dwenv6K9BLQPoplvZ0/EiweAyqYsB5DguoImRwnrRzw/NWP9OEOmaJ5H6TIBN3Ji6z7GW+GwBXSFBxiptNrtTQ==","signatures":[{"sig":"MEQCIAZjA8SsBFLLzq59llXQZRFxJgmjGu2PSBw2QRSJRkVIAiBvJ8oQXzsWU0nbmWuy/dss83NgSA/zykiWcWWbUVswWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS1pCRA9TVsSAnZWagAAqDYP/A6yPosGO5p6k8MsEAO1\nFdTWAGmI9KxlAGIv5wOUjXFvhM8QDf+96gknicuBirHVpVkJ+cf163ZALwDp\ndhqZXTTspX6tFhpRGlBmapHuX6ge5JiWVuQ9OL9dGrs6w4GXXVfrZ8Y3JAHg\nhqHYllscz4QJDAaWpbMgsDbyKSg3pyFfq0TltPistUXjpIj8FLkef/4yIl7c\nrEF8uLa30sdi5L2D+SPG6YmtNizklh4N9+7Et9EWuo2o1KK5+w9LJAizUaDX\nk9nudXhg1siUIU2EJ3Gf9WfdrGn6PeRywYpgDpWNki/Xn1CBVyCJ8P45axr1\nM646wRLDhPkjkfKbCS0w1mq1tQWZaB0IG4n9MYawA0CkHI8HYjnOJ0n/bOaF\nOnnyqe7nhJHia/U2rk6cxQBeXlyQgEva1RdF64fa3hx0pBc/BGmFTg+psEP+\nkYThXAvKKqnXn1uCSeVsaugq6c7GZ/hFDhdC8ZmS/pHzRgt6tfJQ/WhkaISR\nFve+z8x8uLpkCPiTaHA1wdJylQC64yTbTQvP7rJHOBCMx7oL9JsBxeNRDzOG\nRTIfXOLWi9gmzZvjYg1QjWCSd9dbwxq/bf+Fj9VVNVtylZLtIlQgkLGnC1Kl\nBMS36qXXINeP0l3hoxPwcKp5SvZWdQykGyznAlAeyy9JugtjgHWjoxQ2J5fG\nEvID\r\n=dIjD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0f358ddae.0","@material/rtl":"11.0.0-canary.0f358ddae.0","@material/shape":"11.0.0-canary.0f358ddae.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/ripple":"11.0.0-canary.0f358ddae.0","@material/animation":"11.0.0-canary.0f358ddae.0","@material/elevation":"11.0.0-canary.0f358ddae.0","@material/typography":"11.0.0-canary.0f358ddae.0","@material/touch-target":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.0f358ddae.0_1615932777268_0.4223035614638837","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/fab","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cda05f1c974bb8398f11ae430ce27214ba0ec045","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.67eb0df80.0.tgz","fileCount":22,"integrity":"sha512-S9x14UVYW8LS5KV8aN+SnrR8kpjhq+bU4U3Cflr8cfK1cmEhChP4XITsKAz7upse0lFQ2DY0N1bRSI/bwnvG/Q==","signatures":[{"sig":"MEQCIHHbsotlrnvF9FWN6iuhSbtZiS47rubvVbtgmMoDhW1AAiBPm6V5P04Yo6vJeUH84cIdg2V5dkfUeej0xxLECf+vMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTPHCRA9TVsSAnZWagAAthsQAIrMueMBMIwdrbCaPfW+\ngj7Qe3RlxDFo+RyRB4J+TZ4jCWwpehE0RtpZkyCJib5QDjLq4rXAdJXzCdFM\n/H0B+gejU1Ram09MCTSFesCvo/Z8hn2XU1adsYIXMf4CWiM/hS9wu2VM1VkQ\n4UNsP3v/xFrVvY9SUoUIhurleqNujt8z6u4wp9z1Y/FC5qx7LtbEBzdxnYpp\nFR1auE5o3oyvQyy5+6629pWwpDjlrEeGDxOEuJuLg9T6P3eXSvJWVLFjJkCV\nzGMkVAYRKhyjQKddy752OYNtO7zH3I5ygc696N9NLPFr9VDfMcE2DYiee3K5\nbD3iOSQmdcAi3+c65d/ir13Da4FkVZXOkq9PbsEfu+BHXK3BV6URShhfuSey\n3n5i4bLGfbqnDeRelj+VryBriXbiFdLZClG45p34zugh7lieWXr8c6o2KQuy\nIqq/rSPhTzav/0PQa4bOzhzrRSet4XdamqfIaihurkxvOoWulCqzKLMeUZmT\nWgb3eWeNxgpYpfysb57eK7IMB/IE+yHjFnDPTvVm/ocpuOzCT8ImB9tc1Uox\ndUY9dVUuxg9GVVeNbOGJTRfkzNUj9tDp3uOJDS0Zoxp5kW3+iRHVpPeFCg3t\nirnx0uBEjeiS+QN9cvMO9sEtLDxm0VhvkxmHJwwKXP8pqE6/rey29aKIkamM\nAPdo\r\n=nP+0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67eb0df80.0","@material/rtl":"11.0.0-canary.67eb0df80.0","@material/shape":"11.0.0-canary.67eb0df80.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/ripple":"11.0.0-canary.67eb0df80.0","@material/animation":"11.0.0-canary.67eb0df80.0","@material/elevation":"11.0.0-canary.67eb0df80.0","@material/typography":"11.0.0-canary.67eb0df80.0","@material/touch-target":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.67eb0df80.0_1615934407092_0.6329941494859341","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/fab","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"647f4e7c30fe03db59269e6017a28860e3be720d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.941ca3b3c.0.tgz","fileCount":22,"integrity":"sha512-Li7lUI7fND6p4kkIHIg5sKzKO62xstGpqRra4dT9/54k/oclFzf7eihchPjxK0ZoFYnTQedUxuQ0xt8xZE/Wqg==","signatures":[{"sig":"MEYCIQDYORoCwSwGAR/IwQ8TgPCvpMftxHDcrB1ulPHIpm8swAIhAPalB92Bh7MBWNlpy47lL2u6T5nmgmNYoRPdAQ2nhy7V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTQ1CRA9TVsSAnZWagAAUuEP/3XGbRSf4DHzX729WnD2\nlOJsXBy35vjGqTwJqHbYQZUFtivU064Xs1LymJEyMtjA4+AgR1aZ0Uu1zXyz\n6IKMm28Csfk+LbQlNjzN3Yz1sFfVLZ1pxB8kwr7Te2mdYVtHZfyNmkSdW+dR\nVN35SNYVucp6ySYIQ6c2CJfOF6wpQxyVq7Ejpnl+XnCIE0+emXHu55n0HBzz\nHtt0cgW6BfSGU5aE+a/lPVhnorxelrOqWH5bUyooNM/eESGdsQnpbjcxubHV\ntWhafdNEQUSpr/jYYyRdkkgN5WdMD+5KkDZHxz/tUWruo5y+QP2ubh8reuKJ\nlfpYYGOGjxTEYPvGZt0+tJPiGUa6rl7Ad0kQ7Pxn3Uo6HBA8BKGQGNjZgcfU\n5JH5QzfYAXL0T7QqSnYxb7uMdC1sHYUOX2zHHckWYSsyvx8pjgNa2FFtIA6n\n0XJtgshDhr29b9oxa1j7LCXj9T8lea9l8vOSTITfLp19kFoJ6D+0GjFF1HaI\nqJmEXH3DWM4yobGD7Ae5oqxXK/eZ6OvUrrML9EXHJzXbftvkfq3aAiWnBdVi\n3PK/TFFzmE64OqNNdzrAGYuid9VTundyWcKjtvqC2gXiewnh+4O5bE/q0hoB\nekuyOPL7ASXnz/JbaEf+sGMGtRhazX1lUtSzCBwHBTTLgMO2DwRGxSJOWfQE\nKxhx\r\n=FYbj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.941ca3b3c.0","@material/animation":"11.0.0-canary.941ca3b3c.0","@material/elevation":"11.0.0-canary.941ca3b3c.0","@material/typography":"11.0.0-canary.941ca3b3c.0","@material/touch-target":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.941ca3b3c.0_1615934516500_0.19375431836246126","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/fab","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee5b7ad1e40618d4cabc4422f174718eee5f56db","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.3344d12ad.0.tgz","fileCount":22,"integrity":"sha512-Z42JNSKcUBXVvTASQJHx64iXgin8mOO3oU6YEsjBh88qfO+iv7Ap8tB6k/Y18b5MrXKi5wsqx+iNZXhR4V4reg==","signatures":[{"sig":"MEQCIBoe6IfApgsYwYeYFJN9aBib5tIdSetmYUPIEi8Bs0BnAiAy507xNyHuWHVTtSayuL94KyArqnxSvgrbvugI6mCZwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdOnCRA9TVsSAnZWagAAOjsP/0ccR7K1PaJTAtPn676A\n0xJcsld62s8kPGf8w7gVvRByG8iZc72ZaAvBkTD5+FOQ4OBOv3+l7xNqbpcT\nGablJiRbO5JGgEqxvA/hJJ/P68DHnC3EXjsjQ+vuIM69tS+Iy16H1/Nqb1o7\nzOjhYk2NHXZ7FdQWJKYkIK91LDrbAVXPdfWqDt22CbURK/22D+R03R+pwgTP\nZ5i86HEw/DIkE8sKJOImRDLci8C+eq4ctJYBaLL1tFQVf6ftFR40FUCOs3X1\nEJmdRqkpp5j3NjYDiBIw22/pAsRtGLvyPYGTHFNo5WCFLruLLtFKbyk59DZA\nSlCXhs4blhqUfdVVcTPdfRW4D9tlqREm2K/IcZtKbcyR1brd4k+QqfeneZmT\nLC7CfHMTREomgDm0hjXIMsxWp/ijftyHOcfkZN40FTXf2FC/HQxGZ2AYUkrt\nPpqeTYidXd0oU9OXyrzSwqNBClj1mTDSM+Kv5kv+t2qVCBnKWQygutcKtQsO\nY4r8tBUoAe0tY5Mij3dsMydkgtDqIwC1HwR/5+XhId7iIVLtPJI4FehdYrav\nu/q+hvlaOZhUAepeSKBrKjl4DXqbbh9AdvYjqowve4L5190oLep4XuSgN3RI\nWx9yWMLVFODSOwmJ4SGRSFDhiTWHyafk0JZyCC8HwAc/PEHqGrAcgh9Z7K1U\nBPsk\r\n=NrSj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3344d12ad.0","@material/rtl":"11.0.0-canary.3344d12ad.0","@material/shape":"11.0.0-canary.3344d12ad.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/ripple":"11.0.0-canary.3344d12ad.0","@material/animation":"11.0.0-canary.3344d12ad.0","@material/elevation":"11.0.0-canary.3344d12ad.0","@material/typography":"11.0.0-canary.3344d12ad.0","@material/touch-target":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.3344d12ad.0_1615975334944_0.08244979567190502","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/fab","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.6072ed604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1f6243f964523380e68fbee476e3cf0cc8ed650","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.6072ed604.0.tgz","fileCount":22,"integrity":"sha512-WfVfqncBO8HrKAAe0GlczpYq8fsC0B4Bb3+y+dHc8nxrX7tSuoRd/nGqXHijT8O2XlOJXW9OMBPJ+USJshpELA==","signatures":[{"sig":"MEUCIGTiKECCXCA/FGrNqTcpzrVSIcNTinfTv7uKEXDg441AAiEAjhwcor2RvTWYRsr21sjE3n7M9HMsKHUNX5bM86J3FYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUonzCRA9TVsSAnZWagAAvH0P/j7HtdmSI0wYZ2F4mxJf\n73SHJP/tE0YU631cUPGwDWaF1im1FGXeeKBXv7tmtnDVatEMxJBWyLJdnUUp\nYWxSMA+ewwMj0IboFst/7QWvneDc74uIaBVg3anQe42322pY/2WO2pTtAobJ\nkknM6LkqBPmifpU3n80JpbneJRzvpvy518BjAkxHu3rsypY8p0TZZnXnZY4m\nguWDa7j2TNTvKbOEj0oWX5pT3YvYubm4/43XgXF1eN0Fwy/iMqSbfNRvq2dT\nOAxqQe+dqeX4LwFrNbuZel2VN9+P6H4ByI6Fr7wsCVkz7H0aAIopWp5aZSmA\nyq/qk/+V02NYhKkGCcylMmlc0op4wrXojqozBKA+cb/SZp9JTDNGuIpYJCqb\nbg5wzhtwlXatGOAwxrksnSXNkpPTGgHZ3tAWOz1XjZonVdGS2C98qrdnalXW\nVULs2s4IOQqemQldzA2kyqAmSZC4cm7ftXFCJuD0SLVTi/9svIkPdpqIo5mM\n5y4IdoCeNBj6gJiuKagy/4rZB4s4CkAMrashMljxvnRMY/JhFGTV9T5wg99z\nQE33ZYvVeJM0hvYk2Id4f5A5HxrUJU0c5eAYo7fwXOnYidyNp+YRTj/p8242\n1hQwGRkLWktVypvNHSZXhamvOUgGAeBDWa3eBAWgq5LLt74Yu2pL+dfG5j8k\nJFZI\r\n=O6gy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6072ed604.0","@material/rtl":"11.0.0-canary.6072ed604.0","@material/shape":"11.0.0-canary.6072ed604.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/ripple":"11.0.0-canary.6072ed604.0","@material/animation":"11.0.0-canary.6072ed604.0","@material/elevation":"11.0.0-canary.6072ed604.0","@material/typography":"11.0.0-canary.6072ed604.0","@material/touch-target":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.6072ed604.0_1616022002305_0.16850776510049092","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/fab","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fd2e3f0c3ba43a8dbe5d81dfac9f6789c5209f2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.d3a6862af.0.tgz","fileCount":22,"integrity":"sha512-Mwmwg25uaUEFAyOP3CW1VoM7BI61biyl4qVg3cHN/jObN9LXg3F6vQTGd1yKBnz8maYdp9GKTymoDevZkg42dw==","signatures":[{"sig":"MEYCIQDKwQazUd77b18fBhSI0SrILRhIw5sdDdNbALwU76WqsQIhAMEnRUqMT58+/p0KrJoVcntZJO860wzOO5fQSHbczJwx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU33SCRA9TVsSAnZWagAA3T8QAJZQBfh5kyOsqJApYNeG\ninr2Phcs2nxE0kDREx22WC8SJ/3hx1gGfyALUjDr7snhvxqoRNBFjF7cuuN7\n6rGNuVQkIAc9VQTBT2EPCMbZ6ZPOUNSwUCpYi8f5ZZ7Ho6mKUkBhALxO+b0e\nAHQVyrJpYVNIin6tFTdy2l1oaeIQtS7JAoHn1a6QiLyCieVbEdJILrqu4YtU\nq6LtPOQedIhRLkkoI4ddykRLHq7r4tye0N8J1U0GpP2d1tZAGfPiy2XvoRNC\nEBMuxVheTEtsCZ9E9yBJoMFjKQZk5cyFnxpi+2TYMcU3+VAFFq/2B00bNwgR\nimgZuQBll2znHUDxnxx568MYK7Ghb8zxc4EgC4QercZU4+Hqp7n4HqJAfoIV\n6o4BFZgLRLNq+ETcYfJwVhm2WR4xJEvwuJ9kmL89XUCA7VvqF3tDlPwre81q\nhGFw3+BD2bfwZV7I7nHZyb9Ij5gOg+Uhc6oigcBNDfHIxI00tTkPUl9quP6+\ndpswmM5oMF+DvsQ+Qr9gDjShIdjvF7hZ4jOrCqi4VvmWF3M1B9h9g9vHmrHu\ng96RCMFUQC98YeTv0cOwRGlCxTk//fn11z59PUQJexEXscOtsnBv2zTgIOCt\n4rF6enyW88lZatTECBmTdkq8tDJqVfrVYfZA03L0+geTWCpghLdxS/H8MiSO\nlByJ\r\n=whUm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d3a6862af.0","@material/rtl":"11.0.0-canary.d3a6862af.0","@material/shape":"11.0.0-canary.d3a6862af.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/ripple":"11.0.0-canary.d3a6862af.0","@material/animation":"11.0.0-canary.d3a6862af.0","@material/elevation":"11.0.0-canary.d3a6862af.0","@material/typography":"11.0.0-canary.d3a6862af.0","@material/touch-target":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.d3a6862af.0_1616084433924_0.44422502070044034","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/fab","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4d9fdc7559e0639132f70844a5b3713638d0ab9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.40dd242d5.0.tgz","fileCount":22,"integrity":"sha512-P/j9sy9h3pes5XuN4L82z/ytFy9z8/AwR8hm3EvAEmT6uBksOzQbbeVfOsmB13rcuj5a1kWZyT3AxuCo+4X+Mg==","signatures":[{"sig":"MEYCIQCetVxX9GJ7FBiKhoFwrg25/gTTWYKvjvnzOEo0TQJg6AIhAJnia39i9nEHLZB+Joq2nr8DI7WXrF/Dxn+UtEBKwW77","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8N8CRA9TVsSAnZWagAA9YAP/jk5ssbRKNB2pRNUyurJ\nDroLEVcaewTk1inhUwnTGgpl9T8dn+oRDEusy53+nMluXjMNlZRfXoqS+2Vy\nTKkJXGfZHUkfrL7KLKzyPTpO55vUrAE3x3LcCZXsnSbb+DH/tW6oTS/XvjYm\nILVv+twkjGT2iji+0WVZE81r7401wXB5licr/XJDTV3DQhbiEgySgtGN53HT\nwZjbvnDwpE5i3/Er13uZ2yeIaBH9aECruypdZvzq9wSwdt6zmODVaCqvO8+e\nyZWZSHQHXB6iONFV3ru5vxNUG5o/o2r5isFn2APjy+Diz0eDwZENpIJZB27W\nd6KA3jfvom/d5xqp3z4uapfvbXX2K8woYmB2pZXqGZ2RMHErq8+slMbp5dOX\nCDvEgaqV0yXNI3NWpA50J/mDNhEjaTRAcn9xNOy3E+k2IZfxJWElzM1DDGLM\nr8d4DABEb9rzXLsE3XoHZPun8yoXSrYPckl+MBlNOqwZRnbrrnsnCXF2SKL9\nYkQNKctLGv1rJYTj6Z4nXZUJhXOl7ykLXoy6v9mG0L7hsKfYWqUt9DX0oQgy\nsdodWkdV1Tb2KO0kGwnr7P54ZHE/Nujj5aVdyJr4iKbThJCmTIVoiBsviWRP\ngZ6u6u1KUPuFeK11zvcqDlzpl/o89a35CIPEImQOPuN9NS2kGMqp9YzZJZgU\now2h\r\n=UpL0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.40dd242d5.0","@material/rtl":"11.0.0-canary.40dd242d5.0","@material/shape":"11.0.0-canary.40dd242d5.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/ripple":"11.0.0-canary.40dd242d5.0","@material/animation":"11.0.0-canary.40dd242d5.0","@material/elevation":"11.0.0-canary.40dd242d5.0","@material/typography":"11.0.0-canary.40dd242d5.0","@material/touch-target":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.40dd242d5.0_1616102267546_0.1030949414532969","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/fab","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67f3c0f598600d90d6221a6af05f36fa7907ebd6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.ec8f8465f.0.tgz","fileCount":22,"integrity":"sha512-EW8JOset8lcTswH4mtoklKCinBDE1RZmP6zsq0nHFSySXHJ5SzeSL5c59u+auMn67NL8ZBwCnLVh4vAIj5pDmA==","signatures":[{"sig":"MEUCIQD6XVXvShZRt/8FAbYfQZVWRr4AtvF3LuHWbirfM6HDzQIga0AjG98IfUUPty7gKVuDcNKHLEKNcwk6sP9ibIf6oQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8nJCRA9TVsSAnZWagAAk5kP/iot724Lz1AT0CX/358f\n52KpQbLIS1Lb8OZnfsg9vuvMfs5/gYdHszKBKLrVqR+4ADXqtdO4ZtUE2EQm\niYaOb4L3Op74qP6qEbJPp9DVy4fl+EAugzArzx95gO6QYWQRtPeaJZMQha2v\nA2TKqK2QVCX6GHm9+2TEtovtfxTtfGZEk8HWkwoAKIi5DnxpB/E8OAPA5Sl6\n9joXa5xZdvcJ6al/1ILzIUzq1TzUC4t/EUq5XV5NvjaE9Db4W87AWOYqmZBl\nRUCrRV/h/meOBOS4yykHxG39HZ1eKfNhexeKq5OCwvJteM7vvFPy/DMmBVkS\nutgi3+9HWhLgAxNSfZh41I6UbwrlhuSiTz1zecH6vh78jjf9q9OL4Md+PYRl\nDxoRthmCNniZWlnWP3dh5+uwuV7SP8aCGBUptFO2FYhfeLxebsweWDaBmJyg\nrlDnKxlPPb2Xv6My2DLDqun5GY3kirK0nORcdczYbYnrhmR0hwy6tAkQAUtN\njq1K1k1gtzSXxbrVhkTqq/YlLGlAXkVdVUmTr+uv5Q3WRr4aEmrc+Blug+JB\nIKSZl+/HLbk5F6meJox+LGnIcpoX0pOo8Z+I0DUf6a/MZZtDpahalGessBrq\n4fPqnzE01CN/+TUHExaEpln45NuBLdqvhnqw8/13gVSRYM6qQHW3z/gel7h6\nKgrh\r\n=gh9l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ec8f8465f.0","@material/rtl":"11.0.0-canary.ec8f8465f.0","@material/shape":"11.0.0-canary.ec8f8465f.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/ripple":"11.0.0-canary.ec8f8465f.0","@material/animation":"11.0.0-canary.ec8f8465f.0","@material/elevation":"11.0.0-canary.ec8f8465f.0","@material/typography":"11.0.0-canary.ec8f8465f.0","@material/touch-target":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.ec8f8465f.0_1616103880950_0.6945690526276784","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/fab","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.da38969ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27e9603c38e6afd865d8646c2f02149e04ce08b7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.da38969ec.0.tgz","fileCount":22,"integrity":"sha512-dW9cF0KjOWvocXfmvd2MvuQsvX1mbTsYOFDKu6DknPBMc5EEG6CzLlxfKgYUmHCcmzrFnvynBuuwufWGEo+tHA==","signatures":[{"sig":"MEUCIQCXDpowxo2ScUxCTE1Yh2PsLspa1XnFKa8lkcwP9rBe+QIgaa374DoJUAl3NvGsqsGcQ2LWoHCsmn6Y4pd1nmOo6YA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9GuCRA9TVsSAnZWagAAiQIP/37Gc7vgsN9PBoGtYeiK\n+IkiacX1iQ6aG31MTfBA51hLcco/TK+Xfd+X2XhExLDVXpZJHDgH8aZtCp6L\ncDQmXChLHcBdb5wTqZb7MoHc33+mOmmaQxsjLEf3GKj+BQd7GJ5e6KGkic3C\n6XZ5NnC/8Ih1wunzAGDr2g0Gk6ECUguHLjLKSMMG4+OtXXFeVP4IXhgkSgWm\nG7fI4iPOmvkgQ2PbSYFMaZvI2FKxR3Wu7fkonTVOzq3AMc6hMPfA9E2ydENX\nqhPJlESZGkQVSdkMUnAM2FNN/eC6Y2u/kbPQBGK95q3lhv7Dpt55djTZGaMS\n2a5IHgY/m/Hcxg6pn7Oe/xMms89RxpWujaEOJWaV4X9r1EXsfVvytnMKz2C6\nvlkh0w7jLao4RQox8Z/mFEkrvFC+4vGK4E+UjPhtPnzkJqczJ3ksbf3awNbX\nSg+/UhQ2J63P2JhWP4u/pOe2W7WIIXzBj+26x7uMWt0tMz97TMg8jWKiLL1k\nezkqT2xM8y/azoA1eoUmaa4m94yVeq2ylt4E7no28+3DDCXE5UJ9ZVMyt6GV\nTJxpPE8BliExVFPE8AGiuhJlZS0c4Yzn05Be2AaHUzHVcwYCmBDEG11AIHBo\nAo2Kxq9HxACi56zhdLrR+0nhZln42mEblaqCyuLQKn8IgsYPgqFIbdSVSl/5\nfVnx\r\n=aoUo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.da38969ec.0","@material/rtl":"11.0.0-canary.da38969ec.0","@material/shape":"11.0.0-canary.da38969ec.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/ripple":"11.0.0-canary.da38969ec.0","@material/animation":"11.0.0-canary.da38969ec.0","@material/elevation":"11.0.0-canary.da38969ec.0","@material/typography":"11.0.0-canary.da38969ec.0","@material/touch-target":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.da38969ec.0_1616105902171_0.5911145597203409","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/fab","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.f5246264d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a40200bb98cb45801428233e53af7b45c9cfcde","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.f5246264d.0.tgz","fileCount":22,"integrity":"sha512-83UDzOyCqrPY6M9Kj+bh3jkRLG8SxOyZNLnWn3LaixC+QY2/10PfQ4dlGLiDwLpakRBBksF6wglWuEm/TTd4KA==","signatures":[{"sig":"MEQCIGCvBWyFIOjVO17XVvIEYw04vYwpVUI0R9NoLwJmAxx+AiAeYxFf2NByYDXdoTBMmXBSpeRZDcluKFKWJ50ZXphRtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/KkCRA9TVsSAnZWagAAriUP/02T33uAbyhpbPU3GBgm\nW0pEbbwEbIU4IIzMU0KoMfIxnt2AJy1pX7pGwIfwB0BJZF6pnJ/5jlNPnabX\noMFQAwZDeyxwv6oEla5DtYxBzZ2DkKASoj/NmhZpRpDsO8vOuf/jVdqhTGZY\nR5OcNuRFBYb9+wKYK0fq2aALsKJoe35SjPvXNOebxMLIjjn3h5cBtiLTHBCp\nf9H3o91GHj7GL7F47WbkUMBQ/2O1oI52o+7UNuI9x91XD1AeXNUB2nu+tbIv\nA7BAgzzRNjgBuTTn87I1/WYdiv9wLQTfcVSz0HL7lzt5LtpIJwBX8ysMSU8l\nR6HcVBYtlSAqYCojf+sr2Y0r4vtCWSxxWMNtQcW/5xXj7ETudHjDsdZ83U9/\nbWS/ld53XTj44mPXcWsKfR7ztZw4MWK1BGf1mPXTT6U6OKP9ouUKTPK/V6ap\nlVVb3+KV1O5IgnF+LIk4stffU9PgfyQpnHi3whVCH0+Y70WJVyTvMeqzblo5\nHjV71mUTjOTrx30XvuP6lQAlh55XArE3l7pML0KsrHLgd57m+ntzTyRbJHmO\nIso+hrLEf1tqr9749wEMkntp9VYs+oH7BEgHqwrVnvTecmkAK41JuL+LP/gy\nUcEwOwRd+BcPQp6nrZtd//USvFiRvYPWH2nmtDqJI3Cw8LbsXUVEhFwS3KET\nJw+R\r\n=mbnk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5246264d.0","@material/rtl":"11.0.0-canary.f5246264d.0","@material/shape":"11.0.0-canary.f5246264d.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/ripple":"11.0.0-canary.f5246264d.0","@material/animation":"11.0.0-canary.f5246264d.0","@material/elevation":"11.0.0-canary.f5246264d.0","@material/typography":"11.0.0-canary.f5246264d.0","@material/touch-target":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.f5246264d.0_1616114340068_0.8005993869893591","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/fab","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd418ac8ba7c79aa76177935eaf3a7f58e2aebb4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.03d34bbad.0.tgz","fileCount":22,"integrity":"sha512-j6AFowLQbkFKa28D4AGyzNMuMy+r3I7lTwv2hQsgKGyz5uqE5FKMUdwzsD0izgpLlgWm2z3C7n+nWmjkNAMIIQ==","signatures":[{"sig":"MEYCIQDU3SJZqrtHw4kKuYtNj6PzSfOzhIHZgAlr4rfc63U9egIhAOlFl+Vaz/ZCsq6Bt1k3koWEyIECO0zt1d1gYl7f3Q6d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/WpCRA9TVsSAnZWagAAUbgP/21FmVg/2ARLZXOa6hOY\nHENTdfr2Z3VqWBMR7zPxpf/o5cagr3w3xNdqb8L7zm5J+tTbwuO6B85IbsdG\nynqdVpqsn8uDy/ds69aWZbSVxGUdNNCbduUB9XjnJRlNk/INkhrrUeh1K7r0\nNL4UqD6OaOmOHL34s/Ep1rFWw9ONUb58HO2+m/TuaLcpMnYgsmGwRwg838eC\nJsQyqizCbqDp29VJJfjOF1sek9GCsejii9kTZAovBKNFkE/VTKtSZ7X4loAe\nx1tmQVVsouVCIRzCS6ohZ+SkcBecNVgtM0BTi/Ragp83s6ZjbBm5r1LDRXAK\n8azEWQtBeSzVThts6lvifDwEBJ9rbOkUThEupnyY6NWqjh+3HmNS1LoLYPYo\n8mGzfCpZmtpIjM8yjPl5cmDtXLnM6yUzkOVq+9LWpKNw5MzJtzazYL65A/MX\nipWXz3kNVW8N8wJ/+3Ba3u4YG6gfMXCkraEOkFfeV0zKrBAlsAZLMXVk84sX\nCUoSbgb1oJe9GogXhm5+2nAOCskRcAXv8JYhQ0N8cqKnxZhHzodC7JRFFWAi\nxarwqCT9JasYRGkqs6xNSXEdde4vPTYJoBIq+Kj0yJ0KkJJm0CB6++2r4n6c\nHF6gkk5kGiLD0JGdvn0a3mcpz6pTWsIs8cLPCq2ITAJRAqCsDQZn/pXREp7a\ny/tG\r\n=m8vB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.03d34bbad.0","@material/rtl":"11.0.0-canary.03d34bbad.0","@material/shape":"11.0.0-canary.03d34bbad.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/ripple":"11.0.0-canary.03d34bbad.0","@material/animation":"11.0.0-canary.03d34bbad.0","@material/elevation":"11.0.0-canary.03d34bbad.0","@material/typography":"11.0.0-canary.03d34bbad.0","@material/touch-target":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.03d34bbad.0_1616115112554_0.7316484510922026","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/fab","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6d3d845881a2d003225cfd71efac388f7a675ff","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.cbc57c600.0.tgz","fileCount":22,"integrity":"sha512-WKTilGcyq2VuxH/6mKe01iwixrE3o7NnDhn+1fAAb4Jypaf/bJFYicd9ZDm+ikGIn/I+iheHrA6iNsQRdetV9w==","signatures":[{"sig":"MEQCIDNQE3Ob+r1VOfTisSDnUY1GBlXesXrcAITejq40/7HqAiB0TiDed3EXIo2L+TKo3sjjQbMBYbaJuBZq7mfoswkuXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/efCRA9TVsSAnZWagAAJTwQAJgsFCmFAl4T/iW6hTcJ\nEaLumgo3PFFvRS7k5dqoMBwPxE0SrUspS/czXXG98kchR4Kalf7twfzhCGxC\nKWfxSkmfzwsROxSsQLgP8C3yIseOCIPWhrcL5E9LqQc8SYCi1MvV7Xw2v4nz\n7m/j2FqT30a60dwiX4VezDNxgDp0QRaZF/uVhrSLuRt7bF9Z/p2k93WvNsjL\nUXoOE7F3TdGY5lnXMTeMe0mCXyiGuCNtpM91Civ+KjHFt2Gd05VOERf9cVvn\noUpRcIDAjScmVLgnCChdtQunkLGksdqqHh65cUyHEF6R2HPSomZAgO4QuDlb\n6E3Iz+0lZFdlRla1LaAs3rCS5BeCHXqvj80/Ml97PkJ1/6QUw3/j7DqInDOK\n6beddgeiGftSKcneYNzBzqc/L9SDIu2MO3w7OC2UP+GYanMsZTfa4vbM0nsr\ntDn+M0jQkANE322nVPrHpyqtSVq1xMonVct5BJ5kAe8gqCywynPPP4Q+xu9D\naMf+JxyRUsNXLc0lz2JLCG0Zv1vMgXmogPU04Fph4jhVlQ3utaMul5pynYcO\nfn/9K77Z4QWEx6ggKVcu/BSXQSs9BzcaW62UptBnV2y7AN6rziLbmIyypv7x\noj5ObfAG8HC7s8dQnCQXbKtvCVpxAPGBT1O08ZMe9YqD7BeIzFujOCsEKiCi\noPC5\r\n=B9Fm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.cbc57c600.0","@material/rtl":"11.0.0-canary.cbc57c600.0","@material/shape":"11.0.0-canary.cbc57c600.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/ripple":"11.0.0-canary.cbc57c600.0","@material/animation":"11.0.0-canary.cbc57c600.0","@material/elevation":"11.0.0-canary.cbc57c600.0","@material/typography":"11.0.0-canary.cbc57c600.0","@material/touch-target":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.cbc57c600.0_1616115615173_0.4004858559270901","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/fab","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9608f0168289c7fa69f495c1def5f07e0892dd86","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":22,"integrity":"sha512-lay4hIz+ecz/igSYpegyKjeTrgyp64KKDbciz/QNRYQdi7Rrab/G5nZVLdCJJQ71wlMm4rN3H4QUAQe5IB93yQ==","signatures":[{"sig":"MEUCIEGhidgjGhmeLgnXpBf4WEjhNFICm0CSxaqouvwUHltuAiEAq5rxrZ3hydVTeT+lY5huj+IWr/N91MSMei+H6FCzdYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/qfCRA9TVsSAnZWagAAFnkP/AneYo/8Jr5xDydkTvdi\nbTvCTPNLLykUZEBLSNTlZ43N1au5gTpseApoNUHW6qfsuQ2lr8/h+wCwFojy\nLdNWcEuA0258SRHaiLjT45zBq2Fn/74O4U8MHWTPeV97/VF/40ShTJdL9AdD\n5MuDrQqewnFNeYFTSb2BD0cC7OLP+AaFp9d0AiBeJYc67a6HE00VxEo3zb/1\nmJxF3gQMtsx4WQ0Rrjc+m8lgURSGUG0fPq6ex5WP61Hf09QidGWGwIR8/kG0\n3nQNoABRZQEBVqEJKU122cFlVLmjibJY+hYolUbEX8c2eaIfzP1v5oasR0ja\n8PJe0cSt6ShPfUVGXuLh0q4KTPPekLga83fkuesGged0/9deqkMlKXgj+VZ7\nWnDSbQ3HwFcnNKtol6rg7KXJjdMLqRzzUPovOkDfKMsLgY290XHuoJ34KeO9\nDxWJ24Y/4/Q0NNwQWz2JhznFUaGKpJWDeiX/z9hZqxq1e96sTV6pgDDfXVFa\nx8cCSIWtllf5e0eRYfHNZ5YTJJiLiRAU3+k4UFbQ07tyEbvWLRjg/e+QZI04\nhWzugOssJEA19DvUdhTNH0HqzO3f/gNhDrLRBjPyXlQw/6Abn3FMYzuAD3MQ\nA1uUVF2QOHZy2m0mXxqp6SC05wc3eg30FbXlp6uv5JhM6yN+cbLKS97g8Re9\nMzyl\r\n=f0/T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d6c5bcf37.0","@material/rtl":"11.0.0-canary.d6c5bcf37.0","@material/shape":"11.0.0-canary.d6c5bcf37.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/ripple":"11.0.0-canary.d6c5bcf37.0","@material/animation":"11.0.0-canary.d6c5bcf37.0","@material/elevation":"11.0.0-canary.d6c5bcf37.0","@material/typography":"11.0.0-canary.d6c5bcf37.0","@material/touch-target":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.d6c5bcf37.0_1616116382493_0.22219972723643489","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/fab","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f62a9361a9cbec5a9f5b2516f8feefadb7219fba","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.fefc668d7.0.tgz","fileCount":22,"integrity":"sha512-d+Z3+nZjPR5DZ33zepKHNzPSFd0i+fJVxnI4uvQHd5HdcOlZgXo3eWy2TMVAzG6MqQALgxOC6UpQL5eNA9ivAw==","signatures":[{"sig":"MEUCIQCpOI7nitDJtRfr1XaYA7ruU9jMF8P3FxJSS0aQ3oEmnQIgfEG/pHCTKB/oZWnsIj2ZNXYd/FOfoVEAz396fsMqIg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/+cCRA9TVsSAnZWagAA6ngP/3TX4BVpPKRyMIzjEyoJ\n5EemtH/Dg4gTrsWdwxtrA9Fg6Z1272DaWySivlHlLyr8Il1ss61Ybpjx9Ga6\nRgk9nynxCHyDjoC4pmKziLhb29fpaEnAyJRCfj0yKGC1aHw9RTJZkvgQ7OOA\n73JvEl/ncHsP1Q/+YwqzQrFEDVepVVHwNUVlJDna9UFIxRaWOP8RWF1KvAvb\nsE/MhLSkKxY+zsPH527m0EkhW6cyJp00OdGAcXXN/qerTCXkMwu5v4xhiB6j\n/k2L/P6cBwGBPQbfz1OxeiMekEgmQsW2Co+h0fFOSZg8ras0KY8W34uc/tAc\nP3pEQFlI+ENqkH7eC/nlyoEGBi9+EpHM7F/GiVOQh28Gypk73elPwqrnsVRW\nHbWePepAmWLLXWLeM1sEgNZv772FoLWw9AMKaWOZ3AACGGCncWwlAxV+K44l\n426YXzaOjhn1HrgftYWbzpe0RoUJ/xBTzr8W/Fw5bVuUmjWIEpkoSMgcDQln\nQ41nM3UEzjbLK5aX4nPz2YSPuxk+PXury+6uPjyzgwIRSU1a6l5DU1OFPNM5\n45PL8g97JO1hpX18R6yDqC7bM4E7WyIjMVcJoZTPU4X7rijmC4476CDPoB5N\ntmKY5HM5c/2VDr/4fTUfaeA0Gp1+mtKhvDWb0kJO9djWQ+OeJy8q7MQFUY4B\nLb9q\r\n=xROR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.fefc668d7.0","@material/rtl":"11.0.0-canary.fefc668d7.0","@material/shape":"11.0.0-canary.fefc668d7.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/ripple":"11.0.0-canary.fefc668d7.0","@material/animation":"11.0.0-canary.fefc668d7.0","@material/elevation":"11.0.0-canary.fefc668d7.0","@material/typography":"11.0.0-canary.fefc668d7.0","@material/touch-target":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.fefc668d7.0_1616117660172_0.8554152777579076","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/fab","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c3976052d31ff2c29a110b1a441c794243014ca","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.faa7d3226.0.tgz","fileCount":22,"integrity":"sha512-njTvZCfR0FG6xDzqE1HpMQNlHN9bJE9neDmrO7FmjQholarc+v6/PLC+HgVXKi00XTvWjE2O2MeA5nY9z/0l4g==","signatures":[{"sig":"MEYCIQC/o2oW/7JWv7Eyf7NdZ1L7km3QJ6NUjHsS6pdDvVKO5AIhAOhZH7LaXUfKcb2ouSWWqTAXivUw4md6H/+aOzMBlWet","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOMICRA9TVsSAnZWagAA+1YQAIped3ubSS3DTIfYcNLM\n7hFk6qhx21dQ0s7VtxckjB5R2skv8NA70FVJdOCf7M20j4diN+8zqbPkP/YS\nx5Gl3PCk53CZNvCJn7tVWcID3Q4JecDGwvdEST1OPwn3CAnxB6E/aI6NkRte\n1Th8xb2fmycspPEeFl/9Zta46qu9REnQ0+wFN8Hca+Mt3M3hr9GryUzM4nL9\nwFP+LowhhK3ywQzquY6pReM68jAA4LzWf+9EGVacxXN8vQD6nK+g8bn0SQZC\nAJ3Wiro+B2TYWSWKSBf09yP+fo1idXtSWXaz9KVPhShNhYYMmEK1VjKxK+DQ\n7K2gXhbAS8Ml+c3YRz7t5B2xcPiaYs0bxDvXDCgFOVSAkY+CnaMu86g/A09A\n7oXou7htLj9qUNLT+ZrrrDJqZnVxA0UdwJzS0hZJPRQEy+o7rQxAPPZx0fJS\nCOHzc9U6pUOI7+C0ZzjL+C1PQrVkiR1F0UyLvrl6675gJxnSO2DMtSIjJO/0\nGXaenal3kyGwCRa+otbdggmKX1Q1tInXAFLReoiDsQjGkHdGKm0pngJxNX5G\nFXMt9nERy2h1+ZZMggEi6CeAM6jGLCYAsz57bdS90Fy01PesZnX3D1SIF0bK\nfAt0Ji6dplWQyjSSCq8nKvJYVFFNNmitAjEeIPL2jT96dGBtDWmeufVt+tXk\nDtvc\r\n=Vmmd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.faa7d3226.0","@material/rtl":"11.0.0-canary.faa7d3226.0","@material/shape":"11.0.0-canary.faa7d3226.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/ripple":"11.0.0-canary.faa7d3226.0","@material/animation":"11.0.0-canary.faa7d3226.0","@material/elevation":"11.0.0-canary.faa7d3226.0","@material/typography":"11.0.0-canary.faa7d3226.0","@material/touch-target":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.faa7d3226.0_1616175879942_0.2840402700226885","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/fab","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e4833e3150f3c5ebc2103ee3d79504881b69e36","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.c60449bc8.0.tgz","fileCount":22,"integrity":"sha512-L/mfHCHmVgNhqOxMgEANgm1wl+tERTFUUEPSnMiiqA/+BEFJzLYDExE2LCbndhiT4M7G35El2lj9tuVSQo0tcQ==","signatures":[{"sig":"MEQCICGOeit/sNaEZJRzNhKnB2sxVtLxry/9qNQ/oLThiXCpAiBD9EJDZRrsNOoLfjtOMFt6jjp0Eku9rb5mtar7c5NlCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOf0CRA9TVsSAnZWagAAQewQAIPrtrXNJhL0wFzaQEr3\ntxo5WNYmKDoWNtpjm6w0KY83NNLlobBIzP3j7FRzYDi/n5W8Ys4itsOYXBe1\nEmwroXhUFZI7pMEEWvsH/KWb/+pp4GgZo/QVuCYqXJ6Yhy8YFqqtHfJ8JVhe\nHsCqXGhiNbFLMbhqztYSLnEY0sYDStiic14CrNMw3IJXtEggxIDH6vKkylqb\nKR3ed6a2qjv21NOwsIzphTp7j3GQH2tFKey+Vl0yNNhtk/IukzfvjLQDT3T+\nptJB00ngRZELLHvamKO0gjJgcst1FMCYUv169SxmSxTp/SNr+DvGaWl/gJGc\nate+XhaGMclWZM7la9oO2ovPcocVzgqo4y0+sXIcC8k24h/lna4temyHf+B5\nDPb9dnMoaxjd0/jbLoQ8rghvlHmcqJDiuDQYEKXQhlOPYyFjsTC2f3kdAXX8\n3o9LS5mKjocPcldntaIVjUrUWa+pR25hFC8pkmcdIOnUP0hcWeWo3ivVzVac\nQKQ3XNXEkG2AOZdQD18Ysqwfp7jcTaKkaSK1mDieBhuumrwaMt7/oq2MRyAR\nEqTBWNwm0a1+MwbqWXSR77VLYy/UvoEb7Ct2OsAuQlu87ytxvdJNAKVIYbpc\nNpeOBiPpisJbnE/AT+rPVWjYjMXaipXUh6ZH5UreJnnyZgtLtryyLIVJQqXO\nz9/V\r\n=sco4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c60449bc8.0","@material/rtl":"11.0.0-canary.c60449bc8.0","@material/shape":"11.0.0-canary.c60449bc8.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/ripple":"11.0.0-canary.c60449bc8.0","@material/animation":"11.0.0-canary.c60449bc8.0","@material/elevation":"11.0.0-canary.c60449bc8.0","@material/typography":"11.0.0-canary.c60449bc8.0","@material/touch-target":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.c60449bc8.0_1616177139584_0.35578574574650945","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/fab","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e8b3074232f3e325c2f26cb1d84e1993b347f9d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.5f0fc444a.0.tgz","fileCount":22,"integrity":"sha512-KAXynerRgTYkbroKE5xDITlAHDT2VmPqsz4a+TG8rd5DGFsH8o4dqwlH+LbvWeRQMeserDMbA2ZEuNrecd7CLw==","signatures":[{"sig":"MEUCIFzditH9TinFbWjz4b/R/lgGrqEIzC6/Vgz/c86pFU04AiEAmHgzg5o9QwJW9jO4JZzgh/+RyLV1Gtc3xAGgRxYeqkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO+TCRA9TVsSAnZWagAAfpQP/Aw3BfsWjonK+J2/G/zB\na0OQpQ766a1YJrCQO5P+Tkj63sxb2u8Yi4njqsqljr6C9Za4m0A6uQXE+2qY\ndYX+Z9waRQTgf7yqGazkSO7Z3FNLE1uX/+fEVe1Bob2hc3R+4dSyrJrlEtVn\n8BBLSAaOE3pkIPVWPe7crPSU1ztQd1JcNfJgWd0mtgUX9rNypJ0HiHyek8zs\npBJ4nHJmlsuqVauyvbM14MthJCeh4PhBOET0BwD7tq+LyBQ8OKFbBnhoUe5m\nSl2/lKZ/noljoRGaojlbYqVAvuPJuxrYPWfyDcMtB1buhFyeUe/5xkB+reA/\n4gnas5zD0ZxbOkbvnPqt4m1ohyCGt2YMzhHj0WnjdMCmTQRjAWln1NpMahsO\nyZqciIocQVs2SCVkIKfRuIYLBM1OoTEPkRtp1/xP8onwntKnduXL0PsnA2oC\nds1fIqzelhiiZz17lhy4Dm4WSBjjA+vVrGmb3otNpUa3pbOa6b6Zfl4LvJbN\n5GoENDtfuoNPhyrITsyCgIpfoovYgx95VF2yU4IDMT3c5Vlf92xJJMCDZhFL\n677X4vDwjCYkaUwbeJRImP/3XL3g2MTwEguqUwAyDYA/GsrxuylVk2oJdE7k\n2yFQvN1hwEjrR+S/Hsz5lWE71FnCOyGbrzT3vR85SeA8bkSU3a9lLMBlurJ8\nYyMf\r\n=qffi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.5f0fc444a.0","@material/animation":"11.0.0-canary.5f0fc444a.0","@material/elevation":"11.0.0-canary.5f0fc444a.0","@material/typography":"11.0.0-canary.5f0fc444a.0","@material/touch-target":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.5f0fc444a.0_1616179091414_0.44643652960994795","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/fab","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.4567a750d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ce233c7873d8df6393fb59769e91040d929c93e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.4567a750d.0.tgz","fileCount":22,"integrity":"sha512-G0N11SiTa5Ge2LFc3lenoAOANDYUoVcbADdOPqpfwYVKBxxFOkA1zrzXYv91aZf4NJEnUSnlH6RgFX3pLWQ7vA==","signatures":[{"sig":"MEUCIQDVchZNOdNAVPcOGNt2TOZulfuQBE63I1TLD5aeqY0iswIgGt4P9GhcpJ98KTn/TP3M7VkjH3J0WZnUD3s+j/3QbLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVkZCRA9TVsSAnZWagAAjEoP/1ya/89ASbNi+KtKs9aR\n8nYaIpZCbRXbkO6FRa7WFfhuGf4SGr9AF4Iocj3RBjLSdCIdyIhyOCJcwkK4\ncBHFfoRz0dkX3ipabFV9Q1B0FoNBF+uhYzYFNH7oIQ6KQ/yCPjvhcFJHDc5U\nQoIzwO6ukKKK1SgK/aqBXpceynL5NwevARnnSJ0HPovEJqW3LPuFIBBDf7M5\nQXpZnBy3o9xUM6GknURJxbnBENVIj8hB1y7pVH+fdBl2Tjz7tj/20b9fAA+c\nMe9R4V+XGl6SKkftetUwTTK8Z5rPO3KgbmcNjvB0MVRNfKSYf7VwuhV/EBcs\nBeUf0xFJmLDU+bCTqT1zpv7/X2f9dj7xg7NGFzunmn2kP35y7dRD16JBv9dX\n1CRTGmAd5/22B4AsWMX89JKU8NtNZJ29s7JZqq+NK+9m6C+PXUE8BxrfsYFt\nV6/ajS+1TA2lI+rjBUEVIjJRHgr8/S+OcKOrzHsokalwNTuhtFYUVHBl0N+x\nwc/DgpNvsjB6x5P3qJNJzoWJInO5pvffZHBw0ZhZav/SZnC2B23Ow9gnZvsv\nPB7lCbOcYIsFWk/1mxJN9hGGpud3GRCYcUu+48/qtxe/WsNaCLjWBybUpVRq\nuK6UbsP0r3XY0CsOWvlIFwtH7sSMPbX1IQUVXOVx2GoWfVqiT+d+1kmvRAjx\nRKyp\r\n=rDJo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4567a750d.0","@material/rtl":"11.0.0-canary.4567a750d.0","@material/shape":"11.0.0-canary.4567a750d.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/ripple":"11.0.0-canary.4567a750d.0","@material/animation":"11.0.0-canary.4567a750d.0","@material/elevation":"11.0.0-canary.4567a750d.0","@material/typography":"11.0.0-canary.4567a750d.0","@material/touch-target":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.4567a750d.0_1616206104582_0.7933085911589908","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/fab","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bedb558bbe0a08bf900b1d1b2472f7e1d012a83","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.0cde52f5a.0.tgz","fileCount":22,"integrity":"sha512-c7b5cF9dPot18UsM0KMTz+jpQHp8EzKr47iySR3YToMDoNNFCOJ+VxAaoWoc5Ui8JkB/MsmxXLZTtVGKFYhamg==","signatures":[{"sig":"MEYCIQCtUbkc3ejcZKmetPbktU/g4FG2uC9iyRj350qayTCNbAIhAJxro9p3HMhoeeqwy+2ECCo1HdeH5uaFCFI+pXuK6seo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTBMCRA9TVsSAnZWagAAhcMP/Rdz4zZXxl4aoYLzq8Vm\nizJR+wkwrycPK7IDgaIbnpy+KQPlUdwt9pP6ubHAecv3MrBHVcdCpx1kL6i5\n3B4APGC9waWAfolxOam3PrQO2FouslaPi1U2rwnGmDXr1kHAE4gXH8tL7ig8\nuqOWAUY9hkaX2VCLB770EOimrS4uMSv4YBj0wIFZrVj7PGyErg1Qrvgm33TY\nF5qzdxPAqsWxnT9ii004tMeGeLPGIpKopZqF/VoAKrEbEem5jA/7ifjFaYIz\ntjMeUQntu+TZytm5ziM79jQsfLFJJS0XsRy5rm8QJET7OiG2TrPuhHDngVUE\nUSPLn1VnPoxRwl3SMDAXDM0+rhwXBP+86zVboLmPNfqhoBvTkXk351VgKXrQ\nWkpXR/nhhDEiOQdsQhCMKMWDQdY6Gz+PgCLW/+Zq1JE5hk42sSd6VjNtpMeJ\nxIjJSBT0auVuDOcLVVfBrylzCGiDzZOvGm+Ubo+RwgAl3vUgbhcRyYCDXLBD\nGTg/8UGJ+h7rXpgruuRbtWADW39anOOJb/irrMyyet9j5tTErqcT4nu3+EsL\nbK9aYXboRkM3pFS/r0uGMs4acOW6qUkQROXNzUj32KPUPZzSDesGc8VtFwYU\nSKJYh6FwoGzlBoP8xnOlC8u9FUzP8PeGOwgtENts94eHzdvz/01J9lAe2lf4\nGenQ\r\n=Do11\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0cde52f5a.0","@material/rtl":"11.0.0-canary.0cde52f5a.0","@material/shape":"11.0.0-canary.0cde52f5a.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/ripple":"11.0.0-canary.0cde52f5a.0","@material/animation":"11.0.0-canary.0cde52f5a.0","@material/elevation":"11.0.0-canary.0cde52f5a.0","@material/typography":"11.0.0-canary.0cde52f5a.0","@material/touch-target":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.0cde52f5a.0_1616457804108_0.024117930346354566","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/fab","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da0cbee237f59a8a08fe6f93ba3aa7ba320010bc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.48f4b67fb.0.tgz","fileCount":22,"integrity":"sha512-vnHlVO4kmRZcS9yZzU1j7Q/NOXYuqVfHc7gkxXYomPFgi4Sv6TYu2J/k+vRWlXYoNFU6bbjPUHl6vY/4/q/KCA==","signatures":[{"sig":"MEYCIQCKg/i636alLxxkiKJFiPa0tazYIXEeBSmbAzUZAH2t1gIhAOkgL2QeOJY1aGCAXqRoloh6KG7V453mdGld6IaDSK9V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkeJCRA9TVsSAnZWagAAAroP/jTOX8VX5svq+0cnzJ+W\nc522TyooYf5zyc62f5LGQ8e5qylpXen5VmpsT4pidobwwyU9J+cO20TaNnqw\nNToaicIABJduV/TxBakL4mZJGtoV6oRXrCBUNkhuC+ZQrSQpvevMq5Jn7ABw\nAsblZl1wzMmK7erf/xqAHKCX/ug4pD826F7rXyRJynEzQvrEzPNHJTN/aNTd\nf7Rt7trZHF5qRFLyUGmgN/skO6FxOb7318M/z1E73cbzJwpmG7+glFrFJKb2\naUmFaZzDwkUkzsHbEYqLxh5bX/puhlbPzbesnWWQqoJXYopmHHsFe6DLix9u\nvn2m2nPuhEHiF3PqUm3ZCzcp+e3Ng6FqWcTsWeRQvBjSCbjxN2GFryn33709\nATpvMq4j/k/HesD2D2SkKdVVK5Hy8ox5bz8OJMcky7PPnS7u8YsfiKZUHv6K\nWzpp93cmU+H+WXthRFyDuFmqPHu4xlkyEzpuvSqL62aNps0PmKwiz9f31cJQ\nHplK7nmDatrg5nZbjLMW8YeRX2Hs/Hn3zFnQx4wkMIySPg55YP2rfc4bHkvS\nBRRshVaXivE9Vhxkco9AFsga/t3NtZ9dT7fVIH8WW2YBJ2MKMFYDxX4ifcD2\nwIKgh4y5p79cpRSxGbfmf1bus+bdCAM+lIAVj1dKYOR7rWz4/vexojQl5fgt\nPDbD\r\n=uCho\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.48f4b67fb.0","@material/rtl":"11.0.0-canary.48f4b67fb.0","@material/shape":"11.0.0-canary.48f4b67fb.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/ripple":"11.0.0-canary.48f4b67fb.0","@material/animation":"11.0.0-canary.48f4b67fb.0","@material/elevation":"11.0.0-canary.48f4b67fb.0","@material/typography":"11.0.0-canary.48f4b67fb.0","@material/touch-target":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.48f4b67fb.0_1616529288688_0.040518805338441544","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/fab","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97a359624a8f3830be6475d45c59cfd2d625ac4a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.0b8cff734.0.tgz","fileCount":22,"integrity":"sha512-jTBtsr8dlwqUZkh0/K9zdzl7bFgoEBaHpFCmlUrI1AyJPmL1o/T56X9kTq88ysHlGtEkDHUfCDZx/I/sKebfTA==","signatures":[{"sig":"MEUCIQCf/irYNy/D3mHRf/tyvkIC7wsWhzZjbDHHqf8t2C195QIgDbjhCR39KMwGoQ/PQcxiJ2u5PmRBeCdvoRnhpVd9OqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWknzCRA9TVsSAnZWagAAJ3cQAJaMMYduEmY0zlMsLvoR\nHd3j0Sf1YoXQKc/2LtDpv/3D9c8awoFIE6QgWrkWUW9f6aAvK0ykbRBicrVY\nTkP90fdUMJAy7ZpDL5TMTBcznDHudseekBGLFOtiraCeAB216/UUAC0R+JtW\nxfigWAyIEZ7UrEZdnTCmWqKwfxPkNW28fCLovk/CYFBMFX3mYX0OYeEoyZ1D\nM8299Ny0XUG/5fYsWDyk1saxsY/bQS0w11aEKaUuGGnmKo7cX54AaTyy/DDc\n1He6iXvnbe0aN5+Qn60i8oJy5+fyN60JCceRhWJ2ViOyJw1pk7PccJB+VyQn\n7xZ3lIpkcLR1v35ZoN/Qt8D6BxehLrIFfUvy9cMHp1Z7QjVdSnV3o62ItVa8\nCoWwAufux6OLtV3FPaR3fHSbF4kQ8mmJVXPczu6AHAOFOJQ1r+/rHEvg4sHl\nTvaYGeLFQG3iqldB7FYAomXK8SnOnzd1lwQc+i/4u7y59u5BpvuWf+pHx8cx\nYCyZjJqw3hIsoc6726GaYM95vbUmLYG0aC8aDcmS7QOEXEtHbZc9mOo0zQKg\nsxq8VntZMQ72kyhJVf1h+RP2LOvEE1JquzHPGGQioZsn5DEnCf+gr0LnLELU\n2l/FTahAnFB+hNZ3rKHsfyTWRx3GRDqp8/L6NFUX9ge2xfTth6cssxMca3Su\nETIs\r\n=kaVt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0b8cff734.0","@material/rtl":"11.0.0-canary.0b8cff734.0","@material/shape":"11.0.0-canary.0b8cff734.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/ripple":"11.0.0-canary.0b8cff734.0","@material/animation":"11.0.0-canary.0b8cff734.0","@material/elevation":"11.0.0-canary.0b8cff734.0","@material/typography":"11.0.0-canary.0b8cff734.0","@material/touch-target":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.0b8cff734.0_1616529907130_0.9908021985934923","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/fab","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.8943b991f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2afcbc0f1b605800e38a85c34fd4e0b3d22186e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.8943b991f.0.tgz","fileCount":22,"integrity":"sha512-UjEp/488SMG0haJ5+Q+cOuKgwz2gmzVwzVhNGMsPFrwIO+Ypl2zLS6ZwB3uyI6ZGRt996xVpOj0wPhL5NOx14A==","signatures":[{"sig":"MEYCIQCqyzuRGgrSk5VeoYUZlIk8Ur7zh1iA8jFX0+WhMWwajgIhAJAT2h2tcM0PrbPO1ANnUOKUrfnBQV3SipEv6KLIWJa2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk/RCRA9TVsSAnZWagAAk2IP/jQ6b+sXF91K2TP+5mSb\neOux1yGz1pqsdyVBCsz1+NY0a1qHOTxoJ0Z7GBt90p//Hfw1Aap2CPhx9Sid\n328HqoscFxreIK49ivO/IwVqLCuHWVLR02tZq6QTziWxojBcAoOHji6NAEO5\nV+q0BycTk6CJjWEZMDuiTXck3JuOZR4VFVmaUsKAZobY7FE6suF4LlJwiJG1\nMXWxWXn17dqCKBYpbdpiMEipD9GqrGWwVcHfXObzWTgADud9maWFlDSOf5tw\n8kKsuy84akLNdYbLx+IAykU9dcpJpwkciZ9ztFRpS4zZ7XUkk6O0JWgC5ngL\nzsxN4d+j5BfhQNh3IMvkFrSpzijY5K+JRATB0GdcG3wO+2xn/BXyFar3oIdR\nPTT1kOR6GSIlcLXcqay14B4M3sfz/2Bo97HGjgtEnxeStnsxa9L32QfqgbGP\n1czi6VP0Q36bKw7bEJZJx5AFxAny99A9jJQvvJz/1oVxbKsIKgwm1+uz/HGU\nBX/NDq2Px57e/T7ye7oc9B2GMOCEDuO5BRNCk85RXHIL/yq5RtH5eLEuEFki\nNSAaD79WGJIoGuoJvZjHd/RNT67yMJ1isWDBODHhdfKXO7bo2HuKuC8fQ515\nxnNcU6OtXmyjSCerUc3PxdXAZ7f3fTB/DSLWi70vrnyko8QLnBH5T6MtvUWd\ncADW\r\n=sLDy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.8943b991f.0","@material/animation":"11.0.0-canary.8943b991f.0","@material/elevation":"11.0.0-canary.8943b991f.0","@material/typography":"11.0.0-canary.8943b991f.0","@material/touch-target":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.8943b991f.0_1616531408947_0.7116579694357357","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/fab","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b98d0ceb96466df170f6744fcbf22e2ed1d687e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.3955d8d3d.0.tgz","fileCount":22,"integrity":"sha512-pi12OdgZL5He/NqgKnEU1MT4L4rt0pVwiQv3ffdFwweGFk/KSa0j8WIktdBaem9wyorXXOuWBOlbaAUp83SS6Q==","signatures":[{"sig":"MEQCIAtpfKzt0xhvTvzjGCs7DNfAT1pU/5o+SfgE5H4A0RAeAiBmtd1giHFIuNow6XNdKwmuT4/QybQ6nk34fUBdC5yPrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5ApCRA9TVsSAnZWagAALEYP/2IOB98FdWM0nvKno72I\nz7v1be8tEfPAedjc6QwwmbD5+UT3A976mCzsQ1ZSq1Vr6hkBWht1qLMX4CBJ\nFVFzq6G/77Slxh+jECOn3iWHNeGGcUJp3gkBtFzGDgr2MPAxziFX8vWyODC5\neE7oPmvAwmws98+hRpyvF/Qs+6DF5ETRx1LReagail1Q97nplTh8PVz6h9No\n11IhKB1GmUrcO+tc7BVO5QkFq41vu59TQzupGZzANTyz3rLs04Y0DS+xScnj\nCQLJbctShbfdsRfJGUL/EtbO6VTZS2hzthaN0+9fs1Xd/sg0fVbnsZRZa4mz\nGB1xns8e6kKFGlCcmnF2wni+oVgel/gmqliE+wgxbEWGB/1K32XZ7oIb5huA\nRWtuJw1zcr9nYxztdYJyyYEus0YwIkv6xu2/F7hlRoqUu/3vz0KL5UwnBA9z\nVbAkUKWOVCTqYW3MiwysADdc8JSb9iL9p0FjIi+3C5gRjeMcxF2Sw8GlLKfu\nPjP2+pz6v7Yginn0Y24KMcanF7Dc/xWgKSUnEKF3IXaxx2NkLukw1op2MLPL\nN78+MxY4hyz7pwxX4k6lool4/PbGP3JaesJp7bmPH99YHtyXGz1XlFDBdfKa\nD1lAGPfN0LBpgJXig9a3HVhN2tfVOktGBu4yMDNOZPljiNluYeR3X4BeAOXb\nnSPP\r\n=8dDO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3955d8d3d.0","@material/rtl":"11.0.0-canary.3955d8d3d.0","@material/shape":"11.0.0-canary.3955d8d3d.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/ripple":"11.0.0-canary.3955d8d3d.0","@material/animation":"11.0.0-canary.3955d8d3d.0","@material/elevation":"11.0.0-canary.3955d8d3d.0","@material/typography":"11.0.0-canary.3955d8d3d.0","@material/touch-target":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.3955d8d3d.0_1616613417081_0.7815511362124914","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/fab","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb041fd8e4bc38b02415da244353d7276f6b89a9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.23ea2d85e.0.tgz","fileCount":22,"integrity":"sha512-W0REJYLxnGO5AJG/3NDZFNGCxaxttkUL447/O9jjIZtHjWY/9mHaL/RRY4pOGdz+qO/hJMULgInPX9K1rjqAfQ==","signatures":[{"sig":"MEYCIQCoXxnrMUNych6/Ee3ptcPtPCuDQgEmvyxgwqfj6crXdgIhAJJn3pm9I4Vli1tcPkVQaN9lPgjk3BtUPxN3wbjCWoVv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMleCRA9TVsSAnZWagAARpkQAIeOZTovoHKzaNWbBTAH\n3/H1xh/+z1VuxWD8Xzkb3dYKUWZiB3lGxWgZoeD1XlxlJdNWp0NUsZ6+qtx0\njhW/iXNOozNu3Mn7aiJZ18KmJVzLi603eEHRcMlbgPSGMJr2RHPGhGh6fDhc\n476byXJjqK0OnyQgbDCbyfxDMdmyz3MGOf38HTjP53WPMUVM9CcpCcd5mLva\nv8RsREifnZN1CHJRrAEIe66+AbagmkmriD5OHArNeEp6YaLmaWsXmpV0x6w+\n9Gi04uNt0YubIltooBXRh1/dnGieuRlDV4mMTXQO3NgJpmMxwziZwd/BtNEx\nHeEyrAIOkKCIAayGIVCnnUiws4bcJvBKZ1g0Ey5KL8ZZ9TmMxAfK6QaapbLl\nRvXkHJSsBxFcl0QMOYXuMlRm3EIi2DJlNoVD+HutZnHK1e8fYaFtneJAWRpS\nHQN9Mwd5rl9RAHs+hj0lE8a7oWmm1/j2OobdTewgQCz7mrwTyZ7RegBGFZ0+\n9h01R24HB/EMbXiVI0KQOnhx3E9P05YqUqp2BxKhmO59Qo8AjV1rZw2jGa9a\nZEcS0LTbcwZ10Y2LuzFE9JVkHPoCReL5a4LmXjW1xJRAcd8GZmC7NG6yZz70\n2+1yMVO/E8lg74Wd90TdFZLewg6gz9t+s3uCdhk/ejIsFG2Aa0XDiMylRFhs\nkfG+\r\n=5dSC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.23ea2d85e.0","@material/rtl":"11.0.0-canary.23ea2d85e.0","@material/shape":"11.0.0-canary.23ea2d85e.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/ripple":"11.0.0-canary.23ea2d85e.0","@material/animation":"11.0.0-canary.23ea2d85e.0","@material/elevation":"11.0.0-canary.23ea2d85e.0","@material/typography":"11.0.0-canary.23ea2d85e.0","@material/touch-target":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.23ea2d85e.0_1616693598110_0.8495545130672719","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/fab","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"facc7484aa0f744b04fae9414aad0bcbd52ec9ed","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.e3ec22f45.0.tgz","fileCount":22,"integrity":"sha512-jyvbs3egkD0gg2oVQWseHpg+bvT3odS76CB5znXywk5I8P7l0TkYiVGK+gKDFwbbk9ZwWTzjfoalNkdAB5/zOw==","signatures":[{"sig":"MEYCIQCylXVhCXAh51sAdHhD6/+84udkPme/aTcaRwtcLuGq4QIhAKeNNm8MS5biHxF9V4tV04fJH3EQpSTP47i/q7SRtOUO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM8tCRA9TVsSAnZWagAA2k0P/RNLrLW/K6mXs50RBtp9\nxV2+Nm0eCYNUGmCvDeK4KnPqdTWPNJ6b6c+cyNPHo5q+e77ROGpMREJIOk4B\nSFxwQ8mjgFSczY58MVaG/dzEEQLOFnFG5LTHr4NgKo3yvmlMrIOl9UfSiwp9\ngjlduUqSqrfuC908KLAFfbvPeXgbg+P6F/zia37OFZJ0pQWd/z3TK/3KwSJh\nx9Oiaqkd5ESCflAq5Nx0T44YShyPaMzfgnh3mXs3pQ58DMPU/aeOVNtbFoMr\nAYexzzOM5BD8fnObjXGc0NXbH81nHBExSZKMPwM5He0YeXo0txbo0/xyOeqJ\nTIs5zY/Yqz1o9QcH+1DudvXLsZc6GPnsyImawacdHUpRGrmvEe76LBFH0kWk\n7PYd/a93ZUE/Mf5Yy3ATA8OYB0RHWzxQCJUpV+Zsn5xoMVi0rKy6gJxVsSd7\nRgcvCnNTTyxZrT3jUaeOB2P2P/bK43GEmLKKoaqps0EuPKM7aw6QCBCOVjTH\nCnq/edyXhtXjtBYUP0cxw7BFX+uS4q/nmMRJbztmVwSWi6Znnk4NXkpY/5dt\nIeq4JnnBss/T+Uxawa49hkj2J72mNIw9kGBtMboMwh9KxtfImZR4v4vPv6xw\nATNUCVRo1ERoqnevjcYVPcUaUgwVUWOvdWMk5+Dxf3hycZnK2djo0Y5xdAEU\nWN4y\r\n=8NK1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e3ec22f45.0","@material/rtl":"11.0.0-canary.e3ec22f45.0","@material/shape":"11.0.0-canary.e3ec22f45.0","@material/theme":"11.0.0-canary.e3ec22f45.0","@material/ripple":"11.0.0-canary.e3ec22f45.0","@material/animation":"11.0.0-canary.e3ec22f45.0","@material/elevation":"11.0.0-canary.e3ec22f45.0","@material/typography":"11.0.0-canary.e3ec22f45.0","@material/touch-target":"11.0.0-canary.e3ec22f45.0","@material/feature-targeting":"11.0.0-canary.e3ec22f45.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.e3ec22f45.0_1616695084641_0.7723434108260339","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/fab","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50378c91a6ef53e03c054349e4ca802248303c9b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.4ceb42220.0.tgz","fileCount":22,"integrity":"sha512-IMZpoJ6oUUg3QD/uKGBdY1nm1mwFTWTFG+FzDV1QOsaQCnWP6uJQSaoxurzhmAAwBm9/R1tpoENzu0pTuUjVlg==","signatures":[{"sig":"MEQCIAnMvaOggBYY47Ap6xi2gcIoDbExjPT1mRLGHwXyS0BsAiBY25/x2zJanWOWnoC5UkoOKs2GOJ+WDDvpfX8v+2gmJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZQICRA9TVsSAnZWagAAceUP/1/f9PKx/iBuR1MfdPQP\nr2v9ejefG7vHL3TaMBmTaZQv99KaiDD0UY0Rm1v6jI955xtPzzYr+IL9zHQi\ng3DcJNYvYe7S0mX4J3tRBkGaj910WBLov4f+AeaN5+fbOSFE/b5bBydc9MRi\ntMBI1K0AllX0mVzUI5BOI3glQC/Xbt40RhgPUa0L/KniGanIONYkj5TII5qs\nrzUIsuNdlpagNKRQLeQ1oGnEVKxpksRHTWlWT0rvx66hrAgMLe/vhCE8FsOe\nNZIfgOnCeFkQV238jB//GvchFQFpTtosRbPDuKRcnMnpMwcU87UseDRvdxkJ\n6Vu2EnYmIkXtuNZdc4mxapZhuxsnDDK4Uit5LQMt4Ab1XTfmae580oJ41p9r\n1oHkXsbczoqq32r1qDOwwYvi8gl8VbT7Lz6LXw2W+TdhauOnXtYBqq9MFobq\n966m8V6QJxMgy7LULl5pISGpAQoOvgduMxu9pSKuTDjhkhzJL2ECp1zEO/Dy\nh8H36Y+MrKo2HJTfG6jdZ3qbHjS1NcNfUaCHEnyMQ3hnJyvsLwMzFcZdKRYR\nQIsUtDxIz2rqm3r7e3s9cTN1FScbih3rZa8rvNNct9ihRq8eYYsaEy7KARq0\n3jL5nlNN5L0GqoRrkOQLMief5VRVEkTnc5HzXSbXFTf6iWABol8LMwtfj7vd\nzJTU\r\n=U/k/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4ceb42220.0","@material/rtl":"11.0.0-canary.4ceb42220.0","@material/shape":"11.0.0-canary.4ceb42220.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/ripple":"11.0.0-canary.4ceb42220.0","@material/animation":"11.0.0-canary.4ceb42220.0","@material/elevation":"11.0.0-canary.4ceb42220.0","@material/typography":"11.0.0-canary.4ceb42220.0","@material/touch-target":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.4ceb42220.0_1616745480299_0.32812308638039456","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/fab","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1671a8bc4f08b69823924867583b6b413f9a4916","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.dc9c84023.0.tgz","fileCount":22,"integrity":"sha512-OAF0rPH4VQpBo6LJtNd0mWC9Fk8zN6c+bQOGcTLpgYmRn/l68twYctNeCzQkiKNpCyofm9gjzunFRbeWXdGLWg==","signatures":[{"sig":"MEQCIDi1KjB2U4GD722ZQBJ+gmpQqFxGaCywxebOTPv0lt0YAiA5I1Od8gP+ZlGxqr9hs6bLn47wijbRBEzkyBaC1ilEew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2SQCRA9TVsSAnZWagAAyKEQAJARubZf17lNkRbhobdx\nbtoup3yPBwLI03IHM7HA+mdZ/0QKLhCpzxMhEmFkQvMWj/hf8zHLlu2ObfjA\nbHyKZnoolRX4pXJQ4q1DyCJpRqkp0sJLl0CRoMeblWuOcSRrU1qdm7pl7ESd\nRHnX/NI01QLhgdxgSHYNbvrxII6aokCI0gqxfeuLF4TeZQYkHavSRnjCGiUL\nhPtbSpVh4RN6UjmcED2Vry/uN50BXXaQoEb2lA971Lha34WYro4LKhgoR1j/\nSUkrbvFzf7ddoljjhimHuUGG8jDJ33oOoNTQAuLlGjEGXvx7IAIbpqvuikLr\ntKMk8z4JQPDAkISVnKi6xrjdH7J+4g7XCitSRBc4sUFKiNAVjyHLyE5cJKNm\nr4NmR8v6rawlcCA1xMnksb3pKFi03JybZzUV5e8BY7548oLMb0eSrq3MUf5a\nY7ctsfhW5vsku9qdxihJSptCBZxVP8GsWqLOBi7E55yvBVDCn4J8AWehd/9B\nOzh4cl+ZL5s6H5Zj3bCOI8+59vwwXhRUHjjMirpDo9uj7T3aYkWXMEU+tUNW\n6wefZeXsyUODrqI7nXLLIZZliGsCjii1pd1EAulWp/KTWfkLJ6u3wpZhatlO\ni4twBP9R8/b4ZakW30NSI3Vs4ehsXxS8v8aoAcVK3gP54BvwpiqKCNqQ50eT\n80+G\r\n=RkTa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.dc9c84023.0","@material/animation":"11.0.0-canary.dc9c84023.0","@material/elevation":"11.0.0-canary.dc9c84023.0","@material/typography":"11.0.0-canary.dc9c84023.0","@material/touch-target":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.dc9c84023.0_1617126543935_0.9502691418628146","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/fab","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.56fc26962.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"127fdf5ee9f8cfda9f119c272ba1b456562630ed","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.56fc26962.0.tgz","fileCount":22,"integrity":"sha512-f142oHu96lvDhMntClbcBBW3RjLPDFKchf6owJTh3ndROxv0u1VlvGL/Wkz+3u24V9MhGPgN5qmAMhMicFe6+w==","signatures":[{"sig":"MEUCICJy2WEZEWVMhsNMo4su419cH3c12hgHJzdgXNMzmmjNAiEAmSJUNRPy2xN9uK5eBKO/hDFeA51r6Z3A4mor529nK3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8B+CRA9TVsSAnZWagAAghcP/jb4ekKWGa7oWzYFOjJD\nwpIjBABDdFYF+uRJH0WdBo2GthsW+J4aen0FSSBJDI/iLZibAo43ftnMf6nt\nHrzqzEUJT1MqADzrI4LjwfSw5iXFe0ItL8P/Ys9mON1MnSQIBdhsfDPUqpOQ\nxH26fpgxEoTLwz25bqolM6KnMyFO/1spSD8d9byR/fF6083w+VnHlVKaP2Hk\nXZGWsLEsftRSYXdGCU7b7NrSJljaJXkN4u9ng7My9QIk8UKfZnC3AZDcWAQ7\n9jQrKcNlfM1Ry5RJWpybWwN8RAp2A3TuW0aur95SJutCZolZAeOyryU4p8VN\neUcztGqGjozKZvxc77MSNszg4VIz0hIjEYHSR8E69krtVsPo97mPFEkFPpxp\n7pWUHxDCpmGh7l3+nHD6sl0dJ3HxNRr6wCMco8zVoACmpTJeUY3ldhpDXP7p\naPMUMVeuWz/o2JQXZF23GqfeKBhrviLz0Z0wB+NTll5I2k5dOMcH2ch78XW7\nQ3BFNg7jl335eWLPOg1FTZc0kdzFRw0pItih7XvinDISuOJ/dkApAF5K4IIm\nkpf+PO8SsuhVcnf4TpwuBj80Mhnuj5ihErOIpqlopVa2CYL1uToddsaWxxS2\nca7/7c0Rq5ry0jjltmeKsDPCQfV7EkBaTdyqgpj/9BeWXExwnQKb7vrG9Bo4\nFmEM\r\n=HiwW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.56fc26962.0","@material/rtl":"11.0.0-canary.56fc26962.0","@material/shape":"11.0.0-canary.56fc26962.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/ripple":"11.0.0-canary.56fc26962.0","@material/animation":"11.0.0-canary.56fc26962.0","@material/elevation":"11.0.0-canary.56fc26962.0","@material/typography":"11.0.0-canary.56fc26962.0","@material/touch-target":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.56fc26962.0_1617150077862_0.8541052518752836","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/fab","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.bc318250e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df722a7ee702e64fdfc5085374713d8a1f2e5ebb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.bc318250e.0.tgz","fileCount":22,"integrity":"sha512-3Ha5EsMjakM9G4Pfm5n9T+iR8f41Js5hMTyCgeS0K+civEU6jHvFZoZf3xH94CDntXkbQyINNfGbF/7iQct1+Q==","signatures":[{"sig":"MEUCIQD1HzSMc4RM3WxQ5WL/JnF/avpVQbN20c3w/K0hZh+1MQIgVD5c/nj+C799e0+7AKvukT38yY+fqTy/kVhdAwDL2A4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9GVCRA9TVsSAnZWagAABc0P/3dKZCFQQEYuvUZWwQLd\neFDNbJXP8H3gKKlExvH1feChvaBV2ItKSCYAwZAMuEEkXHE6yz4Al7oUfMz0\nZev7fLvNYJgsVCtprOZuJXuOOtCFFFIGajGH8deZVwKv6WDNR9xI/W0Z3hWb\nZdo40/Jiqb8s5C+wK5bqpjvv89z6jmzMKCY+PdyHzwkxbQpY0vzCdvHE2J2W\n9FegyEFN0+dNSWaA4wl5S7trjdoXkIAMLfuo3Cy35bFGTf/qv+CUhhy16cpV\nx/B74uCuglCG+IQIL6EyJvQQAj7JUEuN4GztirSLCKpgiCfQ5ftx/ajMDrmn\n51iiqMZ/ZRX+DkAFUKlVwXO24aUUOe5L0DEaOlPqDAqqsOlsuSgwiTHsBzPI\nJtanwZQQw9IcoFlpkAis3v9M/guKHNEGXRnTnQo4e3AKB6jwuHfsizs1UGFQ\nyAWdcMNGWqO0+WIrI6osDxvsDVe2MxnnKtnrdyMHNLXBGDqIixlsFUh5J9rL\nVxACM4pOMAAziOmLtHGc8FZdTQ12NrShvyrF/xAmaXmPlu5gfEqCLY7sg787\neou5fkn1ZcE1SBruQDBDxk2YHR1Y5fWHDppCvtqBbJrnQ8ly3FYr5useTPwm\ncd2/SWg09+Kg0o8+7cmj96qYNA+p8s7sWVWgnVV4dLglDvC1kEC34F7V//mr\n/Qrd\r\n=jGae\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc318250e.0","@material/rtl":"11.0.0-canary.bc318250e.0","@material/shape":"11.0.0-canary.bc318250e.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/ripple":"11.0.0-canary.bc318250e.0","@material/animation":"11.0.0-canary.bc318250e.0","@material/elevation":"11.0.0-canary.bc318250e.0","@material/typography":"11.0.0-canary.bc318250e.0","@material/touch-target":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.bc318250e.0_1617154453089_0.5660583009581943","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/fab","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b30c25776fa3831fc602e312c876354ee7275ea9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.edaee19aa.0.tgz","fileCount":22,"integrity":"sha512-z9AigTpHpQx5QyUleZG4+oISeVAAY4Pqmgozj6F8g6mge5jX2lRq28a5ZCu7+a4peYtyPVpMt6Em1VIscOv/gA==","signatures":[{"sig":"MEUCICu7aCkh6AoDgsX7JbbV9J8ItqCeZK4FIUu2pyujpK80AiEA6xDikA47zyheA9kW53/vYg3LfuVTfoAojwhSFGmvPoE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9p5CRA9TVsSAnZWagAAoAEP/2TDUz1a6kENJ/NrP5fl\nTJN4QvN+N79gIqUYyppczbdpbfchLmSIb5IH3FN4HMpEbrCjFL/PPjrIVQgP\n7WOeUrlAIS/1wDPKQD5LpZB/Cu+wkGbrFHBAx7z6w2fs+RGUJDCJazFDM3ir\nlxSr882RfEmk1b2VoEBaXkBUjlh5qTyioW8zhBJjMs7r5GLiyG0pCZy/6bV7\nsQ8Ul7YmaOtguItdGEgdLqFwBBoQkRBKRHGqpQg4Dn3zaLoyXs3x9k7Sev0A\nqz3fbZP1I3VtpMV0Zg0XkjF1Qh8GwvfOSGEGszbLNudW1ovs2q0iA7R4a8tw\n2UlV62bfF5Q6jFTCXCw/j4/RwgLojrwn+z13amIhnlTv6uA6GLz4dH42ZDQX\natD0Cmuk4su9ML79unWVWSnG0hNPzU8fVLzaTHsBeKjc/TvNE0u1IMxCq7dn\n4QUb/nf5ncz0iCqGnUm/m8hLBH9UUuOGDUfai1klwi7PzY8czOs5UzJVuox+\nyHuD9mbGQEIO4A73OjTH720k6/K6aSw6seVFKqQTtcD5DjaoRrIEfmXn6fco\na319qDjYYhu5i+jIL68A1eu4R9dqL0j1+wKD39Nwxp8t27te68KUs0dBXHrt\np4o6ikqafZ9FJJog+nOeDri8p/H767ZXrq5OIyVoIe4miunXU6R5EN8+0ujB\nfB69\r\n=KRJ4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.edaee19aa.0","@material/rtl":"11.0.0-canary.edaee19aa.0","@material/shape":"11.0.0-canary.edaee19aa.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/ripple":"11.0.0-canary.edaee19aa.0","@material/animation":"11.0.0-canary.edaee19aa.0","@material/elevation":"11.0.0-canary.edaee19aa.0","@material/typography":"11.0.0-canary.edaee19aa.0","@material/touch-target":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.edaee19aa.0_1617156728668_0.89695306727403","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/fab","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.24609b822.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e20c71ed16f170886a449e7d35f6a73692d8dc0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.24609b822.0.tgz","fileCount":22,"integrity":"sha512-kZm5IpIKZGsTf356nok6rBRwXDWeoSJ/AwMSzJw1OK0uUgUGP1i3pvLSNk5q3wEuhCt9sAWf/JMNVkNbLuDP4A==","signatures":[{"sig":"MEQCIBOX8IsQ3Ztlxr9/dTfe5q4fV+xFHLSudiEQwqfgiA9KAiBe7HyUil32E5t6hDKBdy0Btqg7T66aEJ9ooNleNC0htw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOI8CRA9TVsSAnZWagAA2XMQAKLhEzV2ZAWgMOayizXX\nKRm1CVpXITdxXXrh3K552ThZaJaJF+6+guHO6K30e3nlFUU94qVafBn9l9vd\nH1lrWfeaG5D43L9hlW/GOdCglaZmBP/S7qp3VsMQZVUKxuM+CS3oHyKdHKYr\nj9o7tP95EGwbq/SpKTrPGTfwrbN9pexoIHYN2vo0oo4CPH3dPaW5X7um5EUN\niIn11OwvmQWWo4tdy2lQy6gwUgs9FhX/fzPPD6TLuBM3c6Gni1KDXxc+3icu\nQGPNtgSrRSImXh64PLSka+TctN1IqzP7+YPwi5eIRaS6dHR6GiqmnSKOk++r\nLE/9nXvKd0yHXpvTRw6oWQvmFPBjKWHXyv0f5xHRdU3URU6f1sib/hTnTYtI\n22bN2eF0Mc9edH0thP+9ua2LoGY5ryRpaaUjKFeJyjUe/zokHBiLfmXko/SO\nRSbmTn+YjrH4nbg4IW03E36zqaBf/jQw3KEmyGEaTCmzz5qoq9cR+umgaWoN\n20pwX1j1bAABn4vvv9+73EXkzYxGxoE9IfBGrzT4BCJknYQp8t2qWWFgDnA5\n38LzwqDmRlNf8g+NNUCDRRPYbY+V1jbej3Pfx1t1e318V6H3yLB6am1kMjah\n+vZ9W7MygF9pya5iRlz7/QZQu6t4m1kaUUDVFmCepF7qID5S+pJ9nwjEFTr3\nSant\r\n=Xy72\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.24609b822.0","@material/animation":"11.0.0-canary.24609b822.0","@material/elevation":"11.0.0-canary.24609b822.0","@material/typography":"11.0.0-canary.24609b822.0","@material/touch-target":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.24609b822.0_1617224251938_0.22677281839499397","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/fab","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2a6afd65e6292d0e5519740556732b9e5627c17","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":22,"integrity":"sha512-bX6IrT4pX0C9EA55wc4vb8IhCtdmyEFxb/4M1Oi/f1HcYcsQF+e7CWiVfLmN11KLMEku7k+o2dT3hrqHoZlBOw==","signatures":[{"sig":"MEUCIQChI8T/j26j6J0jNsvhOQ2fiv9bY880pegyTbqMwd7BRQIgYcQoOhYDkW7MCXtBPYZyqCoQ2hOH0MzjqcqjrQJqJ4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeFNCRA9TVsSAnZWagAAWawP/iJ9eGLgZOsomq32tFgn\n0WbxOiQxJbZVDzcUXlsDFGOlXOwQQU2FdNcoV1zy0lDedELXRre2s5UvMNqH\nX3EsTi5Yr7l2z7xBl5LhWZ+HUw7ZVYH150TK8Sg40YvGwrif0Mt7yAj1ymuI\npITHGjk7gh4CoO89M6/eYfKTtYAnMV0DGRojyy7j6oSH5gV4ZFaulYx6+eNh\naxvmY07Njcp+DTw/dGm14pNP/DCL8ufliWRM/7/3QCP7B28yzaIoc2RTNZtu\nYFa3o2iEouX4is1Vwz5jJOXMv3sa/yKiH1VCyevxWIgG0ZSx0qMgSP8pXK1K\n/iC3EPjb+G+96mNAK6x5U3it/CYdw6/1RRGRZZvmo7HeMTM0x2yLBXXXsoGg\ns72QsU8ptkylalupAhBs6Nj+//VnOATivZUywJ76Wh0NF8HVR6jnuO15BgkK\nZiQf3AFDK/vRGWh7tkDMAFbfTRpzRZNyrWY0H7EMfMgMSk5PuvOPlE/M/vO2\nzPzfLtnAx6WqBq4VgLmGc/82+wsns/0CAutpDTrGzTwzxd9WfaZb6JlLBIEF\nRUmfiayZJG0aNmmgtLZIO1hLeEvTaSiyFB30v3zSrgDbBihx+mVUm083OVlL\naW5lsITnzfcMBnDxsuXfwkRmVrFI09IdAwQ36j0KNni2MIfhSf3HUL3eSOIP\nDoW7\r\n=ToiZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b6cddc2b7.0","@material/rtl":"11.0.0-canary.b6cddc2b7.0","@material/shape":"11.0.0-canary.b6cddc2b7.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/ripple":"11.0.0-canary.b6cddc2b7.0","@material/animation":"11.0.0-canary.b6cddc2b7.0","@material/elevation":"11.0.0-canary.b6cddc2b7.0","@material/typography":"11.0.0-canary.b6cddc2b7.0","@material/touch-target":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.b6cddc2b7.0_1617289549022_0.4737037102050554","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/fab","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.94937c78c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43cb5020971a2ec0dd5c665bb236f516b0f0f605","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.94937c78c.0.tgz","fileCount":22,"integrity":"sha512-nfG461YgRSnHRVzldUcpzus35iywrLtkCfA2CVdx5ktS3Oo5aJm1VMJY86BKtr57+m1FDIVNk0WvLF/AlK3eog==","signatures":[{"sig":"MEUCIAGSNRXZoSZCLTrYdd0TwXw0ZSVitslCXLFpbL440Z8hAiEAjLpb1o2q+e7jwhRCZ9RwtwW2CpBOPkEstl7YXJITyoE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjSnCRA9TVsSAnZWagAA9c0QAJhg80qj9PRP334EY2G/\npdfor4S0OCt7FjSrUZzN/wWoaHMJfMsNkOPe9O1/QHUPTOWhGqoZycG4q/fZ\nQNKDimNtoBR8j+eOhNoPZlKZrDLKTn8Eh0QVKp/FHTd8cv0b6FmXWTIFH/DO\n6Pgyy9YLRViDnzvctKF5jHLlCLwMuGk8Qe/quhyjDjAtp3zHFaUybXM4c7Fh\nYUT33H89+WF8aiXAREHmEWwlwMPhiB7BU4nG5J3IOSCZLF8+E0L65heCYIFh\nbcaLt/+hhnXIVYqsbFrihIIDXwfY+x/AQ025ylQEX3QHcfB3uKrNOGcEO9wT\nkMUwH6fs9NTctdhJQABn2WcDGkmplkykW0MAvJ0yKC6/ZVpbzUsd5woNhZTL\nQSDMvyp/I9K38iCV/n6YbjmGyuNZXAwNv/UoKBJMY9ugnF6e/fO9/vDqIYsV\nRZ72ticSM4gWaDvlKJ1f1RLqbCX0kdYyRLdgmLPselRoiywI4x8cxzWEsmx0\nOoBLvOVxfHu8sL0lJGWYQEJz90TFuwaIzXkvg0uzTl20/ImgRZFF4g9FymaF\nsUQaum76/cbSFCWQG7pEs+UyTYkh5GkxQMBOpS1B/CEunGeJX35xd0+lZ5i8\nWf5VpO1c6+a/UibIJSrKAqqQsiNWqIjkJsbfy+/ncq981k0Y79PcSaWrz3MG\nk9zn\r\n=qd7c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94937c78c.0","@material/rtl":"11.0.0-canary.94937c78c.0","@material/shape":"11.0.0-canary.94937c78c.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/ripple":"11.0.0-canary.94937c78c.0","@material/animation":"11.0.0-canary.94937c78c.0","@material/elevation":"11.0.0-canary.94937c78c.0","@material/typography":"11.0.0-canary.94937c78c.0","@material/touch-target":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.94937c78c.0_1617310887039_0.007497613040277518","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/fab","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68d36cc89b508e8a14eaf6957584b412319c10e1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.e7202cb57.0.tgz","fileCount":22,"integrity":"sha512-D6lZzwy8TaQjk+MRLqURXDo+WOSXah65MQqJTiI/PazKMvxhNlnemGB8Cvt9W5Uhl1NyKqP+IND6QbAjidDzeQ==","signatures":[{"sig":"MEUCIQCrjk7BIeF+wYryx75exD6utFXAyMKP1TATww6mmvx0HgIgYug5tGD0yGo3BOFrnX1xXpjUGJIDy7VWnwxwbCaKMj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk2TCRA9TVsSAnZWagAArjwP/j7S9EmAYBPaV2mOBZQw\nwhyktlMcmQBEn9jGIJJi+by0eFumzeUkjII3pZhnyu+b3a1oYUpDAJJoxcQh\nrOBJYvQ2Ev6iioDnbpd3YS+g4/WQLUwur2mLtfdkPb2uDbTDi9ikjWkJCdzd\n2s+YksyjxU4h1bfriDrBCYXoQxutvFkRGLXD8hcGgQ6JR97pJ0olS3yl+FWJ\nEVXuPD6WtNfvEPWTBVSgNrjFXjIKeQbrx3GUHGRs1rEybsrWuPTmLXdJIf2K\nTisBpTevZW3iWOG/1lvSQLf1vMJAbfGVqXGIV65tpqyLib/pXbOqVK435ZpT\nggR3e1gDuMBUDAEFZzp61C8TLmWVW+7nstblq+lr0uYF1yGL0jiyD2b/NRzz\ngGNn8M1UTbf6ZcZlYnxBGkj34WUrGEb7UVql/IUuabA0a+zHttgk7ntEbesF\nPtIQxGGzaPGOFnERL7RygNyrjznP+FbnTmhHGHXFXC3dE7vrju1DCtaLqP1r\nBTr2Z4J9fVTFWuYh3ICf6JO6+NYBfph/psgG1DwZI47ukFvESvZUJ74inmCa\nKP3Vgce3mRL9VV/s14XcIl2UsGW1g/Dlx3ovyQ3rrdoexBOIH4PlTDdrkmRO\nRHsIwh7fvDGkYTpV9/sQqkP8oQYGTKGvb8+XCYm8Dja2oBkg7yfaBXrAAAOo\nGnyu\r\n=KrHn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e7202cb57.0","@material/rtl":"11.0.0-canary.e7202cb57.0","@material/shape":"11.0.0-canary.e7202cb57.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/ripple":"11.0.0-canary.e7202cb57.0","@material/animation":"11.0.0-canary.e7202cb57.0","@material/elevation":"11.0.0-canary.e7202cb57.0","@material/typography":"11.0.0-canary.e7202cb57.0","@material/touch-target":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.e7202cb57.0_1617317267315_0.11659278089127789","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/fab","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.1f636b205.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0966912f264ba041366cba06bf7ccd7f59696c0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.1f636b205.0.tgz","fileCount":22,"integrity":"sha512-O+haRgomEGOIRe/KTywDB8PnqfzsY0kohTkQXbMYeGkxVPLX+i+mLZBdEzc7lwU803tOHwDWEF8+KKGHgP5apQ==","signatures":[{"sig":"MEUCIFWf2lhlmPAyYyxp5CZaD7K2djEF8uq6Hs0dh3ISLcEBAiEA9SUOkkzFlcQGHVAO5JbkenJCl1yd8l0j68ZWNq887cI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5mlCRA9TVsSAnZWagAApPgP/1FaSyIVlU96CpGN4UQc\nh6IbVaE7Ez5NKBjuKWZeqAZ8pTfnkZxXi50SD/V04H+uCkKchEgjUXqtqx4e\nMByQjHiTztYgZhcPZv5ylAiDbjUJoDShV+rggdKhLU3uBghS5svN6bEMgQWZ\nKE3Ths+E3w33aa+dK26HN+QICh/kppkRwBni4i7DwT/US1L6zGUc3Q+DTLEt\nGFXgU8gLsBiZn6AAYSIjOPPcRswE8VkPhOqg782p6shCAXD39HMn3r5QmiUG\nUI1N+hjrioR++f77uqfGl7THt9OhFmhv197BBFqSE0yhszimK5Vk+NpaALMh\n54Fy75CjENcJepp1r/DEYdPmSJwXZaaTce9t3yQFHSDQwXNXsZBISB0yn9xm\nKUrVZ8WHcu6rivlnfDaxXnO4gIuQ+QtgkIMJLHzhM1+yXWDJzvm2V17fi/sh\nsnwq+0+4LkzoTMOyVfUFOPQvCTgXgi+M+R4WZ1HRjXa78DrHslFXDCVLElFU\npajoUXlmUy9fITDmaNRKI9BcvjWxP06kW/d/Yu1QlDnjEM9ll5a7TIqU1qDn\ni+y6AR5on9UXHINTn66YFj+qNgmDvb2qqoOKanPE80ktV7aIWQPbJhJOH4k4\n9YFdwUkoGMP/DyTWjS2cu1mX8ePB6zrs1l+MNxwDdMk9nZ5RlWVonQnPU1gs\n0mFt\r\n=bZeU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1f636b205.0","@material/rtl":"11.0.0-canary.1f636b205.0","@material/shape":"11.0.0-canary.1f636b205.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/ripple":"11.0.0-canary.1f636b205.0","@material/animation":"11.0.0-canary.1f636b205.0","@material/elevation":"11.0.0-canary.1f636b205.0","@material/typography":"11.0.0-canary.1f636b205.0","@material/touch-target":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.1f636b205.0_1617402276530_0.7262414760488607","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/fab","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.94f50b260.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ea9b9173551df399efb13f5e535ffc6cf81201f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.94f50b260.0.tgz","fileCount":22,"integrity":"sha512-swuX+sa+4lVVlhNcHSjuISgbyk0wYO+itkymmTEFB2z8g9b4YeoaGYLTCiE0pyCrFB8KSthkuXKvAP139bLhNA==","signatures":[{"sig":"MEUCIQCIBq0xA+cQQ0dwOHTSMUaCbBt7tgIk1RqcMlSQEjYS3QIgIxieco6DfpJiKzIqM1TeW2xp82Hv4UcOiM70cQqq4n4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaydDCRA9TVsSAnZWagAAodQP/RIEOCMiyAGgMd9vSBo4\n7eBaWab5q8eJx83JgMT9DDk/cvMOQQaNKkOA5t3vQmuRARX0PJn2L8GFCWwL\n5832+UWA9qphX5ZvRoe/64bJxdNJ4e8HEX9kmR0BFdWhravCFQa8yRQKqLl2\nchE3xDxZDyRx3IUHOnkUzkZIRhrg7A9wZLamuTtzVplGqAJZ2dWtdedwMznM\nFkOF6AYTmmiUaDsfOE9R4dn1eUjU2vHpeENFhmQ8nCwrqnP73oavPyN6PfCc\nCmpe7Qok7+QmqTKDlXvk24S5weklWBCcq73O7hgwhJ4KoF+RSlUKG0GuiIkF\naD8lJHv9yMRE8GnRDBXwa77CP8qZ/2HTIbYWnUBz9USKbB+2CzUT8dW2rWUu\nx+ePPShOEu1iuCVFOkYic7T4+DtvOJZDLL8QlIW7TCeyItJYT7PXiTykXrS2\nCls1AsPUWGIXEJJxp4VBfO+6HtEFn1rEMJhtjw5IQ5P/Vr4kuvdyIZtp+MEK\nz6JQfaWgBAR1Sc+kthWyx/xaxHB062QHNG9fxVcaKAKKw6TjP3hJFb9EAsR9\nUauUZ6lA/JQY20iBb/xemZYaudDM7zSChaEc5uJlbPPz/azDAMmoNIubI+Ft\nrzxlnny8eSeFRZsC+sSg6PTVrkLEzilWDsBtywwe/nnP6nFf8SsdKORoBYFk\nsmrM\r\n=ddH9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.94f50b260.0","@material/animation":"11.0.0-canary.94f50b260.0","@material/elevation":"11.0.0-canary.94f50b260.0","@material/typography":"11.0.0-canary.94f50b260.0","@material/touch-target":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.94f50b260.0_1617635139419_0.8954060683380187","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/fab","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e86cee7d296b2d76c0c738a4b147662eabe4938d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.a4009b80a.0.tgz","fileCount":22,"integrity":"sha512-9uvrwJx+5reZR7OsyaJodzcplQiSZsdRmlECU0/Tmc54isL7D1y5Na/EOMSbQ2ycd+N5oExmnRPLiQteUKBdtw==","signatures":[{"sig":"MEUCIHKFxcV0aMtoTZg23HCyvmISm9RevodvL2w2ZOm7adR6AiEA37SnFEjnjqGp1mnmBgUUGpFxVMYyQX7SryPyqXgc/WU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4ifCRA9TVsSAnZWagAAbmIP/AkKtmS2OS4zyrz3Y6Rw\nfG16PXvf091bTIcwlmO6hU+ILq4QVjVtERqcDRRBVibmajE44io6y0fBz8oG\nfqPJkmsccWAchUlGb43q35oGaDa3e+QQckUhJJRCYOWf0ssnsXG3BvQz20UV\nKLB6UKJ7KADisc6x1Acw7LXqBaQQ7hIpazoSNW6mIci2RCY0autiIwg9fNde\nV4n85vxwTyA/UwcwLf4dXD8dhZa/VomRMCf9gSqCHwRTtaH0p7gZIRvkG+KD\nQTNgVqgUZwB8ZMsJPIzQ/KctMg8ePlxtS6yF7JXZf3XMdJui/t8ralwMV1xU\nWlnSHTRloJ92DEIJGjleXxP3a2v8Z7SYc1IBVbHL90sOJ0Ut7cbJ7PWqdsqn\nBsvfPcGp4wqSsOTPPTCUBYR/vi1nCedCQlhJrP973/PRyvBFdWZA7mkHG/7r\n0CMx7rfyXiOttM6W5VlccrjV77j+W0SjftWwS/rGPAn0sm1NTpX2KugNAU03\ntiuCtwNqb8EdcF888QM037vPot/qf7SOppFi2yTlxdAy3XxkspwLp18kfPma\nE0A2iaWMwDYTJHIPrFzjmVr0l3ZibDnrpf83CBljcwr817FRo9N/fgVBxVY5\ndDmadEngP6FIksB0N9Vc5HI9qDgCSJ3Wb//5Pg+sbiLX83Izvm1JNFDEPRXH\nTkBE\r\n=b3lA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a4009b80a.0","@material/rtl":"11.0.0-canary.a4009b80a.0","@material/shape":"11.0.0-canary.a4009b80a.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/ripple":"11.0.0-canary.a4009b80a.0","@material/animation":"11.0.0-canary.a4009b80a.0","@material/elevation":"11.0.0-canary.a4009b80a.0","@material/typography":"11.0.0-canary.a4009b80a.0","@material/touch-target":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.a4009b80a.0_1617660063414_0.5291217963148942","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/fab","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7186d5bda1d660a4bf40e0a8d6944182934930c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.15604bd0d.0.tgz","fileCount":22,"integrity":"sha512-im0TV8mlfPfGyEOP6y8nor7TsHbgd6jDRZY02MrWfB4RBeMSDo97aalf3y6GqPU9+6a00z0ik/m6yK/3dy7oAg==","signatures":[{"sig":"MEUCIDCAdm/A0M24wrptyVc6g5rRd8S/WX1ZFb1+Drs5YFmhAiEAnJaKelNqYKvPfbkDjktzLU83uAumxIxSn9cLK6iPy6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5JjCRA9TVsSAnZWagAAW94P/R9ZixzoSg47DbbAy+/Z\nX9IZr6oyuzMmGc1vJd8yvy0jKo9/AaspUehdysxe3HoG2fjAHB351p8pi36K\nXdRaJBkCvhtpxcuM7z3crsIeP6VOFVlgTdalMZRvFEy3kUCtrDKPNsxsk0E0\n0y3kKza2wJolmU5CeQKlMzBYg3EnaSIuTzqNLZV5VjSmgpMg63/UP20guoyT\nJyG4IZzY3YhvjyseJkluJUAesQS3/AWXCv8ELIQCDQ54QABbq3+4hMbdQpO4\nMvcrYF0IR1LTxNnck+kyMtSjwPPPWmnWWxjyClOdH06TKkl37UyiATD0nLtz\n8Y9+1A7OzAN0BtthFlIzNG3qTQFrCHrq39jTyXqJefn/ZjdPjUIBO8SvA+Nj\n1/CUH8ez4TESrR10L6l55xBzNYp4tr80RPRmM7LN/0OzpiBCtE7VTi+DeQKC\nD+54HWTauOQFMAezNm+Jv/+pcx+svjiPdXiO6/coYYRRczqiJkUAtWu4feBW\nGcHQy0RkrUBCH/wb46/1G2hO1DwBI92As0+hWrESRsfslORFs4fKWkevnsaE\nho3hpJB2D9vMeLKBn8ry7hm5dn1e9YfacpxJAQtmtSktdcP86/ROuT1g1Kf3\nv71+hRDe7W+MFrr8bkQYhQECcjjDyhHCQXIq5gbAq2fahdsowvVg0LYnYdoN\n6HPO\r\n=rdrn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.15604bd0d.0","@material/animation":"11.0.0-canary.15604bd0d.0","@material/elevation":"11.0.0-canary.15604bd0d.0","@material/typography":"11.0.0-canary.15604bd0d.0","@material/touch-target":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.15604bd0d.0_1617662563205_0.3120496411171094","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/fab","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.76da7876c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc2c9f812d32dfda38dab4dedd4d5fb7c9e6eafa","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.76da7876c.0.tgz","fileCount":22,"integrity":"sha512-CRtjU5orcLVxg0Wg49PNGdGh27ACi79K0JFU0kCBh4PdE4XBFgWcZOcW6qqcWqwM8WpnIcQIMW4hQB7MHNgxAg==","signatures":[{"sig":"MEYCIQCPEVDEhhdwlyvVep3h3DRgQT9Zx7wXl6eczm5i3KAg1gIhALtYHp1V/zFjfWoztFzcutE1gX6x6fJiAmUcXnA/vBLb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ6rCRA9TVsSAnZWagAA+BUQAJkL46wBWb8ZzCZFNFO8\nnRQNYPsmz1USK47J/zlBBRWPPgwT21FQdF7h9sQkzHUCrw7uFyz7+jsEImNV\nK2o3CyhIPKtIIwD/oDjYIsYrTToeJ2v9wP0gOO5sE7HAfF+qkfVdL/M3SXrI\nUMghjCaFmK6Lw/dcTLWxZhUlc5Te0vPuIbVNvf95qX3UvJ7zRVorm470enwi\n5xoJv1VObmgqYuIiD/sFhOQkJjw6tDDJP43YDdRpm6p2ag/YRs/s3C5bzSxh\nVPkIUgI0Ao+XpqYiACPa38JG+7hZxrA6wqelO1WyWQIyV7eacUHcpNW20gDU\nb57e5PAKdMtSpMTeAVUvTLfhY56kJHw9LiLl/Q+iGn6ZLgrpvfz862ZO126Z\ncKE7nwp2D0dvEokl/yN+Vh39xZhlqXdJZCsvULYCMPEJjDSIs9SmjIEO2CAQ\nG4P1tgO22SC4XV7rJ7nlacPBd3zpfUhgxuZ6EP+JL5zb+j5sOXsyQ5FmgvhA\nIdktOcREHy3u+t8TJ0NIfcPza1reVtNFeyq8eyN7/4lEpU8NDUXp/JF1e5P+\ncv7KlaBVkzeZsdsOwGtQup2a7jMoXA5UAaCT1j4wbfDNcvRgdwmlUHT5q/G8\n0QGrGPZ7cdFjbwgfQlhgFW1N2PDumXgwGsh8RxMkmtcUtSH/8Pwkh0QMOOW5\nQiWj\r\n=7u5h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.76da7876c.0","@material/rtl":"11.0.0-canary.76da7876c.0","@material/shape":"11.0.0-canary.76da7876c.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/ripple":"11.0.0-canary.76da7876c.0","@material/animation":"11.0.0-canary.76da7876c.0","@material/elevation":"11.0.0-canary.76da7876c.0","@material/typography":"11.0.0-canary.76da7876c.0","@material/touch-target":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.76da7876c.0_1617759914638_0.1813321093842284","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/fab","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdfef942842ff5abb2c047f67142db3923ec7bab","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":22,"integrity":"sha512-vJIf5w7UjgBPl/8wKIXjFh9oywa/jB72KO8x7ZZTIQHh7WNDW5ZFzxcF+CFtzf/xEws6dmZuGH6pP1fejh9lwg==","signatures":[{"sig":"MEUCIGBtxlA09i4Y4GAAF9++xbx8mvPmCMlXxz7/TAsvWyQQAiEA1hK2u8m4p0OBBi/dG7RcJHrr1nRGEcQxSQXrQaKhrsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf/kCRA9TVsSAnZWagAAc0MQAJlmnrgRziSjN9FgHKWH\npyPlNGQzfRJvTwY6dk7KLrQ65IQ8vethXgzhn/Bsj6Ecc3ofYGOxaJShicyF\ni2IF42wT2kD3B0RhajthWuaYsevYnWAheoa8E76vtdU04ZVCfmUSLbQCtjWw\nS2geGLoHZhMf5RxbdRIBTcQkOMT3bkuMIIu8ysfaesIkcs3pqafDMftPix8J\nx6EYuaKWRJXGuOvYW2AXky3mOcsb2NxtaSCEHw2ldv9xLnJ99L4wAXZQoyaS\nfMaM8ut7jidwDpIYARpwoQS0JUOjAU5OdnWVwfW+E3OGcMw5Ddq7CrqC8eMj\nBT9j9/1V7lT1SN5gPGLYHToPrsS8bxjaJVdCogGaHsRkApTxdFqYpzRqg5nx\nq7E/KWK9pHx9QO6DC7QzfqxG47C6NCvwiln4wW22GeOBYXLlrUDIUJVlnSQx\nBjKvx0E67V/uMk0vT7qDv5BwSClEcsWCv8HdHWDJT4RZW4VnBnPND5sUufFa\n+NwlwvCDvvhzayybYG7Zczggagt/a5iAIfrkvGBvKeKt/eep0k7FupX/4zXu\nKSKIbTNu4Otg9CFGKzG1BP6tVDkwmANWLmmXR2wBIPmvhpPtEEFWWTW0GtQb\nbFid4X255tKu6iW5pX7SfOR3dW0eDb1bGDzb6Zh+6xCzZvvxAirSTxC7Lv1A\nk6He\r\n=Wcvw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6bcb6cbd2.0","@material/rtl":"11.0.0-canary.6bcb6cbd2.0","@material/shape":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/ripple":"11.0.0-canary.6bcb6cbd2.0","@material/animation":"11.0.0-canary.6bcb6cbd2.0","@material/elevation":"11.0.0-canary.6bcb6cbd2.0","@material/typography":"11.0.0-canary.6bcb6cbd2.0","@material/touch-target":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.6bcb6cbd2.0_1617821668095_0.14984972767093896","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/fab","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c81dd2d27fbf0bbda0dcbdae848dee4a1c9e475","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.c91e8d141.0.tgz","fileCount":22,"integrity":"sha512-/N5XQwpY6OXuCJcgF4FPxMK3TuKxK7VVqv9Wo20H6B8NLgAc8vA2bwbYFOvS7dieV+HwRqtNWrgV305rJmHnTA==","signatures":[{"sig":"MEUCIQCxzeT962JyrWAfONr/JmuG1v19Nav9KUcG/ctFqaKxUAIge0uE6kpEt8kwlEW7igIdmhfQCWF/WcOsIz2uFC0mxTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgDSCRA9TVsSAnZWagAAmdIP/RHpM39IF1u6t593FmhI\nssAFFvQOVBfW0Cuwa5GL9rYSlMaig5ML4Xbq6mqxhqNcg/EuyX0o5q0Jm4sj\nCEsUfmyfhdcI4H7sfoqbNLcrDOLMilN4f4cmOTeZNPl0tIqiGoDlEeJM3LGl\nUPoHJmlqQiQKBywP/Wce14SbPEUsk7/gHmsRNW1LYxmFJ5qGoSbo24bswh4u\nCuPFutWKS3zREhPWKQnmwlC4Sdab+4f2NvOV6OH+BgN9QLuTbKhU5imqpoIM\npnOjJxOO65n+Rs5nLpYsCvce9pzmLaGhp2RznbokisSjZk1nSTo62cr1C9J+\nm2hSwyFs6CfdBRej8PgpT71t3aA/T1Ky1s7/lWORTeAWltFvE1fg3f5cnmU7\ndFVzq+jXqNACrIJmuOQMwNUCfzturVYYId9/jb8ugixz2BjBQfkzrDFIWrOF\nlZLy5pwLAikYjuolH8qkjAAO2gN1gLbSTAfgPsw1FjntM+eeAyWXcTwikf7o\n4YGbs400JiJvuRtiP1Pl1L2b7rtWZ8KqW7EVAcvgn96d4UohPapuXysOIJHd\nHta5hkJCqJCxw1brs+LxJjv6mrxqyG0WM1xeeq+tRMr1fIUmjtZ8VgATYHOn\niiA190vgLgNSRBaDsqUsXZCU+w1LNcLxAj0VvUojoEUTmi0VhBgG1wloWkvr\nLGU6\r\n=Yp9H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.c91e8d141.0","@material/animation":"11.0.0-canary.c91e8d141.0","@material/elevation":"11.0.0-canary.c91e8d141.0","@material/typography":"11.0.0-canary.c91e8d141.0","@material/touch-target":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.c91e8d141.0_1617821905964_0.762372788112506","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/fab","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.f77c50860.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fba45bccf0b6facfda6e39f63b530a12087062f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.f77c50860.0.tgz","fileCount":22,"integrity":"sha512-rfIid6n+0C7B2wHzfuDKVyTWbcEVO77OjvObbFvVB/RkWA9prX4AmFlG9L17q+j9KXpin2UMOUXBEFRl/mfHsw==","signatures":[{"sig":"MEUCIAZw4psW+cbaETPr+kWkFDZ3rP8RZN9BOpEKtRuKysrlAiEAzvjI3uBWMeQ/U2wrvEenbnyPwYj2bvmjdBqg5I81qZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyL2CRA9TVsSAnZWagAACVwP+weI6f5aL9Ec1DAxtB+z\nTEbYXDZCAIvIDANAm1Mhy9wRCSDvJJqXnEn5+SXHBGGu0sAnzX4q5tkqqEZ7\nLHFt0+v6zTy6vI0jKt+dROVgdB0uvBDvzZjTFXb8SHk1OuWC9EpjY16xBMuc\ngWrd0VKXT59D82EENYHRaKViN9u4hRE4ccLePYElQrZnbPrcIk+UKfZ3DjVW\nqMRcJeWmQlLhAzVRb8u57PWOi7r9UIhnxmqk3jyQscmdPFiE0fr8pVlKu+75\nga/FF0xI6t49LSdLkzdFqbfAeA/faF+opGJp4hFg3dUcSxJx3hA7SawjIeu/\nOUEya00Tms4TWCHe7nRSvAr8U4aFZ6tUeXtchhz9t0Sflyg2GAE5EyREF3E0\n1g8cqyYTaCMIgOOWhR+W1j4jYxn+rnB8VzC7OJtuDOvegHTg80jQkS6t4lnl\nh0GQTbNQt9IjCDG/dKGR3c5UPQHTP8718R9FOGDZu4cqOs+guv8271UZ8bI/\n8G0HXV9OisT3i6rOqWSV4YVwbNDFH9qibH88QDqzmPhpyBXJ2tDF8yAsLvpH\nXnV7T+uMsIhC1itRppufE/EyBawuE71ZhGq6E50LiBNCoSk74hmFYKvm2+ot\nI+c8kZ9Rx9RRzSk5GOwsQnzVIKLM1z0Zk4Zw7JNmNCqJXzVYH1yOEbKl9t2E\ntCw9\r\n=H6RB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77c50860.0","@material/rtl":"11.0.0-canary.f77c50860.0","@material/shape":"11.0.0-canary.f77c50860.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/ripple":"11.0.0-canary.f77c50860.0","@material/animation":"11.0.0-canary.f77c50860.0","@material/elevation":"11.0.0-canary.f77c50860.0","@material/typography":"11.0.0-canary.f77c50860.0","@material/touch-target":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.f77c50860.0_1617896181703_0.6644620626531377","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/fab","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbdfb930c4b027f2b839f9e59d52a876237553b4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.367d88bdb.0.tgz","fileCount":22,"integrity":"sha512-DzwgjfZWSSsjuovr369P5V5Pmi9jl6sXo3EENkrEFinBTkEYceDwg91ktxN3XjST6ZzdSW/VcVy0evWyWu7gRA==","signatures":[{"sig":"MEYCIQDHd9orOsHMQVWukCvypaKddfK4Llml5vwOQuqGW5EJ4AIhAMnroSBgxB+3ySiYO+wD4AV4Fw6D7P54mtYPnzFhef8d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzGwCRA9TVsSAnZWagAA+ocP/1Y0JHLX6Pw1EaFWtQki\nzt11q5lHVp4W6UxD0b/7QS8J5VSH7Jc7jw+klEksBqgQfwgFeafdGM/4X7Y+\noU3iiGQEz6i8rSGa4JeQOPGshQQkujT2K8TcFVaDQTO8HxfSYs10b/U0nzB5\nv+L//ULoUP3zdcO3fDjW/hSWsrQSnCXEXQugq3RSKDkuhQEugjljCnvCyYFF\ndtnX1+iFnL90Jt+7rI3BOlRT6JkF7SX0/CAJxxygWpzrbX+cz1z2reIqcBvI\nsGV6WhwYC9tZ9o5WxqI9NPFhLyo8OekNw4H2lwvzrnhfg19uX4+mmVmhvqaY\nQ4rQ1Tj43hlW+jk9tFmZJOQI/lYQXskBbnTbb4QOMfHtPChk4YbeRkKbUr2B\n0elUPIxA9JZVRNiaK4ClLDWFRaRomfsLpHl8T2tuRba7DmvoyTbLSWQgEot9\nqF1V95CwpzuGjHfDipbG13kNqOI0jKPWg8ifTmKN7Ur3n6y7q2XB4M1MixJ/\nQSr+E1x/bKJhH3kQrm9XirIwR8oXGz46lGLrnDjs5eCv7SwEns50K9gGRU0R\nKM3bokHcCoOzcoONxacVXtv+HalZXEPc46UocOfxIGKt0YI4YrR+GLVroofU\ngGPqVUao9z7xsocSW8WFc9bhSBcBXRxvtIIb5zrt08Lu3ByNirmCNOhILS4e\nc2TL\r\n=lwh4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.367d88bdb.0","@material/rtl":"11.0.0-canary.367d88bdb.0","@material/shape":"11.0.0-canary.367d88bdb.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/ripple":"11.0.0-canary.367d88bdb.0","@material/animation":"11.0.0-canary.367d88bdb.0","@material/elevation":"11.0.0-canary.367d88bdb.0","@material/typography":"11.0.0-canary.367d88bdb.0","@material/touch-target":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.367d88bdb.0_1617899951832_0.01945547400548442","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/fab","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bca29e1d1002618791733226e1090514aae96f0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.0ec437d3b.0.tgz","fileCount":22,"integrity":"sha512-V+EaxXIMQ3zkkb5KR0Q2Ddi+szHjdiAceM+uM7VJvNZlVXQXOrmlQD1qbggiWBimaUq2eebu9G1/Lt5F16GoSg==","signatures":[{"sig":"MEQCID6iakqjmBzdix2zN7pw1KOjOix/3LnX0r+WZo2hRfGhAiAgapWoDiYIC4U00cOqxsweMLAnmBZ1XBC/REsPux/1Ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1sXCRA9TVsSAnZWagAAloEP/2UaCOa/Er7OJsXC/L0U\nQHARxGjOSeXZ2QCQm19oOHFmz3kUpvWA+0f6Mh8Gicn/P1che19BJpHrAvEK\nJjlcRSO7iagNijB1vIc23vBJEa9G+P7w5B5FaLx16A0SAUjS3n0YnH8BItrw\nQ4P4BhoI6Me9sWcy8V9qswWZp7BFdHu4jAduaUgxo0bvLzmRQAgk7FMv/K0q\n6Ji9hHwOyqsknSkwSDKMCK2/jmOPCuzdN2u8T6c4F2oH8mLCeP/5rGUo3/6r\noTs8okMxLwIeCZ7bLsRGGM8jiTXvoOl7MiL4wMEj6ybOhXatotUAzrEdrkWB\nIOgCSjKUL4Jl34zw2EX5h+dI19sZ8b6UjMVS9fyypBBL+5BQIRA4tbb76yEU\nu5AM68804rIaZBEuZ/hgHMGR2Zn5y2c2ORM7EhQRorhN/Zzk+JgN0ZqNHD9T\nbtMZVfKXOD2Os4o1sLYkLMiZXoUGweJMpI+3V91ooppXD2MzQ6C/xwmRviXx\nNIF01Q97bVpvT6uf5s4I/YnvLa8BdwfOvtpz/T5tauZvqRsbXtZ8rDq3fOa6\nyq99heqxE01xVgN5J3pCm6LBGXq4n1o0rpZ+eWXZoAmY2+KwsvxhDC82aknd\n19u/KpKbs2mH4DrabplSYtP4fwwgFLDKoV3+a8VEpAYdfCGAc3GJgZWhPEFs\noF9d\r\n=5CpP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0ec437d3b.0","@material/rtl":"11.0.0-canary.0ec437d3b.0","@material/shape":"11.0.0-canary.0ec437d3b.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/ripple":"11.0.0-canary.0ec437d3b.0","@material/animation":"11.0.0-canary.0ec437d3b.0","@material/elevation":"11.0.0-canary.0ec437d3b.0","@material/typography":"11.0.0-canary.0ec437d3b.0","@material/touch-target":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.0ec437d3b.0_1617910550633_0.04794529571383932","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/fab","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf0ca593e90c4ba4ba79afda776d61ed58684e02","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.b2fa996a1.0.tgz","fileCount":22,"integrity":"sha512-vxszQLNUncjwns9jVXoe6Clx6VyTQyh/fcoo2Jc5uLYWlIaK0Tqkzq1XVxtYMuVW1qRzraMy9BtCsDIHWwFBbg==","signatures":[{"sig":"MEUCIA1bEyKI3hcvwIpKG1OfZtB9V2WvE++VYfHAdh3XCxyPAiEA8n2AXu5/XojUmU2cGIxE0GWCDOIjhyIoTuNtM0xbfsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG6rCRA9TVsSAnZWagAAr3sP/jJ7iFrxws14RT4nYQrD\niczpRacf4HJJ+eQxbGT86Lzn6fgbp0Z/wGLQlQ3kigR5UQTAXp8MqHoAd/Ou\nSJhA+Ac5DPLAEcarASixkbIEMrsX2UbJlDiM1bALr+pC8RHT3VahHpEAqXp+\n4+xHFKHuhVyjUo9q7gBXK9dUanDaDwVT2DGelDsexZTAK/mZSN2mV8gwED8o\n7jF2gLZIq8sb8e6IVkqLjNyoatH0cEXGfkSzAyw9UU5JFu5IghsgQ862OMKy\njlT7dhF+aRRK2SF3+fPg6ZtBHGElV871WkfSy4SAtsZCHc4RwfZuHZoeZNV3\nRhcaQ4HJGBnRxFdRXaYAPFIl3I/UKVvXoeBqTRhkxhSrZqXMGACzzWKMRXqN\n/zO0ptWCgsQ3GyUw63mhtNCAA7L31maFOD9RGIeXLUIe3MOS3TsG3tN0boiq\nwwI+VzK2ZyBcSDYN+emT1hLvN2t5gES1rqPYN7Xe9FiUFXwIjUZYh1Daz2o8\nYgDqGMjox06g67R3MkOJR1G37Qn93CWNbkRGMtTI4zHWUyCnkZdTEgAvBiYN\nYom/eoZmLuJyN91Ia7AJZBFUvTmTaHQPGMnLGr3Iqj72RpAFG2wR4e/G2f7H\n4NcgB+8/F3lY2piYtfgBQfZV0AHi4vP6kjjKXZSiv+pMjtM65/TnOKVAeTpo\njUsC\r\n=SfLH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.b2fa996a1.0","@material/animation":"11.0.0-canary.b2fa996a1.0","@material/elevation":"11.0.0-canary.b2fa996a1.0","@material/typography":"11.0.0-canary.b2fa996a1.0","@material/touch-target":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.b2fa996a1.0_1617981099332_0.37102967905765727","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/fab","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.24255c408.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c527cb22d76e5c495c16ea7d0cc03864ec16aaf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.24255c408.0.tgz","fileCount":22,"integrity":"sha512-lZOUYGr8+kC+0dWTA6HpTGYvnZiAvWZWKhbdQgo9TAFAe+bfwaRI7pe2l2bvlnnSqWXeMzL9Xq3Ms3U9Wbs/1A==","signatures":[{"sig":"MEUCIBD1E4Dx5BOef8YWa8gucQZ4C0MRJfSf/NRfo/yWXzpVAiEA4+yjH53R0Q67qBvGlbqawx1Oh7b4wI/aEucyciKhiCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLVKCRA9TVsSAnZWagAAa5QQAIYqXKjMaWBRNnn9mL9E\nk7b2erpFfPTMS/s+xAsg7PbOhw3vaA9flL+pZC0zVRxrjmYasA4EiK0/D5zo\nA83JJ2pE/MzDTfe2MGZDTsyCzYIzJblPOpm7yDcQyUMmncOMmYDVXHxgCZJl\nMYhWVDC5mLu+Q+pxtzOBPeAmFe9LanAKmTW6EOdwdlmxhkeQNL8ixwjYmJP5\n59l6iiOmU+NpWgRsRqntevZT4fbPbRupoQ7JraEwc63JqBAN5COVuY7a7iq+\nKcw/Urb/k86gStLZvgPkGI64Svm1DucZEzTzdMwQxDd42Wek93U2a8d8HqsS\n9cY7S7OTTjmrhuIb99LdiSv9XbuSKPKKUmt/wbwT/VCBMgCHZ8GbSeW9vEEn\n9pW7lLXUfYEFotXxjyu7HRxh9+AvkVMJ+LR4SQjkVuCwVWVKuTbg3DHGy90H\n9quy/iKU3w+GUZMjnC8bD8q8oY9/Otf4PePsoOZvozYGlxwx4oxKv65AOpwF\ntKMWt9wC1RgNdXAxOp6DDExaVuI/nM8+j8fx1fHuCU7TXAJ920IJ2AEuaXcS\nuomXUC4BW+a1BvePohFiZ8oftaPTKvjYBDFRhN/ZTHE+X1itSqOF06cKasAc\ngqdVfFVWyNHmGyeTfybAZcaFX3SSFukAiDIvEWIsrZXvyzuMU2AhnDnjKC9I\ndR8/\r\n=a0Uk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24255c408.0","@material/rtl":"11.0.0-canary.24255c408.0","@material/shape":"11.0.0-canary.24255c408.0","@material/theme":"11.0.0-canary.24255c408.0","@material/ripple":"11.0.0-canary.24255c408.0","@material/animation":"11.0.0-canary.24255c408.0","@material/elevation":"11.0.0-canary.24255c408.0","@material/typography":"11.0.0-canary.24255c408.0","@material/touch-target":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.24255c408.0_1617999177781_0.9191498373731275","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/fab","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b9acf70c8e76d28ec55518a7e1343daa53288f4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":22,"integrity":"sha512-SFhz7szi1DtiA7lZCFOxfg40IPTXYIBgqf8sqxhOniyFVJyOk8NUdNpC4t6qWokTKIk9vq0GsZmiQ88yrWcwHA==","signatures":[{"sig":"MEQCIHLE4ijOEuD9M0idibC2/ECS+Oqr13aDZdqHSrWgTKkIAiAo/tSMLOMkKwYvm2aYXE2uNf2p5SeQXGspslChIR7caw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNsNCRA9TVsSAnZWagAAUXgP/3cgmfyjrJOUX8tw6mb7\nHVx97rtf5+oQYrsKBEW6oK69W/Re1Wv+GmNeGhguVb+6nxiwJl+m5j+q7jzR\nqd8m0hHf/DsyJLxNuUzR2os7wn7Cv/ym4ykqJcaHlZWNMv62XFr+9qgcWghL\ncO7AJXfiWCwEFUSV+JUlNNveZcWOuLVQ1/Jno9/wNeFAJo0QmsWaJ9i2F/uW\noHlnNOARoFqAuzaICYNvAbQ+o3iPHfj3bRiV4DSrE0jdpUolGuyK9HDyW9Fb\nKciXIih4CaqdWEjESkSAJ96uXNG5x5H+0531iuobnOeiuiN+dUs+CdAyjLGk\nZ3XCARORMr71zfymHBfBtj1eUMS3Oee0NR62Zhj5PaQBcjSsRGB0GvS30WZQ\n6imi7faiKHF8PrZURzAuZLIIC7wtMz0PyNMSUI3VImmBAxXD4V1DbgN8jASU\nh5/e92QVB2CEdKG12oIMartrv+u4bDkJUuoX4M17AkETsWXt1KWg5dqV0pm/\nX9/vNvgcMsCYreLjx2tPvVftajz4deo7NVqxFZGqgnpx7BcfrSvT9yB3jSRV\nWkPT+6K78qWhMNRelY+dAM5rlTrbnlAppXKIH+FS7qhITAyl4flb6UOst87m\nXenMy/h4HArRLWjRpgaNaEX4itwuta4UzQjpSJlpMjirLCMxVp2vGUMbgKq7\n4ukZ\r\n=4Q1a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7d6a4bb72.0","@material/rtl":"11.0.0-canary.7d6a4bb72.0","@material/shape":"11.0.0-canary.7d6a4bb72.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/ripple":"11.0.0-canary.7d6a4bb72.0","@material/animation":"11.0.0-canary.7d6a4bb72.0","@material/elevation":"11.0.0-canary.7d6a4bb72.0","@material/typography":"11.0.0-canary.7d6a4bb72.0","@material/touch-target":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.7d6a4bb72.0_1618008844640_0.8845381274040434","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/fab","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.352b295c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ccf6bd39cace474bdd866d390add147b9e5f81d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.352b295c1.0.tgz","fileCount":22,"integrity":"sha512-52vvtnYy/KbSy0EBya0W1zp5UJzhIystmLb5SjA/ZVKBQfyK5XXomL85bYsbBlweK70tEXLJ5eyRMmEonmJxqw==","signatures":[{"sig":"MEYCIQCyC3w6rGXAxpJsUpIxQSTBKMnTBzdrMfL/nhLRl3HDdQIhAKJM7ZBvLOtDgkwm5VRb6TxNXgEBmK8gTf6xWFPmTISu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI5nCRA9TVsSAnZWagAArp8P/jeYfNNewxLtOlU1dJjL\nx+Xu3hSEU22oVK/ZMtbvPniBKBRXUEGJveK/Blg1et/UIXPqSEgGbYfGzO2B\njmsZT2w5JalTReqziRfpiUXLyZDpEqF6ToqWgPq1Sdc6++ep3dwWXG4nYCKG\nst0HPjsito4/EmoMmGvgDXpl9kEautrQfNgJUxfGjF1+eqlsyjPkBIA6iLve\n/2R4r5pqzHlsobMlxhrEpFcx1rgZRCaYMgofra4NurMQWPpGm22qdckJjgeM\no7HAMGkrWb1VFM0SGf4KuCJf3S3nncjicGVaZCoJM+Clijvv/fjQeFXi5BzX\nN7fVLc7KyBh0XrVl/lRyHlatnOPhyGdKh2wwHCqEy4rZqWIAtmhqx2NkWROr\nNG5kchqJt3sa4ruggYFN5lB1InKcF+sOhhZdSEzzfwKGYofQbBZ7myKt5R2E\n3N+b9DClymRSRKpkV9ISuBDG5ddkJLvwhT/9Vyw3kWSqz1gkrjMwyo0XYAuL\nPzSaj9UDI45E62G43GGO1PVaAq/D35GBk13ua8/thdT8jZd5E5W2kTz7B9Eq\nMnsyUAeVX+J9suQzZYpOp3d/ez2nMTBh7ydznJwCLsNb5PHIaR/sWpko4FmU\nklK0CicIGrEd+PtrmIzIPRO9wrDZheq4E9Hc8noMRmMQsS4S6hB56ZSa0pO6\nqKYg\r\n=UGUP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.352b295c1.0","@material/animation":"11.0.0-canary.352b295c1.0","@material/elevation":"11.0.0-canary.352b295c1.0","@material/typography":"11.0.0-canary.352b295c1.0","@material/touch-target":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.352b295c1.0_1618251367196_0.5403735086805119","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/fab","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae19febc6ee1a2974173449171b730a3265f3b97","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.ab99b8064.0.tgz","fileCount":22,"integrity":"sha512-As73YEqkPbxNST0pPo0ci1lmoFRyyHpkLluXN27s/gMIETzACBRpaK8/NfDcoKY8EyQHEGqEw9uw1zKpRyyIJQ==","signatures":[{"sig":"MEQCIAcHuBpYubc7CfH3smf0h/BPnKniUYLCq6jNxI6sko2BAiAaaMZLZ9SUC8mo+6KwPpfA2weakDwoDobgzIXeYkEZ/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda4vCRA9TVsSAnZWagAAFg0P/A9BxLOrzlZPWX1rX+Nh\ndc23dSuDCpJ3LkMOIUUenTt4JUilMnuTgPlOm/Oio22WMLT+OoMe96VzY6oa\n9xmP1BSy8/ksfdrY3sXvdjIpUt6Ow8eAA3PWq+bRN+b4OkfmgkyLEMfl2vSq\noXuL+5dTC1kbGh0gbRg4Hl+K77u8KnVFftQgDmUiyK3MKv3rN2NlOzLpFpAt\nMSS9i9IJVJ+Vp0KFOvTFMNT8e1UMTwEvT25ts5hUEjonu7VBVXYp1XoeGcHF\n38n2U1qjda3KYtpn/B5ilz8no6etLzI9wSZ9bFiThAngExUEwg/V9jYjLjzV\ncD0sJkEP1ikbJX/17s9vTC96G7S1dcELmSW13Uqtr4vNYaknlzJXUKN3WL8J\nlKz0C3eyVdP7/ARtzipZBmQeRITQBEsl6gZ8EZTRxQBGWfW+/LfkNPyKud+5\ndL4yTJe5XcvrWTV5c6JwPC8UQWOubNjXsWxYsXrJifTYTTR/b+Tztt+mBcXE\nORSOIUDkvT4OQhmU2zAHh4NF1WzmdMNqgFIhRzcTzx6jo4+hzfTguycW3BCL\nG/9L+ItUMzQYf3ZeWsLmXaLdAf/4bysjb+Zn9sMHKCvkKdTT8YyQIUf8ITl3\nMpw2quMHjjKI2ZGIn43dlrv2GeYJMDQuoyQqkPwlKsVIDGdR4MBUD1fZt0lu\nSu86\r\n=epQR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ab99b8064.0","@material/rtl":"11.0.0-canary.ab99b8064.0","@material/shape":"11.0.0-canary.ab99b8064.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/ripple":"11.0.0-canary.ab99b8064.0","@material/animation":"11.0.0-canary.ab99b8064.0","@material/elevation":"11.0.0-canary.ab99b8064.0","@material/typography":"11.0.0-canary.ab99b8064.0","@material/touch-target":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.ab99b8064.0_1618325038735_0.4366552097395393","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/fab","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1b4bc5a7438a35019f80890ce1c09a4ef0a462e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.8f0a11e32.0.tgz","fileCount":22,"integrity":"sha512-IT1Rqxy/9AG7KxIvjvP0tUWPJlBge0xTQ16Yp3cEadguoT9v54TYKzkOiZ+dXB6K5FdemUwU2wBW4+d0CWIYsQ==","signatures":[{"sig":"MEUCIGQGfuGLnscczSzWDTaKg0eYqdavmiHKJ2LqMsR4nrB4AiEAtF0oAlbNiUBiX2mSbq3EoSzycRnV5y7W/ORzuAbb/EQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0qVCRA9TVsSAnZWagAAvSIP/1M1+CpC8czosF1+ZK1g\n8ioi6ZJO0n2M8rh7glrgCVAv74LGew18xlivrCgndjgjUrKJvdo7s9wYXjxj\nGmJTBVudcnGgqC8Ip6OilHiQ9bTh8nRQ18Klc4PPgmGse9v98tN6NTTgR3GG\nyBaKsM7KG94bXGGkvqVsVzQTFK7FBZB72eGYSg5sTT81Zpj/kKe05yyJzG65\nTab/8jn/aTgpM0OGOx9NzIjJ5PjOQCVNVaTnSkhYXP1rlxggEO4aUWyPsHly\nwhXzTJmCo1af5e+vXqJe+MiIPE8iYpMUQ1Vhi945XymiR5+Q0A+REa6X+IA0\nytaNmBiAGIvwa2a7VtqHABs7SSI/h6M2HalnJy6oM4JU6LN/21IgNjysSkYj\nL2aIJaEpNw9G+xfWwks+pj9Ak3cpTm83l99ANbIgtPRkZgQUvEYJJ+225lKa\nBybzMokUtrxWWCYjN0M3NhNP8L2khlYGvKtViUUB05KvwPwD60DQpgS4kEwp\nOMFtAFhHAtm2q2gasmPOA1FKqr+4fujYawcYi+AZ0r6PBA3DYMFU6cQtWR24\nKlDgY4Z0c425YhoVmcpwvMfjc77TtDQRpR7C1ifdVCKRwsnb5Mkjg73lZx6u\noLFByC0+AJjG7EP0nKiSxaqq3lq+7hgHt9n7kqFLvg8AFzBMbtlKXMH6BYYM\nHFBx\r\n=hU1+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8f0a11e32.0","@material/rtl":"11.0.0-canary.8f0a11e32.0","@material/shape":"11.0.0-canary.8f0a11e32.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/ripple":"11.0.0-canary.8f0a11e32.0","@material/animation":"11.0.0-canary.8f0a11e32.0","@material/elevation":"11.0.0-canary.8f0a11e32.0","@material/typography":"11.0.0-canary.8f0a11e32.0","@material/touch-target":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.8f0a11e32.0_1618430612586_0.7712893893380803","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/fab","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cb9c576ffec99a0e791fd8362b6ee60fbb685ce","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":22,"integrity":"sha512-U0Abxa74UcWzNSGkuexrgxFtSqHyZq9VhosqS0lj0wd6prHoa/ii8xPcZBqULIhLUGCVZGu8btXe7t88XiBF6Q==","signatures":[{"sig":"MEYCIQD8bDpy5A61T3D4KpkvSq3A9klYJI54+eDOmFAhydmOtQIhALfdu4Jl4cgPWI9f93DBMA7NNXH+8ckRIrCygSg4D/KI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIA4CRA9TVsSAnZWagAAEDEP/0P4bmhzHMHOaxsWfsC3\n3NW+x+Jj9Ciz226/ktXzjYu9Zzp7457iriscgbK1prhaUnlGJ/o8CDmdtmrB\nnkIzAevYuuO1tSz3r/IurlGlJLR7PgUW1HS2rd5DVTvYg6yD/Ygrmpr+PjnL\neUDRATBLmQg6qOhBSJ4OyWARFWnVz5Y5las3uYSSc8DMdylcyUoskiajtKzk\nborSMG307zFn3WiJKcYsG2YCcjen11A2DgtUZ0uRtuuVzPixkOxI+1L0MO9w\n7a0skif+t//vm82mbxFb7/DOYKLQuLJnSTOqfwLbw17ARdRsWgf82e5cJtO7\n77YR4w7HuZAp4DpJA8M/1mbxhWqU3R+PacUq6FcA90kbHuDSL9EmU7OkNJuW\nW4hsrlMliasSoJC34r3liUuSynPR6iW7XwtpjpIvlUj1rIJTDKg50b8Fta/2\n752dfLwX9+yxZZAOF+DO2vj05PpuXqAYyflvL/9qd+dbPc6igaJbmAYQVBwQ\nuvNOdEs99rvBdhhWogF943N0hGb8b8m8Pa54WyKNFQynlypw0XcIFqZYZHJ2\nxQnVRji6kP314nw7gXcG5KRCxS10oJHWqsFxHI5c8EXa6nJD/YF6hv6wvAIq\nH6AMCB/lBepnKGYbicDKcnq2E3IbAKLkAsxiA6zvpPqUdBf9mW6H646x97vJ\n3JYQ\r\n=n9Yb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5c6db8fc.0","@material/rtl":"11.0.0-canary.f5c6db8fc.0","@material/shape":"11.0.0-canary.f5c6db8fc.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/ripple":"11.0.0-canary.f5c6db8fc.0","@material/animation":"11.0.0-canary.f5c6db8fc.0","@material/elevation":"11.0.0-canary.f5c6db8fc.0","@material/typography":"11.0.0-canary.f5c6db8fc.0","@material/touch-target":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.f5c6db8fc.0_1618509880042_0.5105268379412515","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/fab","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.3793a3143.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90a2cc9c0273b87a52ec65978f99d800a94cbc32","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.3793a3143.0.tgz","fileCount":22,"integrity":"sha512-cAfVvTMEVXYomUDJWXlrZMtwp++OnEiqvzjeZomEw+yUijX6k2HUDQpY9HcyA60Pw3jHXWk3QrIQUB3G+RiEcg==","signatures":[{"sig":"MEUCIQCNTySwhqkXKjpYraWLu24o5US+11z6dOpgf/4oegPNDwIgZTJAFf+dYVYZENZOV8hHOMypuwUlCFMrQML3KYNMfQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIabCRA9TVsSAnZWagAAjeUP+QDIhDNCWM4WXVVENYO3\n8/M5QYd5IaK5cG0ZbOpU4QYgWv4EP4x0jqa9zbjf13zJMQxv8z6XKttlnaHB\n5GgpPa73P+6A4H4iRH2Ua7M2y60dHMB8yX/sQ90EdP0GnRUiP1J3QWZOV57y\noAYTRVvwwWxAtSYfnphwHl7ybG3SSWF4T/Q4/CvJBCwpTEbqUPdtYtxWFhX8\nWV7lcZ5u6Nc+S8mM6Cj7oODo/y8SeUqXdyq2Wv8yem5Ud/UsGc9CBeRkOLle\n54FlNz6tKyTZhfQYRv/mRSbs9mkVxVxGeyaUr+nPsFOnvqU2mgHhR7Jo6ox9\nY3viY4Bz25+Bl9Yf2W0zkWiEsgRmAfqvp2FE6tGZuCAyaaBaM96XRWlq8tQr\naaEAldE2U9VOuurgOvmeG8j+fIE2rO3pvKN2G5sctZfKJlbteeuyMmAogPvN\neLL4GGd1u8H1LajLlUSXHGyyKYSg++gwcg/BqECpnn0VWcdjRYBOXTlIHlEu\nSXc0ONeWzB2JM7HjS9tWh9dnA+Ps8E4PSDzm11KyXMZZ0mFaeLnZy9LK0tPp\nZ5Qrx+PmKFruZZSj3+sWepijMEngj67SmL2Kko8hfoUagZJRfJqXX2Jok2iQ\nX3TetTwbZ6MXosNCrbhrLg/fbSM1qREsRaEuo2OuhXgaFGrPKmENzGRfgAjS\nRCbF\r\n=LWWJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"11.0.0-canary.3793a3143.0","@material/animation":"11.0.0-canary.3793a3143.0","@material/elevation":"11.0.0-canary.3793a3143.0","@material/typography":"11.0.0-canary.3793a3143.0","@material/touch-target":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.3793a3143.0_1618511514975_0.22637674786569773","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/fab","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"909644676bd8cc743551399579adec2aacd89994","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0-canary.bc104bae7.0.tgz","fileCount":22,"integrity":"sha512-EX4lqaLmdfrthRHkoBpEIG3ECCSxSfZz7ltlMfqwU1ZkncgwAR50m1QFVDn+BrRXmzk9zra4sQcDdi+FtfttNQ==","signatures":[{"sig":"MEUCIQCCXQyHwTPge/+M8aBcaqprC9BTQ/T/Sw5TmUSo2Dz77gIgFXGkWYGDZ3XK3MNGxx8y/L74oM2NSdJeKOqo4LQIAnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJgmCRA9TVsSAnZWagAAT2AQAKMee8JBEnefJZ2LbufC\nFpPrFJcEBQG6G5m1wZpLL1MfnfgTg7SojynWIM7v37QOtnOf6FDNueLAxt+9\n1kfPY9Jx8dTIRKqLmuSXy8VkkjCcOe3KraUbEImw/aHqbTuf+rt8CS3O9h0g\nboh21mXkVpln+XOVEgY5fAUURSvpzXdOVqaAPJ+eYjLHfZikN3dESh+ekaPr\n919bPljYSmnT93IY8ac8HBL2WL0ceCI10mqHgSlXTmLSl6liD8qPal415Aqu\nDfEUFYtNMNj5n8IdnS3k8/+uUXTtKuMu0RZFV2g39D+eJsNRX2Jm60Y8EzK2\nThboqIPbdhadHD22mJu7cFDFCs6a1hd6Iraj6EJeCTX6jIVhNDBsJrgEQsOi\nSp7dJDeOdk96OT3yetHDT6sGSJPP591yGGEPzAp+TzxcLRGOi29PzWtq7qrM\nhm1Iaa7mgqOnWnpGovj0LceiW0OYSp264811TplCY5Ld2ITe2EesvVFy8Ft5\n+QqIaIsEL08IK5gchAiR5AHSGxMzVyyz9NHuPRD65zzNYzwUzLwActc6DBzZ\nZX5GZohdH2LhgT8CikdsJI9dpfotzhf/c8uSE+5a7k/ruRlHug6k1vNE6jOq\nKy2KGAteSLuNFuuEfdqsUxbzQWM3j0gRQcEtoqyLY5zZH9BOX2PNMwdW8xv2\nCfq0\r\n=GRB+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc104bae7.0","@material/rtl":"11.0.0-canary.bc104bae7.0","@material/shape":"11.0.0-canary.bc104bae7.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/ripple":"11.0.0-canary.bc104bae7.0","@material/animation":"11.0.0-canary.bc104bae7.0","@material/elevation":"11.0.0-canary.bc104bae7.0","@material/typography":"11.0.0-canary.bc104bae7.0","@material/touch-target":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0-canary.bc104bae7.0_1618516005850_0.7544499654186327","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/fab","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e70de7cb37298fc60d1abda26bc074b9cb939161","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.3f342c3f4.0.tgz","fileCount":22,"integrity":"sha512-3BWlJ7ilCSPENbBAuZ2A12rcPZNdmzihonv906vf+Ys9PIje5EMeTIABqruM2YEP7caiiAt88NCENW0wGjigJA==","signatures":[{"sig":"MEQCIEWsjTzKSKFbSGRQQMkHX37yuHgOWgImWAxjMGe7SrxYAiAkOGgfMmIvLF7qiTm+sA6sNG8M9568ZGdFrq+xbPrDyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMQ2CRA9TVsSAnZWagAAc7gP/0KG0djk6ZZQfVXtk3NG\nJOG9PHi50n5fRWUWGdGBW76A80wZ2yf/tfAhlUGNAwcl35XP9Cj2LQDsGCVs\nvmOSq72DD8Ac8x5vuTo+CE+WV7IfAItsVBXu2QvzvaXkzOVqzD2AgkHiW9Bn\nQZJY478RmgXUy6McJA1cctLZZfoZVk9I7Ptr3rZqjAZVOTyITbWpscvkvqXP\n/yySm0VqGSOsxmkVvVnhAnsUUQmDPv7JPtitDILiyemlSSZ4G6r+EqLANdG2\nIBU+u8dkC8fW4LsKC2gGm7Il350Td3TNXTsgJhsBV6e1/e6Xj15GduE5jVAq\nv3RY0pU+r+MoOZdeyZogj3HTCuSdVXs/bramVNSzmaJfY57D32EW62mIKHkc\nucHEcfcR6+gGTNYHY42Mbbqhi9GBw0veuQIOVrLEGgmQRxrxE3f1gaVENbaE\nmrym0UMKxCgGbZW5w0V4Vjrdd0gTis8J3rqv+7PxqjXABtsdMB4Tb5YuauB9\n5FwLA/Jagv4L9ApLsMjJ+3FwydI5gdSalYMkpWWSX0Ca4OufI5TmEgJ3lbEj\nvven/66hNast873PxMoJ/bVaXQqNnQS7hZ9UWELBRGgg8TuMG5E0wghQhbAS\nuMfWNs0i0yi5CKZHQc9LvvDQhCaKB8FmwWk5cFl+w/BGSEgtdRWEH4KcNE3c\nwPvE\r\n=hDNe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.3f342c3f4.0","@material/animation":"12.0.0-canary.3f342c3f4.0","@material/elevation":"12.0.0-canary.3f342c3f4.0","@material/typography":"12.0.0-canary.3f342c3f4.0","@material/touch-target":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.3f342c3f4.0_1618527286078_0.5451628811805151","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/fab","version":"11.0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@11.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b9caffd214192cf03c376ce2b869d3ae11b2283","tarball":"https://registry.npmjs.org/@material/fab/-/fab-11.0.0.tgz","fileCount":21,"integrity":"sha512-GLSATlioJtV1h3kvlIwNzvvWqFHD12eoO1mRXJsw6gVL5BOsPur80FYaHb5P7C5X+m4HhlF2Ebc5XgCWiXJajg==","signatures":[{"sig":"MEYCIQCRxvZLoIPDNVqXmrBS65Lc9Foc3EhIhK4fyER/qaZbDwIhAJK3jB0obyxMbaq9iob1lD0YnBONsNL+5AFy7CFzO8GA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMUuCRA9TVsSAnZWagAA2RYP/2PLLkv8CWvqN9WqNwj9\ndvX5JACAhAOBB8yKmabzoJ7JNexJKJYafohge2Nk0TC2Ktm250E7cuSXwFFI\nuQSmNe4szKeoCDgGGxbWqpV7MOrJJJNo+uKZUwIvu/DJcW4UY88kD9O+0nS2\nR6hpAqEaJ2ES7oVK/+RH+Iuiieiz4IGjxpcMeZUiPmdCAqaDoRJwpEdVA5al\nJH4+XkjF2eq55DFkpegFaKyTpPUkhQb7/+005g8Qp4dwLAMl6kATeUtkL7L/\n4ozzpuSoSK11XbxA0Uk52qhY9ID8dwuGo/zPmrzCTlGeL/URF6Rsz5wMdmpt\nkaf0v76LPYa0RfXA6BcvA5cdyD0/CYmFgX8NNUY2rTkKbuUJ+iXcdy4qzxav\nbxD801Wag1cCln9ps+LzubUIaPxMnLSEHFDdTyD9YUib4JxljSxKjySD5tyL\nYy8Nuq4OEQ53JXi7DYUY7rPVz3bpbC++i3BPD/S33MbitmleYUy3GrCGDbd8\njf1Oc9VujEvg+SN+cS7EXYZj97vjD0No3WwoSYzkAQ7OmJ335x7067VBRH6y\nZNFz2YG1HpaS/9rx5johs+0gO+g2lJV4f7HLLx3ygtIAoZnlD8hDQXz0IcHz\nQKRED/aUt+ei1Mg1SF4lcvXpqkEgENp4wGtMSjeqkdy2XXLDW/9rVnlQ1N1x\nVgvJ\r\n=xUKq\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^11.0.0","@material/rtl":"^11.0.0","@material/shape":"^11.0.0","@material/theme":"^11.0.0","@material/ripple":"^11.0.0","@material/animation":"^11.0.0","@material/elevation":"^11.0.0","@material/typography":"^11.0.0","@material/touch-target":"^11.0.0","@material/feature-targeting":"^11.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_11.0.0_1618527534220_0.9570333506893021","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/fab","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a4147410412f34a416889ec2a217a6bddca44ba","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.2ebfc5374.0.tgz","fileCount":22,"integrity":"sha512-3rFJM6K0PLpooF8KOgnKnbl2CbWUxHNcBFj76zIM9AFpKuhzdL3WV5//7hNeSp3Ki8OtUUmjp1fjw7+PARCofQ==","signatures":[{"sig":"MEUCIF+lRMT7GxBK4FExAtzMmZtzKjqkFGorzO0pwkbO24u8AiEAmdQ3DyJLNUggEIIAVb0Kyh9LmHff5g1PyMCjXuNqz1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefdvCRA9TVsSAnZWagAAIX0P/32mA1+FOp+y+Uaw983H\n4C4Gpza/bi0vy5gXhMRBy8JpOTdqu0KMQcw3hk3e1r+DLuExMX6wJCHpgJjl\nVZBSEa/wN8STtFHRbMXt+9sRc4X+Tiv8/b7bN/uDQ46hKXcv0jiqtPTbuMpn\nqodNcN23umY8IgMD8gPrVv+Af3pGxicaCUqo3RLJWhVVdbHvrqpcEjgUQRDe\nqMP14LXGsuiERu6rXzCyXK3mONEv3jRCrOm/R+gRJo43OkG4JFD1uw+dWbR+\nlr7U90rQje/rHlVf0sWjfuGByT8Gsn3wb/y/ISfdWNINh69ip0UWjhQLcH/3\nHOBh3yITwjpZP0IXdoKuq56ju77urZNdS0P5ZoVWnbxZm21OsHYwMxgvJR7U\n3Mvz69hIcdRWvKZlz3NXY34cpxqh9V17TRGTQXPrFNzUh254YPdGT/7BFBql\nafxw5AVYiOg2HzLjssueINfpKU7iev+iL9cLtmqaVHl/LCRYkjGBT/j7pRTx\nmpQyr/o3j2+iA2UUs4SKER0FN2xeq1VVX3ndkrqomXn1lkrQxwiT+vFInf71\n3ckmc+2O3KCd9BwBCooIWyq8Z9fvVJ5rbSopFSyVgAT1xw3374f5prVoDcnq\nfqYlZzdGRegWW4gTCnYtjb1f9BNizBNBJ8VwzD6jc962FfnZcNAI8Cjq+OmZ\n/BYY\r\n=nSfr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2ebfc5374.0","@material/rtl":"12.0.0-canary.2ebfc5374.0","@material/shape":"12.0.0-canary.2ebfc5374.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/ripple":"12.0.0-canary.2ebfc5374.0","@material/animation":"12.0.0-canary.2ebfc5374.0","@material/elevation":"12.0.0-canary.2ebfc5374.0","@material/typography":"12.0.0-canary.2ebfc5374.0","@material/touch-target":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.2ebfc5374.0_1618605935286_0.5528502423164243","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/fab","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.5631828e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35e0f3a047845ad77979410e8e53bd0db1745646","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.5631828e1.0.tgz","fileCount":22,"integrity":"sha512-0JdjFXVDXxh2g++gQ6XO81BNW6KW+YP6UROzp+GibJAl1I2OtVIBWSDXyzLoT5JvD+zzHh5yIWZenwxMmSJMOA==","signatures":[{"sig":"MEUCIQDylWh5Ap1rt0+zOLz6nNxa0V22opHzOaPltjEsl/FTaAIgX39xrvpbxut0sM3F6lPwz62sGdRFgZvqxQcw0sCThkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepKOCRA9TVsSAnZWagAAFpMP/0bILPq2UFFt0lO9GXfo\n4GoMQEJEsb4YnVHVZp3UZTtxu/p3zFHRkV2sihu0p+zjtynJ7+P+ru0uM4wU\n4YSoYACpX179TNWYpqWV+YQ+ZGY8h4GGqeluFrIDYvz4HMG39rVZbK+n0IZ9\nBHjc7WspFREBQMfqUVV6eL7gv1gSI2NI1V5j0XN8VOuBiWUfmIkEavXCbYoC\n4a71rQjNpxPSrhDhOClWRc+uPX8XqC1AKJJE9hbz5VS7gAqZhCY1DBNb5EYK\npmDoJvoQjGmr0OqzT9MH5eTpjtKvRIjcX5zu2/5fEpnAdJ8nWtCjZli85z4G\ntOdR5IrxBFVCe1oTT6uOd/clp9IrpTPbdTFaX2fTV9XpOu5S5htFQc1O43ho\nlcQ7o8avNKN/aA1iQpTP9eZNgJEFBlNGqvqe+o6zQZFJgG6mdiJWfLiEZR4v\nxmPArSsIR5a/9/UgaCPy2eM7WVqb8EZRczW/a/S8+H6sbnMdy+9a7/VlmNl/\nSuV7UnvFQ42MFY9+Qp4+eDc4sDTKrONvKDgZGlRa5qQWFoR8hMCJ7KybZaWo\nUkOZ4MNhcXqWAXY2yh4oVEl0lfwe1DGy1D3j1qoQSCqlcs+6g80dufCGaxT5\n0akqKn+gvRpspJMHBKrGHiZq9zuGmGUOeVzdar51eioa5L7Zm9/wFreJvL31\n6rPQ\r\n=lEAR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5631828e1.0","@material/rtl":"12.0.0-canary.5631828e1.0","@material/shape":"12.0.0-canary.5631828e1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/ripple":"12.0.0-canary.5631828e1.0","@material/animation":"12.0.0-canary.5631828e1.0","@material/elevation":"12.0.0-canary.5631828e1.0","@material/typography":"12.0.0-canary.5631828e1.0","@material/touch-target":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.5631828e1.0_1618645646192_0.2944117343187913","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/fab","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.bd685395b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd5bdfeec9745b0febc5f6ccf60ed277931c0070","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.bd685395b.0.tgz","fileCount":22,"integrity":"sha512-bu/qC5ZvdbksTWkYqlQXyY/QadxLLOe+QJ7TK21qRmpsYchGXwPZV6gWyNDOludg0riDIS5LcXHWucFRNKwGLw==","signatures":[{"sig":"MEUCIQCEiTruU5Kxnv4MGkrEN2o8lFHAXie57APrAFnPFnkaXwIgStYAQaT7GBCk8QzLs+7zn4SmlFtO4wGvu7SvdeYJMZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc7tCRA9TVsSAnZWagAARW8QAKT/Dt81n7WMC+KnnZK+\nBxY2IS20OoAzyupyxLlQMuphx3nJLdd1gdUhCn4Vom49M74G5qj+mxO6H4La\nzAEK675tnRN0AmfUGDgoKmAzdd9tUnggAzov+c+NE5oVQqN43+VpsLE4Ae+N\ngpKo9larogrmpzbDEQtixVRJuME1n+X09hYX5F90wPBt1uKtsN0m3vHp/9Cq\nYl2OYDrm3oMXHkHJtbsr6Pp1sog3/J6e6+NYJYgHqmgfTyTaD8zl0XzCiEnH\nRXBH2m4x2shHKnoRYEB0JwI/bBrf4zyeqxsAQnYe6jP2Vjg+VgafqLjaa1/A\n5cVshIg1DanVsk1UVVStCrrXucgL2tnL4xNv9XgDTE70ZwMTvzwclQ8Bh4kW\nXMHew8oDCwzzIDKF00yYEaFjrrhSgren9YtqXT9mN/HYR4YYTP6N9JRoIloE\nNXY88PH84T85ZBYI/KzCmKjCVLeTTc9SOZvYlslL2EbhtelX3W+a42K9jkV0\nf4LipkISiSt+2nmJBZiS7+D8AXkWOJkDPJmcrDKjqUc/qtycqwWPlRiwNO+3\nZN8ZAWqpNigNjLycrViA3n53yrbguNw4QggP8IAdJ9UH0ejMGt37folSNI0m\nXlRMSWjyHUObl/a+YVf7wPki2e8orIBDSszFB2Q42oWoFTzE6ItUja3/SaIF\nSISD\r\n=r03A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd685395b.0","@material/rtl":"12.0.0-canary.bd685395b.0","@material/shape":"12.0.0-canary.bd685395b.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/ripple":"12.0.0-canary.bd685395b.0","@material/animation":"12.0.0-canary.bd685395b.0","@material/elevation":"12.0.0-canary.bd685395b.0","@material/typography":"12.0.0-canary.bd685395b.0","@material/touch-target":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.bd685395b.0_1618857709107_0.49746620241545014","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/fab","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.b52196498.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40a125d4b265e1e78e409eeceb5b71118b7f0a7d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.b52196498.0.tgz","fileCount":22,"integrity":"sha512-J3jXjHDx9XxzVt8VDTjuawyLZrcs1V13yljyNZWOSXzXsfXUVP5h9onDGUNEb+VcmD636iIYYPDuNVkljaOFbw==","signatures":[{"sig":"MEUCIQD5IpchsyoZmUpzJj/RL2cAtvjZi/S/MsueYixvQwK/AQIgLqB/ccpHZJI9OmTSupSPxvqyTOXdRdiTNnc5UlpLIew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeDeCRA9TVsSAnZWagAALvkP/j73F7OkTpBHmXdBFqiN\nanA0+edYqMiW6f6oEoFi68doo1gDy8e8qwiUFnicC4jNq0G7/2zKOP5KNg9S\nkZp1Q9XVCmQP4zHMb+/OR6UdUH0Xe88iqH7X4t0d47ycsb1vlhorKL/JmVZI\nXiSMtvI2UFD2EOFVQDNoPTQUdUi1KsjjOoVOyGn4FIu6jwMEG6yp9RShVDp5\n/rX2vPRl/VhDArvE6abIf00Z6DHvsMsdqwVdA8eAicfA8n6ULamwrzt1gEP3\nWp2dTs77FgOhBzV5IoED86082bDaiW2RtsKcbHw8t3djXPWNaCUI1vpt8Mq5\nuKWFTnPy8vImofVrLgWN258B0Hk1+0YpwmB232dwIM2p5VnxRJaSNl9TmRbN\nEW7ww3PqBrUkNcb0Z7jAdMuL8LSHawb1/YFdSyt/h2GKlKxNkuTEsSdjc17Q\nC4rPCI7QnujKsNi/m1jRKSbZPKGdW9UUU4qiz73FoXZ0KwRfSMgx5u/oH8tY\n68m2Abnkm7+HsY8zj2b7yezyY67I5RgmVAFCg87CB5IsDcVZNVyhvSwZ7X4s\n4DWC0uPO+h9ZIjc1YkQ9RGJehfU7VdNl9An0kf8uWMc5wYjyMlkNFvFv9n2p\nXrIWUZrMTBsPyQznzYrAcDlqJ41Gk6XuWCRegeAW7rP692M9W4DLwJhU+efY\npc61\r\n=0Al7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b52196498.0","@material/rtl":"12.0.0-canary.b52196498.0","@material/shape":"12.0.0-canary.b52196498.0","@material/theme":"12.0.0-canary.b52196498.0","@material/ripple":"12.0.0-canary.b52196498.0","@material/animation":"12.0.0-canary.b52196498.0","@material/elevation":"12.0.0-canary.b52196498.0","@material/typography":"12.0.0-canary.b52196498.0","@material/touch-target":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.b52196498.0_1618862302319_0.8198430033490978","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/fab","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0b1c72d84893d6ce0a02691eca98c048cac1eb2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.8ba3e298c.0.tgz","fileCount":22,"integrity":"sha512-LYBBi6a1TGoY4Uz5OXxrFbikeMlDrcWHo5OaR6qm3frnw5EpoCL6lgbATEchcEe8Q30dT0dnK7c71qRUfKwMoA==","signatures":[{"sig":"MEUCIHXCzOVg4DssfnrfNI+88xGxoGrm00u4hTTqZ4DsaUBvAiEAuiCihR+dJHSHX8/Bm1CbFA2wenQdnB+TECNsDFMQeT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDIFCRA9TVsSAnZWagAA+ZsP/2/076TmOvkBI7XFFO8b\nPIRsJ1XEI2tWcfMR9QYYIT6Ozrdq/TAn78brsEWlEKEJsmIX7XUlYG1VEwEv\noAhruB9O6HNeF46K8hoBP1d8HntL9GW4krwZ4NeKHwIxIriFoTKrtPcRAczS\nAQLHmlZc+MM4hkGBFuiWKMFDkKc1qZv0blMpumHwNzVbq2tmXMECE6GNGIJA\nUAzz7WeArYQQMhWe+TFvheCfdUPtIJMHBmgmYmsrESridmC0h1RheAQX6TTi\nsV2CY98+hEGcC7z4ie0aweb9LAZCAhpKqDay5tZla73qVREhKjlHU5VnBb6q\nbh0+Pnqk6qLxKBm66vkGquP6mJsEkOnCYE9Va0jqaOrn9nlDADQP9tW/Dkhn\nYEufzFjou9dD+E5377x1q9MtWJB4UGHF+eINCVLimZFTrLYUewu1AhgckY8L\nmCPbBYkthwRQlUhtg+qC4J88vN+8djuhDqzuDHa8ajLWQ1Zst/AKRfGb1ozD\nu9Fgzw8sbLJAyyH5bY2GJ7RLe8yQp3ES2gkkJT4W4UPSiE6Ji7wFwQUgCnUd\nCKT4xfxmpNRcleH26kBcajUiYMvX2wIvefMHSc1NoX4U2CyPArWXpAw7eqdj\n3JARk/2Qd+r04XLk1i4vU45gB6anujJtut+RsVWjpoTjNRyv8ZrNsHVR9Ny+\no0ei\r\n=G9NR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ba3e298c.0","@material/rtl":"12.0.0-canary.8ba3e298c.0","@material/shape":"12.0.0-canary.8ba3e298c.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/ripple":"12.0.0-canary.8ba3e298c.0","@material/animation":"12.0.0-canary.8ba3e298c.0","@material/elevation":"12.0.0-canary.8ba3e298c.0","@material/typography":"12.0.0-canary.8ba3e298c.0","@material/touch-target":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.8ba3e298c.0_1619014148542_0.6222772178762905","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/fab","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.c629eab71.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc54f1af76e30293233be74c094aa08f56209cef","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.c629eab71.0.tgz","fileCount":22,"integrity":"sha512-NPkG20ytg9hgF1bX8ZKHv80sP43yRTriS6jumyNqy37ygqWE0hIwG74eOfS8P9paPDbQYugjKDjWyYyHo589Ew==","signatures":[{"sig":"MEYCIQCwP8ea7dMRA32VaVStjxi5o9QutEN7HttMcp7pG3ZLKgIhAOCC9dVx2iLRAKb7PYm+AP34Ej5jTULDKZIbLWO6xXia","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIO5CRA9TVsSAnZWagAAzlQP/0menyf9YbwSvvL5q9wh\nOgwtfl7TEu6wv6WZS06QQmeLIW/AP3Piz1erPyHL9iPqvhxfrdUMU6b6L+2T\nEfkOsizV1tty+Adt/wfv0uNmPFe8eU/foicAvBWnOIPKgBu6l9r5XvwBe97M\nl5P5bjvglD85f19ZFin0fZ2I1NfZZtZXzVakbFjDh+AWdtkIdGiA9dWwlegj\nHi/qZ7xPbJcvG6aYxYtpkSHACuDkG/7m5I/IC/PvJJZLCMBqdNbPidoNnLwh\nC0yExaAguGoXb0Z2X1x+3xiCBEN058iUqNbN4QyK249uE3KtZFE4Bf84ajSL\nio6x8ruQnA2DNwe95sqALIwH4f18AR7kvLry7WDBiOEzH8ZTNBbk/aoCy4Au\nJiVLuwL6xpywQReloe7JPMIDCNHaMuDMuSfATpcnoKfDz8vXyUkXAkla84iq\nK0ngALoQnHXrdBgf6o2NZ/hbXD0cAwjOs0uIZWbAByIs56quXJvc8Fay6vC3\nx8oNhqkeo/zt8U5lB0kIS1XHy0yJguJTjKryWummfY7nFWjs5nULzMw4B75z\nam6Y6okY8FzN9lORSEOR+6+wwLmZ9jVMD9+6LneuLLzVd5i0DKJan9rWqXe3\n2lZ+qrXC2vX/mRQTAb/+kUHmGcp09xQEI8AQ2v/SRfGGjvB7XQIvSS9Rq8U+\n0lKL\r\n=z9Ud\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c629eab71.0","@material/rtl":"12.0.0-canary.c629eab71.0","@material/shape":"12.0.0-canary.c629eab71.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/ripple":"12.0.0-canary.c629eab71.0","@material/animation":"12.0.0-canary.c629eab71.0","@material/elevation":"12.0.0-canary.c629eab71.0","@material/typography":"12.0.0-canary.c629eab71.0","@material/touch-target":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.c629eab71.0_1619035065248_0.5080688434370491","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/fab","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aa704dc236f6a55b7df9fa6ff33ac802adc2e6c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.8ace3b810.0.tgz","fileCount":22,"integrity":"sha512-Ae/Y5HKYSCUeDZEoCChg5/EknYvdlWaYII4r2Auy/Rjd7EfQJHxqGtexmeuSlHN/oBs0UFFhpQBGsDqjS8Etbg==","signatures":[{"sig":"MEQCIGXiWc9ERqIgK9OqOrQihZMZ1TvFQA3zk2sFh/wmZiPfAiBgiS7X9YIQTHbBOdSt0Eda+pfp/6eos8JG6tVrTOLlTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI1ACRA9TVsSAnZWagAAAIoP/jQ1ikNu7RTdt/zW7kVF\nRlKKpq47lffuR7am5xdJFSoR/91TOKZ2/iyxcGopmauqYNyomJHxx193A4q9\nbXnoKqUQQAk7briKfvT3XUjdc1ZZ17Ai1+Ia1GTEjeWVrQaVmvFa+9UPWuto\nHoe3lr3jCVALwxHYJ2zBhLNf6RaaDWFWoakSKssb6fkvxI94WimBeelKuT5e\nqWJA7pVgqzkLZCi3GBgVrALcEOWI0PrxnYmCEzHe26ZCDOn3O4CX3MhoNUcZ\nso3OmPYKQJivDPN9cWSRqV6qtD2XsbleUtHflO87XIx9qgvcJ6df23VXBnHk\nDQK150UjR/keFGdhJIIzyq8dBQg2pXvG2HhtwmLc/ir/clKmvv1s520hqMTA\nFMiBo0IHFSxsN2d5yz+3Gd4idlHOt1JWMRF/CGRKnvyC7Ahgoe7Z0lL/ftG9\nRPW2cWdMOwu2bKQQw19fHt0NAtm5YIoVXRR1HkTc6g9DZuw0+C75f8LFCGRa\nAWiXI7Fv40yQxE8WoP+fRtaHPZUOEdujwcanfbKT5pEw56OB6Z0OkU74lXKA\nyf89+dmVX0AGUpbUnQaRJr+zyTUZJBuJ9S54nCRgbMygSmKZqO85NQufyfNO\nQeYRkjM5yOlnnXeS6RKBqjwig4I6G5sJtQSWQmTFubTsKWabmfWAcyhYodHQ\nYiKr\r\n=0mlb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ace3b810.0","@material/rtl":"12.0.0-canary.8ace3b810.0","@material/shape":"12.0.0-canary.8ace3b810.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/ripple":"12.0.0-canary.8ace3b810.0","@material/animation":"12.0.0-canary.8ace3b810.0","@material/elevation":"12.0.0-canary.8ace3b810.0","@material/typography":"12.0.0-canary.8ace3b810.0","@material/touch-target":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.8ace3b810.0_1619037504129_0.23296233779863762","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/fab","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2fe76d6ca8efa0d1a89fc9bc4115d16651f71ed","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.70beaf42d.0.tgz","fileCount":22,"integrity":"sha512-U7dW6X1TbxMhF679dovpifnb3SWQ3aJ5/baGy+i1dz7QnBj6xVyr9aN620mIM7ip/Zog8DPFKDEz7D7lvyb1iQ==","signatures":[{"sig":"MEYCIQCZfa/HSK4rN9SZc49vO/zvXOuGP8AaQ4BzcrQfz5bxWgIhALvunbD9ML0sbxxkz6tGUI/Ko+qAt54dNfF+6FKLotKu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI/1CRA9TVsSAnZWagAAo+EP/ikSkbPleBpTcM2Vm/lX\nG+mqRiWlOIxfqqA0ktnki3offMT0dzdD/wD93Jfsi3Yzw2PkZHVtVHBxPaxO\nJx7i35oMBaVU26kPYbfvPqcQXixqyg/i6vubF5ExmlT9FYieqjTi3SZpJ5Wc\nnPa4XClVie5dt9ChLb+PCbJxMY5KpPRKx365tuBgDVDrWLpoYd2AjtTjo/Vm\nSCQzHXYBFM+/6iEaune8pV0o6XbFt3aVtgHS2apL/PuQt8AjWn1inMfiB4oZ\nlcLWS7HP59/pjVJxKCu5tcbmJOSLsxAqOEOX0X/gCQKnK6a25G+sIPcPRWsd\nbORF5UtxOVYVjcn1Axt8G609zisLhpDdhNBPjDWcRkB6gQ0LVlpphHjgs6U+\njVZnNxYuhgcL4cDFfhR44LCnXcLoyu+q8ENXZVCPgMw8lShitU1hKFZzGlK9\nBAXC5joPJ20f+oUXckTky7nGZX6mptzFi+KeiUCbPEUDtiIdIrrd5k1JvDg5\nDqy/5BucZzFy7emvupnXoN5aImecvKC5k1mLUPNdRiORWh3xL3PHOelUwiht\nbMAu9cpZxFO6m5KhuPSF7B74WBi/+NGOJU4WrD5ID26lpxBDUeW39Sk7x7Rq\nQjKSB6Xh3v2uMxu/IEV2M/8dxbbBEeOa4/7fU1l59Le7887Euv8bBqtYPHq3\ne09Q\r\n=HFiJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70beaf42d.0","@material/rtl":"12.0.0-canary.70beaf42d.0","@material/shape":"12.0.0-canary.70beaf42d.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/ripple":"12.0.0-canary.70beaf42d.0","@material/animation":"12.0.0-canary.70beaf42d.0","@material/elevation":"12.0.0-canary.70beaf42d.0","@material/typography":"12.0.0-canary.70beaf42d.0","@material/touch-target":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.70beaf42d.0_1619038196912_0.9482799623388958","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/fab","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.cad489689.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec8b9398cb9b323252f25d036f81cf2adb59b40a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.cad489689.0.tgz","fileCount":22,"integrity":"sha512-nlqapudMu529t/L3FR07rsEf0LOVB+3qFRqddwWHplvnX50jzPBxFfDNWgsH7yaEX9M2slByoTXBjGrn9uz/IQ==","signatures":[{"sig":"MEUCIQCZRFyBFaZ31LsVwRjsEw69/GbgkmF1ly47fzJgV4woLgIgX659CXTlzWsZB/DL7kA6bmnbYECktuXp8EvIHvUv1Ww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggak7CRA9TVsSAnZWagAAjuoP/2QfqR+khJmenB+YHfnR\nIMcgCh79BZ3BqJe1Q4FjgaAeARPCLHq82jVVNvwe1tKKwE5Sb68/z4pCOvI+\n8l2Nw5mCIRcSJEEPiBn0qBqDIbicZ2j7PED8/o5dZbpaFoDhe2z9Kaebd5s+\nJXBRoowhC6RW+XqaxSdAzJ6HhyZg9TDMTqkdGMhD/fgknyWYn+GI9Di8TLsb\nvL4E6ZPaJ453GKek/UWvIBikIpkJSGpOLdOBmrA5t78VSp6Hqn0nf/1PtzwX\nmexs0XYRylAendgQA9HqEoMXue8MD451vw6AYbHUyJ0HQfeWfuzYL8nWhrsj\n3A5FLcBOZxTR4A+WVBIMc3W94rmsKl0cnNm9Tpal079hP6+qo2az7yWE5B11\nH//yenzvbS4gJT+v1sy2ml5hGUNs8+bCYlmHSDIeOHhCqmJaQadQcpzejGdi\nS/us0U3Weiw41ZeO/0H1jrM52PtPoiJdzfZLV991zfVuhpLUc3FOJaiUy7vc\nMnrPGu2p5Tj8uGf9hdkfNAsyZZvudBJmyIHCXgCSucsXuo+EKlnCyGWarSGu\nNuBambdktNfhBUDGVbg9JsOzQkNcLaTBr8jYXaZT+j1K5vBFEUJsHX0bwp7G\nLFxgMaUa1qHOqkLs6LuYZssGHK5W/8nhkZRlB0YmhcQjweFyZvbYNN0E080M\n16L1\r\n=Kn3x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.cad489689.0","@material/animation":"12.0.0-canary.cad489689.0","@material/elevation":"12.0.0-canary.cad489689.0","@material/typography":"12.0.0-canary.cad489689.0","@material/touch-target":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.cad489689.0_1619110203365_0.024824364162522317","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/fab","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.d928692b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e83f54df65e4acc1bf50ea9a6a7aeee2be7a1d7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.d928692b5.0.tgz","fileCount":22,"integrity":"sha512-4e4EYnoNbD8T7hy3WUuXdEZ7tCF1p96X043PgFIPFSg95rznpI9e46hRyn7k+n0a1oUf2kSY+eFInUMT8uWwEA==","signatures":[{"sig":"MEUCIQCYrEShTtkH3pLnAA75zN5TCb3gSENSly+0ye9GQTOhnAIgYDdKB6xag7nN0qZ41vTnJpXdd+2wXo9Rd3qAx0aZndc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwVFCRA9TVsSAnZWagAAqDAP/1HuANNnV8Ya/CM1XLVD\nvZqQ0N6jKC4Gk683M36M0u18j0ZGKJ3C6freVLqFrYrYt5oRmoGUzPw7V5L2\n6UuEDmXPqEV04a4s6P7UevLDoK+Hm+WtPq/aV26yuYT+TYcLfj+uo5YjrA6t\nrRbuwTSLH6HvlL/aCMvvdE5edUgolPMwyPWvHKkHJwmxdW02A87Fa96VnBp8\nSVIsftKdCpxt8AM6o5rEZTDYotVJzIgz4g1Yprd6AJfJi0yOkhish9NR3PiC\n3iUsBTx4PdP/R/NasD2shv8daNY+ij8gb+ZS2t8SfoxtfbEHIQWL0PJIgzzG\nE47VG8TCNnILqzbnI8OAcetJR+GvNVc+8VPXjShmBhQ0fpDxUgdf2apKGSMl\ni4IBReMQaN/5HuR9ONO6++glU0UNUZxoDb+pOuhiul6Sm52xsOmCsVtF11Ao\n3k0sGupKE3+zf9zWli82yhjgc+L2uOfAIW/wgASwIfjWk83sh7plFsRkW3A8\na/WyB28ht1lqCYnPAmWps7zsJqwHocNdCsNkM/0Nr6o4lAQKANK68KSipWsi\n0oLgYLR0f0PdP8E9ZIMDhzN1X1eR9Y7BJaxetcVxNAuXcSMX5UwGJsQ3PQNM\npOIXWEHVkLdZN6XSNW4S6IF3GNUvSMY423N25i+vVltTeNay15djFZNZALws\nqSwm\r\n=9bm5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d928692b5.0","@material/rtl":"12.0.0-canary.d928692b5.0","@material/shape":"12.0.0-canary.d928692b5.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/ripple":"12.0.0-canary.d928692b5.0","@material/animation":"12.0.0-canary.d928692b5.0","@material/elevation":"12.0.0-canary.d928692b5.0","@material/typography":"12.0.0-canary.d928692b5.0","@material/touch-target":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.d928692b5.0_1619199301495_0.23707874195861178","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/fab","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27e5f134ea708466740ae7d69f7197df160550a9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.8f68de8f3.0.tgz","fileCount":22,"integrity":"sha512-IcGpjGaU1br2cn+DZke2ulWet7gTuRxQEgQLFSsBuQyljjpNsuz7y1h/a+1o9AdHwT10/M5r9gRDlmbqM3LNVw==","signatures":[{"sig":"MEUCIQCozB9X3qM139cKRfTm9wqtQ2U6HUp9pVI4fiTRkdgfpQIgQ9gMjGicoh7Sd+BeRoEQDCPEKZOLZFZS8a/zE+qZCj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw5aCRA9TVsSAnZWagAAmtAP/RaCF3VobtLVNLyI2hLR\nrNvvFsEffJSgs+X7+AeN5jDXCPjCH14EU91bDi/9ptxkykIdwB1gUjMahnE8\npxvqaVcLGdIgXsjasBW9n+vrfzl1bwFz7wkgHbgRRjmcpaAqo5M2H3Xltl6h\ncmEIgCy8kjCYTuKSi8/82sIDsYRZl1mBZESs81gg0yyvygSY3HZNhrTBA54+\nDFeMzn/Ej8TDyLF0Vl2DDclssTriZc2Oga6VlLG3DbhN6rl0FMmq4tKMGehX\nIPUja4YfNrbphlMPMJTgXI9zpbSTsh99i8Zfn+a5SEig7ko965kyNg2dpF/L\nleuugQtnBhBKkLw32qkqrWehUIB826dJK6SWC4je9OMdwmVob1AW50tWcQPv\nEAvTROIZax5MLQIW1ICv1QZd0C+IGXl0M5SbbDd5xt+H3HmevJcnvPnS6p+a\nwrv5pv/+8v+zJa+HeKobaX+cdleNf+EpoRCJLpC1r+UYIMMICToJXHTGJJ5R\n/IsI7Uj8WOQPfAb9rCqPQuhJlKwaW60CZ3fZCX8wo4gjdcAYRx/wbHwGi4es\nZl1FQWuqyUAyEckrtDLOnepfe3Wd4L7JZ5gpvRkOhEFNEllLjeu7VjzeBr51\neMlHhGAsUU4Zns2tCt+M9pOrlE0K7xztKdwaHQ97UiHDHH9caX7l25TECD/0\nSG4K\r\n=4+IH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8f68de8f3.0","@material/rtl":"12.0.0-canary.8f68de8f3.0","@material/shape":"12.0.0-canary.8f68de8f3.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/ripple":"12.0.0-canary.8f68de8f3.0","@material/animation":"12.0.0-canary.8f68de8f3.0","@material/elevation":"12.0.0-canary.8f68de8f3.0","@material/typography":"12.0.0-canary.8f68de8f3.0","@material/touch-target":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.8f68de8f3.0_1619201625738_0.7574319983385112","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/fab","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.05753cf77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53cb74bd7116e8d6543e2b71d7cb5d87ed079330","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.05753cf77.0.tgz","fileCount":22,"integrity":"sha512-0fNBRQ/Y/lYqI7WpD3z/b5ZahwKOcC74CmljR3iDe6yZ9b64G42uIJ4VbuX/mWPtJJUneuEsXIEWDGdFOGGC3A==","signatures":[{"sig":"MEQCIGT6I5rOlt7MK4LrhglZSrPwJnFPplPVpbAjoAni5FLIAiAMeK1B66pIXDu2iCU2sY0LdhaqJiqQDLaZsSXG7E/xSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1usCRA9TVsSAnZWagAAZbwP+wcvfO9pZgrVkcutavZt\n63j5XvKi2Kjv5whw0iUDM3fZKhQJztvmWWkw4PkdB+tQEHbBWrC9i238WrZa\neVNqefe6lJcCSscW5GI7RbXuPuxgSrBmksIN/x7mO+I/3ekKmWj2BTq+WT8r\nBaVKee4FxHaHgFPfyEP98nR4l+IUVZK2BKraL6P9jzf42ynXPoct8AD79e+s\nybX+eqWH5JRB0TSexhLNhv/c5a7k7+DrNuvrLLT5k2fEaVdj2vwlKsJu1e0Q\n4JLpVpA3oV428I+kq7jZXnzXqDnZvzkgofJJcjJe7QtbhPdQP+wuY4R/EYQy\n0S8MchboKmzVyHBCumm2tBa/vUTJuVJl1OV2Gf2BxuDB3cwf5N2pd8tm6S3r\nAXB4fC6Pj6ayQp00PUts61qs5bHjAh6SIDmj1Y7t9zy8HW10TgCxE3TJ1ite\nHDsHZiJDMSHP1Ft+pidyNOcQ0HQ0xsADtFiOsUMDo4c4OaH8+Atf6mWXruoE\ny6kNA7qtB3qD29OgbV5MCF9+BB+/ZEErcmZFFb36bkZX+y8kMFkOVg7zu++J\n0iDxfaBXJsImGtWAoYB0DoM3hg3G7cygBJ0UZROokv2vms1QhqP+lH3iap/M\n6yORylMo2oza3Y4FuifSddo/phlt4FGQoe6ZzkiLHPnJUpoAUHnxs3ISGtet\ny634\r\n=VskV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.05753cf77.0","@material/rtl":"12.0.0-canary.05753cf77.0","@material/shape":"12.0.0-canary.05753cf77.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/ripple":"12.0.0-canary.05753cf77.0","@material/animation":"12.0.0-canary.05753cf77.0","@material/elevation":"12.0.0-canary.05753cf77.0","@material/typography":"12.0.0-canary.05753cf77.0","@material/touch-target":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.05753cf77.0_1619221419893_0.45638860578069007","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/fab","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6816670199cf09046f984f97c53ea382bd81fe23","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.ef43e6d96.0.tgz","fileCount":22,"integrity":"sha512-O442iuGFJDltBvu0Qu7ZYGcbgqGF4HcRrRuFnBwDRHE0S0jaUuxSMa0Kjdc1fIDvoP2/sAhH3W+ktYiPJRw1tQ==","signatures":[{"sig":"MEUCIB8Ww+lsx4cgD9Cxb5mA3tvPZWYpj12whddTq/QEsqUeAiEAwA1JOG+URLsfk+E4pXIgaff8Sq8ivVSZv2mTvRB3+vk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg10oCRA9TVsSAnZWagAA6aIQAKT89k4LLA25tqDcRCgg\ni+e7gqVp+iyjATHF2/JiHw7KFzvhbpCJXHuFSRfODSu7xkjp0ADpGOuPnrCR\nuSlNTJakdE22Uw4QvU4Tl8uaUsgTHuPvbMA6Vnq+E7yO94YbI1dwSSZ63ieK\n+x/OmJzAP2m0aSXiKGh+e+8mJy1MaaO5f0VLW/QWEcUkf5L5UG5nG6cKdU9Q\nDfFWFG6Ok47zldQfzs9Yw3a0zBLD0iy1yKfZgpCFl90UV7Kq6ydMPuzZ/yiw\nEBwFeF235p1K+2mMarj8u1HY9eioB+thcjc07cVxFeiEXzl3rbPTUbfK0DWb\nsP2wV4yrofUSdinCGXKQ5sq9bXLVJn2PKYUnFiUGm3wLRNjIKnIyQUATTtcO\nqWJUfdB8oqDxpxDxY9BfuDYnnYdwao504oBk13Jj3bLNkIO47Yy2mlbTs+Bf\nZJnu8aPck6FeWL9TwDnswuBwux9pkGzs+Z5DuSjj7g669p3Hih6mQrxBGGDV\nH+QVTPU1OF2aZXD4fNppkmsUyxl6cVB9Lk3umU74dtVyCsBJa62SKJmn3yUS\ncjC+qEQ+9Xgwbw4keWe3it0Nq8SDy/XQ9lAQX44Kmi5dFfjhuAWZqU6EA7T1\n+9oBF3MdZ247KB4W8lcQeNxO1GPj0I3MKQDU/v5kNM9hGhAz+rgyW+LtLwxN\nJk6o\r\n=MyjK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ef43e6d96.0","@material/rtl":"12.0.0-canary.ef43e6d96.0","@material/shape":"12.0.0-canary.ef43e6d96.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/ripple":"12.0.0-canary.ef43e6d96.0","@material/animation":"12.0.0-canary.ef43e6d96.0","@material/elevation":"12.0.0-canary.ef43e6d96.0","@material/typography":"12.0.0-canary.ef43e6d96.0","@material/touch-target":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.ef43e6d96.0_1619221800537_0.3238373699540231","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/fab","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee0306dc56cfe43a19d17ec23acc0270e34d904e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.197f64fa2.0.tgz","fileCount":22,"integrity":"sha512-QfHjEQbnEb6l5mE2l8pBHcTQP9RcJcjm4kyoTmIfUi1iap3KpBMCKr+uUTkHFDOwROgQDw3r+Frhpe8P8B0OIw==","signatures":[{"sig":"MEUCIEfPs3CUXlCpg7bJOOZivqT7EMj2IJp2wcJYomS/yNzZAiEApLjRk0jrytdv4mHj5UrEh/uH2kQcMxJKjPrYBnFqHbs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvQDCRA9TVsSAnZWagAAZsAP/2QULKOLzdm6bN0zNyZm\n48K9DJekDr0TkFjhPGzVmfPj0+o6yYnL1/fz+KCYziW8ss9WDiQHGBnGdRCV\njP31mFX7ZS5ufPls/RK1y2PtXMO2hzY3n7NmWLfVWmL+ytReoncPfjOeILJb\nfQJmoFC147qZGmEB03XNkD+gfv9lAlnzYIHSHeukfY5RbRiCVDqe+h2wqZ30\njfMdG51sqEJQ2LBcjA6G/zkKAN02V5Emwv0kot+X0Xr30luyiki84FRqtx5y\nuBz2b13k9BVZd67Yr9KSr0VLrE+sXN6ai77p+EzVKnHehkWZg76JsjS2lnDX\naTBsZfJNjX2A6lVLlX4DktT5jl8/P1UI4Hz+GwWRgoGRrKg3J7e8uzr4WN7V\nyTLWiYeDeoWxeNKrUFiL0Kal/rwtA5WHFi9nV+95gC7LSonOQUJ1SREUaFG0\nCAdHkhtVndSpv+czIKl+IpwnagyQAHlNEJS0b/8aRsYyT99Nzg7I1+INUQQo\nrzX0x38dp71gR03SrXfAJIhpX2DAE10sWyirPxpl6zHVQkQ6D1nbhYxmAY/5\n9k/IKo2ei5/JeN9eGu47SKNPcnA7b1qdr//ry+Vl9AdJgN9i2koOB7WdZjHa\nnVFRWEQFjdydIfWA3KBpR5ZX+8BhlzORVreizeqOAm5QYVmgwqf4lF/Bz87x\noQo3\r\n=Cyu2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.197f64fa2.0","@material/animation":"12.0.0-canary.197f64fa2.0","@material/elevation":"12.0.0-canary.197f64fa2.0","@material/typography":"12.0.0-canary.197f64fa2.0","@material/touch-target":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.197f64fa2.0_1619457027266_0.05474075444804405","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/fab","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c574ef79cf5a607ff080f7051f9a6a09c20c202","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":22,"integrity":"sha512-T+nQ+VRw7r/B5XwZCpf277BGSKvZ8iOws7PBoKEQugEz1ECQ1MhpVZloSHu7Lhcf9mSb6/mNtIt72pf7gDz3VQ==","signatures":[{"sig":"MEUCIQD7g/wwaMLTRE+kStLJrv+qHvJYYKkltZ6rpJhqQxsytAIgK8DCd9Nv+R0KNI/gInH0mZ41WYy2SxryCX35SAttr5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2bYCRA9TVsSAnZWagAAx1EP/2b+hLRhM+MtAbRZM6vL\ngDyPOMHL8P7Qv3iYWLRQTgZhNukmuDQEBbwAY8yZsoyRiD4rNyO6uUWJbmLp\nXZktbaBODHGgYouxFreP5n7hXJ23REVrlA5XSSl8gVxuRRkPBsoJYPSXYOSN\nScA7AzKZQTlxrV6N/VQL+RJmHu1qjqcAv6WErXG+4dHgnVAk+epZ3Q7YLL3x\nLdDY67fCf9LSYy6G2sQhfyNUtuG/RLi/hc+fZ1YKrGLLA2csx/g6gIKSlGso\nFj2tR/m3c6NJk94kG1ed9MU3ns188wBFhlW4hSv/dzcyRpjDYWLFO4Aktmz3\n3w3J4mEei+Vq+gOrn2tkPdQnVtGqeNr2fDMg2GMUAKz+yST06zSeaKJ2oYCK\nLISVpUpRakJfkfwjLTsYh4irrcE3Wez7ofSbFEvvm9wZjieIHCHgTHYNiHFn\niYDPC6QDLE5sbZaR0zQRkcRMIi73w1JfBWSftb85k+ziB6plRnTHu8Zqtb7q\npKQp4+uDTFyK8r6R8eTSGcZehpUKUYfe0ZIAXUr/EMYiXEWhV54GC+4mvSBm\n+0+sU1z8AsljPyhzp9njKufzsMR1yukLzEhhU0rrMZrD3Dk5fUVCymSMrmaB\nE9wKQRRBw3/XwXadV30M+rTwPIkjKlUI0Y9LO1Af7MxOqSbMDOf6zhlp6O4w\nPp+r\r\n=X59V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.55ad2d7d8.0","@material/rtl":"12.0.0-canary.55ad2d7d8.0","@material/shape":"12.0.0-canary.55ad2d7d8.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/ripple":"12.0.0-canary.55ad2d7d8.0","@material/animation":"12.0.0-canary.55ad2d7d8.0","@material/elevation":"12.0.0-canary.55ad2d7d8.0","@material/typography":"12.0.0-canary.55ad2d7d8.0","@material/touch-target":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.55ad2d7d8.0_1619486424308_0.7166208844351547","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/fab","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa21f7771caada0dd2b074c18ff71c684680898c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.ec4ac5234.0.tgz","fileCount":22,"integrity":"sha512-+HaRPlhUxXvOSTxMng8NtFB6kuTaqJopRdZ/bSOw/Sc0YfF27GSvXdB40RgZ6OmDusTvAMG0LajG0KmacehaJA==","signatures":[{"sig":"MEUCIF18DKhoH5A4WbttNpKjk8FCdyDbmRhop8hdSTXn9IxMAiEAmXazD07yZQ9Yvzs8cFG804wbtavZ4LofCXXkrseKHUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8RNCRA9TVsSAnZWagAA4h4P/3Cu/NDrVJ7GcZ7DzDwO\nrizmFddivBqkz32HbxsxTOucXPrIvCV152Lj++HJUQkUdk9Nz84UL3mEQ3yd\n2+kl7VmufcutyYviWW3lOkxY1GmNiWmIS0NUVr5nFeCtuZUu3L0ZcRARaio6\n0xhQB5DiKiGQm9exzAoR4dpf5xWLwGv1UfpcOEiihGCyqa/Zu6y/UsktG9yB\npAVtcV1CWe+JZlq9Zgu5pPRR3BKRRwFq0mvQvqPsN/eHjCSY3JQgdBxk2Np2\nL2IEVwFgyqazLrpJ4xQkYNDcbsOK0av6Ka0wkzduqRorJpq1SEX/akm108bB\nSWrdtvwumNlG/fgoMRc8EVFAjtxAkYW0LLxtuO8hFj4lprpHulmR8GrsWYU3\nV6pVcEK3owF5ckv1/R/eUONJhaT1cPcxOfcUPKab92O0FdLRyacM6UuAjZCy\ni8l6ycUcoars/O8Nsr6Fyv5wAi3EHCe3hvJmsnCsEi3IMwNhPJhiGswSdX7l\nwdU5U+KH4ft5Oo2HXS81cBbUaqMKi5lutrMMUbgL4U89wMucZmS9n2Ae9fW0\nl0Uyp2A19hQU3o+uHLhtmmoS2Ncz0yT+gs7Lyn2CvSLM9kxtmjn3jo0D4ZHH\neSW7795VdZUpLAYjlNTvOWjkdC7ajhCTRh1DP1DudBeSIGI5dImU5oUPwRyt\ngIxC\r\n=u4Al\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec4ac5234.0","@material/rtl":"12.0.0-canary.ec4ac5234.0","@material/shape":"12.0.0-canary.ec4ac5234.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/ripple":"12.0.0-canary.ec4ac5234.0","@material/animation":"12.0.0-canary.ec4ac5234.0","@material/elevation":"12.0.0-canary.ec4ac5234.0","@material/typography":"12.0.0-canary.ec4ac5234.0","@material/touch-target":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.ec4ac5234.0_1619510349187_0.3630282000617022","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/fab","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ce1d602b457d8c5c5a8219ab4d2a3f30f8057dd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.b0579acdb.0.tgz","fileCount":22,"integrity":"sha512-YIP+VfP+550Qgjff63ICoU9GBwA4DKC8T1rlXRD+TcWA+jbP8eylgEYSwgfNSbC2NarIs90Z5hJWscbqWEP6Hw==","signatures":[{"sig":"MEMCH2yEA52T3G7C07n3oyTdQH5oNpARwHK9V0mH4YPE3K4CIHkpvwusFpVoKUJQ/qioxavmf12h93daFtZZk3Ip+mmq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh80sCRA9TVsSAnZWagAAH/UP/jOONxr/k0TvZQuALb/s\nvav7HTg0cDJot+Mh6bLnaNBvGlILKU60FW5Y7g0XpZPqKDh6+9g0OcGnnIxv\nh70FPAgkGjNeW4/8Eb9E+ZfYq8Hkx9gPpR3d0ShPu+qJfWjg9cdXhlXHS5an\nYpDUWoi+5nWpqWmVYaHDuinDye331hMe6BN7nPMEVKxIxTOtg+9ZIw6QEVnn\nGxu4MFurPrT+Cyi6sjYCHNg6nT/3+L1aJzPnSxd4aogXNyd3ByoerL63gua4\nkiwdNdrEIhrUiexX8Lz60Bok4sGpmWSJPYStoqyaADNONZ0gbGEWq4x7ZxUt\nTnkaSPD8j+zIFEf4EEPpoKIhq++zfimRF+q5i8tQgbImJh5c7rgan1tpcY4P\nvT4oh/Oo5P927XZZKkl2MdOGrYxBe5IWSnfXlZ33mk2JTy34E0TUGuTinwJV\n9V2fFh6ODvqVQ+Sa51dnwXjzN99goWEcL2UwqwaXT6C0rcUiGXp6FPTfXKSD\nOKD++gvTYmmYy+PbRqFkT/yheAZAB/YeDxZLB2f/DMz4oQ4A6K84LqPrvrPP\nfVfzeDPS6RO2iz1AhjzBNHcIuBpYjRUwtSyt7jNS/i8TjKchOL6ja5YDllP9\nsEfm5IZ0knTb/79CuIfMK5jtEp1/qPW+d6ZkqtDQxO667GuP0sPOt82fK8oR\nymsO\r\n=8ecn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b0579acdb.0","@material/rtl":"12.0.0-canary.b0579acdb.0","@material/shape":"12.0.0-canary.b0579acdb.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/ripple":"12.0.0-canary.b0579acdb.0","@material/animation":"12.0.0-canary.b0579acdb.0","@material/elevation":"12.0.0-canary.b0579acdb.0","@material/typography":"12.0.0-canary.b0579acdb.0","@material/touch-target":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.b0579acdb.0_1619512619921_0.33052459680616386","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/fab","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"086d47a2b29ce66d1eccbbfb99882fe701a59b9f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":22,"integrity":"sha512-ePw2yTSVj3+Ip7W58YgdWFasnh4QDsB+9ytSFvu6Zn+XMTGxTDsr11gV3qxqlIngeos1hLD5ApyihrXrOu7NBw==","signatures":[{"sig":"MEUCIQDBcFKFoQ6qNWgGUaZL5ibWtmHI+MQ1ctnNkXbjvx9zzQIgb0AUyun8h/AbrnhJHRl8RfwuyVufIh3WIDZiFw/WmKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHrnCRA9TVsSAnZWagAAuS8P/0RrTeulwHrkagIuHRJ/\nkMyW/gDPAIdnDSOXwC5XI4wbbHPyWdYo8JVm53jmpl2VjFy+E29M52JcgI0O\nnmPF23FJFFTT7tGNi4IsWgoIwu57t3fdXYgzW687m3dVb1LxppQL8OxpUifr\nVT01DuMD7YMScSHKAKPoaLgh7dd5JKHJbKL6SMlJjJEsEwnyAYkIDIqysloK\nJJ2AKfPCI4JdHnsb1iBORZL2GlH7TCRakYNLAepFzT+bChQQitPMY3coCl6N\nAk8D1ruexF3MN5SltuZAVhfHc9Djjr70RIGGjYXzlpAQ6k/X6NgaabJumXdY\nFbeioHyQCYx6qgX1OyCx3mCB7YYmeHo2oid6WYhSOiqO+Q/Es5jEDBb+VfpZ\nQR4vjUpywv0VrmLviD2Zdg8ukCFll9okIKGE6IXRyI4Hc/YWBoPpJcU2WEkk\nrnRnWdDM3jWipJ4yhA7LYFMYmFARyQYMW7URG3NRVbezsAghn2xodD151u1+\nTcFmSh4P6UoRXa6kDPn+D1X0hxU6/03RNvoXOXfAfnJXkKKLp49vRV9wvUEo\nz6SkMo7npVGEkzZb5l7mb1PC4fTeBrmiNurfoob2ecqwiJwVvoY/fJl4GH5P\nzpAP4x5jtMMZ32aN3RpEGJgmLpbNb19l8hAw075fNpEJYyboogpE+9RCC9rU\nlL7z\r\n=td11\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.81e2d4ff3.0","@material/rtl":"12.0.0-canary.81e2d4ff3.0","@material/shape":"12.0.0-canary.81e2d4ff3.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/ripple":"12.0.0-canary.81e2d4ff3.0","@material/animation":"12.0.0-canary.81e2d4ff3.0","@material/elevation":"12.0.0-canary.81e2d4ff3.0","@material/typography":"12.0.0-canary.81e2d4ff3.0","@material/touch-target":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.81e2d4ff3.0_1619557095203_0.9025638440715198","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/fab","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"323b7aecf6c9ccd98727fcf2061125fae9b3a7cd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.c8edee52c.0.tgz","fileCount":22,"integrity":"sha512-sg7XbuvyhULEXADkQAthovh9ncVhzNZG+dEcW2xLUx6dB6N+iwbo1f0QyOgPlmo1JJAdy5Dil1Zx4DMn8mTNIg==","signatures":[{"sig":"MEUCIEOZZwhn+QevMH7dz7GwvC/vBnHltXXPy5Z5+LwDQo3nAiEA9AKDqyyHkl5hheYYei50Xx55xHzWJYWr0k5cbq8aAeI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIZGCRA9TVsSAnZWagAAZBMP/2ZURxTc5uFiCQlL1u/m\n0NiTV+AJacz9s9R341smBwA5XIfJaFsnWOypcZEL8rg0NFtomqRc3+nj7I+2\naaQzgnbKGBFtWSChPuy8imJ48OqEmViUoPZ92P2gMhLJVQODMxj8mrPzKLoU\nMTk5S/h+9pUvADFrKGQ7PR4KmQcforWWwf59wdAsSajQpD+7c9pcI8JpyTIq\ngg4ceREnAR8Gk1B7d4Oh+1/GAIhaiVPBSynvz70z7mouQzInjeepUw222yDH\nMkEJD9kWPILplo9NBiHbwVAuzUh5IW4e/3ZtqiY5nvHla/ecQrVZyTvLTH9G\n0uMUNn8Cki08udr1uimrUqWTL5xnbpj5TrUVNPG8fnMPB5mS606//1ulSkBU\nRNGaAwahj3YbNuIluy/2ZiaWXIB3Fuv5xv+eI1r67w2aZdyVZAbbSCGgt6pI\nJdcPQ7C/ddX+LLCYY3aRzKeJqukWtzmKDFzseNXyXUkogPLMt36Pm/TvDMG1\nJKV/GjdJPpPYGKXeoOcd1U5tYCdxTKx3ch9L7/QJfJE4iy257E96+lEYUBln\ntcN0THp68YI+KCGiIPjA8f6ywCr2fDfNdO5qH2KbdXj0+46G0pFis/4Hfto3\n/Uf+H2ERmIQhvmsnwcPNmzM5UxekoEflVhcc+RZ2AergbYMLp0KiIJbPLO4L\njan8\r\n=ezd3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c8edee52c.0","@material/rtl":"12.0.0-canary.c8edee52c.0","@material/shape":"12.0.0-canary.c8edee52c.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/ripple":"12.0.0-canary.c8edee52c.0","@material/animation":"12.0.0-canary.c8edee52c.0","@material/elevation":"12.0.0-canary.c8edee52c.0","@material/typography":"12.0.0-canary.c8edee52c.0","@material/touch-target":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.c8edee52c.0_1619560006180_0.9314841547872608","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/fab","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9250dad7fdab41357bc7aa073c9dbfc3f4ebf107","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.f5b6110d6.0.tgz","fileCount":22,"integrity":"sha512-RB56Njfq/4Gv4wTj/koYm55P/99Ox/8RsQdL7XQ7DUdFHaKWFzMa3/YFAwysaSiRUzbIEtCssSZ8SrS3lM7nPg==","signatures":[{"sig":"MEUCIQCgSXamjQko7Nph29MTwKoBwKr9JxkSqNfe0hkL8qGuRwIgU0L9LC7ZkjN/6cOjhGADwxn54+CdphuwGWHygMQemDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiItCCRA9TVsSAnZWagAAy2wP+wQXCsh0jCN+CAhSn/2a\nn/zUHMB1SufWh20ex1g1i29DQIG9M0Fl74niR4o/sx3qXs2OVHQa+Zaj6d8k\nYAhlYQ26hhPsRESql/R6tdv+if/mpcHCdUE9LG1YOo8vPf42u1aeGP18RPFH\nNDjFdBmkUaN1+EpkyAlgjfnBS6ADnrSJaeGSSuC8TzeBSwa2kjuygxj+7c/+\n3Vqrugxrf50HAH3k7vPtfTI77y1UMYxT0anoySkvZp0fYHBpKY+xo0PGnO2t\nRYZ4fFZMot2DHDFt+sj8v6DPbrkYROVgfR83CEyCaRp7FUXR+KvDZmjKgvRJ\nZKNWny7Ntkp0aDhbm/0o3ToQ7Ifwm6rGfyQoBRCBQtrKNInIiUXiE1f95kYA\nrhpYrZEdyTHee4Z2nZaYvtRYkw1cZzPOvyeqZu3/9d1/NmLrw/7L1r80QwTd\nI6f4oyxaYth+LPr4z4q2OvnqN1BfC+6+kd33KAOQ62CTRofyKcOGEHSWzQlO\nrCPbKWiPilaLgueYG6CVy2WtDWtZHfAI90VKuQmiZeuTfUDmeQWVZso2u4c9\n4sLaAQehE8zjKbzSc4BoO066CNFsFvczS/ICtP27RNMZwg+dmGU2tEk6N5wa\nSF2rlZ+9Jmgb/9hsVVO+uuTDGuAOHjPw+zNvP87WozRzrqFVVqIH20Gy0Wvd\n1Fl/\r\n=nkNT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5b6110d6.0","@material/rtl":"12.0.0-canary.f5b6110d6.0","@material/shape":"12.0.0-canary.f5b6110d6.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/ripple":"12.0.0-canary.f5b6110d6.0","@material/animation":"12.0.0-canary.f5b6110d6.0","@material/elevation":"12.0.0-canary.f5b6110d6.0","@material/typography":"12.0.0-canary.f5b6110d6.0","@material/touch-target":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.f5b6110d6.0_1619561282078_0.11287657231932946","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/fab","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0f8cf8cd4069c3ab9d41d2ac77a1dda8591b323","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.cee9b9e22.0.tgz","fileCount":22,"integrity":"sha512-t1yo0v1NQH1qmxtxzFC38RLvX8Jju6JUZC/gGSEvHkEATKox7itpumQIeb9Cp79houOncD5B6yQHnhVAkTfUuw==","signatures":[{"sig":"MEUCIFvFNbPZt0+XqfDxFP3Bn0tKPW5yP145/var8aMVUAmeAiEAjStXmzCznHH7ffqXAdksDerlTKvbtJMjQHKCwxWaydw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKipCRA9TVsSAnZWagAAyvcP/3qYrq01Af04k2Fv0KPh\nOhtMnx2/3yrIkWH9tbd1Cz1U3G9NTFiKm7+XXUG2IPED9MJwh/njmMmWMoYr\nN1MifEc+sFvwXPllr+xRfrQ7VjaWNWDu7IorJVldBLxriQ/RoOVTmP3oIf07\nVEaV9Ty37ok0AO2nysv4rPecdy7WcEMtIjuvofqoUB0zsSGaY6OPmpELZ3WF\njWfntF7/xuDkvzHc+Apxrr0zaqigI/qfggMQTD4lRuzIyPFIWcpoxdcFe/p0\nSDkVr6Si4MS/CyxCMJtih1Ji1ZUXt8mrqBTzmx2NoPRSX/KPKgp1qQ4UXghy\n+hriZCX1rvGb9Fhot5GGpkzq65awH1p2p6XrK/rzZwDBDd6NTBGZHJiFppAr\nhK0ZA8DKARzwKxDnd/5Pdcrieqx7FvXh4gLu3iz3R0g8naBru09n7PdgPEwI\nLLIC6+kf3X0X/DAhCvhMuSVY9CAW6YF+jWt5hSpTCqyn4GS5BUpLArl1+2RI\nWPBqghmmIxbpTlZv+b0ML6tP5zgoAxMdsWt90vYTaPF7/C1KzufG3UaPY9Gu\nI8K5qAqVloXpvb6MjREYmRJRIWzKEeNkffF1X6FtcouTd61fS/tzD8bPy7wX\ndOKS00uZHdKMwSa0ie3T1M3GwO7Cz3J8+no+KMglkfYIb/Y+mM0bPOck8+RB\nwu0+\r\n=REhW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cee9b9e22.0","@material/rtl":"12.0.0-canary.cee9b9e22.0","@material/shape":"12.0.0-canary.cee9b9e22.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/ripple":"12.0.0-canary.cee9b9e22.0","@material/animation":"12.0.0-canary.cee9b9e22.0","@material/elevation":"12.0.0-canary.cee9b9e22.0","@material/typography":"12.0.0-canary.cee9b9e22.0","@material/touch-target":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.cee9b9e22.0_1619568808587_0.21981138933541322","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/fab","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"815a325ce11882ece3a60965bb014b5bf563b811","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.96e83fca7.0.tgz","fileCount":22,"integrity":"sha512-Hym/o8G4r2vKiZptBn9yaouMfWTvwef6G4gu9R2927RAjW8r2TQTp4EiZ1dgl5HmTtgYvarl61hBE4+5ZzG1Rg==","signatures":[{"sig":"MEUCIADLl5SmRrRle+SU9aqT8V3Ebk1A4BS6CE9AduEjLb8uAiEAu1w0sSJ2zvWBCK8V8D3pp5lQiJK4dxjgOAoo0oV5X0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMz+CRA9TVsSAnZWagAAErYP/RkyAULCppXVIf125LYL\nXETasA3+LY7jRTGyLjUkggX6eU5Q5CoJ5tasuUf5K8AEO896Nbj/+dNB6KPl\nkVDIAG+9Zm63l5Mfldk0d1SjmPqNj6aTTy6GWSsLBrkWp7AKffp4+A1XNCcv\nIpJ6hfwkKqU2EMQmgvcoDeH3b0LP1WX3mLymM4BQECD16KRbFVYZtPR9gUPk\ni9A+t0tYxtaSoc4g25LWVejKdCkyJcyKQplSxqjNMN4Cr8mH8GcE/OwosASv\nqVhWnWbD9BjvTWfYJdHMDRBZj1pWskc/qnle3REgaeBhXsWI6H//qpRZMMNh\nqgEC1yk6zZTqIaQMVM0MH/rOJORsj+AsVoi60R239s0G99O3lEfZ27VrBT7a\nSF+IYmhLiu4aoSAa8RaRQ46/MPgK3V9MJu1Mks6mKfuxVWaDhiSKb0rdxRv9\niwz8VuDW0pEfKiox12Hqh3Fm2Q+34+7tSaqt7zoPXoyrkOIQpW/5IcQVUpWQ\n50VohxcXnzxO0dlYI+sp+zgM7hAs3joOWKB/c0+pUoChivn9EAyUEyhe7zrB\nBcIcpKHYTZTbm0Iiw9ZNmVZQLC2atIA/l78rg/iMJ6D1dzTa+Grvcry/xIzg\nSFikYFN5eTbl2iZ48op/xvtfJQk/j2azSh+F2uyXyNWJ4TpBQ+26LiwTVlXq\nyYFb\r\n=GfQM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.96e83fca7.0","@material/rtl":"12.0.0-canary.96e83fca7.0","@material/shape":"12.0.0-canary.96e83fca7.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/ripple":"12.0.0-canary.96e83fca7.0","@material/animation":"12.0.0-canary.96e83fca7.0","@material/elevation":"12.0.0-canary.96e83fca7.0","@material/typography":"12.0.0-canary.96e83fca7.0","@material/touch-target":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.96e83fca7.0_1619578109876_0.6680212382577169","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/fab","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a234107fa1937dff7cb99243d9c9cdceb3b375a6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.4c497bd19.0.tgz","fileCount":22,"integrity":"sha512-lSjB86XQqi1ydKaDKJ9umSyMBS0juDoUX5cikD2PeRot3VG610NGGfZTVsU1nXRyaIe6xmxD8hoEHnJe6eQpQw==","signatures":[{"sig":"MEUCIFkeNmj1JHaUx1UgG7vq9926ME/GSvGSzRQj9MJfZixaAiEAvhVWOu3bvnttZCAhC9fupGkAyseJ0Tk2MUhwQK8oHGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaFJCRA9TVsSAnZWagAAg90P/3xHQD89X/vvComImBp3\nKiscVW13dHxYBisBYgr/1Srl4smHMurijT26X89HC8O/wzkdCmF7Okk/w1ax\nA70uVde2vynraL9EQOZsFWZ76k5tf1ExZKFxGKJnFxZ1fqAU/SdLSgLnCn0Z\np+RGXVuJuH95mubBoJ9UqRDYg29qInuuBp9JATrZentG37xZI0381e5p4oEw\nrmnRT0nEAJA+qj8XVxJwdlyS7W5cW8gD1ggo72mX0OYJzDeT1iuQVwLxg2dF\nATJKw/X/1SfDeVT0yPq6BGnXPnLIohInQ50LVRHQnTbl+RdKsPvJcnSRAowM\nOdP5Wd93dtywwudzasrGv3ZLMOxgei6txyZ3bqPUANo9GoRK1w5CO83EeQqS\n3U1o2rvkcFlmPZb9rciGrU2iaE4lwasGXdakUSkyAM1kcr0IKakWNJDqHgkS\n0YktJcYvWb5B4o8Bu+94Uw5nTSQGZxRrZJSSBOSE8fXiKzaQ8w/VwvFbY3Ch\nkaM7JXwdu+iGnv20SPFLWtfG8z/6HobiHozWB1UMj2WKbUnyUkctxvMo/Wwu\nN6JoKYcvDNNI/+IIzmy+YOf02+MbX9fkkD3z4W8VgV/cmdH1glofPbMiIJX+\nTRL6Lxlg1YOdsQ/+iGnp2XwHWFKhhyC/Rw68OqbZd1XjA6S4rR86NCmenJDx\njIjD\r\n=YH5Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c497bd19.0","@material/rtl":"12.0.0-canary.4c497bd19.0","@material/shape":"12.0.0-canary.4c497bd19.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/ripple":"12.0.0-canary.4c497bd19.0","@material/animation":"12.0.0-canary.4c497bd19.0","@material/elevation":"12.0.0-canary.4c497bd19.0","@material/typography":"12.0.0-canary.4c497bd19.0","@material/touch-target":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.4c497bd19.0_1619632456941_0.2366398529841922","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/fab","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.105b15b96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"add215387990aecfd0ac84103fd46bc1d730aefb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.105b15b96.0.tgz","fileCount":22,"integrity":"sha512-c3CAktHpvwYtoIjxH8bhmBPfHykJ2xFJTxxEERGWBJ47584pi9rMy89Zve1VnU1spdqkWE2UEKBVyo6gCPgnyg==","signatures":[{"sig":"MEUCIDVhTtr5LbNBYM6K7MPKWHPbSD5OtebNn5i7xyivZlX8AiEAoh5CzCvqQVoM589u4opKxWvN3fxcncZA/z++A4V1TlE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidd0CRA9TVsSAnZWagAAJRkP/1V2KGpH7C4MiWj6qDcF\nVAq4O/aw/Q56T2YIUQsWjojVWlhrhcebOBHC+z5CRtGHLe7IspMJPVTbVqcC\nplqvcVPFdOrWH0GxmAgC/c1TkyH5A51kjw5jyOXeibhx74OsR7xRG9mW9rsD\n4b2updlBe1aXkUdADkhb3kdbCE3KnlNK8dbC1FTs6SVddQ0urkvVB9z2UjYU\nCk+YvcfzmssHmsOrqholvcNaEZBgMd/59ZhJS/bru5CnSzxlSOmvnmtZYbfl\nHxJqEN1sUjHXwtyNdG/K5ePh343HP1X+fHhf1GYVbfcvohqv5AfxLOIkh125\nBx0D++VNRsfZjrBWnfgixn+C0P4tAFqkwv0VwI3/ojb5GCxVTovpVEs3ZgUZ\nyOY9Tbj/QDI9yB3Rv3oBie8lwlOIK7vHrJRAuMGdMvPHRcA4be60MeqS8l59\nFVttQJDp9ZkeZuoLI4B+1R4bllrXZ/dH1GuALXdHCdtXpCkk6oJ8UpxPYBrG\niGkezABwFl+Td+Ys5kPa/4RoiHyrnw6Y2AYqnSsR3KcKAIEeSO5Ct+PGFiBz\n0SaTMI0RNxowxxxcP8K9Ypo182QwHtC9v+/x+25iQbxo/6oWr7Y2qBea0DIe\n+GrybEMQw4cgHe/KsmB1KCQ8t83n7kUGdVgG1d8uJ9go72EbX6AbxMiqR3/I\nA0hS\r\n=ig/k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.105b15b96.0","@material/rtl":"12.0.0-canary.105b15b96.0","@material/shape":"12.0.0-canary.105b15b96.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/ripple":"12.0.0-canary.105b15b96.0","@material/animation":"12.0.0-canary.105b15b96.0","@material/elevation":"12.0.0-canary.105b15b96.0","@material/typography":"12.0.0-canary.105b15b96.0","@material/touch-target":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.105b15b96.0_1619646323661_0.7269886403879029","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/fab","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ee28a2463c2335dc1903a62140af92bb6638cad","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.6e20259e3.0.tgz","fileCount":22,"integrity":"sha512-BJ+OFHz8G3/85Uz09C9Po+1kgcO868G6GfKuXeM9nSs5KYcqqSGmTs7MaKdP3sdI7rb5arjIGF+PsXDnr9hDnA==","signatures":[{"sig":"MEYCIQDVJ63zpGOjd++0tWZ5Ykupi3IBG1D1i2VLPnAIyfjEjAIhAL03h79+r7kQLuumGHeFKLsRYLMQH7r3Xa4mJ5N+D10S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidh9CRA9TVsSAnZWagAAg+EP/0mh6bBH8JFyv5tBssD4\neduRTiEiJpDcERt0XrbNjmR25o4Y66RrjhNgOuNhUGSCNeciFRXyNOp3gXJd\nWKXke32k1hTYVUY+MhJ9BXRNtTB+WfWdD5Q20c/hj2vfN1JKZXAKkgDEiITd\neUMV7WQPe48ta+UdZ98lc6TfPkm621eiW5EhUZDnH/YMESeo/ce+ecXbTf3o\n2vtMgITfc3DSvqOZgcCjrcgfDkNrKDXbH+/JsYt1G0TOAatyEA/gxcRM3SZJ\n8iyJN6gx6aEQz+p/vRNxvqd4aCCtc35Aa7fkGWU6SVEkxS16VY5mpy0RXSGT\nC0eAd1f2FGbmROizU1m0MZcVdGJgfLsSyXIXnOqaiViStJGG1vLXkw2AvjMF\niQBEMWO+QrawhTZhuoPnJM+O8tbzvAInXBG5cQ5pvkyo49XjvSEFfnFRJjoh\njwGi0OgVf0LHEBbXPx0o4HwgsVAYoQFOZt36ew90gNVbeshWAkIbfA1Y+DLk\nuUxePZZ/1gs2bDiu8sC6D81AElV6gyoiKj2Khk2iVeujaQoP4Uc76Xn7gZ1u\n6DXuIMM7OCFt+TZxnCzV2q5yW4Xz5XU1e4aWN1vkBBOUA1UMAU282tEazJZC\negwiLLlAgPn1DEmNmI42QAdUJHB+uND8l4wuvHdrg0OBzKgM9uDlWfxjXDVL\n72TN\r\n=/+ie\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6e20259e3.0","@material/rtl":"12.0.0-canary.6e20259e3.0","@material/shape":"12.0.0-canary.6e20259e3.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/ripple":"12.0.0-canary.6e20259e3.0","@material/animation":"12.0.0-canary.6e20259e3.0","@material/elevation":"12.0.0-canary.6e20259e3.0","@material/typography":"12.0.0-canary.6e20259e3.0","@material/touch-target":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.6e20259e3.0_1619646588849_0.4605343424487691","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/fab","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d790f5e3ed02bffdc446b1757f61ea92834f72ce","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.0f79a5d74.0.tgz","fileCount":22,"integrity":"sha512-d28YpUiResSD7cMUN11tsoScFgZAh/tLdplEPzJjxgS8sdXimGJ6pR8VnDo9uqg8TIqlnboTTIp/ntf651O7zQ==","signatures":[{"sig":"MEUCIQCXBy344wjjsAzQZi+jxC5pVD3VpI6gBroDqDac6x+xZAIgJsSxBpJeHME4qiWMwDjQNF0ZqMDH1A1CUA6wwHCtqVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieUhCRA9TVsSAnZWagAAHcsQAKGidCSd+Rv0xq2XG+vF\nXE4yBKfFpQZGYY+9lDOo/4j4AfT0jteVPFJFOFbF1DoZ3f7J544D+HzjdDQR\n9KUata6o7ijRnlQqBmfpXF2zMItdGP1ooj144M1NxuutAZ8UEPfrtWs9mmzo\n+6T7jwJKa7jUmBht6vjMthoU4I3o5BXL3WktxUrIJ/QwAiZ1NHMos96M7ofC\nOdm8g/kQby2wkkWChJ5DGXiqW8ccuJ37oNM3DZZnEBYxqmELWuqZnbTEpLBh\n/OEBEYGsCoBkcOy7IZU0qg4dioQ5dkryH+q10m+/VhprImrU772ltLQ2QMar\nrgEqi9tDzVFIsGH41W922IjR5uRq8AHw5TcnBamLpMpiZ/Jxr59nLYFjwhBS\nx2DkdEEllHbF5GmDB4mxMNIrIxPGYrWbVboYAivpxXWVPMf667QIU69UnT2/\n7nMMsa/wj3wn/2st20YolbK6/bpQh/vePWZNiDb5II/4kpJma/MskFM/ao2q\nJ/tZ8+CDWRuRspCIZrRrf5K/H7WrLqvrnBXpADp/h5EZuqhmDOml1t68cf7V\nvjxuQAvR1WvaKHn9nfFbtNJdbhTJeoAre7Y2XdPU1FFkqdn6RH2vkX6D6p+B\nDmk6i7SrWnRwbBEpRDo7Ii+BBOzawUzkXfU6JpuiAu6nYeqXPd3w8kSAIw4W\nw1HX\r\n=eshW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0f79a5d74.0","@material/rtl":"12.0.0-canary.0f79a5d74.0","@material/shape":"12.0.0-canary.0f79a5d74.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/ripple":"12.0.0-canary.0f79a5d74.0","@material/animation":"12.0.0-canary.0f79a5d74.0","@material/elevation":"12.0.0-canary.0f79a5d74.0","@material/typography":"12.0.0-canary.0f79a5d74.0","@material/touch-target":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.0f79a5d74.0_1619649825231_0.8434606407248726","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/fab","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22c507b37b33606e26aea3051b17a7852a8436d9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.84f3db9ed.0.tgz","fileCount":22,"integrity":"sha512-tViOZyhMvEOfyd7hQcy8gz6EWAvmN4seOZV5mnHzfMrvygmgk5zqZuhVt7j84fzjSDmZ1gud03jp4d3L12onzQ==","signatures":[{"sig":"MEUCIARUx0FwiuFmvvJvWOzMeTe7kUJ+jekYCX62ICeFxY6+AiEAnsV1ExsHM5SslBIA40ccmVrPB8go/AHkayM8oRNbi3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisA/CRA9TVsSAnZWagAAnVQP/2iP2JL4blT17kGqIR7F\npdoo/sGdu7ap5Qvr+kUBfA9L4+bBkDo07zMUBrYjIW5gOpHmgMoVhnm7Mfo+\nLnv4gdDXgkyuaRUJ+byZLGKIMeYaFsIdrc6r2QI9LuO8pG+va1i7nDdSkwY2\nlV8kc436xMWH26r+akyuy0uyqCd9mIJy3hGdI+HJBAYwj4/SDHj8NfYHcEmt\nSQPuQWZL1xgzP90+uTPhbccsTORz5TuKMawMZceQihirRcpUeWgAmnkw5K9D\nSSV8oVniFKz8oH9gaU0RozE5JgYyTZUnQHSUt0J6D1W88fBbztK/wuEZ61rd\nAS8N3Bgejx1T7jCwdkPe1uCe+H6q/lRRCBerCetT3jjBTlCJ6pOSNXRTyyy6\nax/7c/PZJESUS04d1/vfht/YlAbEZGbIe5QsAc9oRMi9X46tEWYgLy2bPXFL\nm83sol2UoV58X55eLeH3ocVss3TmVUhYcv6+MshnHM9aIf43ZxS/7oxfJtij\nYK445upW7Sp6bGg8brMFKOdCtkHr3L2hJ3SBYLuivpGVWzAW4C1JNVHxJSE8\n4QhnktY3BFhNqtrdLhPiQv9ufx/7sycC/onj1lmu5dthhhKu3gLXdCy+kARx\ndZsaqEsYWOTxO6SoQLIPh3dw4BbH+8BdEfGuD6OnHpNo5oArJLX8zyO00LzV\n1MbT\r\n=02Hr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.84f3db9ed.0","@material/rtl":"12.0.0-canary.84f3db9ed.0","@material/shape":"12.0.0-canary.84f3db9ed.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/ripple":"12.0.0-canary.84f3db9ed.0","@material/animation":"12.0.0-canary.84f3db9ed.0","@material/elevation":"12.0.0-canary.84f3db9ed.0","@material/typography":"12.0.0-canary.84f3db9ed.0","@material/touch-target":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.84f3db9ed.0_1619705918762_0.42960486977849444","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/fab","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"108ae687edeae05f09b6b858f01bf68756c3318d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.8fc29273c.0.tgz","fileCount":22,"integrity":"sha512-+DJUrYc71Xm67tGzGRTx7/lvOLs3Nah0Nxju2kX8ohhrniFEObib6y7bDPm/kiyMGIb54w8A7wA8zJMHr5b96Q==","signatures":[{"sig":"MEUCIQC2b+KkNQe8omk/Y3NTi0dAsq9WcDzxpyOnNRXGkdYf7QIgRpAQyQvXs5NVJHxcLpLImSehpiO1CgZYev0vjAUJViI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyQGCRA9TVsSAnZWagAAm7sP/2pAsVz++8zIRWvoLQwK\nTv1m3siO4yTYczHSFJ+LGTSuwNc7q49WFn5ffGzsM/bU3eMbcncLVidBsWAv\nQ4hYU4nm/QSEu9xrUqB2qHdGtXDxCqWBxaXSIepJl8OLOJhFlJGkINfndOE5\nE7AwtsbEebq0OdEKHTg46iN37/oT3NTPec93uyGZPz1FbGIMd0rf+JdXZK1B\nqQtAFbv0Fux1sTuNIb5xkynETNQe2rQ6ZWbb69pVDfVlK/EwWWd1NOwuXsSs\nA3tXvM2WG3D/ejSfU54LTzdhI9hRlGE7oSi7eSHvkio43TCAtUQn1fexXpwS\nT+rGiOZtsmUjgmcub49Q320JCS7cVO9ZYrZ+ryqo2/Ub3eH9VFyBG+LtgcV3\nxJHR5MvhLiCOulWE9/eFq+zNyv/icwEfjliPPDA2vfMi0eTmstxx9YzyDZ+H\nNScWuq/nj2RSwpTJBMr9xF9ukN4uR92mrxgnvEC0udmMDqM4fOobuLTkHHU4\ngoaROdbPj/d1bFLvnZoluHvsuf3kBUaAo9lxP5ee/EX7xjJl+lY1vKH4J2JT\nfa+h3TBq3+oeojvu4HbghMYvAUXdjgaBipOu5j1jLw3KhDTq57ilIVFM8uuv\nSFYnjSUZdctsrfoXmUyzoWFR53zVTnqcSBPHUONlPAn15cOJX7gfyY83NJ7b\nT+Fl\r\n=IzQx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8fc29273c.0","@material/rtl":"12.0.0-canary.8fc29273c.0","@material/shape":"12.0.0-canary.8fc29273c.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/ripple":"12.0.0-canary.8fc29273c.0","@material/animation":"12.0.0-canary.8fc29273c.0","@material/elevation":"12.0.0-canary.8fc29273c.0","@material/typography":"12.0.0-canary.8fc29273c.0","@material/touch-target":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.8fc29273c.0_1619731461446_0.008880083803106675","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/fab","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da77bfacae4a9ff17a1139ca5962b69a607aa5f7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.c50d20bab.0.tgz","fileCount":22,"integrity":"sha512-JGwJOOEItYRkaERIiLAKq9RAmg/7ZnG6W1QONleecrvg3cAsWTJCzxHoazmzvwBHe4p1KMv0aRY806NfHO5n/Q==","signatures":[{"sig":"MEUCIQDVgX+5mg6NoYE15GVMqks0TnregRdAwycA4b9bu8zC9wIgLiVK31EOo2J9pWWGjp1mm0Gnc1jjVPGdyqUQ96p6rJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizsOCRA9TVsSAnZWagAAPSwP/3ioQAYt5L+hCCbH7NMg\nLkEYRr+SfXUY+1e0SoF4K/f/FDXiZSnrv+Ne9wsGmdLHimv/h2MMeUbNGq3x\nkRmX0UudCJHEbyC2gEj7qTJbMvCLT42HqGy2DdGNqN0h+N0ebYkd+ULQI/Cp\nOY6ope1EQ3ewj8656SSOlvwHWrjqXQ5wH6kbmlQUjg4XpnNySdxYdwk8w3w8\nr/kugSyeZUeQAaS2o5vDFo0dS1rWFgr5slZ9hyID5+gGGgbIPFaUAkaKtSPk\nBtRjiJNbeqpi6Cdv5Z7UVSTYoZXMPzfirE4zOPF0A9F1DJdc6pAnDnDlaC48\ns+uhxx/trtkCLuhMIDaqEe9USa0MyFcm1H2C6X3ad2mTWe5cISBjlGAzZauE\nnX90c8+ZZlfqdKfRP1e98REBSQxfymqew7/f6hdBkZhIYa55po6kGtYBgq2T\nl95klou+ByptxQqEN8cV/6IufBT1DrevVFMUDP3k6pEHrq6cfQKGmLgc62Zy\nspB3aGKhNgMTnttDFC5IVih9QXbzuh7GiH++CMD/XppodYgAVjuxC7hp9Iko\n2nmCQwD87CjTRkzgDoNYOlW3Vzf7dB+peRisU4nm1rMGZ5e7oP0GNlbY51hu\npMkpqqgJHq+9K6LDFO+kIC91vkWd7t1VtOcDIB0Ht6aAUkN3HHbFwxHJ07Xi\nR3CS\r\n=AyBJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c50d20bab.0","@material/rtl":"12.0.0-canary.c50d20bab.0","@material/shape":"12.0.0-canary.c50d20bab.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/ripple":"12.0.0-canary.c50d20bab.0","@material/animation":"12.0.0-canary.c50d20bab.0","@material/elevation":"12.0.0-canary.c50d20bab.0","@material/typography":"12.0.0-canary.c50d20bab.0","@material/touch-target":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.c50d20bab.0_1619737357728_0.6862837397976944","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/fab","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.474836ad0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8365d15f817f8d4d805b400b4ab7c1008d68ff41","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.474836ad0.0.tgz","fileCount":22,"integrity":"sha512-x6BuOtJMUplTMMKTHVHKiwuO05Yk8gIneR/AOV4LrswkRCVAG3ZbN6Umt91IiEWsFchDqh6nCRtfDKTxgEonqQ==","signatures":[{"sig":"MEUCIQDalljKSPTpvn/yc9ljUZebpYdAWt6VHEsH4ams6zyxqAIgTnb/+JQTij4q5WIqjNgvOEERW83TXerRZvDVHlLKj7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM0rCRA9TVsSAnZWagAAu9IP/R98dqb34o7FC6QTg/LD\nplT5DCTQ+YIOL/0FrumdvCdSw7NqSRIMo+BfdJkxzNOqJtOK7TCdZsQno80O\nmAZVUb5wgICsElfBsp5tzQVPdbEqXbYFOdTEKPBAK8TvXA5POhUVWTmLwGbo\neWfFsAG9pjbo6AC2S+6mEnDIK/vjqV6dQ4fh8SMqM0uvZ6/ZA9yW3772sH0B\ntrzBbBN/IC2Sc6+hXTxTvCplN8lXQLFpUfaSo6wjtWb9/diy3ZpcpEFRO7Qf\nf3A/Vx48xJPmkP1CayNGYjChHcvlOQWjivDWDAMQwh2EBzJmWx/8vsNntVUY\nX77r14wjXI2Xg/+nMVtnEE3NRbWr1L6lPOiJu5wy7C9CL35wx9ooLC9Uigfz\nrSPbf0RvfaJoL+Bu1w4RHlA+SG0In9exrU5FT/JI2eYi1O2JtwjUTjO6pqmH\nIFn5W3YXHSAtBk+YVP3XYQl0EQyoth/KGJTrMc89I9bkUwzDEqX8ent7IziH\n+zKgwwUsRwAX1Z1Q0/KSGS2GUBxWr23ldZlZPCVcZ7u1DdCz/Nvn1aMmO7GR\nv1jEtVey9477vKWw7VFrFURvmew/7BjiGoExeWLLpMoeO+4TpiaGkr9GwmBo\nI5EUzaoA6s2ETx7rkyq0LzxxdE1VtTzPmXV3auSU1iiDJ6kvX9MkwbcRw4Ci\neonc\r\n=Uw3x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.474836ad0.0","@material/animation":"12.0.0-canary.474836ad0.0","@material/elevation":"12.0.0-canary.474836ad0.0","@material/typography":"12.0.0-canary.474836ad0.0","@material/touch-target":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.474836ad0.0_1619840298827_0.7381024521344162","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/fab","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b200e5214a4908782dc5c41a843fef31c17e766","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.f5ad92287.0.tgz","fileCount":22,"integrity":"sha512-mOM/3Roj8SF9vOrBUDEA4yWVCl4NnGRqHWI/1ofiNmI6nXpofavQ324yZxfCYnN6CjxgHjiG1boFaoOOCLI0VQ==","signatures":[{"sig":"MEQCIE1B6lRh57HL+/22i4emfJxQoighekC0Z8znepb3R7KEAiAKn/T292+TJz7X+q4gSb9z+2W73pS6lI+WRTMAzrmfGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD9+CRA9TVsSAnZWagAAttEQAIImmaD70sh2VCoGqygr\nw0BUMpFThj9Sdrwbwtykis6oGjSUnQTCiQ1yTOuFqZ9DOZq7sPLzAOeP69FC\ncpkZXdCf1M1DYZkGQGAZdAVGDLgnoj09SXLX8WVMd6T+1BSMjF7Upe2lwX9n\nBQLoaKYKkVRRLUH1HRYJeF8rvCjMyttfFZArYkqbUXjy0QdMxAZ+xlzJ/I63\n4dL+C39UPRJhhnOZcV00rWr9qwQycM/nA3XN3FC2Ot3XglIlSsNtZf4JVgjl\nY0GSQeQPRVFDAU9U+RfMWKtEZTJbz04Jq0z2hWRG5wO7tLeDeVD6l/FqGCu0\nmQd39aHmMrcJDZ0i8S+ydHHVUmLRt83ZZQClmc1JcxMyAkPV9HHFKu6uB+Xu\nHb2G8Sie7zKTqNtMd64/3pGwbpljn/8eD+YNCmvVjkZiEB7RfeS+KfzVmSql\nGX5nCK94NLSKkn0LC9GecEaYOlhlMolGERgIKd6u/cXmrGJ2OdIQRH5/Zss3\njGGv4i6oYFeZrHLXJEDReoqBB2TbLv/vahs067rKaR/mdAd1baMtVWJpb/R2\nF2/+nJT5aSVHNWmbx4GtTcEBoTVlTIHabN77TLuA9U/QEmk65VTEd7wA0wCC\n48bx/yolOSIRLFMTlHr4t6l5WVcWugbSBsZLNkAFQSTYxNyNVKckZIWzxQEu\nJpD7\r\n=+Tco\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5ad92287.0","@material/rtl":"12.0.0-canary.f5ad92287.0","@material/shape":"12.0.0-canary.f5ad92287.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/ripple":"12.0.0-canary.f5ad92287.0","@material/animation":"12.0.0-canary.f5ad92287.0","@material/elevation":"12.0.0-canary.f5ad92287.0","@material/typography":"12.0.0-canary.f5ad92287.0","@material/touch-target":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.f5ad92287.0_1620066174061_0.18497413089468662","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/fab","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.af453daf8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51fa55f441cbe7702664d47a1df3bcaf3eeea46f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.af453daf8.0.tgz","fileCount":22,"integrity":"sha512-jZCio3KJc8vK7JwOBU/cjrlVlfiZZ100Mxwx/ZeoGJqUKNnrgXpGj8L/oYm4bz2VoYeVHo6Mek0kQ5ibk3VGKw==","signatures":[{"sig":"MEUCICdnD+Sq69/Ov6vNFFpRxfubxYBqje+jeoqq/KGTII5uAiEAnw1frfT4uruSskujpJPuE9F5QT9CWTYogN0Vi3WpCx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEbTCRA9TVsSAnZWagAAXtkP/10cyeZ1D+3IkUtu+YZy\nlNA9u8PuP+aEmA3bhIdtpImLVVSeqmlXznr7iSiYqexO5GdqvwzI3IEYQYlQ\n6DW/kfMaXyX12P+OODLCBfYzIb0+blb4haktBnGiaZIcPicRlpf91eY2bcSS\nauNtJKQ7E5fWFml0vZ+yBfsVadqfXNeCMRdODawk4271avPeng8vlCil82Un\nIw3Oc3vr/gMtYzPSxyiw0AfOtea55fm1sjBo8WV//XwxSIykeG0VcqOKVH2i\nm1c7cn5JRLnujXpRcaId9JJpV0F0jfAiDsxLQ1wS4g2xNcoAEi32gggqT7XZ\nDnyFFdJC6vbThfyG9byOjlCwlbt85YW52EiKCznJNY2s4LvOzEhhEQyOitK3\naubG/Ivl6/8zkP+OX5XngKOIGReai6joxyfGe6Nm5OurYKmX4C9SfTSYNphe\ngz5tDJhCScphel07tmEO2MCoIZ4FLMdovbxvV8nXx5GQSSouKDO7pYwv/5/3\nwBxMQZYc4ioWRzome4hUGoQPk2byqjZnt69u/woDPkgGMDAdTQBGi0YME2ke\n/NU6al3uunDyJHp5V2v7x+1729wqIOnkbcFlJiH1gnAKn2BIUHmJSk+SvN7I\nlFzX7QwH5Byb1pjluQa6Swicqko4YOuyroYuKdvo+EMCBtJvswO1Elm+bp8q\nO3ol\r\n=CeRs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.af453daf8.0","@material/rtl":"12.0.0-canary.af453daf8.0","@material/shape":"12.0.0-canary.af453daf8.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/ripple":"12.0.0-canary.af453daf8.0","@material/animation":"12.0.0-canary.af453daf8.0","@material/elevation":"12.0.0-canary.af453daf8.0","@material/typography":"12.0.0-canary.af453daf8.0","@material/touch-target":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.af453daf8.0_1620068051235_0.5663150329511275","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/fab","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3df8391f391dbf27172ba30a537e5ec51231b1e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.1f1918c24.0.tgz","fileCount":22,"integrity":"sha512-yblEaA7IBeTMKKy2KnVLfl8TctG9A19B85bV6KrMaI/61YqFutNF6QXc7488mcnleOFsNGkHiPlC4gG4myld8A==","signatures":[{"sig":"MEUCIGkmRLd8zEmXnaF1RRTHAn4pcOYiibe0wcokoIW4Rwq7AiEAqI2dv+CA/+tNoyrEVkYXXfDNs/DnveD5961p2jT8B9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE2fCRA9TVsSAnZWagAAuEYP/i4/bj9Phf32jaIBNiHA\ntP/0hntu2s6GIhlTY6V3gO4SuEV9miNQZkeT09VRzDbjZchqyhMytHqHH057\nXxpVey4I+mfwfAVqDnjHwxq0TyFifZ+Ul6nye+6bw6yYn9ZHGX4t8vsAgZb1\nMKMzoyGrxgV6WEPGB5BKORJSEKPF4I+HDfh4q/d7qM8eEIIV7L8Uqg1Q8BlG\nAgVNXbQowz8KkCZ/6yFkClnZMLQysSKtmyhDS7a1m3saaKXoZnAaP9w5hiJ6\nlrbEvKUbGPn/zEgxskoppplD8ByTXktGSbDNx/8UY0dBozh8+k02lpl27os8\nVSmFAk4y70hg0AFTY65WWpePBatg7IH6R+Mz3xJlxCDMZ7ipE9SQA38quAxH\nSJ6LQptrPRvYGWzwF7uPL891HnCEawX9jTlgX6hxDUpDYGPcsi47uBqYqDnH\nwRtQ5nkk24MuCTpiP/VGQh9oTJIaxHlEmldfSPwoUVMlrMee8jZ1Bg7aHSPd\nNmvOvVx1BAWosGf69J3mbdy70sYR5Drc30wq29ubuY3sjkluGoQA9yUspFGC\n0S78UbyVcPJywa9ZpxRYESNEUAVqfrOdznx30cvE9RHOzHRNb373QqG6ExnF\nL+rQxGENoW0cGv663rvDxg01ncf/+8d0Rd9LzEtRx7MRonolPwxKx6Uglk2g\nlKve\r\n=pk69\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1f1918c24.0","@material/rtl":"12.0.0-canary.1f1918c24.0","@material/shape":"12.0.0-canary.1f1918c24.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/ripple":"12.0.0-canary.1f1918c24.0","@material/animation":"12.0.0-canary.1f1918c24.0","@material/elevation":"12.0.0-canary.1f1918c24.0","@material/typography":"12.0.0-canary.1f1918c24.0","@material/touch-target":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.1f1918c24.0_1620069790714_0.3485652145821132","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/fab","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.33148231f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64e6f18cf88afe605160b8ccfb64a2ad9b42a57f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.33148231f.0.tgz","fileCount":22,"integrity":"sha512-132HFJrhDBniCto9A/w0Wt7mANczZSJgK6W7pRMBugkzBRTXhLqZdIebCPctJsNWJBzuahZjRGbmJRKdNk8aiw==","signatures":[{"sig":"MEUCIEr7NPWGeYihZ6dkq/8m/kSVsxuL2itgPEUskeutnON0AiEAwgsSqvhLxd+ATYX4rdvX53RhTfHWUYYCYib9KaDQ3Ig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFFsCRA9TVsSAnZWagAAQykQAJyvQLWXiKhQf3RRJ+BF\njoEj3KzASvKiOxyFNDbXZVHka/bZAMetC4FFBY5l2Wwy4F2Fj4unQLSrWxJt\nz/dIJ26/ZzEPHwUpn9rhVzaHg9lOMukb7KPs5geUxX9cZtGIlY1XYA/8WzR4\nL39SkMs745LVHIaqA5ip2mHXaCxC2+ONaKTrNYVACbCiJrPAhaBVkKdhaz8h\nkeKle/ki7vW+ttNVYGCVuPi0dB2eeFCwAj8PjLP0jDKwH7E/cC5OGwSHnQFG\nc9EbIUWtwe+NfJEFcEK4EQFvmTFREJKHjEnq/mSs3b6LZnKN5ORlA11Fe2EN\nTCu5pgfJ4CzUcqp0AENTdB118bgrDpT7tXLDO/k6W20ngLdQGCnOF9T4cmd3\nc2bJeRIF2WmfmRkwE95KpDaaT/WfMDclcxwdCKloNjhTINF+9W5U71gyK5s8\nOt5wK3pIlBbG2CFU7E/Vzr2xIgizKNmeWu/1pj8xSh/mrCK/oj9Jm/nQbPlM\nyqqnR/bSf+EVkSsxOctbV5ExFUE+6uUSVvGydi/hN+8K/SVheL81ydj35IQr\nTLYaGMGT02gh34Kr7r41Im1m2VFw9Z+8noE0HpEXcSJ09gwqzExO0BvEOpXf\nWpTx72XQcxkh1CuDTMIH1MTZzQRhbVTB1mT42RPUWZ2k/0TQZHtNApNIEXZU\nlI4T\r\n=KelT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33148231f.0","@material/rtl":"12.0.0-canary.33148231f.0","@material/shape":"12.0.0-canary.33148231f.0","@material/theme":"12.0.0-canary.33148231f.0","@material/ripple":"12.0.0-canary.33148231f.0","@material/animation":"12.0.0-canary.33148231f.0","@material/elevation":"12.0.0-canary.33148231f.0","@material/typography":"12.0.0-canary.33148231f.0","@material/touch-target":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.33148231f.0_1620070763636_0.6547225615963757","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/fab","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e72ab9bd519717bf9ffddcfcd88af7d3768cd2ec","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.06b76fa74.0.tgz","fileCount":22,"integrity":"sha512-QYoiWAdGj2eXJajcpNwfqAvzq4FJvMSebiJ5M/huiTXWyG8IqkB8EvlaXUa1AaitjvJVYFfUvS8WI7Rw/wYGlg==","signatures":[{"sig":"MEYCIQDNUXMsOOz4OLzscQpiu+SqPI971d8UJ8E4FxLQWtZNTQIhALR0pLZscvqTlZLHPNIw7rEoioP9w2XhpDO1AUkG87Gj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFMVCRA9TVsSAnZWagAA/AcP/0jJL3bKY/Cgw1llLyQY\n0TM2wZ6oHpoJ8v4+Wka+3DKE1CigMULfr4gSWQvrLGlwA9GD/P37km2hKe9M\nD7Xn52qQ99jDpTBjF6B5VsetQpjT08tm3qlmLVgHBQi0ibuTC2wuQqpGShR0\n7CJnQvmHGuKUqJpkExNm6LP7VidyU3+aK2nnSXH9QOk8x5W8Kkz1siQW6f8F\n0QRnv5e3bBO0LOWsnCRlDDDDGB+MlczuLg/gehZvvI2ZwuopqCjK4U2daJqS\ndfkKDsSXr//UP2Tsu+SI5Ox/MoD/XKvnGTAGet+1F31IyMHGvknvQNUdJAmC\nK4yf4IHIGbftSnvUNExmzWWRwYEjyM7vgHwpaT0+LOZt6XHSuDofR1kKAMPz\nqYUyjHyIlZd16KtTXICnCKDXcg+W9Fa2DWZQK57B30OQXrcVv8/NnqlA0NSj\nAiu13KmxHZpIoCnvG9uF9p9rQLQUZ0lmbeNoc/93rEQ/H4mkf1B5l9n8lDz6\n8aS2hs2ECB1yuSdL33c9kh0IOYj5SkKkfCw0Ji75hQ7Xvj1bP7kDuMOvz5r1\nNb40nglJcbQ5rqwO+xgTikk+lRanHAwtzwAaBoBasNXpkctSKsm7A5ehBiQJ\nle0DbjfSTMyxySMLgp4uFTcmF3ZaHibLS7zv8IeRPxPNfGWgi7usKn1jq0iM\nif/5\r\n=Tsnj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06b76fa74.0","@material/rtl":"12.0.0-canary.06b76fa74.0","@material/shape":"12.0.0-canary.06b76fa74.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/ripple":"12.0.0-canary.06b76fa74.0","@material/animation":"12.0.0-canary.06b76fa74.0","@material/elevation":"12.0.0-canary.06b76fa74.0","@material/typography":"12.0.0-canary.06b76fa74.0","@material/touch-target":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.06b76fa74.0_1620071189104_0.49886992029940824","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/fab","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.7c5000473.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"519e754d881a47a6eac085ad8e4560480bb0a03c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.7c5000473.0.tgz","fileCount":22,"integrity":"sha512-AivCqT6HT/f/btrja2k9zFP8AvdTtCG9i8haQo9NUNLHGPE5jLtRgx6VZicblL0x+TyioIQsp3h+DGgerUKmvw==","signatures":[{"sig":"MEUCIQDZ9ntEY88/dTtzisdSPe9PYwUl5vLoVW1SFYoWav6VIgIgav8XMzehT/DFdD0hgCgylGVc/wbFD+w6BnYw9sbYvD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHxMCRA9TVsSAnZWagAA3B8P/3PL6hkK3AMr5PbSw19m\nAa5BSUBpJsAeoNDtwW4eK2iyBAhUrtHd5mHKTEV/yvFZdKw2m/L2Nivil5TH\nWs/Vk31mT7mQWMS2MGRNq7dErAIPFbLmuvTev111rEVm2kfeABYFancqP1R0\nTplRbRhP2JCAR4nWcn9XFhYads2Ut56GrbUsmjmi+N2BZs9J3yKdaCW0J/2k\ndUGIQcKq5igqphhz3aM748CREF/LrDaHVoKBkqMtE6oRj4YQ6Nh2NdAVv/7H\nADCSbDRRdHWeLMFPo6hp9Tpfy4FwJi9BDfhhxM92ixd0gruR9qBr+vwqmBpc\n0z6F4QxC9Si7+iwGkmF96xjuoHbzVhY+u+hTVF2PZkqpA2knTJ5cllElgMQ8\nent3CHKxsDhWv7Xq/RibBvmAwxeeJEki2+0hHQ1wSJtDe3W6YBLLRcoMQdPL\ntK1lAnkOItH81p+ZFFGu1qzkJIkIIugMrV32eCbBlDqUZER2fJUjNQLVkt8n\n5aqdHt+AlZgWCeKWwFyzApMFvXmXBEkWuMXfexoXG8mfmwCDMpPSLmRBSGtv\nKuISFIk4hhnFgXHS6zbgwpP9iNQ0VQ1gom6SkykPjQLGIPjPPk38m8CY9GUB\nb9/C/uhymKb/XCtE9LplvAvYbE9+b33Io8Yx1ZSYtPSvoBjE0iqjJYsdMcGA\nejBW\r\n=tEG4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7c5000473.0","@material/rtl":"12.0.0-canary.7c5000473.0","@material/shape":"12.0.0-canary.7c5000473.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/ripple":"12.0.0-canary.7c5000473.0","@material/animation":"12.0.0-canary.7c5000473.0","@material/elevation":"12.0.0-canary.7c5000473.0","@material/typography":"12.0.0-canary.7c5000473.0","@material/touch-target":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.7c5000473.0_1620081740276_0.5581094103605511","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/fab","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.de997644b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca0efbe3571d836441330037687a25a167412161","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.de997644b.0.tgz","fileCount":22,"integrity":"sha512-hlsyNYV+aOzkfnuJQRw4BMoCBEtjItfePFwJEIYHt4O7uEvZ3RLlHv5+2birBTB8pXuD0uRU3bU7/tt5NfuE1w==","signatures":[{"sig":"MEUCIQCw9bIAvpJxPRinKhih+3+4XvNHiCou781dT2lIg9OHzQIgXwydph11wEYdeM9npDotyOGBgyAka0zIfELUrLxSSEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYRWCRA9TVsSAnZWagAAHZ0P/3RvVt2uLBHSBlSsK5p7\nct6cQyIo+S3qyEdT04XwarRNyO/KWaWuwYHT6GgMkaX/B2G4RoZ49ve66Qn/\nCpKSF9mS4uhVBAW3UdnNyl9yVcuwzROfVYT9LrPJFulNYB1lni0sN2/JpJzn\n47BdWZJrkXD3D+Cg5HaH3T/YOPir5mTMXYRDEdiCrDB9neEU4L/NHS1quynS\nN1Yx1OECd4RpGLb64Qyn+nHOW1tcJT/uiqyWHO+oJfI57Llk3g26H2BLOioO\nZH9qGm7RoakwIUtQMC8itJApdNqmKRsfveb3puVEywOuz1kaZwtCEPLqu2Ty\ndyt6lplSJBxlFMD6ooS5S8aTjeb3EqWSc/tHGEYEdi9zOdeDSV0diVOJ0OV4\nt+b1+6rtqtu6P2FYsOziXygR0ksTWuMxXIN+o+Swh/UePQ6+VTI00LSMdPsN\n3ZMec4WFPvy8gxX4vJdDh1lZdiAlX72bnpahoo1776UacR/A7btao0F1KWET\nIQI3CxdbDsdAUbJYVHboDa5upj/deOlVTvyeDEV9k/DYeK7ZjUpx1tk8FKlF\nnn2aCv1DH1JrLwaKqAJtaD+pjGLZivuP+qcXC3kyKY43YN/X3x6wYmgLIMza\n2dDhkE72VJtaydzOLJRTtk5oOhlrwahuO1oJLPq8Cni1Up0LUjsGFWkslI1S\nO93/\r\n=895N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de997644b.0","@material/rtl":"12.0.0-canary.de997644b.0","@material/shape":"12.0.0-canary.de997644b.0","@material/theme":"12.0.0-canary.de997644b.0","@material/ripple":"12.0.0-canary.de997644b.0","@material/animation":"12.0.0-canary.de997644b.0","@material/elevation":"12.0.0-canary.de997644b.0","@material/typography":"12.0.0-canary.de997644b.0","@material/touch-target":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.de997644b.0_1620149333864_0.5007078193094336","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/fab","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35bdf12bde5e734e54cf27e5cb73e811e935d220","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":22,"integrity":"sha512-X/VL4rrNEZ5bYim8OSiUhXh4nOziF7VfR8dsKT0XD6UDK8bZk0T0aR3Ev5PmdY3QOQyR9JlLUcs2rA7e3WGvTw==","signatures":[{"sig":"MEUCIC1DRCJica+oRg8wp2rv+Rfmlf66okXmCP2xGhurGDdIAiEAiFKZZQraSGbNv+82cODm10vbAYymHU733PIF08zCrwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYqgCRA9TVsSAnZWagAA4oQP/iVQQLtI5GSAM7EstXpR\neLfsL/f6HBPDF046wwp9RhGnoKPU6YSGDskr2+BX+j7QSEQEso1B4CfiedvK\nRKY7YgJukQbxWoPTqnfDOGjd7OciacOdQ3MQxt5vce+bWT1lY24ERwfEnVyz\n6KRw6JugoinVEx9IW063iHt8IhC66Zh+NZlxBjNrDQKRX1d/4zLw46/LxeVC\ndDpNoORIGf6GKAXhUH5zEGqxOq+ItH7k4fTkraZppzjeixpLnD5++Q2Z1X8c\nuCIDKwSsGCBGf/o9wZusxFCGCVjaYxAI2U70H7bvmdIxjgifp/MeYQj6YqjV\nA3/OYbU/gI7a6K0RK8lvkJnwUB7Kq+ByJyvnM0sx4hcx/dLBIH3PNlf1BXSA\nyQ3LQ8nElJZWaH4wyK1Lmj3664E1WsCw2wmp5m8QWo0hb8XWYrP+NnZHohHR\nqH0KrS8IqU0qAb2ymHXR/7HPsSoH1ISgsrQceB4lL6ikb6VFKiLOHkecyrql\nVfRA+gfZcrfQJe+sghxImkYRmXK+G1YWcpAs3GBOGekQPudazCGQuJbcHH4w\n3uxd+oe1qNA7+vEJxkH/CY6s6ER9V08MzBjWg296LWif9Zg/8TXdpoDSbamK\nArLeq9Tueg7zy7QmY05wcgaK8ep1jleORqXjL7xQkx0SUYR9Z8eGkQV1JVTZ\nyshc\r\n=EnPq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d4d7f1cc2.0","@material/rtl":"12.0.0-canary.d4d7f1cc2.0","@material/shape":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/ripple":"12.0.0-canary.d4d7f1cc2.0","@material/animation":"12.0.0-canary.d4d7f1cc2.0","@material/elevation":"12.0.0-canary.d4d7f1cc2.0","@material/typography":"12.0.0-canary.d4d7f1cc2.0","@material/touch-target":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.d4d7f1cc2.0_1620150943918_0.3017969006116161","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/fab","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.be999eb08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73594084391667083e657f69e0c4e8e1c1d6ccef","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.be999eb08.0.tgz","fileCount":22,"integrity":"sha512-uUPsfKY4od9aPx9s+eEeWkq+Co9pr/hXpG8ExLU8c5oHmCha5ka/CC+WPTjYAYkumYXfwaEWcvFVNAX/uBiz0w==","signatures":[{"sig":"MEUCIAwo3vhF8veGEHM0K2yzWgL4ITkSJnx0ROwIg8t7W5FSAiEAnGA+IUQ3G9WjbeFAOCsdqNVmCdzRaolbkJBHgt0fiP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYvaCRA9TVsSAnZWagAAs6EP/0pJvZm4T20YxpL1miXm\ny/OW5V/+r7ejsmVehkB81HQ7M6z8wvPBBNlb/gvYNeXXlsk/i1MQ+ShtGPjV\nK1/bh7/Q6hHeIVvdz56/EmpNEjOgKmtOptS9lqX/fy2KvGgGZwBOVO10DjUr\nAz/BlsqemL9UuWrU4BUZpEmKp7y/117hS6MOX54raeDQwOtFeJ5YKtzQ/qhi\nfyeF+FGEBfj2wTOtWEz90JPwnMPF7xgyq7kBRrQiAHenVKadr05FqKj60eW9\n3hhTB3svRWxxW8MNzR8l3UWiEJvHIZ/Agl6dRGukjK6MpDrVyEfKr073fdcN\n1JVz+lM/iL8ZL7s66b3XqgdsKaadj9myN1vm+1vF/R69DngIWi3sRDJXUeyw\nGH/QOAlEONiAZlxI4J8KIguLapE6Tkg5ovVsE6EpuloND5mqQJdES0J5AdOl\nZpQnYrKlvBvcpTQgafMM7EvBmQyC6OSJHF09AqyimLwZVXpyKksfGCHkObYb\n8olUBp9N2tvVl9fmGGDVskmp570eUAhTmGcJt7RojXLnLxn/ZI7tRJN2tFtP\nN5jH0Wscgf1Fl+hS0C4OPiXEC6lxqR0kiwGPGyD/3YkJXR+21d/tcOrLaNQn\nAH0Umk88DcUzgJXOkgrk/2+vumQlvyrxo8wJMAKKfLuzie0OJI9kv/FkobNW\nkklQ\r\n=fxaC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.be999eb08.0","@material/animation":"12.0.0-canary.be999eb08.0","@material/elevation":"12.0.0-canary.be999eb08.0","@material/typography":"12.0.0-canary.be999eb08.0","@material/touch-target":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.be999eb08.0_1620151257738_0.1458144763851139","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/fab","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cc99898e697fe631955cf0e33766e3f232cc570","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.eda1705fc.0.tgz","fileCount":22,"integrity":"sha512-V78OeAP5Bc6NRgY6Ptxp4rkEphJc7NhdtjZIFjO8AuHKiqrZL6nEUrvWBEvnNiZlkzzRB6xwykEf0qhRryYs5A==","signatures":[{"sig":"MEYCIQDeXf+Y1pKbkavDY15Swjku+bVo18oMyy9NqxOVVbGdbQIhAPtgqgyke0MXnK/CpV7UqsI0b6RzisODZx83VXAeEmLK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZxLCRA9TVsSAnZWagAA/awP/iADjI94OkVOzqjfui/M\nxkrguk2wyjis3JYfeetucWwvUQRoIQqgYb+C/ry6fpFEjsB8Wr/7igTF9J6X\n7boLFIk2UhsADz5FKVr6de3U1UKWhv+v4VDEu31TgBg8GiRRcfvNPxPyp6Te\nhPXOxDHbNXYo6ElF9IchPorGo68DzWWoXHQRnRdYSjiqmaLgRB209wohRCVR\no35co71UZ71E/CGPJnRypiLKOHejP44iodSVOMUA2akdBspNNdDCOmZlpuj9\nYPYHIvTuriCPNZf9v6V7jUOSjw6PWzKDq29Lg1OfXH9IBxwAnnBQV20zt76N\nc8FE74oONGZrD93OkRGhtXFEXdof3trmc0utUFO7OHMgf4ZlxBg+Si/q10Gj\n3PzP44YL6rUc74EF60ibnC0So3q8b4OhIGQIWdaLSDptALk+c+LdtWuUVeWV\newv+/ziCuSRVkwS4ixqBUvfT4Sbtzs6C3hcE3p0+cTbTr6LqYLKfAZzfHh5F\n84XvyguRHZnNryEn67+yiCaiGx//ZAGssf1OWwQbktQukBI6SbP108kXg2Ag\nXSmirLZPj1KZNhNktQefi7RjNsBxFIQLgubDwEE/TTHhAJ0n7nNe3aP3KS5j\n5agMlSiG7lEu2dbVltP1erPV9QQglns8N4hEpTrBhSeWS9PaDRXy3iGTz+zE\n8m9n\r\n=MTMs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.eda1705fc.0","@material/rtl":"12.0.0-canary.eda1705fc.0","@material/shape":"12.0.0-canary.eda1705fc.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/ripple":"12.0.0-canary.eda1705fc.0","@material/animation":"12.0.0-canary.eda1705fc.0","@material/elevation":"12.0.0-canary.eda1705fc.0","@material/typography":"12.0.0-canary.eda1705fc.0","@material/touch-target":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.eda1705fc.0_1620155466780_0.8484869192291802","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/fab","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.718c90178.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6eded64366d30fd05bd2160a3215ded9846f5d5f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.718c90178.0.tgz","fileCount":22,"integrity":"sha512-UGxY5BuLdzWyUUFpXWGvBlt70pkieXSy4WR73Vz41PutmmKCMywnfPPoYglRW6wN8RhE9QWYY54QVPY03j8MKg==","signatures":[{"sig":"MEUCIEMIs1kjT8jQak5YXiAIf2oNCHRtMFfZA0MLbkF8JxTtAiEApIHCm2fRnKiTdNUAY0lMjQhWPxFfJK10QhuFIKUYWEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaBXCRA9TVsSAnZWagAArKkP/3oKLNbfTshpyMrldyoQ\nTwByA0ilrwtYHWoZAEjLlYJnxufWGOQd5udR/OpGuUWltFQNfcYQ1utzwYuA\nSVu2kfLLz1iJDn5YIYLUR/V2JtYOVjqnisV8gzGnixjLgr03fH3WTLCoSgMO\n/vSooe7yLqnS1O7coodpGxIcL4JYBdZKqO7/ZpsOi5/l+sTBfZusJDFh82hf\nGIzL7F2WNHFYGD9IMwLoDWkgJ80uIs1ZD1DxhOliRWkOPwOld8AnzVs5hjUS\nQJ1ixoDPkdgfh+t8dj6KwY9+HnQYfredYQCe2TmeBDc6KKxumuiJRA0nLyIi\nImVa2brQa+MVwkeuRoAohP883Rvrgsh+kwSDHV/jrMAGjf/Pmm8MMQ5LKEDk\n4t0sRSdB8fTSMEILIUYKZMG35Lrvkgy6sMtEutQcmNsHmhxoE2wUy85ZOaa6\nxsaO1UUgwV2ZpLYnC0e7DFblfhMv19izW66RX2mWi7b7kVt719W7iyNoroat\ntLaviPPcGfseRuFAx8joYka0ZdDA5cl9YNqP9WdU3/zlxynJlPxvcw38RQ5g\nyLh01OjS4lMuLUyyPKjugEInB3yNix6mgVUuFZwyTj8QjAH14Fu+01Qh4jWJ\nD0JKj7cXD4tABeI0FunYWCGOAeClexk5Dtz1lIqV72eDeQYNLgUyLMHtAJi1\njzIt\r\n=WHH3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.718c90178.0","@material/rtl":"12.0.0-canary.718c90178.0","@material/shape":"12.0.0-canary.718c90178.0","@material/theme":"12.0.0-canary.718c90178.0","@material/ripple":"12.0.0-canary.718c90178.0","@material/animation":"12.0.0-canary.718c90178.0","@material/elevation":"12.0.0-canary.718c90178.0","@material/typography":"12.0.0-canary.718c90178.0","@material/touch-target":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.718c90178.0_1620156503028_0.6972253090685847","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/fab","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.0e3917299.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2347cfabcf6b5e3f0cd53ebadf95724ddd762b6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.0e3917299.0.tgz","fileCount":22,"integrity":"sha512-g6AZ6fdxDhW34w1bnWFhftNED7TScNY1396yzyUFuWMr9MS4D5qdLEHp0Xf5H5Dfw+p6PbUix3yrjFMA8eHX+A==","signatures":[{"sig":"MEQCIAg5gZQ3+cRlW0Cv6E+z2tuQeeq12bzN4lzt160opr5pAiAwe/4VkEwobLRSQzBqN/xpqOpKKk1lyMRQ+CUtJ/soPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaD5CRA9TVsSAnZWagAA+TQP/2HVO41VHecFCOdzzp6V\n3qiMLjCgsEjDvF9N2vcPU9mZlbnrhCZoH0I0Shsfs6raBplKqSXT7h0p2X8R\ni6lQ+O8RPkhyC1DzJKhCSR38F1YhPgMc9/ahGoVNeqKXSD0tInWH/SKI7kUZ\n5vLv6NKDArVYIjMn/9aljY9+j5hrao15JxgFXYX+QxR/8YGmirG+UKuDuNXw\n+WfTodAy5AtXaDIb709evm5Lrgp9SsZTg+x/lcp7sCb7n4dLxIZ1Bgn14U95\n6Q28SsvQyUzr7o0awD8pqoKkzMPm25W8m+TznS+xraKps3PO8KPyN8FJ2GOi\nQq7E6wmot4tDA6Yvk2FOP+XyIDzXLDk1vqZsNmnQVCFlDpOF1wqNIlGF75ZM\nR/M4ewGiUG1fe4hEVo20Tc84l34Teo9d84gRrU9sK5ai6q9IextS5JvM3p3j\n2YU9wiO3rxpM5T5xHpUR7sr4+R+JgLsywg5QCjEbgSisX9rGKUpiO0n6iWqc\ncH1eSVzptNgxZ917brn1EjDdIcGWYNSgIuCd/CbLOLgKhv2U5mtMNttw5Vfd\nRnQt2RPkB/OmAq1BSvualUQ6MRctWzfCU19Btx47yh0l0rWn0bT/+WXqqkrV\n01+Ls0YuU+z/BgV71TPckd0c4Mnplmj+gblGgDObNFkYcIJPhhPWWdwiLAyn\nR7Yt\r\n=Ngo6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0e3917299.0","@material/rtl":"12.0.0-canary.0e3917299.0","@material/shape":"12.0.0-canary.0e3917299.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/ripple":"12.0.0-canary.0e3917299.0","@material/animation":"12.0.0-canary.0e3917299.0","@material/elevation":"12.0.0-canary.0e3917299.0","@material/typography":"12.0.0-canary.0e3917299.0","@material/touch-target":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.0e3917299.0_1620156664618_0.9500759364789186","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/fab","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"868b430210a5e6980556076b38abb5f70efea2e3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.836b3c7db.0.tgz","fileCount":22,"integrity":"sha512-GuFtlKXz4LVQlts3Z0i+HTvxPtiF5jYFVf5Io8jtqrbQzuElao8PsUPlDWDh59K4/1W0qA6Kfv8eRi8pCW3tLQ==","signatures":[{"sig":"MEUCIQDlzU8fFgT/GN9Z3Q/ujlHbLKn4Slx7fyVIZCt/u2GYxAIgTYmjuRYTrahihntqzYYPm4tJXV6M0aEShCmD9vkvdno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka/ZCRA9TVsSAnZWagAAhg8P/1G6jo6zVwLv6gLPvDA8\nRiJSEcK544f+85Ef8/5cK+F01OBbAekeUfoQspJpL1vtAimN1zAxBlbZb9Nu\nGgeFpiA2g6MuGSVWEYk8GSyQjqOJC/Df88Mtb7hhIGxODppTyB5C3v54bNUj\nZwAeg2ZHu9akYLBZ5RZhv8GiPcAPtRWKIjwa1nNQiDncQtI2fwTpbTAYCsCb\nQHrHYH3xjzotT7K7G8I3z3rBXpVc6gdp/jLBPT0ce2jOL/jVKgMhlRyJu/yK\nIInGxNelgUSyBiys5uwnWwTo4vUtWSCD4ujEmLCe/7BIhB9d78tcszXJvoyo\nwZG9fWGL+YEdBnXmoYQZqNLsJLPyUMTYLWrj09Nn+iVgrCalV2RSgkXT4UIY\nNFKL3yZdxoy7vw0gBtPTMkSeRln9jBXJfxvq18/wHurIHBPPI4qJ++zHC3hJ\nKLb4AE+Ch6X7mAILF6ob5hB5GIRG4Up+BfpHHUcOjBaPH4WkQYSRZxtIKUvL\nI4GbNoB8nYq1qBIjJMVSgmfx5hxFyewOinwdtPsRp6LrihazE2e0e9qkNJZP\nMJvJ9YmedGR/2Ql4EEVkJcbDxvcgadiP2SEx+ORto3Z/CfN1pfs9beLA+vpu\nfOd3SGDcFsOF2QijDa9KBsYsEubo0OiLUNM3q5iqLzW5PsVpm9gQQSdKjhpa\naY26\r\n=ECRe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.836b3c7db.0","@material/rtl":"12.0.0-canary.836b3c7db.0","@material/shape":"12.0.0-canary.836b3c7db.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/ripple":"12.0.0-canary.836b3c7db.0","@material/animation":"12.0.0-canary.836b3c7db.0","@material/elevation":"12.0.0-canary.836b3c7db.0","@material/typography":"12.0.0-canary.836b3c7db.0","@material/touch-target":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.836b3c7db.0_1620160472786_0.5912425951558364","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/fab","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"095e12fb1b1aac9046115d2616879e3300a912fa","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.53d4e6d59.0.tgz","fileCount":22,"integrity":"sha512-g0wM+IoQuQeh1KnTx4oq9b4zO8RIQ/hf2OPHItp36hTZrlA1hDW7FkXHO4ptldwHm1L+faSUd6mXe7oCPhDjvg==","signatures":[{"sig":"MEYCIQCK6nMa7Hg03yxlVIxihhbo54VfY3QAUum9qc8wQI0prgIhALeAmkofzcwJElApwUdSRN9ba9Y24zwqut4ateXl+uxA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbOHCRA9TVsSAnZWagAAXZYP/0sbuvHbTt2QxMO7di0f\noX8pudovB4374swL4CXLyG174y1qrGkICICjrdtS3PIUyUYVRUQfaAh+TnHP\n5MGuwmCCV8yk51hAuqS8dhdT5wS8+ouqJvO+6e3ltRDuiYMeXyB3JRYhNl3f\n7741eBSJpNz+yiw1lfsFgsbLAdL8Bz7OBG94G5n0vsjyKGEgUnnDg/xN2Gea\nkBO+mh0L9xw5GuHFO3rkt9U/VyhiOFpuL/9xTSSoNxX9Y7YYUJx8W+wTkjTR\nuMU3UH2GSDgSt6FBxVyzmsrpV1qJBZi9Y1ZJLJNj14z79qRBzOGb4sTkTTFG\nU69HSjK0K6sduGIy5AY37iMd1nf8Ia2S3KNog+i4dVggsbKhN55Gvems4aZk\nVKxKhJEIou3aSoCaDfwJEdb4mKjYUKL15eGYApDqW7JWPiYP+CirG7YKr/MA\nebKtLRyJL11foAEo6MGN5jcZhvU4/1qUo98IEHx23DRdpqTj2HYvUpJ0Clqy\nlAU5KJAwHPLWBzLQHwxJ3j7Enlb4M1xrmnLgqHLRatzobsCKRjCOLMbYLg3Q\n77avzjYMC5aLUHf5NVLfQP65SN0I+vpSQRY6eJOfiqQFl01NvW9o88Xx76/k\naH6ZEudvn7yUGElzY14EFD+Mc+U/QwcubKYI8bGiY5+HmZ/KaO/9pmKmh3AG\n6F6i\r\n=UDsn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.53d4e6d59.0","@material/rtl":"12.0.0-canary.53d4e6d59.0","@material/shape":"12.0.0-canary.53d4e6d59.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/ripple":"12.0.0-canary.53d4e6d59.0","@material/animation":"12.0.0-canary.53d4e6d59.0","@material/elevation":"12.0.0-canary.53d4e6d59.0","@material/typography":"12.0.0-canary.53d4e6d59.0","@material/touch-target":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.53d4e6d59.0_1620161414592_0.6999675192812618","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/fab","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.18d147e27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08e1e854fcd0afd5fe9fdfe9cdbdb0ea2aca68f9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.18d147e27.0.tgz","fileCount":22,"integrity":"sha512-Xjto1mLG2he0ctMeFpJ3TiuM0uHD85/N+aCTdSyxv2CI34AacKqNRZlpBQ2T42ftgB54xTyietjH9DpEOoDRsA==","signatures":[{"sig":"MEUCIDm80n1t/jAYjkCMgE3qlj2KjjsU6B4SQwziCM1HHA/EAiEA4GOHsaRq1gCiTeP7l9JIsomRyY12naatRd6w9/lwyyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbWCCRA9TVsSAnZWagAAxfoP/1Od4f2n/ut+S1X6+6/J\nO6arrrZ9JP8Q1aa8abjv8p3Nq8FCvbYjjowAnPA/Yojp7cEpYNjrfu4SUO4H\nzivac4bn1clsxCQUXolYHjwuFqcTJG8FW6f6PKjh1/91d9kACGmkvao1fort\nxHJJPLSgW10L//Iw7bjLVvuRJ99+sx2argGMLMQgYiJ5cYZ8Ux0T2mmlJnXe\nLliw+sRpRI3Tjz861l87oQ37t6MVMaBtfnmNF9f1syj5b1d+5siti/+P64et\n2BOqAgWRvpXu4QEfUG+jjyx+1WzzufrfQhZySA0FaOBboJEih7jBRjrB8LOH\nG+WRrSeCgw5/J67kI+sfMVprHHOutDDH+gLl7baYI+9aCQ5gWT1frEnzr6wK\nclZCPh8VpFCtupZiVQv9JM+7Cq8hhq8yPxX0UE+sizrBDOTDy6X+CNINKsuV\nzLRpk9MkAHIHySNltIYakWWGcvXzGjUwEpq5nKo6RjVZVWxpEI7VSQaI+Sbl\nq+bN5uwzktwrkmEb1OqvCST4A8UxlgLg/HW/sBHVSDolM9PUJdoweO3yIM/t\n+vR5P+4CJNiACKhGtqFG/eFongy7fxRiRCGbCZWjkF1XrIaIhKlr9tgHZcga\nemjhIIkFgBLd/I3VJwhlExbYM8mzXE1MUa1do3dwwAf7ajPwfgXS5ZEOjghe\nXxGa\r\n=EnaF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.18d147e27.0","@material/rtl":"12.0.0-canary.18d147e27.0","@material/shape":"12.0.0-canary.18d147e27.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/ripple":"12.0.0-canary.18d147e27.0","@material/animation":"12.0.0-canary.18d147e27.0","@material/elevation":"12.0.0-canary.18d147e27.0","@material/typography":"12.0.0-canary.18d147e27.0","@material/touch-target":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.18d147e27.0_1620161922308_0.7469885519766895","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/fab","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.b9984794e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c44cfeb3a1b087b460577324145c7bc4c1bd9e4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.b9984794e.0.tgz","fileCount":22,"integrity":"sha512-zrtGONCcaZ5mIXzA3VvFR87jUrzPgSnt0fnhN3FQXwTEf6qQmPS0o9sFWPIrxCmfsGu74zqMxTPvZ5wBtvqmrw==","signatures":[{"sig":"MEQCIFcEdkl46wHNqpUiP7VQSBziyAJcpEZJYZEI3r7/zwEJAiAtkRhnGCaegKXt3deOOSkTF+u7t51dskiclAumfQ6pUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdLPCRA9TVsSAnZWagAALNAQAKIh25DKMRs2riJxX9+K\ni9GbuVQ0gC46CyPx6QdDvv4/U1talLxzkvL2aVII2eJxDtx0WiBdTtFQhg+e\nbLq2VMRO+wLqgVR/zuqY2nihNsHB92mLdIi+QMNARafzAqX1/8kuQIuWrz/B\nA8mb5n9PG3eugA7xZhOaENnrJALCLtRRlX2fm5+722++06HOki3LmJAzLCVH\nZ9HRnAAGM0eTYnoqkqU5UWXUfE4rM3YH1Qo6TpvtvL8K6uWXBgnXaKw6dgZX\n/1JOPhL540mqJpierQk+enEo1cDDJIH/3djcnWbUUrW6wY4Akbhfz/1O+PkV\nxUhrJYNeXny8uI+bZBXV9R9p57rZ8ygP7Dmzpz2k8RWJ/ZmPmTGYAT8Ai/bR\n3ok7s1EXCZ2xN1nNmPk4VKtcZJIEkWvNUtm8vYZb98zYNGh7mym5E4j4W4q2\nOrJIi0N3n9dZcsHLTACShZDUOKh6Ne9HhXbbXS8fmOtUHv0Jof1INuRuAl0e\nj9glg6TLldhwWAgd+dAwjmDNLTRXmRpklJibqLliYEHRi93IshOPebTkxnB7\naeFEu2lt7Bz8lLDt/eyjHMDW4xWIQI1B29FjHebfjtmSVHrThExht1L/k/lB\nc/lmGaDfZNN9BScMcddKRTVW/QFH6XwhuwKtv0dFB2kAZDhS9Uz/HVmDsm7m\nDZUB\r\n=knCT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b9984794e.0","@material/rtl":"12.0.0-canary.b9984794e.0","@material/shape":"12.0.0-canary.b9984794e.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/ripple":"12.0.0-canary.b9984794e.0","@material/animation":"12.0.0-canary.b9984794e.0","@material/elevation":"12.0.0-canary.b9984794e.0","@material/typography":"12.0.0-canary.b9984794e.0","@material/touch-target":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.b9984794e.0_1620169422969_0.7947976924576794","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/fab","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc04241ecd72c416a6729a2f9afb99db2cc61790","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":22,"integrity":"sha512-HWhuZVxKbgQBe2CLKza5cHE0N/vxeL6vP8JUsKVw9G78P76rWEBn+Jf3hrtjugg16mIUR4vWWvQB+CrAad+Dbg==","signatures":[{"sig":"MEYCIQDroR+Xo522PsAq920HysuZAk4AHWla9kI7Et4BytLwnQIhAJEL23RO7pIfzFJYAAt/606NvXHJ1Kk1jRQ8MUHE3lkE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdOdCRA9TVsSAnZWagAADVsP/RkzWB/QZRyatoqFQe0V\nDeDRjMemywvdCBPMi9KgGl7AqodFs1jjcp7tVPsRz0csH6D+YeyKZ/6Tc55K\nXPUEIDp3RUKB7FUuQpwIsr7DZmcw2NCKLs0GWoWbqv6DiXi4DBETvHlxG0FB\nRItPkKa+NW/NTwCxwHw8ylUMK9oqIknnKK+moTCAn9AexHjMQp11xLnydBpp\nMLOriPzMnZBgdZHTEMVRriURToYcPODX205UxutXEbCl7KMthOsSoPV3sxxB\nmb7x6Su1LqAkpgjTDZwxOsIcpM4E25S0MiStxZ5xbS+txzf95OntD1Kvj5/1\nRE2zSJjyIRQcWUXnOmjD2E7YuvDUsxuhsOwodJ0OuUZ0sq8KqkTGVlI5zly+\noFGKP4aYwYJ4hdBqSPYM3jbefD9XKy8m9S/vvMmW6giidbIWYOots3nMnxXY\nSrbGE1w5OMnmvG1fDlXkR43wIrsRCHGmCI4vDnF54J+LHdJe6Bn5fGtbKriT\nDGSmRnxKceJn4sjKz+mxNFFN9peXxWhW/OUA1yd3kMpVTl/80qy13ze6rOxw\n7oITj2oUc/FfDRmiJEVHlYeg/4VJZkuhCplE7d+SniqaGjMVBD/HUURLJzYe\njws8y/Nf/YiFy43cxrUApLCbFGGRjzpJckdBGFFv1TkbBjUlJ6dMyYljSJct\nZZYa\r\n=EWSU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b76f5fc9d.0","@material/rtl":"12.0.0-canary.b76f5fc9d.0","@material/shape":"12.0.0-canary.b76f5fc9d.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/ripple":"12.0.0-canary.b76f5fc9d.0","@material/animation":"12.0.0-canary.b76f5fc9d.0","@material/elevation":"12.0.0-canary.b76f5fc9d.0","@material/typography":"12.0.0-canary.b76f5fc9d.0","@material/touch-target":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.b76f5fc9d.0_1620169629550_0.7688424475707594","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/fab","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4af3e269a45442caf91194b3ed5149ad8043dbcf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.055d4f10a.0.tgz","fileCount":22,"integrity":"sha512-s15+aVPuP2giNFpQRnRDpx4avy9ArNcHdLpSRTZaQTyEBlgR004v4mVWH4soUVDxZMJvdO0o8GHmYuhjOgGf2A==","signatures":[{"sig":"MEQCIGtARQbofWGwBVnTTE8DTQtJnNKCHVidYdLHJOKf2N+4AiBr6Kuc0O6CUjhg8cu4YjC74fpN/k5wZCcbqZVuU7RbAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdcyCRA9TVsSAnZWagAAreMP/2SOmI4/VrX4J3Bs2Rot\nz85om/bXk2fS6SpfrjazWueCjAh2nU8sIjc6h4ugc77KeIFQC6sfe7EP6ixO\nt5mqrq9DNhsF7BCP2tylmjKitDv9RBsI6QIAQ6e/29amVp5bvfwVKWvCYIMC\n1bsPuOGY+iaYYuB/7twDUUFg2XHCSk3Hb8L4JUt5useagVouvN5FKIB2wnm1\nDJj3rurTmg29HHMGQvLFVjdmDuYImOMezVZPTf5SMEU1q2289wDOTCetrJE9\npZbu7QITGqbZvcNTWdtDbwJD3OhRJu+yVaKVRt58t3OrokBinfiAlouJCZU1\nTq1SDRZ7PoYXJbAx0zstRbEZVLb2c2efPxd1B+d3Ds5Rs6H0DJ+urMpRqj3V\n0xa+OV0mp/2P9xFg7YSbRND/kkv5+FNtRhEvXCNnj/ca7OGNnBk5E3fOxTQb\n5fy8WpKmf724rrbcWUXt/iTsuqK+JrURN+D64bojbaYFtwIHeJhgBJv93j/b\nOBU/3DHz5R3LTam2UBuoYiu0+L5ycDLWO4HMwi9Fb6ULYh5wil/Qh+2K4PSq\nbQ9CD4LGPTH8C2SDQNMsx5SarIuWcdSQBATIENDOffpbM0VOxh7gxB2C/a8H\nCMmo4szrYo001NVrb8x+FVWI6kr0jKpXeZ5EpIgvRJ0RHR5kVPx0GDlRw2dX\nPVmk\r\n=9Hvq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.055d4f10a.0","@material/animation":"12.0.0-canary.055d4f10a.0","@material/elevation":"12.0.0-canary.055d4f10a.0","@material/typography":"12.0.0-canary.055d4f10a.0","@material/touch-target":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.055d4f10a.0_1620170546335_0.8257767247919887","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/fab","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef52c5ac140f1ad5d85c061ef91b44e9c658058d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.5b6a46016.0.tgz","fileCount":22,"integrity":"sha512-VVJtCE9IKbRs+qu3/QLttvAKvIAUgMywz3b8NXEPalvCeXywEh0tV7FCGnwhT07D713HqM2BBKHcQOqKVHJn4Q==","signatures":[{"sig":"MEUCIQDlZ93gND8FkJ32p/A9E8s1fTTCwztaEZWBY7qTYxSz7AIgRibAGYUoFOgG2Vb9lgs453QktcDPUE3eii6o9ypzycM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksT6CRA9TVsSAnZWagAACD8QAILeYpvdUCt6Z0bzuMXs\nIm5u8o0AYZebjB2BAJbogqsujiXbTU0NaSDw1wgkWy5rsBDC2zE9AMUaZgP7\nxIlJJR6svRDgV1yyCw/5mW1nU2jXKKgRJXhXoTwFz9N2bn1ssd0T7eolxgQs\nC62l11OnIRh9c+jIA3R7MCrEeOdfFz8G2Cfl4kfd89Bk7K/blXVagr7SIJ0p\nam6XsCIfZ8OhhnTtCj6uNBsf6Mcml2TVd1LsNBpMpkdmu8H+ANw3phR3RtsG\n3GozfzmAQAFp2+sEnleVY+JOVy4X0+R/VBL7RdE7IilIh6CvI/nOJ6JQ4w8Z\nZNbAEWaCNIu7br7X5CbMeoGHVxZI8pYzH5hweK2Km9tAXqJk1RrGJ3ji+ko9\nCDMSMQoSPMIAXCNcJt/ShW/71lTTO+oFtYJKpeqseIKMbbMhW7PyqDawaX2r\nzQQWlxubhF1DrtFb9fslUE5Hp7tiZJRFhBhRFEAxnrd0thtCIHAcsuOppID4\njlmzSuVKo/EM8zOutYddPkMXLViCfcFMmS4imqsiCc/gZecCZg9/BXbIGAye\nBUSkBVLFUCDOvk9eMwOcJeHxEK2B/3GG1/o8ooFIRlkuwALPY0fhGlYNBaQd\njqD87Bh1a4bfCABbiz5euGIBLb2TbxVZh+FrDfF4F5+p1mVLOh3dcx3MKtL3\nk1CB\r\n=ljFf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5b6a46016.0","@material/rtl":"12.0.0-canary.5b6a46016.0","@material/shape":"12.0.0-canary.5b6a46016.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/ripple":"12.0.0-canary.5b6a46016.0","@material/animation":"12.0.0-canary.5b6a46016.0","@material/elevation":"12.0.0-canary.5b6a46016.0","@material/typography":"12.0.0-canary.5b6a46016.0","@material/touch-target":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.5b6a46016.0_1620231417940_0.531196616956898","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/fab","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6f4be27167d069dbd537a5f92b8e4423b09cd80","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.33c9a737a.0.tgz","fileCount":22,"integrity":"sha512-ACMUWfY0Yl+Aesg6Ibc8KOxytrTKb6TnLu+oxwmiX5uxiokqgvE66yp9rycT5cFOuZmKRyh2dSYDtbBzxLjBqQ==","signatures":[{"sig":"MEUCIQDIGVMsmhRSa/TBL1QxQZE5MAjmNGANckarZZY1tBuu6wIgJsHuzD7eyUI1XuQD0fmxQLY2tvdkNZ+2NdVI7VXngxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktWZCRA9TVsSAnZWagAAVQwP/3zhQNIOM3I7/PNRsyWP\nSR7Q/lgsTJQSEoIzEtCkVCUNjEh2b9geSat0wvaszMnXoPx05tbK9MDKtUxG\n8Mmi4Iw6Qa2mJyjFoW0Vw7xS9Hb3EH3mS3U1zPxteTjg+8NsgHhJYDdogH3q\nNDEglxQgLQrZmL9A6WoIvoeZxfG6f7SuCLGlhLi31AFMQ4p2bIUfekyEpEhD\n4vPSF9eeRd3/0wyvzfY6xdNYF7RCRtD3hQWDQ/KfDhzTDfRZfC67H0bR5q5L\n0WyeamaShfP9U/clrYDjzTSSMuC81ApNwBrNB+mITPJjtAlNjRMBCh8ctDd9\nhAr4DSD0pJzp/7Yi92dMWPLVaSVWm4WE64BqE1niBRdLRhLij0xyW9sdiamv\nbXdvFLfzPWElrXD1bEfSUFT0u4AGFE3ebTlhN2/MSv+0itw9cxCCuObefrT7\nDKZv6TK8B/igMghI05eB8/7TLbn52I/FPi5uj3CwTC7kZiCK8w1+egUGWk4S\ni2Mzu/EbgWD6RiRl2ilJ5igTUmY8yv3JAU/+oR4e0vrBTiupCOaqGJLUFTev\nzNRzd0ToLfCrxDd+ug2mrHxqe+HIDEk4R9RuORAMHuBfL8LK0oBp//a5cfMW\nbuE9i+TDl3TpFR9iWNuYtNUtp3VtsrCJ843q4b8V5ON8UYHgdF2aR4SrM5OJ\n+9Il\r\n=lZP5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33c9a737a.0","@material/rtl":"12.0.0-canary.33c9a737a.0","@material/shape":"12.0.0-canary.33c9a737a.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/ripple":"12.0.0-canary.33c9a737a.0","@material/animation":"12.0.0-canary.33c9a737a.0","@material/elevation":"12.0.0-canary.33c9a737a.0","@material/typography":"12.0.0-canary.33c9a737a.0","@material/touch-target":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.33c9a737a.0_1620235672672_0.054061195178850996","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/fab","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc0d5a8115df67d8a3e3179901690d05d30abcfe","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.9bc0effaf.0.tgz","fileCount":22,"integrity":"sha512-GUVU4lEqiKHXzYcPcNDTpduLBWvVUlKq34va/M6RchFgfqZBdYo+cGayFRaSoo4gXkwq/5CEe86KBtR38IRnOA==","signatures":[{"sig":"MEUCIClEf4LhSq40TlZpEo7VBLuqltyQDMizw1CreiQRRvPbAiEA8k3djGq4fUyGQw2wnxW2lNhjV47fGGg8toCovPTUuOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwd8CRA9TVsSAnZWagAADPIP/3+wJxoBI42WmqMKQWEm\n3C9qpKdqI7RPFuJGiE+KaJ/v/fzuC7lVgCVzNGYf3sEXT2n9p5gJ54hHsNXe\nXc1Mpm0rGaD7PCLddEXq6WhIyQGCq+oLhhXQR7ToUf2WM2HZR87RoBZmlk3/\nic8RwFdTY1S1myuWKgB6hCKmV76MfRNh3DwZoMq6fj9UZCS4Kk36wPQs1PYz\nQMreOG7HBfrc5s2V3L7hFMYCKSwP+0WXbSCLonvhJzXTGo4YRqst9Nb8arDM\nBUqq8sqQaDExxE0X5nhJNKbtwV8soax8VPtUYdQK8Zs84wbGvoS/aNdAAg3g\njp1ipXYHdQ4eKSTmQMIPxYUx4sXWDsSr3ScqfMwp7B6vRTx80QthLn1EXfXm\n9RlkgGK/SMvFzsmURK2EOehEl/Rx5xhNsQCEV9og7gsE8dZq3dwv0BWnx9Cb\nWQyYgscRGFrTUhvyka9/eRkSWZR44vYiw3lgedvqXrXGwZn9odd0+NuW9bqf\nU+L5yfDsHRzejMAyt5wBXkbHjMbACl34HbnZhOZBx3peXm0nr+xdjYvKejL6\nuGtJw4ER+9u5pzWp9LBA6lzbfj0sLSZKKQn1PrcK5bVutNMaR5eus7u4tCwO\njiDdXavvKmyf5/jahco6CqJxnmBunbq+bO3sILCjV1zmXXhbvaFVIyOgfl9G\n9/b9\r\n=Er3D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9bc0effaf.0","@material/rtl":"12.0.0-canary.9bc0effaf.0","@material/shape":"12.0.0-canary.9bc0effaf.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/ripple":"12.0.0-canary.9bc0effaf.0","@material/animation":"12.0.0-canary.9bc0effaf.0","@material/elevation":"12.0.0-canary.9bc0effaf.0","@material/typography":"12.0.0-canary.9bc0effaf.0","@material/touch-target":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.9bc0effaf.0_1620248444143_0.34383427239595354","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/fab","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dede34d5ebe15acdb4578c3a405e7408464facf7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":22,"integrity":"sha512-xoyu7r0gq4zu1vGsA7qlyFyyWw8+375CcfL1xsRiCOVqADUPtRT6vO2GL0+mfGjzJb7G0NdOgvRnQNGTnpV7mw==","signatures":[{"sig":"MEUCIFqk4yqCASmvv577lMSkU0NdqdKsEhuIM1hctIHfLN2WAiEA37T3t6OmfiFhq9x9qxjmH31lU/CXDiDa6tZ2QmBR+gs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxEUCRA9TVsSAnZWagAA7q8QAIQchYWbcT5R1NxAs1c5\nFii9RgSqQDSWJIVRK60+H+cnq3TgxHVseKBK+x/BRumDLM5MfOm/KjQyd2jf\ngMso5qygZhBDrEde2vI+WOU7I2QIKmpprIcc4eDU9wLJlCZwX+kIqUUYU+/r\nHirCJixiUXq0bnYArwx2sKwiDWh+D8QK0RUNTQSXBKFFvS8nNMBsjVmqEyPd\nMa8uNkMCHGyED1x8vr+s8rvHCB9+JyzQ9n1soI9kdHK8Wa0+a6VF1y71eMeU\nr6PGf9ss3X/UWX9DXNtkGkHRl9Z1P9N/F3904gUryUdtwyPeiH/B0z+fSRmX\n/emNLHeqANXDKUuzmDWetIMtv0FPfaq3ZKqkwryBFiEUwPudN9jTuCljPE3r\nbjOYu/BAI/3WeozsuqY/ovplSDltMnWObeL/iKb89r9GPp26qMtrqbUUDZQp\nSmySicU0HDLEoQ0Iwl6fgHswioPNjC4uFn59GuF9gYde+627Kq+D4UkkPotJ\nAYVesQpwem9eE+3PyvwlxdAotRCDav4kv9icDnstZZafFs7v0/MNlFVV+0oU\no27+gJcGGtBEr8uQ13O/prfHIbRk/7HtBo0DDw5y6O7gU4Dm98gdFR11m5ZB\n+eUax4b+Tptv9J3rtPVNbTffcxOfoJCZStS4TMlfHyeWzHWwuUgv8HX3fE4k\nbK7s\r\n=msBS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a1e0f2af5.0","@material/rtl":"12.0.0-canary.a1e0f2af5.0","@material/shape":"12.0.0-canary.a1e0f2af5.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/ripple":"12.0.0-canary.a1e0f2af5.0","@material/animation":"12.0.0-canary.a1e0f2af5.0","@material/elevation":"12.0.0-canary.a1e0f2af5.0","@material/typography":"12.0.0-canary.a1e0f2af5.0","@material/touch-target":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.a1e0f2af5.0_1620250900033_0.9479436255009248","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/fab","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.06930c96b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42eb18a9fdf79a5a34eb60b4a3b9bc985bd45a4c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.06930c96b.0.tgz","fileCount":22,"integrity":"sha512-7E1Io+Y9DRUNF6qBUgQWnJ6jMvAy0/Vmw2m++hy2Gi8sWvDYE6OCVLCoDz46eUrwi/Z4a9hWg6U9qhtyan4Fgg==","signatures":[{"sig":"MEUCIQCgqUOdMLaaEgylXRRMW0nWi0oJtDMBMOfqulLUiTwLYQIgDdra2ditHx55k9LFhidAU5EGRLAiqrhP7RvyhTbimnA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyzJCRA9TVsSAnZWagAAUwwP/2CDV5NPaXu4Oh5bWB9c\n41f/IBwI2J/vAwPAcDsTyPBT6S0QeHrBr2rsxITSLwiKcRMxMXUNLVunCvaJ\nCYP8AmBvbM0JXhD4Z7l/czcg4+0SMVUXfrkcZXiQ70rr0mSyNsV3zwAcrOx/\nB+6ns34OAoomzJVC+cS8UX+qPmTK3ZPNbdkb1DvIWNY/hytZw0WIV0byDqf3\n5OifSAJx+QlKzXK7FkvR+Xn/GKW3n+7K+L+4A3b/P7dJLoTgZv1LZ8O1Y5y9\nYqCKnCdTRar3i/EGTl3MY1qwQZSuPfwumjrN0M0fdzQHvDJrn7UlRP4SaZIN\n15rle9LeWsyrL6GICEMBzxz9A5Ju0SF+ns1BLHWIf0X0tgZEEOjYWDWwBigG\njfkIgZxKkeRDjMwEtf26SXWUN/CaHY5dT3+y5SnSa+Q5gdtiwoV1NLc8vzfY\n07Pt5R7XW934bH9/8Xhm5Sb1lVzEKBFLBXrPZz3+cDmHf6KSpgVftUTDKWv3\nfz95ldi1Q1UWGcMndIHbvDbuXsew+kfIMg9nTou81TzyQjYMJprGO5KKzjNo\nEo028LvBElc1a65maNn+lOcgUtGECWIM3iekC3qDRn0rKKGBqDwXkgGqxiJb\nrNcERG5GyMh1h7Kfb1CwDt5byZsYWTkknWM8S3zKnxnsPPqXO75mNruZoNNm\nHLkP\r\n=hhNC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06930c96b.0","@material/rtl":"12.0.0-canary.06930c96b.0","@material/shape":"12.0.0-canary.06930c96b.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/ripple":"12.0.0-canary.06930c96b.0","@material/animation":"12.0.0-canary.06930c96b.0","@material/elevation":"12.0.0-canary.06930c96b.0","@material/typography":"12.0.0-canary.06930c96b.0","@material/touch-target":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.06930c96b.0_1620257992838_0.2040456462650606","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/fab","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbe36d419c8f9cb8ace0be289d3468538aed4ac8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.03f525f9f.0.tgz","fileCount":22,"integrity":"sha512-M3DKfYcBAGN3rVY47kCxoPY4Q657KGfwO7LMFttsdbo0qE5kbpfuj8XzDuu6c4FqbqKaUxIvfq6m59idqb4pRQ==","signatures":[{"sig":"MEUCIQCnjMr94q/0stkmRV2qTYGZnIGjJ5lwMJSIj79XAVQWpwIgN19B9i+sxNRHeiA+b21QR0CAGo8SoMZn3j3bIJj+NEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzi3CRA9TVsSAnZWagAA7LQP/2Le+5ofh7Zfb5PkRBMU\njoIlTmAdMd7CXONzYwIOXK4zmqGbX4Hl/H3hBviHiFqX51yMZvo5XnvOUvmQ\npsGdxNwhD9VpFzjKbBqp9OFgcuprnvSPL19Ok87cnc66p2gdBy6IjPqhss+H\n+zZDDelHMk5ET3/3UDIDfS4LFflRFqVvhF7qoJVx75Ikra0d/+T79bdl6uyC\niScls9Sn9fiFmQ18q2NpKdJhlIkiASXJrRAKuIwpPc9IDmYDf1o67xM61nxa\nZgyextwBzQU8FiBKFsns4J+1SXglGqF/Mbr0FN1m1iZ26cpXeZHxxTiOej1S\n4QDXFUKYwyjBHgJ7wvoQbUci+Zvcg9kEl7xj46tls5S8nBXwv9NWktESGgvh\n9B70hMlpTRboWgNAzzLM0gTmnblNtqVNU9YgO3fYvSK7IEqGmBKRC+DFksGw\n3PLn2+ZFuCw6Czj5UmGQv8oLikmowRyG/aZQl2IYDXtSYviAgEBC9SjELxTL\nm2qV3wH+0xvsFNzE+KvIt13ISOjWmBJsexxPtXODpDr3pWqcETTNSlRjAvBk\nO7h+XXZvp+vhraQkOJjhuICK5rjQ0qLVYAWl/5GH0z8SEmMVjKPhzRv2QhFV\noavEW7Pfv+QC+hAsGd1lOELFiUoRg9uqj/bE4YfCwkAuquYl8z16HxG+Ay57\nX1Kh\r\n=+N6n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.03f525f9f.0","@material/animation":"12.0.0-canary.03f525f9f.0","@material/elevation":"12.0.0-canary.03f525f9f.0","@material/typography":"12.0.0-canary.03f525f9f.0","@material/touch-target":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.03f525f9f.0_1620261046798_0.007670847675675052","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/fab","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71b4f66026e75e57e478091af214d2af2b5cde96","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.e82ba2a26.0.tgz","fileCount":22,"integrity":"sha512-fgCDBh094p1g/PBLOhDWdJDwiRJcBtrPSwOFG418kiRSrFhjco8CzAD8K5RqU7Gcz4YXC8cjIbs7TuX7/icBpg==","signatures":[{"sig":"MEUCIQDxLNnsCQlzye/G+SjK4fhi5Zf9VXWWB2imF0gIxdR55gIgQJkn+IfVPkQCZ4yiaNNX185v4lru8nPC0rZzJU7XaBk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBHZCRA9TVsSAnZWagAAxjgP/0iWjKUc3XCi8ZoJIsi5\nJ2JZL4mK0BgM7umRx21sreyjp6NvCLnOaMD14XO/6bT1Qry8HaNgZrWtdz5U\nSJR4BWhgVQUBiv52be1ShITh2r6vSU6MSjmH7Pixhir8Dr7Z2LOjIz/m/Fse\n2wHnqJ5DKO5nnxspjivYTKsdgvburk55zcsj2GHZUQ0e98wh6n/cXRwGONH+\ntb9Ywa25tVXUl+TAFmabOSEDl1bty9IYxwezmjQYBYEtM+5ItW5x0f+D06z1\ngzoGVtw67sQLHCwuGrKodujcrJQXGx6wZOBpQDGNlR88Mor4s+Ejfchpie0+\n9KhuVouAR+258gyalU3pH1wYzvjWuJFe/L3R2FR4Gc4PmZ1HBdAgDb7w96RI\n84fM82xZMX7p/l++6mC5eJh7nGH9GSgu5/JNJiuRx2DvVODmtsTFVWoqEzvA\ntnOp3WUq72oLe9J2/VChEbJdQA2NUYFNeXc2+glDidjPK98Qc/1//oKUecik\nnTllinxSdgkcqT3HovBZiTenMXVDg9CIFWvejx0S3D4Qhzbt9wtWc1dl1FQT\nbboofJmriup7WoZa0td/eeIsqdxmPsOz5jnAP8me3xHIDdeHMAuDjtjuyLu1\nM8fz+So/1CdOEJxkbCCZ9bN+hFgKtza0fIZ7rE68IGMCnzvonjsWk3TsuLTm\nJ8Zq\r\n=PZ2O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e82ba2a26.0","@material/rtl":"12.0.0-canary.e82ba2a26.0","@material/shape":"12.0.0-canary.e82ba2a26.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/ripple":"12.0.0-canary.e82ba2a26.0","@material/animation":"12.0.0-canary.e82ba2a26.0","@material/elevation":"12.0.0-canary.e82ba2a26.0","@material/typography":"12.0.0-canary.e82ba2a26.0","@material/touch-target":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.e82ba2a26.0_1620316633361_0.8947391415029948","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/fab","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18f43e4328dd9a5ef863e12325c2f41ba6a5becb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":22,"integrity":"sha512-qw+TPl6iYu2nh4Bf/k9+N9QAMqmqkWh8YX8i2xZZ99G5qygAcHev071NQIrp8ev0JI/Ucd9ud38miTUxeJymkQ==","signatures":[{"sig":"MEUCID2qjJtb0b3G+rCVQQUyP3UX3SHYqrRVqt9NagauKKyfAiEA4vy6t4992v0srmAo4UJ/ZrW63N67a1sdIvH/GW2sntE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCeaCRA9TVsSAnZWagAAIZAQAKF2ziA5XuzbL1c5O0oV\nuSDpUtcPzawaXxjXIjM7uPwwuQmjrl0avgvQOWTCQkAV5xVIquyeiVcNpRcu\nobqZRfOQLKPKLGdXedggtL1VhibviQrMqB9GB4lvSSuHHo/8m1dCGyT4cj8d\nRqzsattfIc6GatIxtc5mGhEm3BWj0H++6ZTWa0hgYw9+fpj5SXDXfp9Asd9p\ncRPQNUE9ozHL9vMZ/+1wVKDZvKbBiTCaq0eeP01B4HJlTOWsCKL1M/sqlwhV\nWJ1ZSAzzrItDGGM6y7zFKXjCxzxSLeRGWS6rcVmZw2t85SGWnA43d02PeSNQ\nLAmarPH3rOPjiRjFbBDaGzDVJqA/Lf4aNMLI7MfQjAnvHVDyD2iV+EyXQd83\n3mvieK51XCrA7r2F9x1DPyfEWsFZSw5fGuqwgPyAyDy3Ffcy0yAkcIoNi8mF\nU6qEVSmEwsNCbSXEXfruJ86HAJIt6UdQplY+poBo73wVey0O9P2pviBzoi1S\n3OhbI1FqnE3hNqNLkX01JUmaUmpIJ5cd2BADK8Oxs8ROnK+N+ZCDNJ4PlMzk\n5YjVWbyZWuC11fmPA4AK/+Sj0oxakJnJuJaMuoS41szPoHJQxx86Wfe0bZjy\nOQSypXDU6XCpS0VIyMvZCDf2O33ln3ErpWPGMB4vDx+72duQzCNujj9zgohg\nXP1j\r\n=eD2E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fc7c4e5ce.0","@material/rtl":"12.0.0-canary.fc7c4e5ce.0","@material/shape":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/ripple":"12.0.0-canary.fc7c4e5ce.0","@material/animation":"12.0.0-canary.fc7c4e5ce.0","@material/elevation":"12.0.0-canary.fc7c4e5ce.0","@material/typography":"12.0.0-canary.fc7c4e5ce.0","@material/touch-target":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.fc7c4e5ce.0_1620322201655_0.31312747818904163","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/fab","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.65c04514d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4e0777f25bdc7c06ba7f335fd75b6e8ff085286","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.65c04514d.0.tgz","fileCount":22,"integrity":"sha512-4Z+H0k0J+LYG5U/+/iqXF8Met5dVlqNzT9/0B+t5pruq8+LaLSlyNnbuWtpjcB2Gf1QrxIyqKbQdIf+A9Y2t3w==","signatures":[{"sig":"MEUCIDW1e0qqEknNy59gMnyrAfckFv5+IvWeMHmBvBmWr6v4AiEAtzBkJ9CwPfa3P51licAsXzb/3M02k+Iqq7iTpyGSzO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":356240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDj/CRA9TVsSAnZWagAArOAP/2moTmr2hgm8kO0WH5P9\ntR2vK0w93pBKqC6O+UsYVXRdb17auuUG6z2S3W3eDaQ/d7hDn7IipF98R6Wt\nuh1SsuaMMadZyOh29YVxHHQiW6hl7+pqYhfsf0NB/zpWQmY/bT5uCZoCflu9\n6thwkG3mv2JVJYPADPmpAsLCjHTWqj0lD/uD6pMzlFDOMOKQg1efCbpqU70Q\nUUjprFfTgUAyH56GLdHinM+oY/l+a7kX9wKpen04vjanc9jYx7rFmOrlk1oT\nRrPbQ/WyBlrsdmVeQO6qe3l4ZEGlIaDTVb3qq9RIRctcxuXPrIEF6WQ4unbj\nkXVkn96vrKmzaeauTfhfkwyzWUvC4e0WeTQXrnQihfPJK1QD7gb165EKbD0D\n25KFrSBjcVymGs+3klfk94Yb6xYxbo8T6sxlefYTDx20/dvSLPySS6QRbWu0\n/d+eXmtRgf9s6Bf0faLPGe7YPiO7RfVz/lHBwR2LxwedO9JMcXslrtIoMSt8\nKB+iY/vczM+SchSb6YiVlY20OTW7AZnF5Wimdpls0a3h9GeEudcUIsnfXuXP\ngAnHca22X/rxH7XHmG29S/mxOfFxQVayhfjN8fu9yVIqFHW7IMsRd3th3LJH\n7yVTQW9L9M1zLd6ytdcpO97I7sokPIwhxiApoZjMJ2Rg6rGdpOWgY8CEBTtl\njhcG\r\n=0xPR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.65c04514d.0","@material/rtl":"12.0.0-canary.65c04514d.0","@material/shape":"12.0.0-canary.65c04514d.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/ripple":"12.0.0-canary.65c04514d.0","@material/animation":"12.0.0-canary.65c04514d.0","@material/elevation":"12.0.0-canary.65c04514d.0","@material/typography":"12.0.0-canary.65c04514d.0","@material/touch-target":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.65c04514d.0_1620326654640_0.0306688669691888","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/fab","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3884e2b52865cc6048ab2007ca415894d295549e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.c97779ca6.0.tgz","fileCount":22,"integrity":"sha512-bbRXG8INjZU9ZR2hIl2XN8sZhk6bVloIiAVupOmTzzp20r4aTviL9Qu3JBI4xHYTBaEDywj8Jw63oSLoz8CGxw==","signatures":[{"sig":"MEYCIQCglFktaRSxp9CVOSBh+53eC6pXZvDn66PC6QthwqBQ4QIhAPx1gAiNsnhS8lx8N48kgWf0ET0sFT8uCcAkf4L1WwOb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGMbCRA9TVsSAnZWagAAM2wP/AqhYM/hP4YNviM/FgUY\nQWn62u3rU0oQmXA2XbVG0SP3dCi7/LfGJ6Jx9Chj6u8Uop1yQYpH9QtA3n0c\ndswS9IZWDlp1JsJAYam5kqwwjnAgWE/1sOVgI7N/Lg96/FLwHn7zrWTKVhzt\nKoaLdvvjt79gYdEyTjfHty/R6nTOq+7yKH9xFFztAwkOoshCeBq0Bu0BldGp\nq5mGR2WyxujEWK+CbPN4Fg8Pd2Sd5VyHp/QDtvjOqmEsPuoOb/Buy6WTso32\nbYTdmvxqBSwfBw2lWCszeLppepecTdVzfMjWpXMqjAbzf0bpgdiS3yDD/NfM\nVI+lM1g9qmoo2vfSGcJBnRitpCMNIXhJRFoAngSIfN4wLHisu8HbuOU9fbcv\nqiciAZELf0+W6nnLl+vGOnQihsSKELXqY2mfXA9WAZbZx+gyaqe5mpouPalC\nY6YVOTJ5FnKoKxKi4zQ4cOsiTfEZAizXm9mHhO/LZnkqeVKooBk/jUlWezMU\nWnu1QKTwlsFrhwmAoyyzSRALJCODurW8kmR3TPgwljix0zKAXJmUQF9+ZP7f\ncU4x4O64DN6I0AjIUzTm9JaEunsTXnkesFzTDf6FbLdqAQuv1vrdOUV8lxo8\n6gwm7uxsCWsWmyeQKn8jf88Efx9V1/H94fXBoF2NuUT5QnY3xlzZYmjUKN/+\n5hfZ\r\n=mQCv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c97779ca6.0","@material/rtl":"12.0.0-canary.c97779ca6.0","@material/shape":"12.0.0-canary.c97779ca6.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/ripple":"12.0.0-canary.c97779ca6.0","@material/animation":"12.0.0-canary.c97779ca6.0","@material/elevation":"12.0.0-canary.c97779ca6.0","@material/typography":"12.0.0-canary.c97779ca6.0","@material/touch-target":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.c97779ca6.0_1620337434650_0.19297928538960218","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/fab","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.869d890d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f5a0270c1944d9e4fef663812b5a7d979a60750","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.869d890d4.0.tgz","fileCount":22,"integrity":"sha512-7wp7av2qFQFNj5rL2vbZ0c9GfslmKHnnMUFJLiICpa9+nadOKFfsOO41AF/k8VN4ZjvvPcmYBLcjaGnQEoe9BQ==","signatures":[{"sig":"MEUCIGRuEAQMzju+MQGXkbMqtS+YzJ7a/ZTa/JC6VR5jMmMkAiEAiT67qHdX9/6W9k8SJ/WF9utifFnqOsuGLjF3KJJrkkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVqDCRA9TVsSAnZWagAApv0QAJ+6ruyrtyKaUzYZ19rQ\n9mxkEwt/RV0/6PU+6cMJiR1GMuRP5Bjv/LXOovRp5TqtXxx0cZnnKoiuFrGM\n7W6zkFuBuaDXHIy6GIR1EcvbjjS5NAofxj+bUN60xhHXJdtk/k0J38gfjbeG\nhjt+DLZxZrAx2L0O0t+NNw8hZrPPLnZdU+8BF+dFIzPR7jTyWbL/hTbl1UEH\n9N1hXK4ZH4cO3GdY1qeg9Pu2HDkGQlziCCT0QXuWZJ6c4jQhxrunUYkO+wDV\nmsGLSuwjz81Y1fy4p9rH3/qz5iM4MkFw+0KmpUf8zt7yksIX0giXyBnWHG5y\nVdBB+IYuy5vcl6SCN0KyflPDxcPIS1EchPX5DbrbG4EVGuTzApG0eKkWadqQ\nHrJgAipqYvbsK54gbHowcV1OPCv8jHBZlh/DAxcCWpvl6Klj3dVqswEvfxqU\nE4vLtoO4ZIz19iQA7gX3yAkBrxvfCnGRnHvRXsmaiUzFGIMP9ixinvFSsPTU\nWPnTg1Nm1+kysgmZGGRA4pa6Wfji7jSxtu1aHi5MsOCOLhsyzEWC75DK1B3/\n9n/aqdmRMTziKRyX/OXMO0elugN0bqqNhKNXDj5AdGiAjw7Ud+z4jXCg7Z3k\n9hNh0NqNMGWZANMxX4m0IUhX8D1aAGFW7pxapO2srZ/dMO0I1jRFEN/Ui2wT\n4qio\r\n=8Ze2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.869d890d4.0","@material/animation":"12.0.0-canary.869d890d4.0","@material/elevation":"12.0.0-canary.869d890d4.0","@material/typography":"12.0.0-canary.869d890d4.0","@material/touch-target":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.869d890d4.0_1620400770388_0.577663198737373","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/fab","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4548e9e353da63e89b0bccef5e4adf9c8e5320fe","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.ec22e1da9.0.tgz","fileCount":22,"integrity":"sha512-1vf87fmp77EIsXGGkfWNczo1SK0KGA9nfsvT0qAXqUGQ6ZOftrlF5vYaVKgEujO6sMk9wC5aKZL7L0wo4AFOlg==","signatures":[{"sig":"MEQCIGhSsIWTz60X07QKF+lT+6IaqKHuSecBBE+F2UUu/wWpAiBgPy7L4IqBlSe8xYMBBkKLvCH3HhD3/VcaoRfGeyc1Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXpHCRA9TVsSAnZWagAAcB8QAJCoqaGJPu/0ysWwtPtt\naf4yyEg/fQyZmfEFtFM1NoxtnB0RHHrLWTB7mNyf6PE93XhVVMTEAjwQzg0/\nbh0vPni1aedcfqJFNaQqtn4XrY2cdp9sjBRfE3TKI3M1JNidoj58vgX+4tKH\nxWzXXp1Vz4L6+PLUbuXMEIVuXreXXNO9eDxWIzQvlVtXpvCIGfUlGBY3lRai\nr4mjOnpSQWbvMbkA/WOH6Kh/nTRJc1+++MdyNAjQ0O1+hwAYoUr8yzPavi/S\nrzjoCRKYQ72owuR9crTuBEL++OueHIvfW2lDx7gc3pwhqT6zs64NDfVdqcGt\nqS0FpsPaB2U/XdDvr61sKMr5HdjjSDaaCUUZsN7mykwnn4QqsllfCSyMgGnT\n5FlNNuYqQMTwvazeTI5ZtRZI/zFeb2p1TqXsv9pKQzLtrHSJ/RzqFJ67Enpn\nbk7GiyZB9+CQgNUNIxF9RUlHu9uIdgnOhQ6QW45noTt8h2uq2xQFiRPO9nZd\n+c29eo5C8qWaYrCbe4IKnatomN6WOObg/JaWjwX+jnKyKulHsERYttXquCSj\ndDIPJZMCVnajeItsNUH/j36nyuTMO2iIgiMzDWcqGBcPJopgzoD4wid8u1vR\nKaSfSDorilaKZUmhVHLYVrai1MJd9gftlYa5+FdQVumaqOhMdjP+L+tL0TQU\nT56t\r\n=4O3Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.ec22e1da9.0","@material/animation":"12.0.0-canary.ec22e1da9.0","@material/elevation":"12.0.0-canary.ec22e1da9.0","@material/typography":"12.0.0-canary.ec22e1da9.0","@material/touch-target":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.ec22e1da9.0_1620671046840_0.2859566621801284","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/fab","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c5ed48ee725b160b71a82bc891ea3a01eccbd50","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-nightly.7427449f0.0.tgz","fileCount":22,"integrity":"sha512-CO7IjolIEAxEs3bOMKebaKnUn9zCT6lyGb3p4s/T0+AZ+nhuympcd3B3wpOANcHexcszG2p8Iwfzm5gmZncMSA==","signatures":[{"sig":"MEUCIBTk38/cojrfzwZ0zS7jKW+8PLk6lMBUosi3dbYFqTxoAiEA8EXdfkfupjI3ge0M64yyafOwOPte3ASEw50YLCTUKiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX82CRA9TVsSAnZWagAAmfkP/3qSE0HJZnpuij4ePSdI\nTS6wEcQCVTDHtDQgYu35UIxik1s9oSutO3lcK6ft7KyZVIDG7B5kpbTFUzCr\nxqa0KkH0oPh+eFAclMGQL3aibnqRtn/YvKz9KimTZ7yHyB44VfaRP0NRGEW5\nlxF+2h8YODWJ5obK/oPN3KUm2d+uRuTtRxr7znTuu5ZBNSEahFX1QdVzitMq\nCY5Xz9DiKfhmjgYNT6E/4AA1ghD/8/2ZhVLcQN8wBwujzyDISbEE5T8w1RH8\nZi6L9UMXgMx8UrJt4BCa1K9/mIstnyHhDpPdc7vqpetXbqZpMhAcg1SVFq3N\nE2y9uGY/WBlyMC/mvF55OLYwJQeJ+ZFooZCrPSyxPcHnfqxAowxQQ5qPhl2D\n9NI7Kj7mDvZbDByXoR/+Og8Gi/k6VkeyHuzzu7QvGm38kAFE1+GxGCklOg25\n12ffkbBUwdjGQcviA8Ekrd0m/dfmh/HLoa4F8iVY8WJbYYa84EGoUlQfVca2\n73iQFGRL2v+Xw7WvFLuOOHpvuhfEgNzJybDcpvVX8amkycPAddOus13HKfI1\nshxqQERiyRU7TAryZKSbu5Ap4QC1nZ5pk3xc8L5m+Io+FIp5xDmYTDzG/juA\n/XSIXyySp4SKZU18sY8ODHcnuRE/XoE0p3TCQHb6SYYwHa6E3fhWG6tsalu0\nEUST\r\n=DvLN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.7427449f0.0","@material/rtl":"12.0.0-nightly.7427449f0.0","@material/shape":"12.0.0-nightly.7427449f0.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/ripple":"12.0.0-nightly.7427449f0.0","@material/animation":"12.0.0-nightly.7427449f0.0","@material/elevation":"12.0.0-nightly.7427449f0.0","@material/typography":"12.0.0-nightly.7427449f0.0","@material/touch-target":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-nightly.7427449f0.0_1620672310090_0.3454302093183761","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/fab","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b69b67c2da104ad0f92fa0481085406478a244f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.957cc3bf5.0.tgz","fileCount":22,"integrity":"sha512-Onaaoj5SGF003vD05rDx7urBXq5uAXkY8jLkEblgPWDj+PwLqB7YVNYGOQvh8ddXMjl5so256T6Vek7QTCJN4g==","signatures":[{"sig":"MEUCIQCoDOc4SR2qrCkifsOkzPwioIYCysLkoOK0lH7Wlrqu2AIgXIBLTpmVT5HIz78edsR0tO6otwIRXLJEljDMOs75BRg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmaxICRA9TVsSAnZWagAA3BwP/RYq5tBa3Qf4fAxrmKTV\ng6yOtvfoTri1QK6RfYgcMaaWDdvZ+QNueDIZ4AZ383t8BXvLiGqxijLlB0fo\nvZfmM8T7PY3QOx5RotdewWMpGVC0rV55Y2vtKK6RPrPimggCoK7GyoXfG3BZ\newwQyNV82dAqSe/m6KonVBOCiGzz1rALrTablMz/ItkJkyZXQAUeUOORCNWL\nEuY8kvNeGkRhtCDFXht2UjZ8eoD8vU0sE/CBIBCWvL2jYcRd7CVvh1u8kSt0\nOPCW79K7dqHZjTLeZFY02y+1XB33rQxuRTojDFJtaMSVFI05m721agDRC5vX\nCYESo7AVJwkRIDojT8aBUlt3x4Qil2FwvVwV4I6GMkHA/llvGUKyHNKZXzWh\nwThPo7cGkHDn7RWuUpTIwSiLynNQLnfR5BxSjIsV7Mj6XszMDANslpXdoThr\nYy/CFwud6s+jW5fEh61N3NaHn+8EdvutKuE25pI1QQCMiNO21jUz0ub06Us1\nkVYqGfgM4+694AthB4schsGH+VdNx8vSW/9930kw1Gzm+nsXKuHU4fFXVR5A\ndMcpmKbmgjkwIjnSlk589xkYCCPtIrdViM7ey/zBX8GtkA978xdMQU23crpq\n69CzHgRfviUCmKzjzdEUT6YmSeHwMIGutHNUi8fCRu7J208PREp+95Y65lq5\n5Q0A\r\n=jFGl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.957cc3bf5.0","@material/rtl":"12.0.0-canary.957cc3bf5.0","@material/shape":"12.0.0-canary.957cc3bf5.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/ripple":"12.0.0-canary.957cc3bf5.0","@material/animation":"12.0.0-canary.957cc3bf5.0","@material/elevation":"12.0.0-canary.957cc3bf5.0","@material/typography":"12.0.0-canary.957cc3bf5.0","@material/touch-target":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.957cc3bf5.0_1620683847646_0.18555028479355817","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/fab","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6aeb287479015758cac683523f8e5f8982326543","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.88a33cd70.0.tgz","fileCount":22,"integrity":"sha512-qatfspg12c1YecKvlQbQLZkZoDhm3J0JS6jQ0hLPgOrgIH073nKIpT3fEUnOobTfNMgozXgsVzq39ZY+t91Iaw==","signatures":[{"sig":"MEUCIFJXi0Ch0LvPe6BY1DEKO0Whb3L/kOT1iN5rBMy5G7FgAiEAmzEJ7iXJ8Wx9bzSuhf/l/Su0xFTqKQsf/InS2PoYxsc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcs9CRA9TVsSAnZWagAAvvEQAI5MTNN2WpSFixVNKrOP\nDmVrNBkekiThwVPois/Na2JowCP7vc/312xZnOqZffvgO/n6oA29rrOUwkqo\nFLhZcT4BBOA62EhJSa537QQjOVuLWANaAxqa9mM9jNRW0E0HrN51Ht4bFD3C\nWrXkpPEcYvswJDqLt/EjR83r4hcmVxMS3Dr42X5ufhFDlU3EjIvNFGY0AOqR\nKRH8r7IItY//w8eeQXtVr/bSNTOtjyhjJjukIXSTKOXJ7Vt4Cgo/q3UBJ1jS\n9f8ZzhYBo9REe7/Mmafw2Jrund++o7BT2AJWQ1ys/SkljbE217+eQeFwNsUn\nXyOKbMisfRvNNUWvr9jz7mzSGSyVf7lXoN4oy7WjMmk50qStXs4q7HmY4qGx\nR6VZMDBTDyXStA4mCo9SFf9mxNtTGuUIuX5hkz9F9gXnYBT9rQFeOpUrCC02\nwzlfOcrsv3Wr1aNGrftxo3s5xFRYDcP6y102dBB/sIgbAPq5puLi9J2v8XJL\nN4Pwt/b7pP34zs37K4orb8U3qjcReycuW2mDSGEczQsi18ZQLe2Ajm3L3PcC\n+f//Egv2ok737dYXKWD3Qng8ewiKI8gCEC2wt5AqkZK0R/y0WeROYGN78iIh\n+RYL/6p4rnFnGb9pQya39sqw2L9Od75CrGnUVzKC5JoIzuAxegCB3xu89Iuv\nZDFY\r\n=ANqN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.88a33cd70.0","@material/rtl":"12.0.0-canary.88a33cd70.0","@material/shape":"12.0.0-canary.88a33cd70.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/ripple":"12.0.0-canary.88a33cd70.0","@material/animation":"12.0.0-canary.88a33cd70.0","@material/elevation":"12.0.0-canary.88a33cd70.0","@material/typography":"12.0.0-canary.88a33cd70.0","@material/touch-target":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.88a33cd70.0_1620691773118_0.828273300704637","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/fab","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"019f51e66456305d38c64775a2e266c971ba4d1a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.d20dc6dba.0.tgz","fileCount":22,"integrity":"sha512-UyiWr8Dc1pp27eFnyr6JU28a0gp99H7SLEFcTWPn3SIptCMeun3ePUyvlU4EhsHI3zRYfB63rvHBc8tVbilULg==","signatures":[{"sig":"MEUCIQDdoM8mX7pGWSebz65Kb5d73Ullrk/pf0ZjUa7YNMQkoQIgTaDrX3NCmAk2d8geyXuTHFWpp/0VYRxgNXD76y60zCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc7yCRA9TVsSAnZWagAA9GcP/j5UFOLOVOxVIvOg0IrF\ntUMy9NBuckkPHUw/HLSNJvqYriTRQezfjtNlYSoM2p3DkCoY5H2kRV/Nh2k7\n80szvdM8FlSCxRkF/aE01bjuwJpuWLXmV7pl6ueK4XrsxQ/TP1xn1IkmF5/e\nF4rDeE4AphdicQIvJY4Thm9p5lKtcSOTh487vaJndyz2do3YHjRUHrqHanVg\nMVGC3cRdfuMNIC9m96jcPwz0aMtgONl4u+M6cKfrWsl/Zt4oVCR8NLbyZqC+\nUyNC7MK36fyYX0WmrHmE6wj20nEhzZSUVBuVr/mcWlrB3wSeYf/a5LWnxcPW\nZJ92oCSEHSoBaB1ypEINylmG1eITFN5AkzeLULzqGPDARRB0AiDvyPcE+2VD\nvjExgL/PK7VZmo9Z/xZePDVcJYWhk9rgVtGvtkWz56+PgrfqXZkSn667t+2/\nwWWCrs5gUviL8xd3+INCh5XmHtKzWLRd3V1EDqoS52GrlZrmfT4vNv87ME3C\n17vgxOptugYF1z+8r99wIX2Tw6WW8SmrIP2ZHCuPDooq094ovko1SH6NrmU+\nK+903fpx2F2rIlCq4gm5UeIKVD/Mb7NYybvPntUXYek8rIO/mvpwxfApj70Q\ns6CGaca0l7oDP7hSG8HXX19/i+xQ++hFamzmhFQQi3sCVHxD0UQxoLTheobD\nQ8Fc\r\n=T2tD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d20dc6dba.0","@material/rtl":"12.0.0-canary.d20dc6dba.0","@material/shape":"12.0.0-canary.d20dc6dba.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/ripple":"12.0.0-canary.d20dc6dba.0","@material/animation":"12.0.0-canary.d20dc6dba.0","@material/elevation":"12.0.0-canary.d20dc6dba.0","@material/typography":"12.0.0-canary.d20dc6dba.0","@material/touch-target":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.d20dc6dba.0_1620692722228_0.4613884114761089","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/fab","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c9f612cc42f596b8ee73cc8787c0a6f2692aec7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":22,"integrity":"sha512-xUxplDZTC7uTVMHV9msfWIYfRATuNrQn/NMUEgAXtJjgy9rZY8IaoZENmjnmSSPxsA0tDg/1JuHy8dSBLY8CcA==","signatures":[{"sig":"MEQCIEgmnbB0m3K6VUHePvROZDUaXtcIgQtiVHoSqRWRPInkAiBHkuyKCuTC9hTmRpTyIM1L0jW8pCUucr1XVsvh/c2jRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdbkCRA9TVsSAnZWagAA5bYP/jkGv42RCcxxRSy/CaN5\nzREvGshFt3+bxPt14HpyeHuJiCoQWIgJE9jmGzAylXVWe0kbvH/HJCbKkoxy\nYjHtpBMBHQn2LDgmvfVQE3/fNN4F36lrAM4CaJam/brJTusHMPiJI9LSbIrt\nZ5zIedNhFsJc6RmMcFzZSHKQl9z0ScGNzBVFK5lBykXt98pKpgCm3II/0bZ8\ngIsco9j579+QtIYmeqXldDRjBIdfzqXhFzZeB2vIQKEzgvL4u4hYGe4DBRoN\nQ7sX1I53qq3UK8FIpq9tJFcvXk2PgpMHegJNVB+W7dih4M/OgrNjFAdFGQ5T\nnufscwNEgeRiK7d/FOkx/CCO5xytBXLbrRhwPuZvw4TX/9tOE6ZB7ukOSWMJ\nnaPRaWzGd3eO0xUd93NU3lDIX9rxdcnMgm1ba3lZNYRYISEnom4eAYRHI5Wi\nBCUy9PRLRNwvXOvSSAKIb8ROnFWAsM2yGQBCf/PSNnTrsMdsU5pkthvjKBDR\nV/0pIXLPy5QSGNPIiAfFpDbhwEO6XMoDXw3afCMgjASuWbrUdtp0qd3+IKCM\n9S6y3cn55Tvt4gExINOgcT8n2dl9HuTfheyree+WXuYYYXZoE+vi/HUl8lfA\n/dtn1pfKIfRah8TI/R4XBESflckutyp05p6FqOj8T+zjuGnacqLkBF+zo8qf\n6Voc\r\n=RJwO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0ce2fdb02.0","@material/rtl":"12.0.0-canary.0ce2fdb02.0","@material/shape":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/ripple":"12.0.0-canary.0ce2fdb02.0","@material/animation":"12.0.0-canary.0ce2fdb02.0","@material/elevation":"12.0.0-canary.0ce2fdb02.0","@material/typography":"12.0.0-canary.0ce2fdb02.0","@material/touch-target":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.0ce2fdb02.0_1620694755542_0.7040964026367935","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/fab","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.cb162da37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc83e14c7dc794ef806a3fbed3221173a86c68b7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.cb162da37.0.tgz","fileCount":22,"integrity":"sha512-w0S5RspK2vdPS2FDZ/qRx+zHLg7IMPGV3Hj9NH2gWsmODuIGLphjFCSs9LQryulNgXeboj4f8v+gV9U9w2NEvw==","signatures":[{"sig":"MEUCIHx0wwcbqby/VsD9HLI8/MLwehLHUnuneme316dYaX42AiEAjSrKJJAHyh0p6BIw4a7ZXvB+Noec89M3Ctjom2T3bx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeTnCRA9TVsSAnZWagAAhwgP/0cVgGxraWrd8mLtiKrg\nfWKHlmojRmAFEkB6Xn0NNe90cRf1kJQz9ght6Meu7p9I966hosAxmRuytqId\n08Vh9PVXkJqW/iH4Plg2DTaoahxiHWEnZgHo5QZm6FgJvtuKqARSquiTsk/i\n2WVToTTJsLppYATd/YSA3YuCrCXoSwNm1bsjvlWSUB2xP77bM0OiNe3WfM/5\n7OWIUBuEQofcX7u72BTRwijnv0G/sN/u9EBHEsU8ye+cUZmmiWeKA6lI+9Xv\nVxfg/DWNgu2cZv9VuLrNF7G2f2Uj+UnWhoYjVr7PumBBZosjIE+NFQC6JtlN\nleoslYVnXphj2AuVG5tzD7rSIHKaMN0QrMYZOJBTsHh4ByDppLdp2lCPg88T\nzPPAsjdFpJltSS4JzOET12KNTNuX4eW6fdBn/wkedo+WDE5xq5oui25VTWiL\nJ/4bdoNywCEUb90VSKSGBDCFU54nPkzAL/c1Q7AVKEKmea3L3bU+9vqeC24o\nguNZ6OTD2+49KUiTSw2fJTTlrdzG8TX0EY7URbP8zM5Cy+feEpiVwZBnAURq\noDRKrQg6qbY6LCWR0QOUxz1SsCZpOU3KEKcxgc1Ow5Auc4YZjkwhSdCdBJug\npWhT3iyxT8bDt43eEIzVromAxkn4/RiSXrZT5t4GFBKfPKxPOXnubjDAAbbq\nzpbS\r\n=hzxb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cb162da37.0","@material/rtl":"12.0.0-canary.cb162da37.0","@material/shape":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/ripple":"12.0.0-canary.cb162da37.0","@material/animation":"12.0.0-canary.cb162da37.0","@material/elevation":"12.0.0-canary.cb162da37.0","@material/typography":"12.0.0-canary.cb162da37.0","@material/touch-target":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.cb162da37.0_1620698342608_0.9331767627317868","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/fab","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40a5c646dc5034574db76697d44ef9af573b2280","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.573dc7ffd.0.tgz","fileCount":22,"integrity":"sha512-oifB7CzdOOgamVErDChvsG99NanjUnKmXfGu8twiIx/Hm5AdMVaUQ0BkJK0/HVvv4mbh5PMzziyFaFrI1YyjvQ==","signatures":[{"sig":"MEUCIG0jW8ipBArQ2K2xAiaDsJ+/grBg3PWvqgKCS0uxllCtAiEAmgMmW0x2wZvP3tzRIj+7Ib+UdanJ2NfFv2MbrLycQDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmelVCRA9TVsSAnZWagAAzYAP/jJSDnvvHMqO4NZv2stR\n0mhCGeKjD/95VTH39Z4ZnsDKkMYoQKUnIa1trE58gucrUaPA+IGtFjYP62nc\nZDjZY+2z2OwTjEvARqdjdcyHjAWV605Z8IE9R1yFK7D1ckf+LilmZLmf8U3G\nZMUxw6NDaL22vxV1c6zSboPNQG9KuPwPLfFmjCbOM6H0CzLXArKv/TJYgKj+\nLJlijMHZgH8nk+CNvH3gYHCKkvzq7qlk00QfZoeRn11wNp+rYwuXhpU5o20P\nqzaK3edwSf08MPruCOV/5vN2PuZ8XcgbAtnmF8IbJl/ogBjD7nKQm/vyEYOv\nlWZA9wFUTXN0B6vgBtHu2p/kwNBi9STMBEhqnICo3GJwfSYbSduUzcpzzXyK\nHv8doe/E42mJOkBHPAdj2pbaqUWFBNn9/D52XTilsFbEo9vrQBvpr+eAwCFe\ngwjAW0LKv2qXJ/ImykvnwYsV1yr/oEZhj7FyOkSs14R7NRC05Ebwmo+Z6dB8\n+ZvQIFb6KbnUWM5xgxkhj7O0MAQU77KyTV7oD4xdGy6XYjUn7+wl1IA59GpM\no99DeT+eptQ16ILko3P67xXx0DfXobJog3q6gOeAH/KTUvyM7ewyRQ/+GtGq\nybrziGQ7veQtbPNReMH7WpwCOhUk4ATh25mqmliu12e3OC2qO0TRmcJ3Jytj\nnx2h\r\n=NgGs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.573dc7ffd.0","@material/rtl":"12.0.0-canary.573dc7ffd.0","@material/shape":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/ripple":"12.0.0-canary.573dc7ffd.0","@material/animation":"12.0.0-canary.573dc7ffd.0","@material/elevation":"12.0.0-canary.573dc7ffd.0","@material/typography":"12.0.0-canary.573dc7ffd.0","@material/touch-target":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.573dc7ffd.0_1620699476732_0.13248079594502649","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/fab","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e8c1f86db11ac03de7239348ff83728b94ed385","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":22,"integrity":"sha512-ESSief0Uha/0i7QGeoJedMuVVJky6SkxB5UQUuxx8mJaKPvAGoHTHejGSz1N0xHw8CQb8xoGTnzgZkm6r04Xag==","signatures":[{"sig":"MEUCIQCnxyKZKn/MTd6SdBI6421rv26/eI9d09xZDFqmWIUTbQIgAUxpxDH9LrDEe3XkYZl5KwDCR59VQBTCElDDs3qrQ0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxHcCRA9TVsSAnZWagAAgJUP/iSd67BAMzi+XeR4jEfH\nPNPp2IMhMtU9zd2bQNW6/4/F6dc6p3017I+j1CNPiZAfxp0qsERj7hawrKch\n5ptprPLDEbSOxus7bNkY48pLdNcvqECXxqChTHLWysPWndGEoAy6rn9w1RM1\naJG8F+dAWSS5xG++BsrMGbywlE+Jq5soDAbbzdwsOJsZEZv+cT7dhzSmg0iX\nJwqgM0Jxr+co4OfztIkJtySZ4bSdwTNaE46JaivBrIDCIpWZYYu+7IcX1VYG\nrMIsZhjGh0sDKxU1/1eE0laSuDj5iEy+op3fDZNb/I8Ed2NDvTKlRRsprTlF\nCbFdoYO4gqU8MSWLQjfjuAveqFAH4Fyxav058N4Wa6pb3lqnw9H7IYuu50Nx\nsbdN98Vdwdsu8CUEia5SunoiHDSv17Njbpytm8DkbUduBNYg0q1YNxpgAJjI\nhhQJHrfYTTDR6AOEdairkT7AMTaAe+BBdfbDUJ03i9cZ5+6FQx5ooCrB1jas\nMDDsMmqvNX9qZvlk/9KjIAA14szUL3f99XwVHkAkP4YqCXp/ZqJ0WN/ZqcbB\nltBlbfKzD66GVBMVMSR6ChlJ5+nPzLdiPURF3F/otoEcStE1gUGeOxZe2s6l\nMMwnAvTq9z9Uu8VZoj1aJ4cnS0z3pGJqvb616PR/iHi/UYsR85MK5+W9XEgn\n7Z4a\r\n=Vu1/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f6ad3fe.0","@material/rtl":"12.0.0-canary.d5f6ad3fe.0","@material/shape":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/ripple":"12.0.0-canary.d5f6ad3fe.0","@material/animation":"12.0.0-canary.d5f6ad3fe.0","@material/elevation":"12.0.0-canary.d5f6ad3fe.0","@material/typography":"12.0.0-canary.d5f6ad3fe.0","@material/touch-target":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.d5f6ad3fe.0_1620775388149_0.19637513510847793","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/fab","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71040a49a35dfb7fba553ed53ce31f4a50bec6de","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.25751d2ed.0.tgz","fileCount":22,"integrity":"sha512-Fhp+OwJCTJCLRGUubSddwnAGrcZw3+qIot5sWzWHHX8zBN4vKjms7/7mpRVrPrmRjHakN2GDX/vBNLg5rZ0Aew==","signatures":[{"sig":"MEQCIH6AHR5ozQnwStIAuqFjNnm3jSI1xmVYGdgYBTRZgV2oAiBtx2rID8V70qoyXoXdF6SNY01/XzXKzTyWi9gP6D/P6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnABICRA9TVsSAnZWagAAl7kP/0OAornovgMGAo2qIwqT\nQ6hHMlmyH5B7I+LUOPwCte2h8bQGSbv7i/89Gx/9fKspdfUYacDAYNT5fW2s\nysvvHZcMR/hiOyJFhuEBeYdQpEeWhpE8C9aaDkINqNk6I3C7ow4VPqarMDTs\ny5YNomppawgfmTeYetdkRYaScZG0E6VZx8CBMcSE6F07ySyWEptl8XPuDdFe\n+d8/opP7EE0tcoqni5e2x9HUG8ZC9Kr6IXJUlc/XTQDEV+vm6yfuAkUfrm0o\nrpaKCesDHPWVPZiiew9a0Ah41pyRm8QXMTe7nrsia3trBFWGNjU0vonigkvB\np3L3gifhT/hki8LElWxHpP4iYZRR6BZQlCFrHUko44A96IOLMfT/uqdJrQrX\n1CPRJK5NZGjl11ZB15Y5JcgOJeYYpIwh8YrCPvrwItNWk+Jia+z+li2/S2Hy\n9WXF2ugZp689yhenXSlZlvlgKGsSEPREZaszA8Y8HB8bPehJ3nlPqGCM3KFJ\nOfEWrjyOxhaZptr+MEY2N22azF5TgMOv2Fzb7obUEoThijvkbhhOFGO8JYXD\nGeqph1zArRtKolbD+hlbSgqOwwi2cDzD19+LjzxyoFAkhR8ei5GakYWJ6j4M\nHDBNyzO+/zwl5ylFGHAHsn5Mnzp37f5KB/pTuNhnZ9APXmREMZZ234T8g49P\nuUvF\r\n=tsII\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.25751d2ed.0","@material/rtl":"12.0.0-canary.25751d2ed.0","@material/shape":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/ripple":"12.0.0-canary.25751d2ed.0","@material/animation":"12.0.0-canary.25751d2ed.0","@material/elevation":"12.0.0-canary.25751d2ed.0","@material/typography":"12.0.0-canary.25751d2ed.0","@material/touch-target":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.25751d2ed.0_1620836424066_0.09315274591880707","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/fab","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"039751340397af7857d8d06949b3ea2db6f5aacc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.a23ecb682.0.tgz","fileCount":22,"integrity":"sha512-Ct6v/AaIoiMvV1r+kLSsnUomqV4RirhTE9Tyg694dzPDKJdBAzYGQdaTAwYW3TBkyhYC2bLG+hA5jxvRBG0nHA==","signatures":[{"sig":"MEUCIQD2DiFfrJoTQzg2K1V6dj6n/BleDAdQsdoR7s8Ic6QP5gIgVfoFcakoPGDUmd6sc5s8x8CH/ODrd5XMN8LTjwzj6/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB02CRA9TVsSAnZWagAAMTMQAI/ipWUYwDYeIzrHNb8b\ncPUE/sRDYCi9pp3rkyFhVsNm2t39lea0fKCMynAUHV/cAq9jeIS7yh//6o71\n378PqHXG4T2Xp7pbnkW7ERJhnANjO89psI7wzOb0ljGGbEEgDpJsJqQUUvL7\n25jxV/rWum+rvUD32MoBZbBCyctnoiK/ir4LOgpl66zcaEDDiO9bh1VQZ5gg\nlkAmSwqddO/7UB1qWhzrlYUxIYikyCW5FpVqpbW/6FzIUYRfQLsOJPL/P5yf\nsDYC8edhmrz9mStd69mZAydHRgDtBWXHl4lmW3CSjyRAplxWvoSGm6/Ak/WH\nAASyjpvX8Nhdt3gJMHTp0eZp2p9RUF9Wc5Jkb+zXK0MvJEdRTO5i90HidhZH\npp6GowP5wNRgFLSUn+AVPpqYPQZvHeY8OTvKOXKyIaul4H3Pv9f9uB+F3sdZ\ninj3Kq1AW0fUuSg5tKHfXgyGKuC/kiSDCSBR7gloZxMsbth20aeVNA6XGxk3\n5kMMld5rY2YwvoDvLxu/PlcJ5ibB9aXmbkOLVoGJX6Ric5SVvZsQyQdD02zC\nF2RyY5BdodGj0ihkyXeUBZo35tmo6gJjgAKh3fo+hU6qV/AKO3QHq9cFpYvB\nkMbTbwMrmpnDSxECurrNBnrMdjMJVWzNtmzXImJsxBYecsQWTC0WdrgO/PLR\njK8s\r\n=+T6c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.a23ecb682.0","@material/animation":"12.0.0-canary.a23ecb682.0","@material/elevation":"12.0.0-canary.a23ecb682.0","@material/typography":"12.0.0-canary.a23ecb682.0","@material/touch-target":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.a23ecb682.0_1620843829570_0.6292746918045455","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/fab","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.33a954852.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"647d63f13c7ff31d73c3b60e9c43a4ea6b546c54","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.33a954852.0.tgz","fileCount":22,"integrity":"sha512-2oaQcTNsuulZKkTUFWC967nmZGYphHfRpW71LeQ4voyE3Szsk5n4tNlrV1sR3/1vlGaVnZnAg7wu32HEKSP9vw==","signatures":[{"sig":"MEUCIFoyhRiQ4TLq5wHziQTJz7WPFh9kmFXuvTVqz8oHo/UIAiEAyvGsaoqcR2DTWyai3JcQeJYXt6wQw8wn3Pbbzzp9wbs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUDiCRA9TVsSAnZWagAAeRIP+wSQtlGTBRIW2CTStv1A\n7tqLmQ5s6dhEltoFX+nHNcENRXHfFGNqeIzGc9JtD0d5KNgB1dUTIsaKjsLy\n+GLfrZaSWg/qnnKpJpp7SsFp0VlGmtyEMm8/AHFjG51m5TVfXhZdZU0NvOva\nfWCyEQoY79MR/BLIqz2NI/F6IYXX3o/EUmF+1VjHGnfdcPQcJECfY8lKa6Pi\nt0YqQW1XAWWFV13hAcD9UBdpjpTXXxJ/42ejSeJlCTP7Fisif0GRX9ZyHVVA\noP5phJTym5/+tJaTJ4xscrvWUx7H0UmXmUgC0npN9jRV/4txMGp/BTDsdI0u\nkVt54JTM57FgbsajmOeML1sEh8irLu1k9BWmhwkewTVtPgZKOROPu2P6qZ/F\n7EeEEsFtIULyZCYQGDHr3k/7ulLVdC3KxYfJ4vP5i/Wu/NkZgVOBJ+Kt8A9y\nXEpVd2UvSYsYx2nVWA1+JyQuiOQDgQ5ZZKAgexzbnb8UMd4NzSP8MCpS6Qnx\nJR/BXtXKnMKG34bqoZEL3dIbx01tJB3cbI7CnN/ifYthloCrOhdpN4S+i1ZC\nNnAaE5vRc1F/o7N46//H0ZwvYj8mqJ0SSoRcQ5U9SzyypoI+0jf5B+vMFiyX\nS3JnC3Koduir4fjO64iy75GAcjrCMd9D7vCWfVQWDyh3asJWQy+LIJtUoYlx\nJoUh\r\n=s5xw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33a954852.0","@material/rtl":"12.0.0-canary.33a954852.0","@material/shape":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/ripple":"12.0.0-canary.33a954852.0","@material/animation":"12.0.0-canary.33a954852.0","@material/elevation":"12.0.0-canary.33a954852.0","@material/typography":"12.0.0-canary.33a954852.0","@material/touch-target":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.33a954852.0_1620918497718_0.008478150398690598","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/fab","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.a4484849b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea719324307692abe5768f7889d265b58c268774","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.a4484849b.0.tgz","fileCount":22,"integrity":"sha512-eKthtxe29/tC7gSV7ZF1jeuOGP6F8AGmZuypBn67bnNNdLPgzklq1MN0zTbz8Ij8UQRDNndCySxIygQx7SFVJw==","signatures":[{"sig":"MEQCIFPhcqWN/9TyBPIgpdEKuTHdy5RUDgGfpAp5wEwimhC8AiBg4g0TROHSHqnNqvvRFzrl1T1DyGEetZ0GpUOi7AXrTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUZbCRA9TVsSAnZWagAAWa8P/3/IdqYU3MtGFAU9VEbh\nDLKajvU9tBL4dfdK3aRVvzq2w1vUyo7Jebpmmma9H0QPyH9Bhb2U6wb+yLCY\nhc8kHQMf0DXyLxjS6gIOS3c9pwLvNGTJe7hSGVkAkQ7+pDYXUnUU6maasbEH\nJHCIwZuZnVtLvhGlep2fAL2md9ygWh0W9dejl5FYUXi0KvLslh6wVIbjiItW\nxqI8ak6UHdEKuVW9L9L0O6SoISgu02Qb4PpyyrUTf35sl2fTKf9SMlxM8eZu\nkOdbMf/Git/9p5lrHe1CbgtrNqXt2i0Uhx+HbNc1nXCfHWkmAJgdulme9wBJ\nHk4608fjGFcyYVhopS2SimClrg0p8FEErQ00GpJcsPnNmHlTBDfOtgeXDpNl\nPkNChkySyaTUV/dKh1qbBC+6KZZU98X0ItcTgLO7R8r1kBRoF7o/lFWP425j\nTBw4BWVaYKPYqscwdXWypjMUFyko6ohhQkVdDERjRKzsJHJabG5hSjEyUfnL\nhwgHlTgyzEG0dFzF4/mdPpUNU/8PBEnuvbyYUDODrPNIuP65tONUF96yFTXt\nDodSbuDGLN3Hi/0dWhmQDtPUx5RHFRdly59soaEx7FHMsQaYwWPeuqWWlev5\nzu443uVI5Ty37Lt5AHR5s7GNApysKypw3mlFyEKEPsQ+lSWm+kkNgick4lqo\nCu4E\r\n=y1i9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a4484849b.0","@material/rtl":"12.0.0-canary.a4484849b.0","@material/shape":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/ripple":"12.0.0-canary.a4484849b.0","@material/animation":"12.0.0-canary.a4484849b.0","@material/elevation":"12.0.0-canary.a4484849b.0","@material/typography":"12.0.0-canary.a4484849b.0","@material/touch-target":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.a4484849b.0_1620919899026_0.03225232554965052","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/fab","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e31d38f69d80715dc3b4efcdf09bbb13b897792","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.b4c3f513e.0.tgz","fileCount":22,"integrity":"sha512-tIgW9cqGCf6C8u6CuzbbFsuXfOtVqsdFT5v/9ptOopeuJvkTit2Nq+wSenN/UmIhuYyeRXt2esn9amIND+MtcA==","signatures":[{"sig":"MEQCIDAz0YLJOULdZOW3S0OZnwNQ2uL+I5qZ/eOoeSKtx234AiB4/i6km8GEDfGry4d8zC0WaL5DYhUgxkavNikUmwrXHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU8GCRA9TVsSAnZWagAAVicP/0XjKnh+S2J+Qppz88eK\npxaxl656/ZGVHatMPvR9+H+brnZ8EPikXJkGMEwuF6L1C5WwfqpVeA64tLg8\naPsYnvCfRzcKIQt9PztnojiuBzuvVNhQTYzkClqPe02sUCEXqNf8CsxJZzuF\nfflRLqXDQuTlhGa9voFImuh0NHbGxOB+6hRl8IT1cKoSLy6LXbXasUpx/OgL\nlRVIMvp1c6yEHNCsrpAF39flsIdYiKliAFkavDBAkDsfO7nIEbCVHDHs/FIy\nYj5DqIo3ZFqqI6RnfsyhSvEln2t10DVelWqdsn0no+VSGuVN53K4/c8zS9d5\n+xmpYJ5vBmx+gamlDFDKN4PdoaR81VB3PfgGTBFbuDSq/x42mE7KhHq8spH6\nQzRnJLy83CvDbiIWTgnUahvsGbI2huWmsB4RrGZ7h1Rqedp4QGddhwpj39u1\nzJ2F3BvXCLL+o0uHx+6vW38oJKzWfv64RzULiOFuwx4N8hfBPD7GcH8C6Q43\nJz2uRFCXKsnLMl5Yz8KZU2NtKlBvtvEecym7fPaQGoh4Ac7LY0pRJpvymVtO\nHKO1VLRbSZIbtH+f0++yuNx8z0hcHF5toLUAf6zGs0Pl0iHjaZvMRxBKzTm/\nWbNL3sfgdOA3tASO9xkzbwqlLqhHBYmc5JmnyE70JhJ4M/XMGDgho1i2gnTq\nUy/n\r\n=Pm6J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b4c3f513e.0","@material/rtl":"12.0.0-canary.b4c3f513e.0","@material/shape":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/ripple":"12.0.0-canary.b4c3f513e.0","@material/animation":"12.0.0-canary.b4c3f513e.0","@material/elevation":"12.0.0-canary.b4c3f513e.0","@material/typography":"12.0.0-canary.b4c3f513e.0","@material/touch-target":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.b4c3f513e.0_1620922117753_0.21661765400210298","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/fab","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6a54342836bc10144879181646370f647ae9d34","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.1a8d06483.0.tgz","fileCount":22,"integrity":"sha512-pkL1bKwkiw6OKLqS5bBdPkWvI3V5xdX9mW4MqufxJZPlE8zJr6P8kAWkBKDyE2HWQT4qxfGmtDmZYO4/E+I8VA==","signatures":[{"sig":"MEUCIQCiF8o4QvHRw3tPljGPjDCmbMRTh4BBKQtPI0DJuANF9QIgA8Qu7Rf7YBhPS7ICqWmjvJSgg5UXKUlf5xwsYdG4kz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVBZCRA9TVsSAnZWagAAXroP/1eMePcFcdCr7RBsxRK3\nxjsbBRGRl4t7+Wh6tsIigqAZazchz3kyC4uU5L63alnTQaiXmbmXbNaPFwcP\n73vjXHbhyl5K9Ne9z16R65jqLNFDOTXzYgbR3c6dBqmWmhKK9L2fyzX1phZn\ne43sVWD4IogOBFfjE2SQoPkvbesUY9YqD89vhrtjozB+iJ6O+eMMy7iicPLD\nId7rZv7HgAQvagY1Wm95oW06S/r0oVlt9EbvKV6rzEGHcFYq5y4BGtzsxkJR\nICpPKv+ITQkuBGMUikWcCaiymDu5JcLg+BV/eeVpv+DilId9osE4X/8wYcpt\nKtdyY+ADkUopmK7Qb2r+nhVlKD1w5QSFWp1z5i59sfp2IJczlKtVsTY+pSxl\n+etJ2VN12QD0hQ8Uue2EF5gASjnlj5vyuXLtTTExG+bsB0QxMlcDWLWDHBk3\ndTOhjTwtq/pc/KQ7yVzsL+6wtEBmAE+z6I5Ac/tbtQbsv4e35fvfS1jTYl6D\n7uSL9V/7EDmq2Cbw3pOHReSV8EUL/aPU8sSSYGZxm/OUjxJqz+WJRjCH7rcL\n96ygqVBoKJ6ZZAikhKDo25GOpduCXU6cz5THfBg8dTN7FzMwpz2whU38kaDl\nLyofxX7mTXSCbkeiUq5rohwoo2PLRKWCNDCReG+hsTucOY6hchv5Ewlr/V+y\nrHpU\r\n=A33V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.1a8d06483.0","@material/animation":"12.0.0-canary.1a8d06483.0","@material/elevation":"12.0.0-canary.1a8d06483.0","@material/typography":"12.0.0-canary.1a8d06483.0","@material/touch-target":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.1a8d06483.0_1620922456630_0.030518017595442704","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/fab","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.8e6081836.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e29dc9ebad661c774ed434910fc89a553255de9e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.8e6081836.0.tgz","fileCount":22,"integrity":"sha512-ifHphVRO6Yzo5BB1ZQEC+PDvqIgoW6Hrpuzp1wGKGTVDFjkm+ew0SBibsZne+VY60LG8LiWfoF7/wkULulzOjA==","signatures":[{"sig":"MEQCH28h3AxqoQV0JwR3ip/9dVuB+Ax1ElRqu2hPuLvWQs4CIQDyhzkkiTRf8u3wRXKKyA2r5JR0pjhD0Wy8DGtQBn7nZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu57CRA9TVsSAnZWagAA9bkP/0BJNiAwxsTT4s+kyiUj\nwzLTWY73xrTO2sBt+j7hyBwMskIOJOTvkKZbLXpDsuY1mIU0oEx9VRTYWRu4\n8V358BRqgWA+PCtEHnro0t4HNvd0ublXRhweW0vUZ1br6P/lx6vT7rM/nmPl\nwYUSJ1UkdBmeS1i1YAd7Oy3W5fOFQfzZIaf/u521P8UCjUIWnOFRFiSfyJOe\nOlfe86tmZpw0cydkDnni3dZI+mer3WASQ46e8t2swrDXF1tb/RSasVOxHp9v\nHg2oWwEbtdMCuH5l34dyIr2Y1vAVZVfoeYxThbkeGG/dpw7S50PXuUdXN0Xm\nzp164JwpS4im6dqFEjUnWqhUy39OH90+ovf0r95d84mHDb/AbknjfY0xU3SD\ny3oVvAS2Kt+nH1lW4+gE1QofxWMy5pJqP+JaDvtUjOUYurrmE+UnD20cJ1mU\nP/FW+OMs73vIhcxcTbzN7wgyWW24pn7o8GEEJ8c2wJ2as2xVnauPpR6X+o9n\ndsi0gGoI7/9rPDJ69odgqnZQxXHbR6bD9GeqCpf6BYXvUu/+sY62IoKr8nKH\nMK9nr/71vi3buXMlZMrxE6x8TvhYibNpfFh5mJA4d52zkdNqyOjRA10o14wI\nZJv4o1ldb+3FkrYyzV+Rj/TIdrJSA4M+nZ25eqNiT2WQQTthWhNoKowAjBzo\nTTnG\r\n=BeQy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8e6081836.0","@material/rtl":"12.0.0-canary.8e6081836.0","@material/shape":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/ripple":"12.0.0-canary.8e6081836.0","@material/animation":"12.0.0-canary.8e6081836.0","@material/elevation":"12.0.0-canary.8e6081836.0","@material/typography":"12.0.0-canary.8e6081836.0","@material/touch-target":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.8e6081836.0_1621028474872_0.4361650825283958","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/fab","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3de6f34ed499256f5f30f62aecdc8ca9bd6b342e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":22,"integrity":"sha512-u2jb51/xGicRblBPTRnlt6yNVl+BkyawmPeTVWDRi2odrVzglKk/fQgx5bV4VgrYl0oC4wBwkAv7ia/ujpxeoQ==","signatures":[{"sig":"MEQCID0AC4SwCIe6lal7Y2HFApEU6uUtdzzAzCWxKNynctbuAiBr3M6ZsLGWs52lVCg/TfCt53AHbYUEOaCn0mKENBIBtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvGVCRA9TVsSAnZWagAAD4EQAIO/rd8b5TGFUCNwkduM\ntaFoDNxSj21jvSmfE2AiLaFF8/f5B43Gbl2Hwb3nLmf3qSHS7OoaLXhORMLH\nJl3W4sD54X1FhspVeECxR1DALz46dSL2BZfLNDozOrxBTMm5rAoeWVs4yCxo\nsaCeM+yW5eANy2gIZJMkcSteHkN84FbEYJunyuPWUd+TVZwhEuULZz3aT8xU\n52lQIziXpotoHB+GLSqtlmKbXDMiBDDqoMhA9lXs8L/BRUuq/h7wbTHRJpDy\nYNMgduPOAdEZPuGhqbi5O8ILhGhnk+MogjqIgHDED1sSyuD1SAmVNxXX+T9W\nenz1Q5QHBzwXcyhgGS6ysXUtaO2F1yWkPWRT+Rww/y0Nfedd1QdFSu6a5clv\ntJlefcPf9IJ3iGGGZrQAtH2uSsiOk4u9mOPQJm+nYkQvnwNFsCvamngjyDD0\neEor9tlwkOOWqECOFzcQ5vjWLbrd1Pzu8V26mi3e/ftyGAY2T/VZkBO1dlbp\nPX+IHhCwP7ffRA5RN/5JPAkhMfEZ3O953LHrtCNzMiSf3SS0qKxwzlZUJv7x\nfudfLlDK3UYDRN0bXIhXB+RikkNKdgcKW+mTBoKF6PnT4q00kWFeZK8aT4b3\nrr/hqBqqcSFYInFDcnMuciFoI6rc8RfmcfDuza7jBo6Ca3yrUC4DsrhXi0eZ\n+J/N\r\n=ohIr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a2b0f4cee.0","@material/rtl":"12.0.0-canary.a2b0f4cee.0","@material/shape":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/ripple":"12.0.0-canary.a2b0f4cee.0","@material/animation":"12.0.0-canary.a2b0f4cee.0","@material/elevation":"12.0.0-canary.a2b0f4cee.0","@material/typography":"12.0.0-canary.a2b0f4cee.0","@material/touch-target":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.a2b0f4cee.0_1621029269280_0.9998561647769839","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/fab","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a08c0d889edcb92bffa7525b13ab941bff7ad62d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.e8e39ad19.0.tgz","fileCount":22,"integrity":"sha512-ZXhw0fN8TL4NRT4+ubOPbng0sgMrYrNIEg2qufIFHxtXRVW91WYTtWFQsxf30gdmR2gpW14IcQxQmosF4uI/GA==","signatures":[{"sig":"MEYCIQDqs4KB7PrMvdUq+Ea5WMOyR0a0KTsj0T3tYp1MUaoN+wIhANTeaLWo3LaNUKWIPB27N+AQVFx+WEhQbruHiQLaA65K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB/5CRA9TVsSAnZWagAAW+8QAKRdoBjEYvQ52o3Zsu+O\noX8lMlhf4Gqgp8Qf0TMvQIQTkz1slJ5YLOf42mWEdTMn+L66vewt09J33qv8\nv5L+AHPKMD9V0uCqOqUu0ZQ/YEJN+RRm+Rpj+Dw1//K2lTK85+i8oWslSK4s\nPfaMmK9MVFTm64U1aC8BrKGo5c1mR1JR8SUNwh2qo4Ol4YvWV/D8xMzMVzKs\nt29N67IAfDu96Nq94tLHNJliJSaFufo+MUIidIF1T2wG1xHB/H1RPh3I7XtL\nr5Kz6I7CxP2wyObcowjmaZhtCXQht/G/DLJasalUSnxHw7es2LS2XbP2NFs8\n5le9m1QIRpipO5A4Z5PYulb1HIsQQ2AovmQp43Xnc9jINlzmlvFNi3PbS+6V\nfQhdk9k8aK02fzYf2tLir9I1VRv+CAqdHSryic05IpDiivEWe9aOLcr/JGgl\nfc3ikdZYtt96WrqKkCv/q87TMbq5F+5lT5xEDPo63ZbeYkK6hxyll37Nkq1/\nXk9N2rJQK6+JNyCiUTCB/cfbRzB86Br0dDtJjw6pX+z62zxoDi8oI3i5cXo9\nEe/dli2FVRRqsDX4l10hc/9ztw/lQL9JHMeiUny8ry0EBaBx/xKME+qUyY+T\n+c/WFkn2zOsV5urkM1W/aLtll0HSGY7KHTxXRhCx9ALlVNDYozIBdrB4NUkW\nQ4tN\r\n=Doz0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e8e39ad19.0","@material/rtl":"12.0.0-canary.e8e39ad19.0","@material/shape":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/ripple":"12.0.0-canary.e8e39ad19.0","@material/animation":"12.0.0-canary.e8e39ad19.0","@material/elevation":"12.0.0-canary.e8e39ad19.0","@material/typography":"12.0.0-canary.e8e39ad19.0","@material/touch-target":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.e8e39ad19.0_1621368825202_0.8128620657373526","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/fab","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd20139b12c0a29b57fe44c2500666d386cdae97","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":22,"integrity":"sha512-VaB3R8mtlFLq1EHm6YlZGBksWTi1YZvlit+FEVwumIEGxVXyXVBYCsEpGRyNpN9bV1TwhUOMBpr+qrfYmuGSgQ==","signatures":[{"sig":"MEUCIQDbQ1HX9DT99hLVmOZUDBpq+Aa17asP8oj7Y9vISoBH5gIgeeFzrhd4P8UICCuGwscyI+YBX3ABfRenRiXRzbDrFg4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS64CRA9TVsSAnZWagAATUwP/0TMhAX1lH4qQJEDYysG\nGXuxXvFm9r1qcNXidX6HmwBCh0vn0EfDlxQVo+b3/0mMV5gZc1AG1C+5kvsI\nozcaL1iO1MWdfJOO8lllPEvQJzwALsn3QFFjjah80m6DSlI+n1Zhcez/BdoP\ntdoXO+8tZCZdDDsvNPJDlrXs6mSN876TN1zR1rz3+kzgOdsGNrIUhg6CkbYO\nCWyvUQuvfN9SI53iUYLdl/6UZScf7yAEllUBfJehUlrFu9Nt3o9jnu1cDFB6\nd5WKjyMpG77qEwIvE0JwsmzmSsaPHpFF+bJUZfh+LzqJSNeeuqYBeCbrrqxM\nmJCBJfktbRHN4cSqVMLEUdmn8GGX6Y/6ntHV/7Bge8dLLVU/0pH24dw/4nag\nHhoLKHt22flDShSx7pYyEtUlZ0Xk3smEjD3oPHN/a89Dpa7o3DrSNmTU+GGc\n0roS909NutLdR9YWPmrCBe0ZtNWAwpaP/Ws4bI49+iOGjKkZYaIHa4eexu3Y\n2JyVNPLPZWtzF1RoRYRLWhVaJ3up8yTi+UtqIdBLdpst3L1FlW7o5kdzbSLm\nhvi0BEw78XPgc4tgpdtxUVJSJUZ4zt4Iha1mgmlqbRKfOxVvdrEWXUxOJNUt\n47+PspsKitfhUabZ65q6EquMLOpmGGma4o9ur8dO90oVWC0mdF/KysXdiGGl\nQHhB\r\n=jxJx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.4bb5eea2b.0","@material/animation":"12.0.0-canary.4bb5eea2b.0","@material/elevation":"12.0.0-canary.4bb5eea2b.0","@material/typography":"12.0.0-canary.4bb5eea2b.0","@material/touch-target":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.4bb5eea2b.0_1621438136090_0.32423336964807636","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/fab","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f74ef3bac5fdd0b36de3e28f8d2a3bb2d7444a46","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.ccce99cd6.0.tgz","fileCount":22,"integrity":"sha512-tlbaC/ZikU+cERSx7oGr2M1za9JwqhKnVMXrWwZE5WQUHtuWD0OgzQwdv8E/DvwKY7wMc9Tuvt3prSqPzJbapw==","signatures":[{"sig":"MEQCIDO79mgxanaZoA+3o6A2MOcPauEmjEyFf6ngkTTIB7KLAiByglFKXluenJ2bfk+S+6TeOA9FD3vY8kNKIRTEmpYb1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbP1CRA9TVsSAnZWagAAVlsQAIdZuiuzsZr+O8K1ATna\nVup/ZUYXPj7M4lDlwbqt3/5GoI8TohnivQLTtwJ4CmY5vM5djLJvG6K8eQTP\nJVmCrHyMHtfLBdvyq2VN0eZUjU7GHVezhDMRLRRrb94G4n4U69N2cp/Yi/jL\n+4shzrY85oIp3as4eQy55MKq+HrMgC5tOqbHnsA+SsStvhzsTv5B/sC9SI7e\nhBqgfRqpbnYCfW08mb8a0F0Y3Pl+LvyqgX4+6m8tyWUWhiTloBqmIWjHaM1Z\nI075q9Kpy5YaH2+U/kDw2P/L+s1JJRKc+BYdo5/0RCaXT10ZnXjvC4D01NEL\nqF/f5QH5FY7rF023+PLDZVBFAQ0ukEDGUNri+QYS2Cjos0N976aT9UB2Jlam\nWOySz4B3Zw8JBtDPI2wtOSfceiyuvrJ4XnW/9CjlOrNBkXtiNVl3lKh8AL2x\n3vtlbCUr7qufw0YgccJQ0ri8Ka75DVBTkqVpU4+pyU6FpDEzRwhb5pct8A/E\n6bzHsCjr4i7adOYwKPp23aOfG4PUnT1scLM6/iPV4Z0NFodHcHQHMvQwP/UH\nH98SAFIKHSF0aIj9RFG8c2zLjzUmSRU1/Nwa73KiSgSZMU3ci39LBKpvmUyy\nBXq8Xv2VcVF+n3pMs7Us/ecCKzH1PUwwJYWLuPxcn1zd/Zg6lpvD686D6Q/h\nCNQ/\r\n=0KCu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ccce99cd6.0","@material/rtl":"12.0.0-canary.ccce99cd6.0","@material/shape":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/ripple":"12.0.0-canary.ccce99cd6.0","@material/animation":"12.0.0-canary.ccce99cd6.0","@material/elevation":"12.0.0-canary.ccce99cd6.0","@material/typography":"12.0.0-canary.ccce99cd6.0","@material/touch-target":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.ccce99cd6.0_1621472245265_0.1743694493897041","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/fab","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.14767a8db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05813807bbf560df040ef7daf134460a2ac36910","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.14767a8db.0.tgz","fileCount":22,"integrity":"sha512-uUccfikEgyRwooegSeqzT66iKFYujDXdkDa5JbbkCtn1igygFp8X9TtWh6IFU1oIieqz2ghgGzqAoo6o9OZZaA==","signatures":[{"sig":"MEYCIQC3a6iZljbGsBDO2nIZ/Y/0muw/GKQngcZYVE6iELnOfgIhAJYHed0kgkCJHePbvP6jRkrLFOwf7birUVccbps43ZaW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsvZCRA9TVsSAnZWagAAf54P/2aUbftotesiboq2jP0C\nQ1bUNmH84ZRAUblubyYeYMzx+T5P02HT3CXmXMMY9adR3V+4w3WiYz6mVIlk\nnssyP2jCretDDCWxH4tkQReW8FVgPmyeMbJlRTmZ6wHAqzjJ8Oj4UbrBFbmB\nV8UfM6zJEQlz0Y+UquYQk37fgy7ATUGgNkzdG776+Un9DhdqUzASf72+pT0s\ngELlVQPLH1+DcbtBVjkRrMhDd/3FYStRqMRpuyyyK8C23/l+gDtKTnOiQuTL\n6WdswIMpfWg8UaVexm3LN14mub8J2mOuzt7FwHLNM4cla7YobhoDnvUItl65\n0RCKhSTyzmFgjsg41INtdFidgO3K9xgjTg57zBGzrfpltYX7A0MH+6IEydAM\nbcyu+MtXSpk5FI46FbKxLCwBuhcyXTFk6pDx1mG6cBrNQ0vR9UITFJB10rIX\nTp+cuWB41Ied7nBL1erh8+7Hb/0imhueylhCr9Uuvivt8KvOHQnYWJa2EM/I\n1bICUmLdWwqlNVVshJwm9hlF/fG7pOqDqIgPfInn23r+8ote47PUZ9mCDGPe\nI+VLZzcnqt9y3p273KHc6zf6EbxH6CgdZ92wOze06bxaKuGHdWLL+/9Msj7O\nlZaKPzSIjvT/EVjyicuD1+SgQ5I8gvWLYa5LWJJRiIW/N4ahIKRWEBisWUEh\no3RL\r\n=sYEb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.14767a8db.0","@material/rtl":"12.0.0-canary.14767a8db.0","@material/shape":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/ripple":"12.0.0-canary.14767a8db.0","@material/animation":"12.0.0-canary.14767a8db.0","@material/elevation":"12.0.0-canary.14767a8db.0","@material/typography":"12.0.0-canary.14767a8db.0","@material/touch-target":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.14767a8db.0_1621543896593_0.08135194919782895","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/fab","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcb7170dd61757ee387bd75477ca7a656f00259b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.22c6dcff9.0.tgz","fileCount":22,"integrity":"sha512-o/Llx4IvloqydUv3Ll61mIsfzkgQbl+N18ViipwwRwFhL8IG1zKwUztqiAL1RNOpJG+H9tHcs5IbR+yrZckEjQ==","signatures":[{"sig":"MEQCICOZ/jMKLFucZZmrLmpVtdwoUSetVfU14dH5KpAsS97OAiAQT7+06CnoF8mkY88w+p8vEdgBP5kilUY3AYYOyTpBag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8PzCRA9TVsSAnZWagAATKYP/1/hLYj8nDq6aSV0z4oV\nfIXKvsrIBckTLtzLZcxbugtV5Z1+43TbtY9R57mNOQU8k+PisYAPfoLQkcX8\n65OutQmCZpbpAoVsWPA0CeCCzgUiRHSQuFwjh9fPhMfz6i43Xo5gdNGtiVRl\nBfCvlcW/MnSqKx6sXvleYpuFKtZlXKS3W7qwEHLtJIQgci5undkgLOhR4F1+\nikJEAtVGbaIfFkTQHsNl2YNVBT5/SYrhZZZUSuQFWjF6VSTnWRlrJSC8CBRy\nVwsNR8LReltPUxzZCevScnj349QhKSs3vkSZvTSaXNCQikijbIvxK1MPuFv8\nxhXpe1m45X+dDg3fB6YS9ZxCS38yRK80qpypJWTuVrCpxOkAqW7XWH4IN2wM\nYnFhUAeQgWXxoUGmCnz4FaYT+0n2QcDvxRxDlPxrAJEDkmDOsUq5qIQQtvnm\nLwJJYWj6+D+x4iEd1uj2DUr2tVIqXLut3j3MUhyNA8ubR4tNVQiqdG4uLwdW\nxQ5nahL99rK6vHVdOB28Yj4XW41rkWIsqmcsTrXLJlvUbfu6WdDlAGcrnyPo\ncDt/2Nv06Hv1AjpxFx3ABZ44xWzNJPmVU65blC7lyYAlNUKN/ceee50wsuxx\nQECLVRA8CS1cHddkElOqCQQqeKp6ZdrX2u9SoBrXtB3mEM4AbJZkqhy6uUEJ\nxWeM\r\n=lBDp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22c6dcff9.0","@material/rtl":"12.0.0-canary.22c6dcff9.0","@material/shape":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/ripple":"12.0.0-canary.22c6dcff9.0","@material/animation":"12.0.0-canary.22c6dcff9.0","@material/elevation":"12.0.0-canary.22c6dcff9.0","@material/typography":"12.0.0-canary.22c6dcff9.0","@material/touch-target":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.22c6dcff9.0_1621869554936_0.9040049020242202","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/fab","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.fadab3372.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a21f6470f1e6354f2db964ae1d77474a84fe6352","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.fadab3372.0.tgz","fileCount":22,"integrity":"sha512-CBTkNT5xDbx0GHDof5hb76yJyBLc0DmTLfZvcSJTN2yPnxg4nGwKmV4uaa1CCqbbXecOoVRJudOXDxZfVEyunA==","signatures":[{"sig":"MEQCIChL8GVJQAu/0Hkru+o2h3gYm9/CR32Nfj4K0wNdzHbWAiAjHt5B9Ynpl6n1gw08+Dgg5+UHsSBR7pufy/nR5g90vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq88DCRA9TVsSAnZWagAALyAP/0AAUlCN4elVmB5nPMaI\nzAYYAjIvlbVAsrRL6ZV7PBIqyNTUGgeV/7jsozeltfKGSrOCkrqQ+wQNvipT\nJ/JbTpmdKY5juPOj90kC1xOxv0GU8CH4rXGKzuBeRfrbhPtolE6Fhq9B83XY\nhCJAWrpOsbX2mbTOb/YYmQXEhK6BGXTEghzXHtqXRrd5AP7LCeYIYRZFa3CM\nqcDFrj9twrKpsAtHyvw1d9U8UzEi/+Jf2CLluOLv+1ospX/27v1JBz9BFnuQ\n4eAiDdMlIxGAtRC3D1PDvJOYSa4+etiyy+Rhujyq6SIOxkIothB5mcy/a/ZR\nfADWnWkojUWfkzC0aJlEk+/Ir1CK67P1+rKu6mv4jcfs2YePujR51B9RzoZg\n4OUAcALKVkByxYMNzlW0WFlUTigIP1+eGL/QhLMbYEvbQ4GCG+LGkq+wWwPy\ng/XMegPOWklP8UMm3PCfCJG1hp3aQatA4A4ZaoGl1WEiRf77AMkOSOaa9UFP\nsFjiRqbQR+UzkwmGdW6AOjqQgScF6iBznMc+jFWGGeIwhkjKIIRhq3r+LBeh\ntJ2QyhJabrSgGyW+ROqUdWZnFVQa4wUOF2djdLNreVbw0DbHvFAm/D6q4Kp1\n52JSkvJDuyXtWmaOCpGceizsvEoxutcI83B7c2YASRjf6mu89mvK2U6yDW8h\nc1FD\r\n=TU+4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.fadab3372.0","@material/animation":"12.0.0-canary.fadab3372.0","@material/elevation":"12.0.0-canary.fadab3372.0","@material/typography":"12.0.0-canary.fadab3372.0","@material/touch-target":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.fadab3372.0_1621872386988_0.26640589534441883","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/fab","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f819c14af082183e1d8e4ff15585a5ce549788ad","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.caa73aeee.0.tgz","fileCount":22,"integrity":"sha512-nsb+jEjKJbr4l0ygrJA9+tpFEP5Dt2s6ks3+t42nCZKo+wFtd0ho+0LU26sXOFhfAQQ2ZdK8ilzP1oT4vxpacQ==","signatures":[{"sig":"MEQCIDkTfnJcZc0t21eqEsel7dVzsDyWrpENu5iYgb4dg0kxAiAZaCCjPO+Rwzultecu0VH0+o7NcxQQpQZ9lo/4Sf4Kbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQZmCRA9TVsSAnZWagAAvs4QAIqpBpT88Pf8mcZrtq9u\nrbxUAF999ZkUFUw5kX4qTwSIXTpTrwEnnX5L4N8dZXApWap3tfSEIpomvGcK\nlSS3zgj3lkkoXr2IzBa3R1zx8YKkeE8KYFiKaCP/+GJ1KvHkBlJMZa5DJAIf\nZWAe/AMowTMzogIydk9LV3ctBM0XegcH2UHChj4DYnED3GRTPJ4D3oH6G6qU\nZ0iTeUpHYwPUZ/CdtVId6T4rikFxrSIAA+g8vplZO58fvoaiVpNAugOHeMsj\nb6GmHF5rBaTXaPNQ+iUnqmaaRQJZ31aFjCEPBxEeLIzn6BTHiSE6pxedJrOA\nDA8pucbK9ierzpwjgata3TYiyWF3jvKgstT/y61KmtsWoj+beSrDd5HbK5kx\neaQztnmc3BaOwjO1QzJDfmpglJ5eAeeLtnFdyATb2WfAig1b1QVXqyJIXnU1\nU8qp9XJWnxBPZvbGKeMLxgpQ6AXpN6pziiS/ol9LQbcfuvxLDTXiaXTJdwRD\nYtfjnyN7VmAbb/M+vroqi5WbKMuOf07mNzOyTWTwUxZfef1rg+T2MIC7MwSI\nII2njISVmzKT5NdJhVGSrnKrAkB4cYIb/ZX4HgtwKhNohYgPltdb2MJRU6PC\nghi3f3F0eMazbxja/RDOR9LPGsaH/6MfRwmd6w4vzYjO20xfOEe75XS3FLTF\ngeRx\r\n=Q6pW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.caa73aeee.0","@material/rtl":"12.0.0-canary.caa73aeee.0","@material/shape":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/ripple":"12.0.0-canary.caa73aeee.0","@material/animation":"12.0.0-canary.caa73aeee.0","@material/elevation":"12.0.0-canary.caa73aeee.0","@material/typography":"12.0.0-canary.caa73aeee.0","@material/touch-target":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.caa73aeee.0_1621952101649_0.4336359045338587","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/fab","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b676ef7e4731c376eccf6b3cd49e7f27b59dfb82","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":22,"integrity":"sha512-ZETB2LTdPZuhyewEzZSxgVbfuzGT2djABWjbLg1xHQn8lzo2nAp2NWvI6CfHGOGwLXHPX4hDdwD2V1OOirdZPA==","signatures":[{"sig":"MEYCIQCc232KUPOiClu0Y0POw94pLKTMwXrlxEUkV6ZUd4oUAQIhALKYOhxThSen1CspgV+hjdwi2P0ZKWMpNcFbHEKAuHCz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV+wCRA9TVsSAnZWagAAmd4P/AvBE2xqFZnO5UjRQf1E\n1H897HkhkZloG4MUmiDlycnqBo7d2GuOluq3UcK4ZK3I509PPTnA+3aC30NB\nAAEO4V5LnjTCOvmnTiQlEw3yEtwEuagvGNF9sDzOzgVm69FhsVC1d+tH2/xb\nCYa5uIk4rre/NW4ih05881xkrtvRqirS4B3zVUxIgQeOT9FdDTF/iDChVcMp\nyFpBRvoBU4r6Ty2eKc/RwOmKhUAmNS+yjC58scF7mR+HA5XAUr+Mu3bzZaBt\nqZs13O40o4D5PY+mYU0CxOJiL3/JaqzREocDToONodFbt5Q2NhiEVH0yb3/8\negu8qub9Xkjy+EiqDC14/H5i4LEKreFe+3EI8xLR9RmpdartRSV9wdT2Vj/l\nvYGf9AiKk6YO8VMqU43LS3FJHZZvTx3nB4a9th3a609+gbETphRqXh8WEezy\n6Az7fAyhBORpKINYCFoHcLVe9wsQMmA5hbyIEcE9JlsMm2RuxEMwDqi83zal\naq3miv452oR3a+gLJ3d9hNMywEtozxNdD9pbunHnvU9faoc7Vuyz+f8kGiZv\n9KbugKpHs8uCU4j7u0fznuZNwdDGgI4tdS7kxGFfc3ol6/a1QyirizbxELdG\niILAaJZOLyMazATGPmaPCMJX7Wgxgx++CZueqxPo5pxZOgUl8wtMUUCNZbrw\n0hva\r\n=oOqp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.ec31ae1ed.0","@material/animation":"12.0.0-canary.ec31ae1ed.0","@material/elevation":"12.0.0-canary.ec31ae1ed.0","@material/typography":"12.0.0-canary.ec31ae1ed.0","@material/touch-target":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.ec31ae1ed.0_1621974959698_0.6429588597000551","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/fab","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.8530d3514.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c377631fe69d1b54933d38ba635f5347220ffb0d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.8530d3514.0.tgz","fileCount":22,"integrity":"sha512-o9sXajKye6amfyVQAQQd0e1yZx4BcNnWuruJTvdGPMRPDEZdTkTlzRiWmlZJzllkOgxLprGZepnT/cJ7TCa9lA==","signatures":[{"sig":"MEYCIQCgc2E1H1sQ57xNSnPsQObtKC1NFlDElvktS/EYi4wNVgIhAI+zWa/kMD6cMJDvZG8mqYrCfuGchfyABvuOb0GdLdcO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8NICRA9TVsSAnZWagAAjG8P/22FyZWVMCa8vmTlRM9M\njo/EvHYd6XdeDTInpFpgBwz6ciclsZl4OYjFCtrTPeGcqpw0iMtJj8AJsr7s\nCbYGgqZJHybNKn3UW0D9KZS28l0omZlmpbQeIlMabKnKO96q5aufex4vGFI2\nDY7VAkeOXXHcDNb42cNacLAYyYKp6WeYPVhxeXxb2SGX7Nta59Qe5IUjj7BR\n9gEDVz3GU22wnK9hv5PUtWh8baGsJMPpxS5EIp4XcsgifQZJpp49i/FzkmHG\n9Txtg8kj1Zbl6tOdgaUxOCUFJjpqMqUSQ2Yl5/3H1RMdnNWanwaj5GHfEvlW\nNBsumGI6FHKkt+gd7UsSvZfJqk+EwCXFnxwynF705yzw91sRuJ2q8nIVM26E\nBksAhC7Ga2ubcjJ7eER4e/86PZjJjbFwVPjL2HEYdqCRPWA1uNAGoRPBuC8T\n7J7uJkqyyyqCMUcCiHkoQKXIwioIaaMxKgJc7G1RA2Bh1cgmBCX57FIpSqY/\nFUM+5tL7o9EW7LLwFz6yAKPsz0grvV8A59M1Z371/ihpAzQ7gpQcpWAHYsxN\nKsqNhzNITY0MOd0vhoa8BG4SMYNNbkWOuDB5Z2x12xXc9B+QG0VQEkkiU6Lv\n5gGUG0y89vMWqvyYF5PXlq2zEy8s3LPgNT9c710h6ad279zuem1jSanSWB3m\nPJYF\r\n=hT8p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.8530d3514.0","@material/animation":"12.0.0-canary.8530d3514.0","@material/elevation":"12.0.0-canary.8530d3514.0","@material/typography":"12.0.0-canary.8530d3514.0","@material/touch-target":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.8530d3514.0_1622131528372_0.33235615287050524","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/fab","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50f2dc4f78ac6d44dd0362224b13e431ee17bf38","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.00b5899dc.0.tgz","fileCount":22,"integrity":"sha512-SPFOanA0YAXC5Mvjp0gUXamphzfFzzd4WRP8Zk1qh2NvnZxtIiyD9gy+yJJMSau3YN2ibTgdreLfrGONz1CWYQ==","signatures":[{"sig":"MEUCIEr4SCKd0JY+mn8r+PYBsqyy+I9SsjMJ4dVGhbdHrBkHAiEAlKmr8llJ5YvrqmVS46wGjTaE/DfcpOi6X6MrAvJV2O4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtriyCRA9TVsSAnZWagAAAYYP/AqZxIJy16ifZEjWmLgb\n6pHbwRFuCPEOjNqIA9Z9got1swArMv1l9X/KL7ohUvZ52h4x8xmn3ySRAIru\ngf7yW5KJtbgvAmdXc02LoY01yGSQ0mtlyNkZUSHMNLqUOqi9OxnGFRZf2ycj\nNAfgI8bhhCOWDq4yFsR0qLKmTyqV5a9U8STTQ9LUd0l/JUowWSt0yyPcYXG4\nIxoVrYgYw87+WTNwaR1OfBLWNzg7Py+Po3LLFpefWzdPsKriEaNGyM1flR+H\nwPbRj3CJMhmehMZej6dzuC3ulRKWcusCOytY+lT/logF4+mjy/xVFulB7RFw\ntDl13iDYwwC3iSce2vgyo0SpbV3xWNUmSboI/yMGsl9RG3rL9bwAsJ/exyE/\n1gxo6GstiSml/PfErc0R+bG4SAefAMhijwVKstBRmCqSRfReeVNHQynhmaIO\nXlYMDB+VyAQMlBHSzSIIZM0V94+y2ClHlQp/FZRlQj9nrKveRQPl7bJ9Ylli\nnND8qu7lirAO6+U2cT7XyXVPjn1u4dcNQgmEMVPrYf99631KcnW0UQzDmWuV\nX0i7HjHZzFODiwNLCp9crO8PoekRWrXMgvYgL311B15+lgGYwR2bmThOq5ss\nrQ7asLTvuFrSk/I6sCHrf0/lsho5oZQcRLt9pPoiMw0/80PE8RT85vLp7Xqv\nOCC4\r\n=/C3j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.00b5899dc.0","@material/animation":"12.0.0-canary.00b5899dc.0","@material/elevation":"12.0.0-canary.00b5899dc.0","@material/typography":"12.0.0-canary.00b5899dc.0","@material/touch-target":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.00b5899dc.0_1622587569631_0.6048647628007584","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/fab","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaaaceab0fc5995b82c2cdf7e091b2c4e136782b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.f1525ea3e.0.tgz","fileCount":22,"integrity":"sha512-PFMIAL16LGQv1nhNx9qiQKpr1PRUHS0Mo8d/JVOeUKzDtatKKth+uDNMtdjDkE9KoN9Emz1u8LqW0odSAFGw0A==","signatures":[{"sig":"MEUCIQCtWcrK/C0dQui5ua+elnMgMUrONZG2PK+2EIwqOfsrmAIgCDOzXB4UY5DUcBol/NAjk96PidnE2pCPN2Vdb++MA5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN80CRA9TVsSAnZWagAA2p4P/1UBp5JATw3S2wk8lvUk\nQRKSoqsPK5udoBR/H6W3AIGsAIYyM8OnkkzSWCpTz61WAqlW2/4Gb4vhqO7r\nbJmYxeH8cJl6eRWc0RhPT3pmSOYDAPXecp0EVV+3J1HO1hNdFWgpE2RLxiLW\n4Z3QDlYWCkL+wLolllTYe3rKytceQOahtoA/RAXo7/aYy0gNhf29UoY5c/iL\np0OucregOOWwyVVuMLcDHWjqtLvcR8WY+vf58XM7l2UDPw8i4A3pl7PtvFjR\n/m8mAwj19pvUEzlXbgL/CU0ngIJxJ4BuSSQBna+MGPSP28Ifs6sjySA8G14J\n+JUsxAU3FPNK54QqaRbbaVolVVI29t6NTx83WYWa3/AA28eN8s8/Jmadt7Kw\nMILfZZ24DsXnZu5sfUKcZm6coBlrN+g3zYYww7BPaQK56yR+8xB3zMxtOBuF\n7zLF77obtmKm8Q1DzBMdhY1W9/pZvUcT9wlmNGXqj+XoI3TRkMD09NAaX/cV\nidVInYo+J4LSCvM8rYTlASZechwXRF8sC89iT/1bDolADH8pEn9YPn9ARGlM\nwXH1BnjYPG5zoE6J5+mh7aJEBgv5ftNI8x5OI0/OAyH02YP9jMBmg+spHwHt\nhl7KIcd+iu8j9L+pmDxZEeM54dJooz/U5q1SddCBywnFCmn/WpyGa1kkrSG0\npuW+\r\n=uavo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f1525ea3e.0","@material/rtl":"12.0.0-canary.f1525ea3e.0","@material/shape":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/ripple":"12.0.0-canary.f1525ea3e.0","@material/animation":"12.0.0-canary.f1525ea3e.0","@material/elevation":"12.0.0-canary.f1525ea3e.0","@material/typography":"12.0.0-canary.f1525ea3e.0","@material/touch-target":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.f1525ea3e.0_1622728500552_0.6614972797794092","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/fab","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.464a00286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ec675a28c23e70ebe57a2aa807d4d17404c6549","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.464a00286.0.tgz","fileCount":22,"integrity":"sha512-c+8iV/h63aW8CkeUfXYQDB/nKiTeEOohwhrdC5pOL3xtd9c7Llh63TaR6nsGS1Ygs4rRPeELsjVG082quP5NTA==","signatures":[{"sig":"MEUCIERphcvYNew55LXb3nzgzzKi3ZUG5N1PB+/sCvrl36ZqAiEA2qr/8VCkuwSCLEd30oBd+7V3SBLbygfjpGXLwWhMRjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOtXCRA9TVsSAnZWagAAB4MP/3wpuXCNA6VvNTYRlNaM\nejhBZmPNmUndv8t9EJAXotmh0MREtHn5JQvzP1FyvWzy+IRd4kqmbkUhUHEv\nHaHUNTntfWqyrnRL1xZ71iPMQMb+g+wA1tnY8BenOtZoAXtUclPBH6QiMTNS\nOmg+2hsOtZlFeNqwwoVUrAPh70G5Tv/c4lTCfW6unRPHywT4qchBPJqi4GH1\nLulqxOPqNMn/HqnjhLKRACpBBRrsCoe4rcG4ZqJy07QQYowBVznh7SN9evJE\ntZGiGxMcwFVtgm6mO02lemjhKsU0Gst6D0bebrQfdFVPkCWhTxw9fwX+nER4\nyAlU7OP+fLdHpkipHCjZaaFnurKNnj5ZVtTdcwCcpZV9ROnWTCiAGgbGHbs3\nQYIBXuVdcoBdammeqMx1isIgF2IN+18MDTDgAwXVKHWhtr016d0pgPU6nXxW\n7oWoMlIExfl4u+QBWJapxHChQfo20X/4v+t2TQeoBPXwvQkxyI8ASoewjUil\nLb4vU+yliJWxb4e+3LDY8Stcx0sJQwzzq921Nq9yrMkh1VxoWyOUJYiHIYc0\nB1AUAaosBX14x1GQTGTUW8Xqn4GTIpGBlBT0JFO0eLxYJq2TbTI9Xni1To2D\npm3T3U51FHKRf5qzyvPCQ4B9gaajVVC2tiXO8JuqcsOYFRpVU2xtLbShp2un\nzozo\r\n=JBuY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.464a00286.0","@material/rtl":"12.0.0-canary.464a00286.0","@material/shape":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/ripple":"12.0.0-canary.464a00286.0","@material/animation":"12.0.0-canary.464a00286.0","@material/elevation":"12.0.0-canary.464a00286.0","@material/typography":"12.0.0-canary.464a00286.0","@material/touch-target":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.464a00286.0_1622731607399_0.4588515067133363","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/fab","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.474de7878.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c865a15c44a0a28fc1eab68cf30d979a3d9b2ec","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.474de7878.0.tgz","fileCount":22,"integrity":"sha512-1n3oT9glPkhQexc5lTDPoa+oEC0ewknOXcHgd5RNxekNzXF6XS9Zyl4MjpXw3EKUqOk0gYOYWsu7IElQKPjsVw==","signatures":[{"sig":"MEUCIQDR59PUEK3OtGR72f2n+q1Jh2UNeaqKTzDvLApln1KWMAIgDut5j4f3K1LxcO8QxSkI009K3Y0il51ope4+Yti0S+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPHsCRA9TVsSAnZWagAAAJIP/RFH1fGhsfmJ/U1Y6Qoq\n+7RG4svcOasVjw3CrJsZq3yrumN/Y875vGHqOF+D0QQ1JhJ2zeLM6Uxadnv6\npJx6yKQNkWWmC/oAdUJ20RaYfL/izerY/uOO6mctYnwJK0j9WokT3427b24l\n3TDW869I5hmbsnwIsJs0gi7F37hQLEMgUv9xkPkjYC9l/IRGe+eh+D6dOkmz\nCEwE4SghYo4cCTWEKN+J17ZAola7sm0VCiGFmh+j9D8kr5AXPoBcaD+a/MuR\nuuruR9SXEHk8x8Z28JdtB7DVC1+hp9L/bvTEe1a3bj9CTl6J7l/zo0nuIn2F\np8V24X/QHGVRPL/ITnlUvJeDxXhWxShrh2kRGOsXgoy4xt6SEVsLnFSNhxpo\nHZOm0NrkSnHyGGtDjM/7kuAcBoV2XZtdC0jeMNnOQQoOsofS83e5i+RdIfTj\nEAqT7FpBCmTVQNDLcx+cGhnXYmdnW9+AkTGumysEFA580RPGHuPSs/HlZB6h\nxN3w8dV7w18V6xYFgt1zsUf68b5FoY4YTwlP5kBPL73MbYNbIv/x3hc+MdrB\nlpmASMHcjOI9l2zciS16KC3XLJtHR88rIRedWsDnE2NCCIcp65PqYKmjrkXu\n/hcvLmXXR3OrS3VZfXkmoEilHVTx1ud7tBzdTGXZPJ+LHCGOETNhco3nzAg+\nliWP\r\n=GXUa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.474de7878.0","@material/animation":"12.0.0-canary.474de7878.0","@material/elevation":"12.0.0-canary.474de7878.0","@material/typography":"12.0.0-canary.474de7878.0","@material/touch-target":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.474de7878.0_1622733291795_0.8647503102127643","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/fab","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"086185291bf4ce9263a5b29397a178070a7c4e7d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.b87ebf74d.0.tgz","fileCount":22,"integrity":"sha512-CK+61xs6/zyrhM+hM4jbj8gRfFZqNt6nHyNs/NoJR3Uf03k7L192sTVryQ/iK/CaLXTbywX6i54svn9GpP7jVg==","signatures":[{"sig":"MEQCICjhtmxVioOl6rjRtHRPydiniUK6xNBhKWCFC+uSRrh0AiB4Lod+n5wqWzZOVKRrNn1V4ILOM9NU/QH8hPrbrx/ggA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRWOCRA9TVsSAnZWagAA30IQAI1LLB7qFlW4V308dW4b\nqTB6Oaf4TqaDvlegIwJRyw+OVBJVOzaJY6XbnhaAP5sTaYBuZCm50TvjvlwX\nm/JLxrXobCsa2/8hMiULl2gqwIu2xdyIHkuhgnn7DTRzCcK0mC30Jcx9f28E\nTyHgRjP/fb9QSCr1t//fExyY6XoCSnRiOs/U3lvqZUd/nX3oJBIoFIZs8325\n/ZmHYUnCyAGOu8DEUWV9Bf9hTBjVEHil7gw4P2gBZC8NdfaaFpvNkzRAD2hr\nlRWFdu+QOamD4h05CJh76Xw0PKw/Xnf3xT/9JhEPfqvJw3viaRCXs2fZk/px\nUlqzgt+aSBsEh5qIiO6lZJ1aVoSIg00F1DNQ/CcoCpuREbvpsNyDrOVGlkEB\nrv6bjCBFYuC11RZVWZPjsWOE9xoviaC+7tjYdX44Vv8j6dpOJw2ylyVzVU/z\nphSw0p1dHYdB6DLBy98mVxksP/1VndGFPq+wBeCiPkeVbKxJHIbzNbX4cOhv\nUfh5jw7WzLjZEOVXHm0Imc3h8VP4Mkg6rLTd9gvBAKorogp77KZsTjvxNEWz\nlLz3fqoVT+9inVjjt4VXAmx7hn5Qzy9rlRiVbkcae5t4RiNxQq4pcjtQORsK\nAjnxWJAhVcFzDTdSoub/TBHqZwDjqWkrV1+Lxudfoaq5NjeXlsEEyfpAa28q\noBXp\r\n=53/t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b87ebf74d.0","@material/rtl":"12.0.0-canary.b87ebf74d.0","@material/shape":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/ripple":"12.0.0-canary.b87ebf74d.0","@material/animation":"12.0.0-canary.b87ebf74d.0","@material/elevation":"12.0.0-canary.b87ebf74d.0","@material/typography":"12.0.0-canary.b87ebf74d.0","@material/touch-target":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.b87ebf74d.0_1622742414135_0.49576004480411684","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/fab","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"902caa3140fc4432338c44d6d7de2c22f40f97af","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.2daa49b35.0.tgz","fileCount":22,"integrity":"sha512-TUmEQxR86AEXNbfjfDCcg7Kh36+KvOEQIz4hRvLIIkkXV7mcVdr/Oqg+S74t2K/aaAxdvjUnHZsOUT0PD/zcjQ==","signatures":[{"sig":"MEQCIBJRsv3pLNsCEp8Ebs2q8HB+q0sR+ZT+bN5I9FK1iicPAiB/8Qk1mDGJfpUoWD/BKYwyDnoa9J1UcTeWlEn9TDMmwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulF4CRA9TVsSAnZWagAA8vYQAI5VIYU6Jd9vUcn87hEc\nMcoF5++MM/Q9lr1XBkg2WGsY/Dgo3PiWiRybLUQDiFzb3amwljjlgSA9Gl16\nkUhKE5IwPzY8Iwod/9uxEvh6wgx1YmDvmYn1FcxCjMGa/ph9uiW7bTZPY4mO\nAMwvW325KszLBF13F0usD/lb9baGVBhregOxfKxhE7CKWVHN63x8EdVvUrIZ\naR8mIAyWo24TxzwPgB7emIivGhLu0kdd1kJ5jvNuol6LQclgy4KnkCNQf/AW\n5Sa7XT8jF4w/og5rlbNDGuORbEFLbNJ9h3QBGfWXk+sBYHB/SUREmvzbaahQ\nxwX1Cazg2uO8ggOZtQeBR4wE9qdxRhXAKbBhCLHyo6oqJRlrcpngMeHvYV3f\n2yTk1eeJZve0oomOwffJ80RMVCO6X9Ba81r8O7xO8xsigq961GYcDTtnoGr2\noqMwO2TfdwegGM5+4SX2DbiT2hsNQznr2ASgYeBLCMPab3I6eGZtEJTZc2po\nDNf7qwBS5xJzyn60I3U494sYInwJt3Hj377w5+U3TaTYZ5kdGpepmBtjL01c\nqbXB6P9QwxsKDYn7QfYVX6DO6u3Zp3qskKar0r6klyVUqp2T3ZqR/X85u7Je\nQa1a2je0cPKe9WvkW/Ff81elPbypv4Ue/qzlv7bfFjns0/z1FbiLZP5Zuw+q\n4ZX2\r\n=enZt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2daa49b35.0","@material/rtl":"12.0.0-canary.2daa49b35.0","@material/shape":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/ripple":"12.0.0-canary.2daa49b35.0","@material/animation":"12.0.0-canary.2daa49b35.0","@material/elevation":"12.0.0-canary.2daa49b35.0","@material/typography":"12.0.0-canary.2daa49b35.0","@material/touch-target":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.2daa49b35.0_1622823288091_0.909245074343549","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/fab","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.08db3d737.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdcd26b9a526a05bf5d1fbfbb7efca52f714999d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.08db3d737.0.tgz","fileCount":22,"integrity":"sha512-pWEeYv00cgRROUVbl5QhCrhwPhuNvELzb6M9MITFYtvA0HWf+lObd2s2JEETSeJmR0A4QBz/83/L/mojTe/mlQ==","signatures":[{"sig":"MEYCIQCvfRYntrw7+FgvdDx+zeo1eLZ5OzTgj3cbGVdfSK/INAIhAMktyMKzhnlxf990DhsrD2jshvUat7kKI5VdfNZ/eHmR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoIXCRA9TVsSAnZWagAAJn8QAI5Jeuy6228RAULNoiGd\nXA5Q5o0wBwH8iQmo1tY9Mft3Xxx/14nypxBrXrcxgek8lOti57rbH+QF9rrK\nw3oJoeJEPixl3RR1u1Lz5p2BjK0ei0UwIN15d+3RzOhTAERtkOCCExzGnzWv\nSsqZBaD3ImdSBJ1npib97qVweaGh6auOn5OfceSikKLF6UnAsSU6a2yQg00u\n320xXtWG/zJnVvdB9nfGeJM4pAO48W66NIyY+IqZFnHhdZTRNkQyrNyPv5HK\n2+mRj1I+piIimWrHxsdXKw0ImRrgfLwozVCz32c12dicpMNgttZYew5NVx4l\n3CfZQPZAU/G57GR+rB4plesK0mQdnEKtRG88f3q40oKhu7jhJwLJXBXEKxgX\ntOYs12AjwSkmSZOosKpILx1+IW1hc4wr1/tfvd8o2ixgs110GrC1jLTDGgB+\nEjTpc/XPm9C1qje6eOrZYL0s8PPiTOulm0aPUFelu3rKF7uU1skRao3atBhj\nRzPaf7wm1AbbwPHE9Xeij0XMhK4oHXjZwFmf8Yx/Sd1QofXc+kKQI2wkEGSX\n6Q5GXw1VM5ebWvvF3HE2Eg3NhbtPtLNmNvV8gNCmJAK6LwdMnPg8evENIFI3\n+DQSkxcmouRiN2fJRlXpY5HMqezhkBuQbmQXP+L9UqZMWdYSIjGaJfNnzrhH\nD2Sb\r\n=ng4g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08db3d737.0","@material/rtl":"12.0.0-canary.08db3d737.0","@material/shape":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/ripple":"12.0.0-canary.08db3d737.0","@material/animation":"12.0.0-canary.08db3d737.0","@material/elevation":"12.0.0-canary.08db3d737.0","@material/typography":"12.0.0-canary.08db3d737.0","@material/touch-target":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.08db3d737.0_1622835735100_0.46962031438374674","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/fab","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.5823407a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d2b98eb1050894835b700a316479ad00e469c7b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.5823407a7.0.tgz","fileCount":22,"integrity":"sha512-w1FJfbOiZUKMRsCgvKCiAUxYsHVHc+V6URUVfEL3UOVZMUgNwx3q5qrIT2e2NHtWy8vIfqYWooSBQyytwctoCA==","signatures":[{"sig":"MEUCIBWC5NyBxdshf4dq0GWjWeCzaYeLGypryUZU4d8wkrVjAiEAghpjWxq0iGX7Ntk4EYty6t6LYkOKXn8cCMgYU6tW3+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr57CRA9TVsSAnZWagAApwQP/RTTNrUyUtVtZpI5m3IH\n2JwZFKWe3LBh4QmYO9bw4uqALhF3LrIHyMSjvLP1bl9oG/AyA91KKBUMmST4\n5eGARoA6t0Z7bkBrsP1ZCTr5jxokJ1/v+02bqIIzWAUNKaDVaFucXQwCsdkv\n30dRZSxKDz67W+fSVuF3EsutiaRbb/rzg8ogqsSd6RZ0nRPJqfbdOQACfm2N\nbg614vpTXtveZtAIkbQGpDXerR2B0B5lmhOnlwg3WMfEv1fEMQsgq0wLrYMC\nLyi8/2qBLZReM4Aiw9WOEDo9tZwuf1QfYFRROSw3nT/By5NwLsb+Ru3i/I79\nsu5azzXNPFRxQ1udXhpFFriJ31jvP4de0sb4sYYh6vAdxxTwg+F5fVRNcUDZ\nBRzEXj8RPWucnQdJwAqb2r3o5gzK3ByvNWpS//SOx5QezJOgw0CEvLlug4nc\nh+5oHsDqEbR1FTQVB0e+g+peaysFmaL2FkfvgsSZU0gwqrL4zEji8qnZrWG+\n2sMyEWhqiMxhFH0SXFBZRNC3lpmNDpkB5SFdhFSG1jKjR60R1V2fsikzxScS\nbbQImDf2TnEYLAGR+IMGmvXO/I/37ofsB+LIiOXQRNrFVq6+FrYZp02ETHnb\n5PSQ1MboBO0JlFYuMdCt7OGDMTrXENywLfemGIBPC6nfnOZfwiw6nqIpddvq\n8Ean\r\n=lW6w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5823407a7.0","@material/rtl":"12.0.0-canary.5823407a7.0","@material/shape":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/ripple":"12.0.0-canary.5823407a7.0","@material/animation":"12.0.0-canary.5823407a7.0","@material/elevation":"12.0.0-canary.5823407a7.0","@material/typography":"12.0.0-canary.5823407a7.0","@material/touch-target":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.5823407a7.0_1623113339169_0.9144983049013118","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/fab","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c2a7d1a2c86773ffe5df546ecfc6f649f31bda4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.23b0c5e22.0.tgz","fileCount":22,"integrity":"sha512-emNEJTRJ6qIcTmoRQWkgmLL8FhLiqcqcZ6fYjjOF8O4xt6f583BwAbGFDVVD8dyfkoJrfuGzEMUJnAMcafbJSQ==","signatures":[{"sig":"MEQCIAki/N9XXTTtuwHj8FWGgc0BkK6zGQUyh1RKaoYLLw9oAiAXOkNNqfAoA9z9fzbDQ8+7s1dzgVk4q1PrG9iEsilYzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5lYCRA9TVsSAnZWagAAUVYQAJ3jh2NFU3bNG8Xtlzxf\nRL8hLAchAdVVddNKRCpCZL5rcgSL/fMOtfVTzvSY00dRjZcrY+4DLZq2MEM1\nRuC3E3ctvYcbSrSviMX+Gqfw9/wADq8RYIoS2iu91hUC1CRdNyKK/dh6csZR\nYaKvzmHIQUzolOkThsRmeDDw2AoMam9CGivLnQdQPfjjd2DcE2yeVLSU4NDh\n/SmV3G2rQHbi50bhy4+fuafk2+WyHH8dW6yl9meo4WQlKeymhOlsylAG27ep\nlogDKTytIyC5ayxH7I3oaVSYdVnl9z2/F+WYq8vibMobO+T87qaPyvTGRCwv\n4FRqTkgGDr26i/yDeOG7sWdnsW6f/uh2Kt8gUYTFSnQ8XnAllIsFwNEBFQoR\nN2IcvTQSCy9bss732n67E2uSDPTtA9u8X4+et7SiXSKdTxc1gGg+j0nV77rB\n+0d2lg7Vy6SIPHKxCMyYCIYaCXGlWURfC0pPCFGEKZ9rH8YjrS4VhMfUFljh\nbj6MpDzNIAyVSAZNpgTGtL18+pvgfgZFhvgCfGyRc1pTLtG+/JyZhVD5m4ur\nJgNP5nNs7re87r+C5p9ACSbrWPB3oqsiXtIvGGmMG+9xSPNrE6ZqzWyiMNlR\nuzO4NyP6FH57h4Yeg4yz+Z8zsMpZT8Yaglk4213/27Tt9+u85Y/b5pP9ezT6\n0i7+\r\n=iLaC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.23b0c5e22.0","@material/rtl":"12.0.0-canary.23b0c5e22.0","@material/shape":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/ripple":"12.0.0-canary.23b0c5e22.0","@material/animation":"12.0.0-canary.23b0c5e22.0","@material/elevation":"12.0.0-canary.23b0c5e22.0","@material/typography":"12.0.0-canary.23b0c5e22.0","@material/touch-target":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.23b0c5e22.0_1623169368473_0.5244619078226302","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/fab","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7546eb0c3d8c7f398fa43d53dddbaf134d8afb59","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.2952c6a76.0.tgz","fileCount":22,"integrity":"sha512-usfuLn2o+/hk1uqz9i9Jb1QVLL3jlRQIrTDU9bfPULuZ8DgOjRDZlSQlQdfC4CcVC7mERt2GD58m8XGws2jPwg==","signatures":[{"sig":"MEYCIQDdxubFoiRqZq3PiXl5iwJuJWba7Y2OlA+qT3+V6HJRwgIhAPtfdY6iZNb9L7KGv6jHZs3+DHaC8vXgenUoPUi57u7e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6vHCRA9TVsSAnZWagAAX5sP/0hu0Z3fdmtxUE+KEj/B\nu6xuLXTdzmizHMm1Vi8ItxVL+QpfI2cR5044lVJwnBNPhZ75tKuMXNG4vkZY\niaTHXI6XMbb70ZDH7Tb4EtvYJWKH+eNVxMjRk1+NVXHO+nb2utcNDlbEE/vS\nLo2+vVy/FFQPIgtc7dUkxt0tH8QOngOXA5pu6k4eDObvIpApqpUl8ccLIswB\njxh9PFu3LtJXNDITG8nUxAmXdAOnP8OVuldbbcSCSh3QHcc1GOJ98olL9k3b\neA5NdCFt/ObdOPpXc8Kz1jkUzk+9MYzDe6hqtjNfPYnd91Rg/J/wPeJKT5CJ\nXkJSP/A1DlVSLkWQakX0Iy4obgD8BmRCtzjgGGjm4y25hnC/ZmhNc0TJ/uMZ\n6n4VoSCyBw2rCfVN5CUawE4pVNpvyrloX6NkSKNF/bTULbbwSD4oZHM7YyE+\n3kgnRJgB+ysVfjic96Z50FO3dWLaw1fahgfzMXIrHdL0nN6WtamD93PnV8fq\nEecA2gheQ9eYad0puRHpgC7fNwM7ycNAFITxjTUybBw7haHG2aF3GAQ1qNkM\nL/LYCeCXI+AO01Now8sQ4sZOoi2hlnSMX6BKpE+S68NuXIXdD4M5OlP+RPcy\nvqzMqrqN5pPdjee5YRcoDsfM65ZzgmrNsI24EdLKJ1YNl/+xVUc57ucBQ/kc\nK7Pr\r\n=ecb7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2952c6a76.0","@material/rtl":"12.0.0-canary.2952c6a76.0","@material/shape":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/ripple":"12.0.0-canary.2952c6a76.0","@material/animation":"12.0.0-canary.2952c6a76.0","@material/elevation":"12.0.0-canary.2952c6a76.0","@material/typography":"12.0.0-canary.2952c6a76.0","@material/touch-target":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.2952c6a76.0_1623174086979_0.19346324961525263","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/fab","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.f12425f88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16132f6e41dfb9330eba61597369991565a2cd37","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.f12425f88.0.tgz","fileCount":22,"integrity":"sha512-cilGd7lj2NTYcQacYwJoaGDFahtD8EBhS4Gzgu/gJjP+/OkyHymhweJGLUAUwoBwIn/gjvhsjMyddByf6GB2BA==","signatures":[{"sig":"MEQCIAU3C/ESS8g1Nu4fW2kzRs387nYfpOMyBCuUiJEeceSuAiBXsCY9eqQm61O/1YCXq0q7Ptv/6nuwK7nMjsiDvjv8/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWWqCRA9TVsSAnZWagAAOu8P/0SGm6aIwhM1Hdz5OZ9X\nDa5FNO+vL84juEp+e6312hHOhcgx+qM/4GJejwr/yYQFnPMds6AD0zQWZ1Co\n1X4tXFI9u/Y4OOYR5KvUdXLAT9AEbjPWklQQGK7ze2HgUrWXFaGQ5KNG+5Gj\nGM0wkny+jXyAxxbc6ysmo1x45u8LOLVTbF4VcdpZjz5RyGXJwam40iznO7mF\ngD4ipLBTcIpGs1YJ5U+SMjPT5OH7qbyNmeEDzcZDKqj9I5zI7ZHr+uu9L1qP\nUk76uE5G0ziLWUe8+r7LMx9w8vkaudPtnhT++Y5W0jomhjhxOCH44njLmZFG\nZIPZZro4pfTjvsBuJG5Mh6LBCsbB+36rTg8PLKfWcjsxTpRfYUaedV07Pv39\nQIJC13vEghY7JFj/QkVz5IoNq+xj5PThUdJfPaUs8lZ/j8ckiFJGr5277S1v\ndcK413ZUEux9joNuIuBrV7KyO7yMnZpF9DqESzfeq3Db3eff5z64NRI/rZgS\n6w6IEXWPeBrU3s7zRi4cGsolpXZLYyWwKSH9bt34FB+xjXybi3AOedOLl1sU\ny5z5XRdHuMcaBKQurK2EpDg7kQEJzzwFUEIzDtYaAlBSmtCixAKyhbRvGqfK\nXTPRppfZoDo7yWJZSDv3YtMkICsARrjo2mGWaBIME36pwfpxdGqoQdjsb0ZH\nS0KU\r\n=hzGJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f12425f88.0","@material/rtl":"12.0.0-canary.f12425f88.0","@material/shape":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/ripple":"12.0.0-canary.f12425f88.0","@material/animation":"12.0.0-canary.f12425f88.0","@material/elevation":"12.0.0-canary.f12425f88.0","@material/typography":"12.0.0-canary.f12425f88.0","@material/touch-target":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.f12425f88.0_1623287210742_0.1046303564038189","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/fab","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.e543628c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1179e99ebcbe98d9914c3c24b69d8e41fa06954d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.e543628c3.0.tgz","fileCount":22,"integrity":"sha512-xa+i8NyBAjXdqiGKKVScLcM6Kp/CjEH//c4EwBEImkeiBCYxJni+cl2Dx17Q0aH9ngTvu2s77S5ocg4JJIsjHg==","signatures":[{"sig":"MEUCIETe3bEabBdVsXIMWH3sfWkIcNK+If8yU4vZzAGdz3PFAiEAt+opMRgYi+nl+QZDKzY7nxZiBVT+GgS/9P/wS0dsbGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWXoCRA9TVsSAnZWagAAnw8P/1rKJBDzfIJ84TKvCsho\nbvrx5fEL4udySG2ki+K4iMTluHGaMOPAFTuvapYYquvdeCTQjRBKqBLIDlIc\nw1duRrWme1oHm9+3d4iO5s4S6uWjsF9b0ic8drGVq8kCrM/NTqjxYpZauCab\nG/+3xsyorzk3g1hUCVOrBVIpndClESj3IVzSJx+S92byWBdoJdmyCG1utH5+\nDHF5DjJPUKNnuW2qESi7Qclcq5pxE0pDHSEDBsP0bUfnW1KpgLGUa5VBbT9B\nAVUtaraZ8NhPTWBtN8Yi1NJeY5zvyB87I5S1qdBPMkg0vzkDvRZOzF8TGfHu\n6iYGgmZQrJz3KIlhYrY7BXhjhhqM8yUPBjqlDt4gkDkgXKZvjlWmMFj/WI0M\nCNm8chTwIZCO89Pb9CbclTa5FUYpmRFX3nwkQ/IKxVVDrq+NEA8ZHkf5U/y2\n2Rgi0rDfPoFf7eHxyOCLHHQiUorU8X8I9eq+RkyJF2DVdJlzN2DsU3ATir3J\n5+G/iM9CO6G4rXY2Sq2lcsjPGrinROcsnlZuIf5I0p4fOMMqB0kZU1AI1dVM\n2/4a/FozIBp8rzypY6likHYt6VvIqMZeEy8VliL+7EfWHTt2h5QpacW7nxJg\nKFpN30mgIHhqTUmuvlPbEj9j0WtZLQO8VUB7/9/B6BDh6cLZ7xUxrVHxeCEE\ns48u\r\n=1pdm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e543628c3.0","@material/rtl":"12.0.0-canary.e543628c3.0","@material/shape":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/ripple":"12.0.0-canary.e543628c3.0","@material/animation":"12.0.0-canary.e543628c3.0","@material/elevation":"12.0.0-canary.e543628c3.0","@material/typography":"12.0.0-canary.e543628c3.0","@material/touch-target":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.e543628c3.0_1623287272562_0.1571235752751987","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/fab","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.e0c346286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9f9f31087daa980ad83c827ed8318d3ea8a9594","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.e0c346286.0.tgz","fileCount":22,"integrity":"sha512-ys4n7aow08WF9Icu61RVSYIWUkXIhYHfNq6yoFE6w5AKTwFBdZXpttSgcbZq5cMbLn2LDdDMRv4e8G0H+kJNNg==","signatures":[{"sig":"MEYCIQCjtEVn1rLJUI617nhQh7TuDhlx34UkExPl8AydrJ937gIhAKAqPfevBq4RQrQXOpHEsleIP843oJdueMmCXRssfH1e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj+ICRA9TVsSAnZWagAApiEP/iaOahKaZM9xMcq3VTk9\nDLXsWLy12S4y8M61LDHuAcHqruDDsPWiRycDSLftspNcAqmGXn44Mdt/szjt\nU8sNjzEa4y7dpbmNkgOjMAiOBGFYYFi5pYO7pmFWwf9uIe9C1Ug3+5nV4kmt\nsOtjwmYY6GoM64KbFE9roxK0vh8JsWR++xsMO5zFdsqwxUkhEbIU5mUb0t8J\noeuqreBfpjUlxXd/opsdHNeGx7q/S6JG+TU8pMN4VQ7ppAwNx3A5T+GLHJcf\nKej+5se27riSJztcSkF3gzqxcJwyv7PSS7QGUp2z1DidFxSHz6Rbbmxj5gob\nCA6+AmeTeBHSf2ond/I5EGNYRvVPRI6NG1hKTZ4uT3XTRxc+uikpQNlEF6yj\nGM+J1RLdkhzuua5lA+jveHEJTXnjtOBnP3cz4KGwqKFFbgcs1HHvkszG5uOW\nPJQqBCejFfOyuUVx/KxYBk7GOKcsNj4pOkz6u6TQHG5ddJ/5mLSgi+7CMaWd\neh6yi9s6rj51Ghn8hQrMrv7Al/FuWQoccnci6kF/k3t12cnL2V4MmCKdSCuq\ntfLdF+WKIjVNiV8Ix39siC5mnBl9WZhvV6wHcPTI3P4TLvx2rau/wIzDpNq9\n8p0YH7VDeA9tGJZZCG8W4kpa1p0S6gIHUiiiQyuQb8XyI9K0nzh+eBkqNacV\neuZt\r\n=ut2m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e0c346286.0","@material/rtl":"12.0.0-canary.e0c346286.0","@material/shape":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/ripple":"12.0.0-canary.e0c346286.0","@material/animation":"12.0.0-canary.e0c346286.0","@material/elevation":"12.0.0-canary.e0c346286.0","@material/typography":"12.0.0-canary.e0c346286.0","@material/touch-target":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.e0c346286.0_1623342983962_0.0962502397869176","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/fab","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.f43af5633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cda520f36b7a015bb9b350a8154181478843a894","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.f43af5633.0.tgz","fileCount":22,"integrity":"sha512-uoqsUVW79kMtbJSYJXTDeEil5ZmLEbiZUN/N2x2tnsxyWMza1Zz/EEHCOhXdTL7odUGgnpq01FFPiBtmOnbABQ==","signatures":[{"sig":"MEUCIBYoA4DuYM89BA/TsT0rNby/da/QHm9o25uDWQDSWxINAiEAjZtae78QN4lvnWnGcf4uudkSEroSvHy7B1v8DHRN/Cw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnfECRA9TVsSAnZWagAAlrMP/1wDEonJQnkZ+xHDigFt\ndKM3OGxJoSIH+Az0hj1GbOJx6QK9ZhHr3Tx0PiiKfOdsDvJDMlxydKUGo/Zl\nmGsW1sx8EtQVnHlQ5OrhEmVKLzZuOn7+J6RoN02ZDbiVukgeGDS8Bu9uCM9N\nxhbr0lN2bot5EJmUMoiJKPM6daU/WJ0cFa0NDqWSbodFgpE9zR4cwl/HYMtF\nvNvHrOPSjirrk6lEkKa6cIMDBczK8b5Y7xMG7Y/VexCy6flCNX9A1ZM5NOT/\nxjeN6tiVpxRQoHBrxF/OqNfOAOCgpxMQL72gmNoVh8ybRktWI09Z+i5O6ZP/\n28M36LCR4fbvDR+qzosTb5JSlSzUFV+c0TBLyOn5ybjkLPgbL7sumQujJm4F\ngliJ2nQWIkO9MMCUXwZOWlOwumM5ChV2N4jlnEX5i193QDpgzNzqTmlp7qpd\nJfKE3dKmYgk5rdHD6N/FPzLRnhRGWIg8mZwuxOGNLb3rQ2DOyjJ2tzQ0JwT1\nXivKXdL7raenVThNlPB2BsyeFNDcA2I3WyEnT0mJWmuVoWxci4wJXOCyF6Nj\n9GLBEpGtTbBSjmT4rVIioiQzZOnERMH0aN9lxd0kzBwZODCw0xY62bLKxs9v\nBzE06WaGckwbTQMlxoMtTXfeuprl1kbgChN47bar1wpYkXIMcOzFMWvR1AhE\nPjqj\r\n=NZH9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f43af5633.0","@material/rtl":"12.0.0-canary.f43af5633.0","@material/shape":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/ripple":"12.0.0-canary.f43af5633.0","@material/animation":"12.0.0-canary.f43af5633.0","@material/elevation":"12.0.0-canary.f43af5633.0","@material/typography":"12.0.0-canary.f43af5633.0","@material/touch-target":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.f43af5633.0_1623357380466_0.7716028150216536","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/fab","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.8415ae585.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9805220c7d871ba32092ae419b03be85dbb3caee","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.8415ae585.0.tgz","fileCount":22,"integrity":"sha512-hEQbmplkaTFb2hU0KpgYBJaXH3dsQq89WXhbFk8U32YTje7zq7RSHJRf+SYW3UdDwbMUBi23PZuFp7b2jco7NA==","signatures":[{"sig":"MEUCIFqd69Nze6th5Sf37XEo5TTVKBgWGA5EIjbFr0r1q6ptAiEAyrdMRoQRg6MsUACgU+YUtcAdBMAAzjxpC2lTkxrYcQY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4oCCRA9TVsSAnZWagAAdlMP/iPMCpF6Vx2taSkCFYLm\nvn78NGh5rWUSh3qs9tgQwe+CM7HKBybV1bhcayyStOXAWIQSGzcTBYA5PaR8\nuGUUDq9qZ6UmBB5DxOmFtKTiCola6RVrJsCGwd/iY2RZZEa6GgvVGcy5KEGR\nAMI3kwKqWqD9xupjogecMO5W7yiGBwUbUn9S7RrZlQ67HmO90dGqZHQFoIr9\nVKSNtURn5h3puvVIAH3CUX+Qfr/ZUSBnAU9g5j9T6UFO5YXujKjyd7mZ5947\nxlLdz2Pj64LuliqSA0Igmj6qaP3SaxFc2O67WtGjyrQsXj2jAxIH2uREjROF\nQ6vl9Xn0QUfDH019iKZWUJil6MixZM873xbmjOKyktXD+OAo4xC3o94I/FFz\nvyodP6qWDABu3V88V5LTuh1rWK6FSYNu4NDJQyd2okuX2L7GqF/W5Fiieh2Y\nQPsrBaG7rBGgvuVe2UvJZZ3RtBSerh6hZteEZZTJUluUKFbcYG4uFHMLXikE\nE0M8JDu1ZA/UXEE5vOvb51KilK81+701yTLFdCFG2VAKW/a2QjdUOs+RkHZj\nceC+urRZk4WGMBsBeAbTorkiAGyhBOne2wdA7TrtXYMMASawx87lc37RdNeX\nAAPhSNuNuTnRb2lvKUAsWbZmpi4glO4NmDUEhB6wj3LDwtdU22zsBcp9TU10\nqPku\r\n=Q7wq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.8415ae585.0","@material/animation":"12.0.0-canary.8415ae585.0","@material/elevation":"12.0.0-canary.8415ae585.0","@material/typography":"12.0.0-canary.8415ae585.0","@material/touch-target":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.8415ae585.0_1623427585944_0.33663654750254257","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/fab","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8141940dba8e0b859fb8c1fc6bc7ca34f77e9cec","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.598fcccc8.0.tgz","fileCount":22,"integrity":"sha512-auWrAVO3WSNAI8LNiPfFRso5l8GiVDiLBRbp/htQ4ojdJw/IJCKm0oyCpi3wOSlf+9tLTkTfGV0e5rKYVWhG/g==","signatures":[{"sig":"MEQCIGbgadPaGZGTYdZ11YDJEBFmwuOsG4elTHe4Cd+p3zUeAiBGJF4+QiP/n+ySjzPka98FkYJsPwIuMgN7iXC1xW+Wjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9nRCRA9TVsSAnZWagAApLMP/iRLsWwKir85G0au1k25\nrNpA12AzR3BUacSAVj/OfRNF5+28SkkbSUuYwfy6cqOWXUWIElOnhD1JM78m\n4c7SYDhElL5O270GskEGQLYihbBdjHQ8U+Wg/tOU0P5F/pseKr1t3eWl7lw8\nVmE6ap0LQ5EDAW20squDPRrxZwBMZ6jT5MRxMA5//phZxWjcLrFsx1Zy9DZM\n+TthWQ/kazMn5jiDlja43Wd+Isq3y1P6DNiz6wBQhFjJJ72P2BBZmKWdqJss\nBvH03+BXD5dVJyT74RVDsAl0/Y0FBlTse4RTMmhyOKWjMBpQRczybsJoa1pT\nwsS7Ty2/0v/yYqlf7LO/2Sb6S55mA+R7D4RpTcjD587zM2bbm58hEodN6ye+\nd1TtEOxnB72iG/L5LJ+GNy4paH5z7ETGixQYulN1G9m2ZxMAjdwiKR/Mit/T\nqXd183y8K0pNbD/lgXa10CJDu1TMTP4SxMJNZWHqAzs7zz3IgwFyTyvuccpc\na3Sce+Jn5eKt2xFXpVlyJDSdRTGTSf+pWzNN+AMu5SSoozZ3bBx3g6G0+ZAH\ncA5jpsu4wp/s+0xlZrZZZfzHZkN/CnmASVn7EqGOH+mXa/ORsoYcMfQonuEO\nG9VMuB+g3QsHGPKUP4lby15KEvQ6BbA+AI1r+H3dTeYlkZylIVHU2KOlFCUk\nSvUn\r\n=o5ss\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.598fcccc8.0","@material/rtl":"12.0.0-canary.598fcccc8.0","@material/shape":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/ripple":"12.0.0-canary.598fcccc8.0","@material/animation":"12.0.0-canary.598fcccc8.0","@material/elevation":"12.0.0-canary.598fcccc8.0","@material/typography":"12.0.0-canary.598fcccc8.0","@material/touch-target":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.598fcccc8.0_1623448017666_0.21135097841229467","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/fab","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.5d0605188.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94b941504272b7e5da0d58276a17b2c5e90cafa1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.5d0605188.0.tgz","fileCount":22,"integrity":"sha512-wT2VSWh+johTsUImyKJbJbKRepZLfNJEw7lBXorhvrLeJFwR1ifIXwqnOmfs330+zRMC/0Pgkb1veX3Ft0mbOA==","signatures":[{"sig":"MEYCIQDzn5lDBpnziniNd0WrBx85ReSV/eE7hdqYzGZE62xVXAIhAN6fnlTY7EGpjr0656VNvS8tWLu47/HgP57oJ68KEyWo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5RoCRA9TVsSAnZWagAAtSUP/2gBrfOZSieiV1fNMHwt\nt81KWyWk10x6e6EZdeU1jbcTJn7eGFr4jwoYG3m1a1+ol9ByAXu0BrJ1n8gM\nUDDNj8xC4o8a7SVpKlbqxs41EICp0vFld32atKlqN5ZFYelNCIjT+/Rd7mV8\nE7XbMMLxPpDQeyn+arSDkBOCRvtPWxqWHIAMfKrTUiLDgr7SbaQT1tG+q6Ux\nLz4dcnYsSBFmRCO1aHOK9e4BduJnKMpbaE229+VsKC02HHXtUhS7Hy+OIl09\nXiJT22awPB0OZBigcge7ECN0TfzC/07HWA13TDhgd4OBGvcBHEmIODr5TsT0\nUTGXGRKO5RbdxUMSLgJoH3z33dnNIAU3MyRYaKN9mpMer1IWGAb6rHPUhseV\nDOA+z42N5nDPrEXbNvcQQBq8AFxjzPZJY4yXRn5Op+rCu8CO33/0TY9cLrok\nxoHTIbm4CQmuMnGyMNXe0RJBW907s6kRDSs/0kDOqwfZoyPmjyU/YRKYXJZE\nFXKJ9TzVdbSIor90mOWy9wsH+mRLb4UyJfsfmDyKCQhJSZS9vW1WfC8aBS6r\na6d8g2DumxhwiKoTBkuZ6mehjsEseYfNAqbWfpkLietG0/dp7IhFKU64MWng\n//QOxZHAUo4reVkF1LwRMRnX2ep4P4FvWGnyeuDwhsg91S5iOScvpnP/UcuQ\nQ3OT\r\n=tS4E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5d0605188.0","@material/rtl":"12.0.0-canary.5d0605188.0","@material/shape":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/ripple":"12.0.0-canary.5d0605188.0","@material/animation":"12.0.0-canary.5d0605188.0","@material/elevation":"12.0.0-canary.5d0605188.0","@material/typography":"12.0.0-canary.5d0605188.0","@material/touch-target":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.5d0605188.0_1623692391909_0.02563727613657729","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/fab","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.f147a2271.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"648165f4c6e2cf6f893ce1157b24f2a0f81ed65d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.f147a2271.0.tgz","fileCount":22,"integrity":"sha512-X9se+incF9CGXq4+kKb6UktaT64uqu237NFdPb1NaYDalRbx574+h1RIDJLUwHOMzhc3ABlkEp1zcNwjOrMtgQ==","signatures":[{"sig":"MEYCIQDxetCkaA7M07z7JdH4O2sUksfGFQecYvRgppMKWA0aKQIhAIAjd3gDQKTBMPrnqAeJbBNCWMKocCMed6wH35iY3ijs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6uQCRA9TVsSAnZWagAAOlIP/2hD0VgZiDn8Ma9cFlpQ\nssuUFql9hdkyadAa1f+wtylyq64ZKSTmtmT7GAyufJWs68oahVDqJlqLbpmy\nazxaisLSpHDqzEpJCRAWUg6P06k8ha+kEDUDAUJe9MMwW6CqmPWGIDf4EHHz\nztIaP274B5lLjfmRbRnA8T6NXWX4OuuJSq98Qajv/TAJXE1CIu+1kktD4f6p\nXAn+Lzq87FoHVeWLjvYsnNkon8wPkTbxO3ZnocZmNZc52AQUm3xQsr/CeYyB\nUPrxZu4hOWVWAffPKEL3rsXqKWYm7yWwcf+iFT8mtewgYp3qzFYe70W3fozF\n+yvMuhg+77eqU4Wko0nffKxS5hOXKBw1/H01T33CmjXhfyU+wergxhUdWYUa\nC32QZyp1OS01Lm0dBlsQ6k0PpVnePbnn07F5rnXE/OtrS23M6+aV2LTJTCPV\nWY0jFpj420khKse2KCajBfW42Ki9mh49NYoj187traFBVuQ1pz6vyEYWe+DJ\nKg7TUeMH1JM+/WkQ1z8slCnVoqvOx4NDvmZCi5x+zc2W2TuukjlD/u2KpZvK\nBhn1UVpgzLnFD55sEFQCotfsW7cClhS1v8L5BGSjTBqL79dmimGKZU40TgdO\nbQM9LdtiUBmvzndZPLH5ixEh3zsdjer4VfNf2M/OTqmBQCs5WmcSFq4Vi1kE\ngJpw\r\n=Xi8G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f147a2271.0","@material/rtl":"12.0.0-canary.f147a2271.0","@material/shape":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/ripple":"12.0.0-canary.f147a2271.0","@material/animation":"12.0.0-canary.f147a2271.0","@material/elevation":"12.0.0-canary.f147a2271.0","@material/typography":"12.0.0-canary.f147a2271.0","@material/touch-target":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.f147a2271.0_1623698319944_0.12608744876156264","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/fab","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.33579e00b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"673392b44d33edd8403af47c9ae5c7ea79bc3c65","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.33579e00b.0.tgz","fileCount":22,"integrity":"sha512-1XAIxMAkTkwuGftV8MPYde7eW70a6rDpDPCBieyTVvYXW8thoksdQhmpl+OELpbPdnq9hZqrMQM3I3qjs2COGw==","signatures":[{"sig":"MEUCIGIp2TA4n3B1Vvdn87eQtW0+5CJrAxfK3mYFMbL1yKMNAiEAnhHCaEju/DJheYr30jTQbnwb5KWLt2oGPjYIiCnuRmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/LMCRA9TVsSAnZWagAA8YgP/A1UuliWVj/xLzZUXLc3\nsx/kMAlixgNx75q1GrSH6LdMv0w6WjOiNjK/tmLFCjCu7a5nFrwfR83Yq811\nsxecFY9uZKaToM4E1V7G5lV9it2LTnijb4+B6lFQTvOKYmTMbjE5o9uNU7u+\nQmrnZVJCe5DkiuPnGYII63FB3gXgZI+8KrLGTeZOfwAcE3ydahVX31aLIg/t\nOpGptIf/bB3g1+ywXIOlW4UmX08P//ejAaZ7hFn56a91wAt+Np6BMxVPxvqs\nyPhl76coINo99WLbkqZ1kF7YIaf9QO1UKfL2PqNUhO+584zpFTbzu7nVVmr5\nDF9uF2F33PuLKM2DoPDPM1nm7WuDM8XkG1ouW4q7o36fN3axB3TG3l6Mmz76\nFjH4zYERsC5GVlwzAMaIbAJ7ZQo0gg9rlL3xrQhjZa9w1vw0NC65uUblnA2S\nF4JV1o2F8e8FMHJvZnWWlhGCb9jOaiMXxZYwZQel45V29wrH46uN2tZ19rSd\nJFzU6vM7H+ICpa2PbpdFDibu3Pq4ah8zGltD2fxUEWbguMLDS4JrQ3R/sqhO\nWXKWRJribt/yNtDfWtqo742ESHxaSMYAk4NxDfU6yXtQffIWZpXieB1EakpL\n1Zpqc46GJo9dM92jr/Rm7m1meRttApi98g4IsInbIGppSKLWuE1a4wXn8b3N\neP19\r\n=mZFU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33579e00b.0","@material/rtl":"12.0.0-canary.33579e00b.0","@material/shape":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/ripple":"12.0.0-canary.33579e00b.0","@material/animation":"12.0.0-canary.33579e00b.0","@material/elevation":"12.0.0-canary.33579e00b.0","@material/typography":"12.0.0-canary.33579e00b.0","@material/touch-target":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.33579e00b.0_1623716556138_0.6738761702983131","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/fab","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a61fd79f9c2e8aedbd69a8c4c378f715bafbaf54","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.a6909c0e6.0.tgz","fileCount":22,"integrity":"sha512-ReiSqLVR5fMroIPAx0bbuimWexrluTLPvtzS8P+xTdWFA0KlLb4VRIcRFcNx2zNkVL23cCFIaPz6VM7yXwa49Q==","signatures":[{"sig":"MEUCIARK6qA+hBZBxxLz6WSXa7AtSSylQx/Ap6xGNwgon6WSAiEAu3+HrTRvXLKMyuAIvw6ViL0ahZ9d31/eU6SnCLN7b3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPHQCRA9TVsSAnZWagAAiBUP/ArO5kd6iNcFBBLmvrCx\nqqXqGNQibFGj28T9cOyXqwKjnGcQ5OLgEYQXMkRgoJndXJaMnJDXQKgp1K4y\nersmF4JLXVz9QQbwtC6OrcIq+3kLhKrl/ULxtlq4MqkZ3vRD06b/IX35FP1h\nF1YSuATAmCzmf8G9/FmtLuiLoyzIXTDyIB7jaYfaxXEeTOgjQNW7JFKX0bFH\n952UG0RGtW3M3MmjrpBLOLaJClq95kAtVe70eyYgfrizAQlhZEEIvO5zFdlJ\nVu6EESrNfz2ELtak0ALxVQuHPpfEX98NYprg2W1KTjctZ2+3sVijgUmixwdg\nBcOr4FL/q0NarNiXTGSkCDK/vxH8+qI+LjuM/2mp6++Ul9DvMFBchej7VKea\nAdxayYs7BU+ubTyw5/K/LjWnHR+iBuokrwc6pkcIpRjuYe035xgu5hCSMcUM\nk/ty2RhiBDCd2v4StCmenwbrFhwWW/GaLfNok0+Qk3AXQ0Rf69uCxhXqkEEG\nxk6Q6asPXhIymk+p8hFm5/cqhEwcPOv9f/5fU/QjN5qE+xlwcQYPPw2/+Ra/\n1ecXuU3ZHnS2wJkRUCZxkQh2AaHGfxJvyCNMYwamDvkFBCigwuLglmzWbic/\nJ5VObwf6en519qg9HGB9otBBE2Akwkzxc+5K4Lj9PwE9eWg2hoRSnXPts9Rp\nJGTT\r\n=NGFM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6909c0e6.0","@material/rtl":"12.0.0-canary.a6909c0e6.0","@material/shape":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/ripple":"12.0.0-canary.a6909c0e6.0","@material/animation":"12.0.0-canary.a6909c0e6.0","@material/elevation":"12.0.0-canary.a6909c0e6.0","@material/typography":"12.0.0-canary.a6909c0e6.0","@material/touch-target":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.a6909c0e6.0_1623781840467_0.9937568265390273","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/fab","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30e3618acd130090bb9ab7cb63eff23082e6b96b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.c18b5925b.0.tgz","fileCount":22,"integrity":"sha512-87LoNliGW618A//bX94EUDgoIU0Si0QTRJtryAGUBMluo0+/oKWB0Ftr5MP4DQt/jGrGfurtICuqEjZ+8zWhCA==","signatures":[{"sig":"MEUCIQDi83LCmEdyN8thH7kd1kFxjq712Y/Dq69Nowzxy9YH0wIgD79OLVKEx/bXGKuLa+ybrLhgZAF0IdtA4qg/CAOEwqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRXJCRA9TVsSAnZWagAAnHIP/3zZXkry90vaiq2/QFOT\nT3+WO0Lkq3xeShNKhDFEj52sGj/AMEzFiPHs6iLybxR2RCT++hV9iSWjKmnB\n9tVF+FZrVt/fPElUywXcxQ7W86En4A939kfs2x1HB0pkgkFBWOQtkmjayvVM\nnYK2SgKpbcJh4C9vT32u4T4fMNLOc3Tx2gS7WsgBrvCVgBFJOVW6zKRQ0qed\nkURDTLkNBARU2HZXdD8MQXeH8AP1EdhRNQa+fEymWrETpxHMVG3k//v5Bbo1\nmlUlOvUPjtMPGQjjlHbUMvQ4l+ehhq3tH3etXqnxX6D7kL+0s/S90vjgqQIt\n8HTtfnkaoaMIKu2InHwEXmV08x2gc7TWGSzQNapVv/b/xZouOiM19XWP98b6\nRU4UnXNEWXWpGNbwGZlbZiZBNbYXiRKPBiEqWAqUtkRtR/6vbd+F5cGheSh2\nB3K1c9i7KrSmCEygdV33mgvPydH73MKgA975aP6DObNutpldWeRzLjP+BnRZ\nSA6WP0FVm7bYlMFtrQ010WFCnrpfH2tDNY6G5/MDAdjXHhqP4BiPfiEfxt+8\nsH4b0YTxngnvsn0HlIjZUfYoKGgIgRwPEY2cttfQBBFNnhfWfyROCiDqBSXc\nVY5uBuZjOZ9l63S315+TR0cHQwMHdKoeKWGKmzFAdCfDr7F/x3cTQZUKWGES\nBcS2\r\n=WW7R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c18b5925b.0","@material/rtl":"12.0.0-canary.c18b5925b.0","@material/shape":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/ripple":"12.0.0-canary.c18b5925b.0","@material/animation":"12.0.0-canary.c18b5925b.0","@material/elevation":"12.0.0-canary.c18b5925b.0","@material/typography":"12.0.0-canary.c18b5925b.0","@material/touch-target":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.c18b5925b.0_1623791049053_0.6126090429472066","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/fab","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.271fff902.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fb50ebe00481f034776b9619c0fc30609e06309","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.271fff902.0.tgz","fileCount":22,"integrity":"sha512-FPSOf8ezpttHnnf+J4Ndz1g8nW17QsmPeakLIA3lqVY5W54foFBzBwUzmZ1f0MKkx9BvxTYhjpxe36hiir0Zyw==","signatures":[{"sig":"MEYCIQDvBnMbwMmTlV0XvxIYF+9hVJHd0sjBbNwv2IMtrfgYSAIhAMDuPyTvIsdtMcsykNGASDjv3VanUeyXCst4edvxtNXJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS77CRA9TVsSAnZWagAAmPEP/1FyZ99R5c2RvZ0OqY7l\nnphbCp/atDHMJe/qm0cpCVOfclXumwl4JMFXGXlWQVtp6pyMWDuRSpYyXa6M\nQcipVPifqJE/vfu0rtk55gwtvjRqFsm6vP8pzqGhJ5HgHc3EgjRk1U0N3ShN\ndvQiUZu1veyXszY7DTyzuRllllrD8gH/VlvbUYZP2FFeSRKhsBaiwtwRybQt\nbGV8VCea9II0NjS3ePoEvwNTqrfxWN6mJNJphSvmLlRmBF9nMrNDmwqcdoJq\nEOw7kHneYYfELPH7zLiepLYSpRPY6THZP4DR2tss4hq7lgf16wTRkAwvznzD\nu9DxDzULnxzRbQutx5zi1vWMK7U8XJwoOENJqroeF2NkUV5rpBj33dZT5IQM\nyaREiF4Ip+XH8hgoGtqvBXei7SGVM+ebf4kCDTOve63oFOmm3r6z8oaDenM/\nDOtDrl0DDs2BMnUYvJKzEZqH8Si4bHMmK5EGP0J528J4O9b8NiT4+y0uyAlp\niW+b0fqpMdvgN2GQgHtP/FGnlzRIRE/hi8/h6g4guGxOF3/7z4BzSHWcb5CW\nsiX4CZFzxd9nnGrY4WUVLgJkaGzjuaY859i8HsSaFSxYXN5BsPutktbvZr0X\nn22lgDQFtyx+EXWZom8ObP0FgDD0/HoDy0Yx4qD2+Jn/sFufOfvjx4MgdU5y\nNvGV\r\n=2ekZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.271fff902.0","@material/rtl":"12.0.0-canary.271fff902.0","@material/shape":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/ripple":"12.0.0-canary.271fff902.0","@material/animation":"12.0.0-canary.271fff902.0","@material/elevation":"12.0.0-canary.271fff902.0","@material/typography":"12.0.0-canary.271fff902.0","@material/touch-target":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.271fff902.0_1623797499347_0.26622076747133927","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/fab","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c12b5f21dbb15b3753b0991fd452672b8ed9537b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.7ea2e830d.0.tgz","fileCount":22,"integrity":"sha512-N+jaSVnlKOzszyCa/NSjn4glKbFDrfIEdnA1IpG4lAD6YoggrQGyJCo6hUryiXbUyqvOvvDl8hsWqTYVn/MELQ==","signatures":[{"sig":"MEYCIQCqasox4GZvzthxdElrN2BPc8LetziZuiUOU0u9qZ074wIhAOSFmxbjrt/kQuf1Yyu1DDFh4A4oxv+3q6OcTsuEJw8K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS8xCRA9TVsSAnZWagAAaFkP/2yDQZZeXMCviLUTXbXo\nuYO9O8lNFl6+svOmEkYHG2d0n8M7dD0gGnE4Wz+eN+iQbmtKB8axH+O1UNRy\n9bcIrDgXFmVgU/4HCApCbD5JPr5gNeYlVCRsLRR2WDae+b6WNcZDtSQ6rM8f\nSmlqXcPFvmSLqTw9SfGbyuX+YLWP26rhNtjEBtGN5POgfF+p1rEuUW7sNkNl\nr9oNHz+mENN4E5tKeuEY/wi36t2ZfSOOgSY5/ytVqWr9l+xLM8Q2eUhLOqLC\nXuOMbZOxtunZXk+w74djQZfpL+G6pv3kiegUx494HjSWMztOg+deGCf4kosY\nPHPT8s+xeBnomtYxLisFqdRnTEU8dpHyyH9oYk9bjnX3Kbl1gDAA+wKb+QxP\n62l20AW+LGCLdznGx9OEiMNxe7oyW8eR006wQQXS3yf4vM+cUuh+s36gf3rc\n58qK+CTodnT5cFO687zuDT8gWfnd2M0fDazlh3h4EcQ0wv/5jLR25Xb6WYtt\nxbzSaTVDX8JeQRgoAVMiY++tQha/CuyMwBtCx7/mDwLX6S/2jFRAoV9VlkJq\nJa5Oll7ymyVzMTUZXo+G7QR0cD+TrTkWV79GucM5FhIVQhk48wamHSEJAA1+\nHsjUIM0+jSM2QhpEWRAti8+geOOYp48ilJtezHAo6ikELNDrFddIU3YOtPEy\ncnaM\r\n=KvUJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7ea2e830d.0","@material/rtl":"12.0.0-canary.7ea2e830d.0","@material/shape":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/ripple":"12.0.0-canary.7ea2e830d.0","@material/animation":"12.0.0-canary.7ea2e830d.0","@material/elevation":"12.0.0-canary.7ea2e830d.0","@material/typography":"12.0.0-canary.7ea2e830d.0","@material/touch-target":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.7ea2e830d.0_1623797553838_0.365087194139053","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/fab","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c32e9e23b82de7d24cf7912784448ab9d27cb704","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":22,"integrity":"sha512-4NubPTnQFFJ9ItQtIBf9fchs0tbyrpVFYSRj6njk4fcyJ63kjcvUI4EDgF77DIyOf0mYYjMf+tcSE179nHunMA==","signatures":[{"sig":"MEQCIEavVIIu7VIznsLJLwDFW/WySMQKg/8hddP/iMsJxtnHAiBBHlwTi5EBtnLBSP2jYlDS3NXfy4ZrwwvzB1S5nv0zqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymfvCRA9TVsSAnZWagAAVNwP/jDjWNZfDw8U7m9nEM12\nWKCXARkVusERU2uJ/PY13XRyWx2n4BVSjXSHSgm1Od32+ci+TymUY/z+shxD\nmtWb3MsQHXdR4IVZrmNleypLrKgAIs/Y7yUN3eLiI7e+8df+8l3VSTiEbYEl\nlB5JsJSypEkUAUHVwkmgiEPzfy54CImenffeU7DJ5Yf9+xFBUlT1ZNbZy9sy\nAsPRC7TlKiXl/JQn2sw7+hJcfexEefMc7w4+QHVVK0o9C/5hDrR50uUtNTKE\nju9koyBK9LB9ElcA7cHGNQQ+dl46KI/YIRkvEgAE6P8K6Lt1J4zulCJB9v0b\n/E2rbJeeR2adkFYfDJ5Ux2eovgR6537AA0jn3AxBQboYYVUNnHs78+eCuL0h\n8L97BFJItMxVw56nQWWGUz1MO1ZofQSiL8QpXSHAJxwIcKQDsJLoMjUDVQbM\nHnXV++H1VYNVc6gA1xBOFGZ5kFmnreSTL3WMBiLkk3HoAcGs9lCd//iD9HLQ\n9ybUDHSuuwOr21yDI06t8lT2yip2Gdn76Zu9VqS05W+QLraCGOJeLUkRBf1h\n6/CfvweHaBpDkqf1jJzssLnJlLAyAqbKUkOm15JCdKr8TwrD+yXDpWsbu57m\nqzZ2O8JTRqEQp7P5xhKhbTV7ZUfOLdL7JQztl/A+UOyopXqA2z0d1jO41Avu\n4gr3\r\n=gRTf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d96f0a1e0.0","@material/rtl":"12.0.0-canary.d96f0a1e0.0","@material/shape":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/ripple":"12.0.0-canary.d96f0a1e0.0","@material/animation":"12.0.0-canary.d96f0a1e0.0","@material/elevation":"12.0.0-canary.d96f0a1e0.0","@material/typography":"12.0.0-canary.d96f0a1e0.0","@material/touch-target":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.d96f0a1e0.0_1623877615031_0.016661757637807195","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/fab","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.a6183801a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11bc0169dd795e4a0c84a2c80ff759cbcce9ac71","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.a6183801a.0.tgz","fileCount":22,"integrity":"sha512-s4W0KnnuByBD1saptT+fYncY1wzaiAh+PdIoWUBaGmRYMeOdmRDW/vzMXi+ElcNF+/Jefp4qI/Xwm/YTb4/cZw==","signatures":[{"sig":"MEYCIQCk9YQFXD++I5IzhXACNciNOEznW2+ebTt8oX5oNbwXawIhAJQqe9BPFrQ8p62WEqJV/r1WDo7hUlq7/5jQmBL6FSO9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynXLCRA9TVsSAnZWagAAiuQP/0kvO/xl2hJLAwCGq/Qz\nepZ8ZpN+mjEbGm+nwvBlcZLDLBZku6aKRC6oEze9KAX9y+NvrZrpuORZjoOJ\nCqCIwwSJtmhgY2L+AxuH3TzGAWTKiOA6rPFxbyFYdulaigYzT8aL7MK02g7Y\nD+MnF17Tb+6OjHcrnYMLFxr3BTxK2ctiCNgzdFFXDjutWwWF4D7jK/ntdbwf\nP2aEfA7mVcpJ0+mNSyPr0iJN1NrzGtdJ9GqCZozwB+ntgRhkPhrRnrYkArrT\nENOEz6WN57twLty7abqwTuSTZBRlCMDaHWdC+9+L/51C+ULdG/lL54YLvivn\nb9YstzHu5qFyrtGK2icQiQxM0yXiJGKbyDNmlhqSgh8lihV60FWhjs+2iKRP\nzGwouhcV3B2TW4DnCf/IqAZOonevccY0zD0BqsT3GXOY6AK/6IZKRi2TB/GZ\ndnGSlKgWljpXK/N/uY9rChAtnyVuZF4kpMHr7pdB7d3cH5ntgwam/kLuhX6G\npY5tCQyewgENqw0aETnnZfSo6pyhuxow23LK5E01nKIAVmgoiXq8AxhN/JEq\nPoDea3gKgidvJMfVutrhv0m/UgV7f82DtchMfWHJR/JrBA2SRftccJjXv49R\n/ymfFSDSJsjbVcmE+ItFEgkskXb7PY1ImDm6PuqQQgz6nz7p/v+aL9nJ0yqP\nL0Fl\r\n=RuQ6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6183801a.0","@material/rtl":"12.0.0-canary.a6183801a.0","@material/shape":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/ripple":"12.0.0-canary.a6183801a.0","@material/animation":"12.0.0-canary.a6183801a.0","@material/elevation":"12.0.0-canary.a6183801a.0","@material/typography":"12.0.0-canary.a6183801a.0","@material/touch-target":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.a6183801a.0_1623881162740_0.591545599588917","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/fab","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.940550232.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38fd8c58a8c26935278ea4134345cc71ebd31bf5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.940550232.0.tgz","fileCount":22,"integrity":"sha512-di9uhgT6Xbz3DaTRp/2fvrzFMMnfqgg6IU5RyPbNnqGj+rnmNoLj+O4mJLkWjYA+FAJZE5cARmoclbD6btehIA==","signatures":[{"sig":"MEQCIBNHL5TlK9ARAT8zDmI30HK8Lsj2B8a8/n6VBizN4J/4AiB+GZTwVmIEWL62ZrdypVLT3bprf+SewFqzjcXAyPjfBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6VCCRA9TVsSAnZWagAAfZ4P/A0kvtBIJFlI2LnRy+ff\nGBd0wD2u1hyia7ldOV/+v3gsQZU0/1QXNJ7WA0b/VSrApkcqi4ntwlhKuzB6\nQ6nyZyPBigPuxhVR3JWwq2+RLLuRMq+6uBSB1oRi1WgrcXuzRXj39p4V3PtQ\nrhl5dLL6jXQJN2Cch54WBOxvJDIx3X/FvruVhr5V1aa4K7/Vwost3JWUTnq3\naOxwIoOJ4jdKjl+fZ1wiaqZq/VAuMpluRQ76xVqdJkna+wntAw5fhFns5b3d\nMKOhTNshPW80MhZasdixANx1acolphZL++i3ZSibhZFW8Xdm/qH0CA59Eiuu\nH4IrLjrUxtTToPZ5a4DP7cREQ9tI//E55+YgoQtw4U9ktjzPB626AcUazjNM\nOrYLgA8iEXslxLotJFNcbA+SoV57A3EfESUh+xSG886hOtVMS9haojc7g2Sk\nfaSvYQpfIFfBCdcYfRV77BbMQlLLLISvu/6l4HFOnk9tPT3hM+8H/jEnTBFU\nvzgCErOUXHNZtna5nQuiEFCZm0xYsEw6XhFycZwenJetRZEyjxueeefWCzrw\nfr0UmzpC3MUxXj+X/X2EOUcgpADb6IOJ1cSGf//lp93PBdGAxgnF/4lKii2T\nHclkE/I/YO5VmFU97efSDCFaCGtJSuJFalE/4odjL8rwBXqcwMgDRzfb7jyT\n85L9\r\n=5O45\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.940550232.0","@material/rtl":"12.0.0-canary.940550232.0","@material/shape":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/ripple":"12.0.0-canary.940550232.0","@material/animation":"12.0.0-canary.940550232.0","@material/elevation":"12.0.0-canary.940550232.0","@material/typography":"12.0.0-canary.940550232.0","@material/touch-target":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.940550232.0_1623958849710_0.9391691986615132","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/fab","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.f705e8048.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"195354dab1c4fb08e995a974a4570d92497fba7b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.f705e8048.0.tgz","fileCount":22,"integrity":"sha512-KBuOUYx1EwiYaMmzLIRH/1d06AGGFIDagXsyNeBo/8/IWIwRm2uZKCZrmqn5WZlokEq8USLLOSPEbKXLsgOKTA==","signatures":[{"sig":"MEYCIQDXEkiysbEP7xHQSYluKgrRCJwLd2KcmwjMriWYtGL8igIhANfEBPcfQhfSXPH8BTLML+wpJ5vkrIJJCvTUG4Dhcp7w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLrTCRA9TVsSAnZWagAAIe8P/jTiP/9AawGNgt8aTg3z\npugPrwYCQ+FSgWdXZ54Fjg115LLbIt3TENPaQeZRKexdhFN9QtubDmH8FEgl\nbxyJXviKY450x69T6cMvd03HrDWIXTUn03l7jYzMcx5on3TxtrmMbhAAWT4V\nNBEA1Y8k6DhabhsoKNjVzEarrW68mUdYg/dl7fzKwtG7r5PSH7v3Uh/DqM2P\nljGHBMMg5zONiSZ3SFgqnNE2vgwTQOL1DhoNiLzjxAUqqTKdSi0QqQIQV4u/\nD+K1q9G3yKGQhNW9+o46V+wS+TfNP/qhW0N5F2c+C489m4Fw7Y2+R/+QP7pv\nkXiA+Nn6nLwSf1nCjwWVMoH+52jCWtApXT1n2d7jjdsuMALlBr6gtxzRQIwB\n/CNkIePi5obow3EHp83qm/2saaDYZSsWFC5eYVZ/w/Mo5sB5IYsk6pBR6yd5\n5OhCoO2HBdBhkVKaGOfe1OJ6/4FE5f5QojHddZT2DBAY+1LQvZeqGAp9r4kJ\nXlmHdfL40B14Zy4hI6h858eYqkcpSjcpLxFPhpyorLxo9CwU13vGqpSoKF/s\nM7Wc3fG56/cADyDlGINpLP80YZlEN7+Iu1DBbjt9hZG58M1kX3rZt/ec0eqM\nC5z+B9JnAsHWTE7ow30kSwWhIY2J+hVSZ5oEahJtWmdVLTJc+8FexZxrfh0H\npJfy\r\n=IdvY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.f705e8048.0","@material/animation":"12.0.0-canary.f705e8048.0","@material/elevation":"12.0.0-canary.f705e8048.0","@material/typography":"12.0.0-canary.f705e8048.0","@material/touch-target":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.f705e8048.0_1624029907255_0.8785166219090776","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/fab","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.08d791f37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa17ba5cabd667a4cf8638ccdcecf01ce2de7159","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.08d791f37.0.tgz","fileCount":22,"integrity":"sha512-tWKD3wnezvflmtBa0mw4x/1gt5qUD37fx4Lcd/G8957740Ah2ZJnVp0914HSmtN9UpgauJjqzlSI3j5WxdlMQQ==","signatures":[{"sig":"MEYCIQCs6+SjKIDZLeToAJgfc07dDWutpzDBjCOR3vlQj9VV8gIhAIrV6rlZ0vP7T2UaQw0Qk3wYhEIu3heAXiYTJnmC0/QY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQwzCRA9TVsSAnZWagAAbuoQAIftGGtag1XP/s5IHaFS\nMFOYhzgFbYuoJfZj8Dub9CzsacjzsJKsabqyeNy36STYMqmNd3J5akYlocxu\nO/VbmuoKhLNSEBMOj/wxmXfCc0CuDfEUV7ivAUCx+upR/2SN6vosPqulRtql\npaFqwMX1DHEIkhI2nVAhv6z1/0CPo+Pu4c7YLNfqp2DfukyhqWnA2HGopt/Z\nehzq6/PuI8BXVtKAdoXvujaiSRmde69UiDVwv2BVTBZvV+X2BNhBcyKBWhrp\niy4ix94KwyMd5ITO4VmF3+HW/KlgMPvtnVIbCGxVjJkMssPFqFYzBRLikB8a\noByADTYSC+y2exSXbuEt+RQN+n//y7hbamvACPNy22vrG5/XD4/B7y2V5gGj\nlQOn7nn08YW+9K9dIpSePoWOzub50MI1Z7+ZA7zRBJ/BBYbr3+Ggj87jfWL9\nUNJnO1Su/rUNAFYQcG+QLWEAq2GfjXMk1H0qV77OphLXGqXc4BWSZODTxGcU\nsUl7YNNV2NUahj+DklCtbPcjtHR8ZPyQe5RJkESEs3PBHudyJyvO3YC/jXA5\nE0MjrZWUYy3QbHyecDHrBlVeQzdSeePru4aQLn2y2if407wWbQ8oNKkIZ8TG\n++rR/HnuEQg7VO0fl+ErvBRVnoCL6dqOueXcU5rZ6mfA3mxt/nc6EVX8WSVV\nP3gi\r\n=/M2k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08d791f37.0","@material/rtl":"12.0.0-canary.08d791f37.0","@material/shape":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/ripple":"12.0.0-canary.08d791f37.0","@material/animation":"12.0.0-canary.08d791f37.0","@material/elevation":"12.0.0-canary.08d791f37.0","@material/typography":"12.0.0-canary.08d791f37.0","@material/touch-target":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.08d791f37.0_1624050739450_0.8037730851116796","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/fab","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"681ef137fda53375de2698818938cadff0bd78d4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.e38d7440f.0.tgz","fileCount":22,"integrity":"sha512-yzA76G4kHsRLMilNzti475GRdCSUPxWQ+1XbqIERsiKq/dCKGZP+itlQMCzgFszeBMCBk479c0kJuE6Dr5H7MA==","signatures":[{"sig":"MEYCIQDxfazJJbzavfBIoo7s1kCrH1Jq32P7a+zlpU+3IjXSIQIhAJW0ZH0pw+p7EnSzC1B7c7tQWnDS0vFOfPc7nikH72GX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M82CRA9TVsSAnZWagAAyzoP/jdG7ZVibj6ICO/XXh6X\nag2rx0gNNY1GQtHfwCaBbKBuG0V2t/NBNiu8OcMA1CcGDhUkU7wkm5iWV7fG\ncv6GncoqmMV0G3qb+b5tCVUTpC3u+Q8jM+2BbkANhGxb19/vgDysJxRb3r2s\n3vMk4U6IeZWf4hDrx0g+5lZNCt4X51aSBA+Dqa6az6lkzH2i13K3jINrG3dq\nZl3nXy3WpbA3f+K55RVZ7heTjT5Q3Qf2zXD40QVD7VjvU3e2QHbf5fNS8/Y3\nIO2QP7mcrZdcQyuOvYkK5cMyVyNuQ4wIavgCZlsf0o7UBjwJCoQ9rovLeO6V\nOR3ChmIJi8JD2Mj6CixnnMqJ+D6RZGPza2JgjsoXNIsik+rTDt2vrYOoYsuo\neKrixl8dIB/DEXt8qD8+ePtCDag02/8GygtkB7Pmc0qqf2TnOHXgQdNn7RKH\n31O5QCn/avicprXiyxogz27sP3c4FlFGpMG8rubWEY9IOV8tIUkc+GGCmuxa\nMA6x1pGo3RoWQbk0fRc1K7188u5/l1qLa6GdLmRlCdNpiqQvE6AB5oybgRN+\n0hJPQCQZl/IRm1rd/Ew9LDTBIlTp1Gx/DhrVwQSMk5iWFEyVZ3ndHees6laX\nTy9OKrsmBnaRxBn4J1A4obewqIFTI/i9+tqlQTcqZ+/RtngjRFx9cV37GvQ0\nlWI8\r\n=A4I5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e38d7440f.0","@material/rtl":"12.0.0-canary.e38d7440f.0","@material/shape":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/ripple":"12.0.0-canary.e38d7440f.0","@material/animation":"12.0.0-canary.e38d7440f.0","@material/elevation":"12.0.0-canary.e38d7440f.0","@material/typography":"12.0.0-canary.e38d7440f.0","@material/touch-target":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.e38d7440f.0_1624297269357_0.4625251320944006","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/fab","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b5d0c38d67ca01bd57df54d736df28c8465a076","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.75900a5a9.0.tgz","fileCount":22,"integrity":"sha512-qUMVEQgWdkB1KDgLMTSnSGpqN3VU49F12mtoKacF0/r99YpcZBJsz3h1YWe7oe14hdaisq1A3n0mkUxaX+CoFA==","signatures":[{"sig":"MEQCIHezH2whawUgpNJIbkCJpeIa+wYmxb22NJOu7lGnYh7ZAiAR7I+xVk3W/LSHD+xwEn2QQXpPoxFcm4RfT21z6YIzRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NxyCRA9TVsSAnZWagAAMdgP/3hXQwcG6VZyKUL9sxc2\nUiT44pCRWCvAmiVAMb3ijLixz9Xdw9OUJG9tVbKfWssIDH0ofJ6V9HOZo8Ly\ntlsH+L0KDWBWh6vcda4IpReEUhcH7rq6lXBNdsdJpFzWvcsjnKuRZj2aqxpv\nhf9uVtRWxOjzt/rWZCabWt4/vO3S5EASG9hzB/Tgm1wqKCU5smKupAKO7ula\nxM6ltJ1x6EzpQu+FA1yGEi4cxZX0X5zfP/oIZnWokOT6oNwTP+bhR4QrDhth\nwtOqsW9LzwMgqKpx7Qwza7NDnwKgm20DpKJWDRbSgII34GohG3q86eTBZQy5\nxLTXJbfLZdtong6/1a714mSvddJGqZ0Jm+nZMrdoloI8SbHZDFHOnso9CaWQ\nOrqvFyH72QH4StSUnA/hPIuGlmd3orp2gGA8RVFJYDAkmEbeM42FU7t+zoAL\nb8zc8YRNmT+6ZYx6BYa2pXsyiKh1+f/OjTmQNwfE8mb04C1JfNhl6PpwE5ah\nPwrmv3jzkqf7gS10Xv+CTvG6xpNCrdHmqKOEaBCwTN96mLKUPXh6f0a2evTq\nme8WXWSiGV0HGqoaQmWAtU+k8MqIfCM0VRG1oHPboPSdZGUEBdKZmy6VYVBr\nE1GQsRwjGNR6gvufM6Kebg3GsDCpb5uDcLbh7wBRHfvGCgQEgaC07kRpv0Cd\n5kiP\r\n=khWf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.75900a5a9.0","@material/rtl":"12.0.0-canary.75900a5a9.0","@material/shape":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/ripple":"12.0.0-canary.75900a5a9.0","@material/animation":"12.0.0-canary.75900a5a9.0","@material/elevation":"12.0.0-canary.75900a5a9.0","@material/typography":"12.0.0-canary.75900a5a9.0","@material/touch-target":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.75900a5a9.0_1624300658162_0.686915788288033","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/fab","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85bb487bbf9c8d0b33aae40387056d6895bcd0f5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.33e6f50e9.0.tgz","fileCount":22,"integrity":"sha512-zBCn8nT1ws25oyfof7goKi2Z34RSFMRL8IYvnBT6DPIiZbuPiDzSf1wDomAZTxLu493VYtmaAnkk2k00rooyTw==","signatures":[{"sig":"MEYCIQDYiihbKRgrD4u8kK+XvrA0hWhbzoE6akuDZFAUhszYXAIhAMrgP5DWxnIEuUgBpBa6fFe+vdrWgaIdeCbqwNM+Qlk1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nx2CRA9TVsSAnZWagAAtXYQAI6dfiaHTskYX50kzOkH\nIHUR2E49AdoG3DGg1NQKLylnW1YUy3Jg7iGik6tfXzUeAyVIka4T6phKkpHX\n4G1SmIrrQSnsVX6W6AFKKDcA3M57VGP2AtIE6yFg9t+PWFEoE+Qy1yMO1wFO\nwZHJV0Ovt2W19EvZZK1WsqWhYt7+T7GfwPxltwr/KpkRRgc4XMOQ+QnwQXYc\n3+X1wVd2u2+zCArTf1HGBmcu+vgJFhLfBUQC2aOG+UaGjIrwf0TTa9Mo/JgS\n4zRHOUXvC6aO5nJRj9RriDeD9eq6qOkYjBwretJ4Z+5jk2zqLbG+N1qsKlT0\nLy8UTsPgQQhyEVfKJfTeXPBinK0Q6B2lyGU43gGwReWdwjjgdaAwzeNSUWVn\n0R5b6JWXYFMHbz5TThBjijGXKbyzy1nojtc0Cv0BIq6Jc74BIt1gSerbDlVJ\njjmnJqOphzfLDLrX2JcySEuwPV5ajZ7jKNV8H3IXVGo2th/DsuipXKrRZau4\np+3MytMi3NrZM8XYMevgDBSghXQiobqROQuds7/AnqJ3fM5vZO8nu6iq+H6s\ns2C9NL5mbOLIo8cBE93ESsrQuG26Tb6oPA3B7yKp4QHXx6C+DBGyyhyBFy4f\nDNl+Hra7NmacetlZdNe16m3hysInrcJ3fQ7pOKCLQunMIolXV5ks08N8X4Av\nox6r\r\n=qGHG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33e6f50e9.0","@material/rtl":"12.0.0-canary.33e6f50e9.0","@material/shape":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/ripple":"12.0.0-canary.33e6f50e9.0","@material/animation":"12.0.0-canary.33e6f50e9.0","@material/elevation":"12.0.0-canary.33e6f50e9.0","@material/typography":"12.0.0-canary.33e6f50e9.0","@material/touch-target":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.33e6f50e9.0_1624407158133_0.5535227706903796","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/fab","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.8c685301d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1aa9336fa963b1a52537425cbee6784c38fee18b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.8c685301d.0.tgz","fileCount":22,"integrity":"sha512-x2mLwB0yKgy0ecxhP7H9Czp9BJ0fyZZo3h1I/e/a523W2AXg85coLAkMHQhQiJkKpdEe6LuiUMDzzgdbNc36yw==","signatures":[{"sig":"MEQCIQCxIJqKa0Ztna3YuyK2zwzEXc/AS7LD4fUPr+8zTz8VFwIfN+LeHNTvfrM3/8XwBipnUYD1k0YHSO5gZHpOWZRbLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03yHCRA9TVsSAnZWagAASEYP/RpnjIPvX6rYtZBCI6Zh\ndHhJm1gDHukeMljP02e3BGDDU/m0jVV+/fVYEtoTI52cfdocedFdkz5oJPCT\nXehjgpYBfNoBDZTrmi3w2ZtrX0UqK0dqQrkfyQvoQu6VTCZjuIpMNUGjogKv\nosVNm7LxH+gY6k/3huNKSJhpSXZZBYLzCsZbh8VJ5WZ1TKOWFQfp2LpTCXfh\nM2nn0Dv8x3j2rwNwPx8gb0n/OmTuejyLsdhwj/fav+j84c1UzO82GCxvKBY1\nBX8FkUQhVLhR9cutF8KiK9k7TcTN4cAmxN89j9p9KV5tLqiZo6YaeMVUKhcM\n19WNG5FNCk5lZtKgEjl8yy4QMukeq6BCdovNO29ha7j4kDf0oY3Di1kt1h+A\n8CtK+WzvxuU7jNnUpbGtneRkL2LbdR5sQqhZ3tn7i2RZ47qhln/bEcVF1euo\ncS5uGXUg+5B2t1jOx9eyBVxeF5KJNJJOYZl+OyCkoVJgt04nsFiBdcoOBBB+\nbS8wYqaL8HgMMB5kzpmIDH3owTNpV/1NxHLPNqOsdpoXKp33zRD1QdwDTDf5\n0HZzeYz70ZylruhUxw4o+fpSu+PdCcHhkugUuRD/OJO0qOkcz9EKNqsmNNcT\nYJ/vbBE28FXZZHMV2H1M/gCMZ2Q0YjPCsB68GxmUzpwZ2/+f1sYr4zKOk8WD\n5jfK\r\n=A58s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c685301d.0","@material/rtl":"12.0.0-canary.8c685301d.0","@material/shape":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/ripple":"12.0.0-canary.8c685301d.0","@material/animation":"12.0.0-canary.8c685301d.0","@material/elevation":"12.0.0-canary.8c685301d.0","@material/typography":"12.0.0-canary.8c685301d.0","@material/touch-target":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.8c685301d.0_1624472710881_0.969835124036966","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/fab","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1acbe2956f7a317e243b9b0b0594aa6b2125eae6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.8c7d994ae.0.tgz","fileCount":22,"integrity":"sha512-46rhuCJZEfQWF7b9Asbg7WQoDW6iI2CHzGv0xyaPTCmt3AxRyMUnS4U2rhPK8LkqZWuBrEF4R3hD9w4pqvnIMg==","signatures":[{"sig":"MEUCIAoJ5AksexFhU4cQFj2rgFDF/UEbw/F2m+F9ZqhLdochAiEAlOQ6axXoPjdDZsA+uNjYop9Z7xooE8fRhgHVVRaRFqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04tBCRA9TVsSAnZWagAASZ8P/0z9QvlCOFhnvN5jRBLr\nI0w3L7AH/+RjjcM16I9ANA1B0rngwc7teBYclYFKzz0odBseiAhN6V/nrvCc\nzc15UsV8YpykA1nbrseJ9Hejdm15UvEB1LL6JQLq4B9nS4CiLhO8MVJntrp0\n9/E2uYDq8+qiiv2sJZSD+du2y6w1X4CfCYAkspPCV2nHp2sLAK0zPRgE7zAE\n0Dl6jMPRRWOxsQnm5YVgyij/oB6Qe1iSkAximNL679G7VuliLHgTHmVb0ufR\nUuSSco4riUUkwUB0IDW2jyG5lEyzrZvymV+ZylVrUfuNqyrr+vaLfSxAG6EX\nt17Q3eJJ6AbTNy+rfHeai+OWSMF/ScQwwFCZJo7r8sSwIjt9v2oOiWJHJneH\n0nBSuUHQZzJssiwcesoOQfEKPSQpaxD331EvtCN52o2cszhZQzRjZmsLp6Ow\nziIyZGhzqqpNe4d7AyKX2X0aUXklPX7N0aBgckjq4RdzfWlYVOlmq7ReUxeU\nQyXleAskeC0J63NquIBzYWCZHutzcc4Ss148vTRPqxMj7OoYwqHg7lI0L1E6\nVjZObFNMQK4Ru7UZfwHkkqpFjVSxkdDqs6pAGyMUMPJdH2UPENCpKcyqQtlA\nf4wCeUMnQuXrUNWnp1Pr1zTiP9ZSp8fTUtRJjIxqpUlG3m/jawFNuV+anEKM\n0N3O\r\n=6UKF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c7d994ae.0","@material/rtl":"12.0.0-canary.8c7d994ae.0","@material/shape":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/ripple":"12.0.0-canary.8c7d994ae.0","@material/animation":"12.0.0-canary.8c7d994ae.0","@material/elevation":"12.0.0-canary.8c7d994ae.0","@material/typography":"12.0.0-canary.8c7d994ae.0","@material/touch-target":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.8c7d994ae.0_1624476480450_0.540002540639007","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/fab","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef19a5b02249e9b320f1e5b7e2e16ebd44875a9e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":22,"integrity":"sha512-rR4hBC4npJQLkvFxigJcNpAJ0wm26ia9xmxZnU6Qu1kzcPdTiK4jgNU3tVRIog8BnDAfAr5KxoLlsNllDR/tWg==","signatures":[{"sig":"MEQCIB+MnA4yEMPe2eYWeVf1XVMeLdewCjyMRhGC3kcDxHgEAiAe3l/xJ7buaVUX+jZd+gjpDwkPzyAaINPOmmQFl1HWEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K+jCRA9TVsSAnZWagAAjjwP/A5d5DF9tw2F9gUc2utg\nKghswhJRjIUFFTj2DxfCBZg/k1Bcz2j4aU9dB2mEOa8PMOEZB3Tmrukdnh4k\ngT3gYkxoHxtt1XqPUBWgWWZxFxjtpN6WnF+t2KF4vQ7FMJ7s5cAKkx1yN09j\nMrnJe8REotBiHzu38hXH+WRIx6tPHj9AkE/EwQk17BnSl9aqEFxvcmCNyt0M\n8u8jieevIX7q0pvqa3nctmTTMtOaX3Tm9vbPWnVtJH4F9bUtyDB57wbLlgSO\niXGDeSSALYyIYkD9W+bvwhBBPYro/r34XGCxLTe/LrfMzD+Fg8M6dIrYJBGP\nwzF2u9QYtyNckf7NmssKLj5T3b6THfLi2AnbaKNSGx5o/r0lxxhCmJAK7lVc\nSJzWwiGOc5PmDIMN9ymd6bDEuoMhnEm7+1jGQV9ubuuQVDf2GG16obSM/tLD\njQT+umxGzDe4zDhbwbcjlYndGZHZXrQF8erswHpNcgCiBFISh1VDG+NAxgOU\ntTKTO75ngd+lzmb/myzS1OWI2WGhe+qRc6XqvpCpAXzOTgJiRRvoMvWvTu4y\ngzRGY5p34gWL1pelxCfhwGR3wdQk8vE4eb53o/i/gM09lbC/6KfK3flYQoeN\nVbYingO9H/m8yVBSzQKW0mi97OyIwcoH8TdQe0gdmsOgArDAVbuWwcaI80zi\nZmZc\r\n=dsoQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.4ccd39bdd.0","@material/animation":"12.0.0-canary.4ccd39bdd.0","@material/elevation":"12.0.0-canary.4ccd39bdd.0","@material/typography":"12.0.0-canary.4ccd39bdd.0","@material/touch-target":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.4ccd39bdd.0_1624551331497_0.22476561339961765","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/fab","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a601655dc00aceadf61f0e96b0c25d8b881116ae","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.17553e9f8.0.tgz","fileCount":22,"integrity":"sha512-Tv2cQrGKHhdqkImnOucewTreyBDjh44p4FlRQA+iiQ7D54zn1wmzh4qoBVQvyRenhPatKhP3tKfh4osVUr3NXw==","signatures":[{"sig":"MEQCICk2hdKP4wyo6HecELzxo3T3Chd/drfw/LeV6DLdFifPAiB84f5sM1xyc1XOKTvg1QALAJakRsO7XKlMsqOC5taZIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lLUCRA9TVsSAnZWagAAu0cP/AxpGURZy9s5Mm+YfGyB\nzLiOi6OTzUvB9IfpxTfDUy3JlOjn3c1MT6+cmGxbIWSHVlW7omhyiMvMZ/FT\nJ9SeeUaS4hoRpVdymFTwuE+zP6kpCCJuD0DabQXiSokmugp/YjpvB9xvpnNY\ncEmYRcVx4rZ5Mqbw8exJkT+sM2m29ne4ktJ1KRKrre9iqgZOv1jh+9SD3vu0\ncMD5QOrTWAEPwTXg/ihX9zAQkm+U/7I/ypz0FvQv6hDQ8bNtFz6UuPjl+Tb3\nBAwTOPpxn4W4aAunW88rsyfboCjUbsI7qeZ4H/ekWSo40KM/tPx34H8EIB8V\niIrYQXB4vpHu9xffLtwO7VHdNCE0UYSrH9x/4omVSE6KcG10ny5bCX07Ah9w\n6Q4JevJcxoCKR92VmR9kHysNpAfKdMEcm/IaXj1PrNqirSTv1yekFtm2YHXR\nxLxvmZXZXb7WazKs/uLJH6Cw/5smQzYhVok89Mf+RLNBes0fCMltsD4nMPgc\n3lkeaI8BrzKeyEEpZAzFZWss9rfyk03RXd0F5xmeERcVQdcm/gPM+L8sv1fV\nx3MuZhjfkWTZlbgz0m5gKkZ0osmT/JhLw0XiXI3sNPvTRrY4Qoonj7j1DwO/\n4Msjqsjq2ZP0m3uGsL5KzneM10YlG+C7K6JDM2B/nkIw4os19qloeJn0UpZX\nI418\r\n=lHFk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.17553e9f8.0","@material/rtl":"12.0.0-canary.17553e9f8.0","@material/shape":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/ripple":"12.0.0-canary.17553e9f8.0","@material/animation":"12.0.0-canary.17553e9f8.0","@material/elevation":"12.0.0-canary.17553e9f8.0","@material/typography":"12.0.0-canary.17553e9f8.0","@material/touch-target":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.17553e9f8.0_1624920787607_0.8214164711467249","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/fab","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b7e75ae58a190b7cec8858656dc06b783d92cfe","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.4c80072fd.0.tgz","fileCount":22,"integrity":"sha512-h6cHMyr24nrDrf8Xz+zjgPZh2WwH3hlkAaNrwkzJHJwl7eUqbCivNkQv6yIUw8Ybb515LHKE13wcy210aFiFFw==","signatures":[{"sig":"MEUCIBOfQT+D7jfLTtIRq+K4ksxatxijO5ocIrA8e8FOPBmVAiEAy2mXgdl2/N+uD0/gFLJ50D2sdFI/dtE9cV5wmwzKjQY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22lYCRA9TVsSAnZWagAAeyQP/iXAKdDfuUQegWoOURjt\njESYa4Ju5AI366+V58OSddNfOTtFRxyiVsMiAdTOscdJwIV9ThTLcdD5Cuhg\nNS2wjQJTyFXnk2hEDjrpTe0E/vM4qYaRvYf3l4XUzW4KmxA8++gBOGTq0S9z\nEdzH8TXQwnSzd3sHSAKvnSRSDemCzAA4SnQI36E45hD7CaP+fhmXtYyPTuF0\nQMMWYhT6YeNxk/kmICv2T/I6Ykd/v78l5zPNyhj7+ncmKKj5aEdH9uNM+/of\nT/RJqwy0erNvxNy7+bxEvECjE8RtqBPPjJH364vgr6bdN9iLhUsduHm7pfu8\nUUGCj0BlMsPngqBw51r5P4eLtVRqt05wa9X+EKWHPdRmmgl8cnzXiH86KYML\n0A8dpHP0KOQCculJpFsqEq1Rt8eekov96rajussPIbR46QusAPrIkujbrthl\nvium0Sn6raAKws9FOi2RAhxlZmSgQyEfWDPkB5ElU82/HBseFPsJqpG9iTK8\nixAjMQYfcbIR6FjEU2hQj9wQXN4q7/50cDrKHNCDIAyjVqb6OcicDaJ93NLK\nWBUZhj4FcP8/xNH7E0G3QRlizY+tWiaqnO+l2LgWiMFdOsvSJ0pQsishyZG8\nIEBcrz064hOGPge/Ya6w+EbUEamzupovlypFnk9m/Q82ZlQsdcTUeVd9ZKxh\nPHHH\r\n=Ri4T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.4c80072fd.0","@material/animation":"12.0.0-canary.4c80072fd.0","@material/elevation":"12.0.0-canary.4c80072fd.0","@material/typography":"12.0.0-canary.4c80072fd.0","@material/touch-target":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.4c80072fd.0_1624992088160_0.251144363260404","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/fab","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.796811db7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89681de7832ab3e1c1997bbe16956474bf7b79b0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.796811db7.0.tgz","fileCount":22,"integrity":"sha512-642ahKIj7/PE+cLhsGJqdFVRHfayks0LyxRpj8pV5HS8DD3I7F5gFnzzQEjnzh28TJY9J1ev7ye6VIhYvHeuIQ==","signatures":[{"sig":"MEYCIQDiYbcaDpiBLpBaPOtMQOMpNEQHw9CeJkvJ9INML8wNHAIhAIUJKiKVDRq7R+Xk6uQoKvrtan+43PfPH+KJAGMsNrpo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QZvCRA9TVsSAnZWagAAiRQP/21S51zEQsvMKyrNiwx/\nMq4vWZgxlGnaYUSRLTGEEwr5HGFHd3zN3hacuCHRaDX+eJ3/sXPctXVabrFj\nuVk9ec8aUHnvmgmLI5hJezgJQ+e/1Du20a7RU6XM5O9lTxZa2UjU41Fy5mCy\no5J1vfjEepdPmBr43AfROnifYLdiRDuWnjhyozL5wrMGaNAyD5SSvwmobbHI\nid+43xcusSLeJKZe1g6kva35go7JmVYTZ2DSsXD6KJMMtJfHwUEjgTsuJDVX\nTDR7WtJXdgbbPJfVBz5hsdOpsRBl61SwRCh+rRWzHikW4BIY5FOMRyB6x3ze\nWxE8Vgx0J5CKR/6gfmJ3NDxDeVItOWF6VI1mroiGB1udLczLcM8wbS6bJdLm\nlXrQN3hM7ukF0xO0VypUAxAQtkabzhX0ItKKUdMsramakh1aHgDjOjQsqK0K\nHRenhsIJtLt2wqzUhpuJSv+W3ARrBalgmfGYgj288+S/3x3nNZwZtf8Zierq\nQT17QB4ItZMfIMK05RF/DFkbrWmysKr3gB6vnBiXQV0umG5wAyvUW6lYz0zn\nd/xjfgEis4F85gGOJwhNwyPq4DtY+tjFl2VsPCIafQqzj2SSknf5/2szTs5n\n+FrKZFBebmCbeGgNPf2jpXN8NfPCipBupDEnmqlHBW5BsDGuVaEw+/DhKX4Y\n/oQT\r\n=82D8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.796811db7.0","@material/rtl":"12.0.0-canary.796811db7.0","@material/shape":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/ripple":"12.0.0-canary.796811db7.0","@material/animation":"12.0.0-canary.796811db7.0","@material/elevation":"12.0.0-canary.796811db7.0","@material/typography":"12.0.0-canary.796811db7.0","@material/touch-target":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.796811db7.0_1625097838711_0.6294114600642184","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/fab","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f84ec5975c8f14359620ef23fccd33024648fdaa","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.70e1efdca.0.tgz","fileCount":22,"integrity":"sha512-MvgXM3DZpabpRgCN3Df4qyElov5Z8uwOF+6Eyxf7YLtIG1l/jgbnHTo1De9xYKAJNLnabvYqr+QN4ntSsTd84w==","signatures":[{"sig":"MEQCIB80Hy+ohmhlFnx6czSGuUUbP6lIpRLRGJgiEcpRDESKAiAaAA9aUhMc2ZfnycttQme2LnFZ9fTidYdUMbjnJNJp9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fY/CRA9TVsSAnZWagAAuoIP/06Gsg+8wOa65L3K7JNn\nsb5cnvR9xpY3051WlZth8ceSA2f6/KqHCODpTrPAtwolor4dgnEs7DB1k347\nnzjzZ0wKMtir+6ES4TfC96RNoIdjSFPw5SP5uq14w6I7vUzNmy4GUJ3xWwso\nVA8UK8lIHaRN02fc734+XBdDFQAMPPkTeBU48KLgyRiGWIPoAUswnfjOM22w\n10a9inzZk3LJKPetiz8eW1f2U3FJtCzYr4BDoFitDD2kJ61IKvnXJetc4qyM\nSbo+ZcQjFEe6OUivUuv+Pv+W5auLAOm9Ju5hlwPNu8CZIu/+ZJy3DAZus0Rh\nrE3uhNb4Ct5+bn4RGdbRXPFCWf8kG1dvdIqfbTlFjsQF3lJ6eWKqdUOsqkAQ\ndoaqe/DLY+HlTTLllbklG56JR5q+5Wh4Yg66CRLKjApCReQMc08/9osOhWQb\nCK6b9lZYZpDaxVnbxGPPC0mabMW8gBBf1VmlFvEMlL2KyfFwZpJGGRjfoiRF\nF0FozDw0pDJ0jX/rNnIrw5eAfXSuT5NnFdvmF07sDUov0l7JKjpz4jrD+63W\n1eiVpmuhvld3m68Hn3rvTOZaKgLER8F8SorbS0ZICptYuURjRnAOMZvtYX43\nAX7wOLJ9ynKPBHawDAebZDgtlZmAwybKtQ65f2/088grXASzbxKMoqi6vhAB\nhjAM\r\n=RVZD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70e1efdca.0","@material/rtl":"12.0.0-canary.70e1efdca.0","@material/shape":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/ripple":"12.0.0-canary.70e1efdca.0","@material/animation":"12.0.0-canary.70e1efdca.0","@material/elevation":"12.0.0-canary.70e1efdca.0","@material/typography":"12.0.0-canary.70e1efdca.0","@material/touch-target":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.70e1efdca.0_1625159231025_0.433409379344174","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/fab","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.435866d32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f3854932eb0ad2651f3b0dc655906bebb34d711","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.435866d32.0.tgz","fileCount":22,"integrity":"sha512-Aem1FHKNro8AfUh8R5kogKR/y+h093gVrHWLwZRoBivBOJoLnPdqYEI1nsSNkioEhOEcQZfqg72ICCY7OOIyPQ==","signatures":[{"sig":"MEYCIQDj+D3jcrNnuJkvVqH1/oUfug39jDRE2Xnq+D0g7pg7qQIhANjSkEpBVkWi647y404gCDwqMtReQYVbNAL1lOQ0dP4W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31k8CRA9TVsSAnZWagAA7eIP/RwK0PWnKlt62n2G1/Bx\nmQ4gxTJcAzBpkAnJXZgXBGz52LRiV1vVo8TsbWJd11rvoZRbe0at75B/ZO6d\n2x4xix6+PXpmOyZCHMlHtr0c5Vi9rmkArrLRs+nCSRw8aTU6ViltLvc6FnDv\n09HuZJSd6szvzi1HvGB2HeQx6AXD5YP+pj3H72uHsPawfzyOTrdm858XdOce\n48SMzTYak/rfcB5JYa9yGMn2JAwhRqg0obNPthCK+RAzx1YTE9k2KkdYSgws\nr4aq5sBSwvdatAKn/c7aEWlM/sfrRYtut0BmkEBL1Xdc0/pRb8237UGreuCp\nQO7uC/ZIJWr7H5rTOsNLX2u15RU2vkhFosxMGmPG+/fexi9E0ZS6oHmFskCI\nhn8ug+x7MkO/zqXAk4H6MrzpQYH/N0b+Pxt7YMHMZnEB08m5OCYc846w1tOs\nHvm18y4fib9HXqqwVWTcwgcyn5NzaWQG/HLcsBbBrN3D1uYXdjjB4FxRVzZ4\nWjsJAyIf/0YmW5EM1+DUq61U5ietfGvntKgyFGC61mL5HBjKN38bWUsaGc0D\noD/3CcqfdgyMa+1e7jAHmLQqfi08xQ7kKNYOIbFPRzfx4r7/+TfdEy6/WW72\nkjH/qt3rOvzOxTLXG7qaTvpiJTC0R5extH74xJXCLerqtyJsq+K/EEjZF9SZ\na3X2\r\n=k1ix\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.435866d32.0","@material/rtl":"12.0.0-canary.435866d32.0","@material/shape":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/ripple":"12.0.0-canary.435866d32.0","@material/animation":"12.0.0-canary.435866d32.0","@material/elevation":"12.0.0-canary.435866d32.0","@material/typography":"12.0.0-canary.435866d32.0","@material/touch-target":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.435866d32.0_1625250107606_0.27804459394030356","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/fab","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ffa349b7afededfc8fd33f9b7c40d24ff163024","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":22,"integrity":"sha512-SQ9/gBNJiRzZIptSl08Ciw52ZZkOyOs6G6tAPtmgj6g4oQKZQ7P8BMbD11YsuuQ3kdIqKXgkbtAIoaF+wsXM6w==","signatures":[{"sig":"MEYCIQDK08VCmpYNhx+awKt3X8H8tEkP7gwtSiLVtX2yvyvQiAIhAKcS/HTaqRBV+pJd8klzib2vx/G3QkTnuUUqGvVqxwhx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36inCRA9TVsSAnZWagAAcWcP+QENcWpn45kHdzwUVavw\nO7d7YMrQCwBAqyWDgctLawfxF619wY7vuL5l+2hHhAJjO0jhoxEBkyvf792M\niR/apNH94TfqmQy1KAvPccBnJBZPBTV83P4BGN/WPCb921MHew/t9Koexykm\njZ9+nuFemgB5NipocWBWMWYtUzZEbTQ37qJfZLe2SgmAnxhKLR4yeyKZtmhM\nDezzADNwcZZy81Y3LxXTshVKPbM40/mxjhrvt6mUUvt/EqhuXD1Qd/+RzeD4\nHP136bsfncb0Wh7MNEGJ7EBVlBcpKifAD1Ks8QI24xczgZxOsexrZvBcKGpi\nBxyQvG8UCgGCtlE+npkaUzTp4NvHF9nzRwxpxo/zAg/L16Yr9w9wYkSZASJm\n/jZgMkl9Md3EzHFn6YGLrC3ZaEdM7ndN8RFWCZMgGw+M93WNij97LREauOv8\nw9T+9jaDNATsRNrUCA6wABhWj89WByIKPNyfxGMgsa3s1EIDkcHHMfs3lmtg\nGykDk0nzEE6Pr2EFoRs/AMkK0Ndw1YqoKbbgCVB8XUqEDchXXJoaBjmWKSaz\nbOTzIFduD9HY62kOoo3O5RJNQ8OIUzH9pKq0wESqOBM0UZkS6gnCcl9DMJx6\n1taMRXd/uyFvb7VMw1qV5/b2AX2ySsKlpIk/N5fLV9Kz2CkbaLIPV6eql8Jn\njxmE\r\n=DdfK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.d0f9f3f2e.0","@material/animation":"12.0.0-canary.d0f9f3f2e.0","@material/elevation":"12.0.0-canary.d0f9f3f2e.0","@material/typography":"12.0.0-canary.d0f9f3f2e.0","@material/touch-target":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.d0f9f3f2e.0_1625270438908_0.4421952788899388","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/fab","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.adeac0549.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eba34fb2cae82c6b07072b4cf6ad211de051322d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.adeac0549.0.tgz","fileCount":22,"integrity":"sha512-FE2AUUPEtJGroUxEOuYUJM8MfHrnis2TrGErtTybjtyvXqetJFIAPsDs0A7jkiBZyLS8fcsgmEKyK4fDRGyieA==","signatures":[{"sig":"MEUCIQCiGdwlTdFJ8SHQRCIvuMMINaUgSWo3Vf124NQPtGvLCwIgdy2ebOMmOMAlV9y6zjBynKxKd6dNnAeUelUSQVkUL4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xVACRA9TVsSAnZWagAAfdAP+wdQNBdI76F/y2Ma3SGL\nU3xn3B21uprirW0/NSXN8TBOuyp1KFhNIpALNHXGLHcmpZth74n3294TLtWX\nSKKZ3Rplfe8qmXGSortp26Zn1BnzPB7eF+SqLcqJGZ32hWe64IpLvNwab1oS\nvJcmA8fO1+SOTGGmDEJaO7yVGwPuQZ/wQxOYjbjrqZq+H7Mr3caJs2SBRcKR\n3PLC8jMl75YUJ2ueKKeu7Ms9Wz+GcqeUL8mvtuDKQAqRPBZLN3SG35ej/X4U\n8UHDJM/5OU4nhxGBpvH+omk4ACxE4wD7cx81+e00S7sTtVgumaCB07t+7m/x\nhjw0g2p02AXHJ+/peHrXXnzJF7l666928OQ7l30X+G6hRG85WiizpV3y05xD\nRFTta0h6hjQauxiYNNsgn9cIHXdil7wqIvavgdu7L9xM9V4JJO9qkXHlpGa7\ndw+gU5uczMusM/zNJc0Ac4Ug1+R8wdUpwG/QesF+6qcWbp9msli4GZXSf/Wg\nyFldXKdN+uDPezAB1rutfGR73Df5+znmAgoN3Ioej9kg4KPmPKW/ZrDKUVP/\ndLhL1xi8pn8lRQ8T33VAo3yKMy2pHUZAUcQCONcj3f5QRsD0w+SWhabbrMfk\nZc9pYWUseVRIsj+zVMy7OL7+SRn9ai5TqkiD70GAAbvYR9ITNLVRjbB+nZhL\nttjc\r\n=FRh2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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","@material/ripple":"12.0.0-canary.adeac0549.0","@material/animation":"12.0.0-canary.adeac0549.0","@material/elevation":"12.0.0-canary.adeac0549.0","@material/typography":"12.0.0-canary.adeac0549.0","@material/touch-target":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.adeac0549.0_1625756992343_0.422535608666335","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/fab","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.068fd5028.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"157cd06b9188ee35c5790934006d86c1dab551c2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.068fd5028.0.tgz","fileCount":22,"integrity":"sha512-FjPMVYIh97617eAgODUE84gIZ/Ko2DriWBMv8r4gnKs6aNQGrViUloVq/4Rt/xMC7wt1Lr8CDq9FHXEzC2ZXog==","signatures":[{"sig":"MEYCIQDTOga/FM9Fd38S2K+/QszG7yjwX1eUAXjOTvDNwcMHGAIhALOpjeccBrqxMH5hbLvM8GlEiq7vzqQGGPb8qdD1CeeF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50wyCRA9TVsSAnZWagAAaZ4P/RcNkSMW3XBwBUOe/d3e\nh2FnHIjJAdFcEqPRNX50utIsZsZxLdoRlHtRAuPaWotOIwjJwgVRshfiCOdF\ndJvQZPGKBlZmQo4xkgpcHcW2XNRjXSW/oCzEKUAqjKRJEpWUzQeozjvZCZP9\njmStbGt9w+VbtUeJcx9saje4q8XjonI3lJZK9z8OZgI7oyoiCPH1kjSmQBKg\nDrn76Ira3M2MKwcI51olbQd/iuDrnMHMKgTmd2KyZqVyDnByW8793jXk48Bx\n6OMe10BNOykO843RmACPuSpoEYfeGLwB2zdeov2LdoYWRI+dXTBBa79Z4tSV\npGQv3xtzbEQcABEL9rs7Gu9nFBx/vKuQxBjpTzZQOrz4hvu3Waxp4rgV6jkP\nhmVLFjZTwmH/EjQyrbWpbuyWjUGYjfvClHAkdSgPuU+8Sf0GaOBPNve0n9Zw\nXvz5cqeJdsi9c/JqCCIqgXbdOwWDC327pohTPCQYpLhvLcKIAGzmXEBibmDd\nXXD/snT5Os33LVSTE1LBN0Nc/4BWRwHIRAPgowPVsXzEAqWHC1ubb+iBrIWG\nfm5ttCnW+oNoJMdSwK08bw1AQr3HXzzrLT/s2jN2jse3itHy9wvXAq4/kGwU\nKntcn24aPIWS1ipX52XfqAMGH84FMXUQxePg4AWZz9U1LGq14p670E71H0ry\nm3Ht\r\n=HwLr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"12.0.0-canary.068fd5028.0","@material/animation":"12.0.0-canary.068fd5028.0","@material/elevation":"12.0.0-canary.068fd5028.0","@material/typography":"12.0.0-canary.068fd5028.0","@material/touch-target":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.068fd5028.0_1625771057830_0.2748374144533934","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/fab","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0130b25dc83ddbcc7f8b0c950481e89107bfa312","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.5dfec7a14.0.tgz","fileCount":22,"integrity":"sha512-eegaBDlRuQVr+dMXbf1Z8bwEO/dDxwkd0HUNvpunDNzLqUO582yEkJMWnmg8G0dRx1qmwOLwgVDodZbKTyf5bA==","signatures":[{"sig":"MEUCIQDSh/KaiCNd6Cih5XhxQINAc3/IhDEjrFBG++EbIE+AGQIgfe59PDFYpoe+IYUyUKJKV+vx+1EQazhQ0aCgPNpclmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KBfCRA9TVsSAnZWagAATZgP/Rm2sgxfxSRNrAV382Be\n0aCyIpKm5M/P7BWCXDc9R0z79QMT8kMHf+rOQ6N5+N/NP+bZyaX6gVkHvcIE\n0U/9HSvJsuOWY9msefRmGpBjbrLNw9K/Wk0cN9L8ldIqpbF1/OTsNmNwvl7U\nZHBroRr4n4lpnZzijVhG7mZSWsXrR4aWSWqScK4KupFZH7seY7nDz552NGZE\nbmlhZmt7UsTpgFzDyNcAnDcrjy/Gs5MDikfOrD+hptOmcpDwxikRzUNTHuiv\nXGR2czodcBGqL2uOUiYQdYfAwZ57bYrEw9Wkb/kNGoFTu4AYJ92645JmLHdR\nZfNv5oTZwaoA7H3vXueYyBCSAT2s9AxrPOwrdKaPPV/JXVAJxlBCFZtsAfSy\naZL8eXdRMRxfqA+U4l7CyVirP4y0b5d9cb/SNnfReOckznTU8nTJcmpmCHJG\n3mi67CBZ0q+R/3uyVDcKHcJz+JwzhtVyGs6XWq5dLHcvMxGhYvcr3aZ+txJd\nqfozJmk9CKa/rd2AJTW3uJcPOuIj1sROckNOUdaybY18zxvElfSd6jp2TT0b\nBwzyMSxrzQ7uJp48XOvwuSgjGcCKR2GZnxmmWbHRcvwIAwv8GzuaHPa84bSG\nNz5bAMW4nI2AYc0oclYfvsexbQpoarKxjdl6B10OCOkLMsYuyPEqZYn2YveO\n9dRo\r\n=UcXk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5dfec7a14.0","@material/rtl":"12.0.0-canary.5dfec7a14.0","@material/shape":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/ripple":"12.0.0-canary.5dfec7a14.0","@material/animation":"12.0.0-canary.5dfec7a14.0","@material/elevation":"12.0.0-canary.5dfec7a14.0","@material/typography":"12.0.0-canary.5dfec7a14.0","@material/touch-target":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.5dfec7a14.0_1626120287270_0.12597961684941228","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/fab","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.07a73750c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a77b2174069144dfdb33ed76772a8c7e44e4c30e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.07a73750c.0.tgz","fileCount":22,"integrity":"sha512-gC2GECKw/7NOqc9B7MEdp+NYZykW7F6e817xppTJUCNqw3vXbveUZINM3DBsRQCseC1jrBEbcbCYA01PcpzhUg==","signatures":[{"sig":"MEUCICZRY/MTnIjC8pliKwEfxcRJSYWVoapRMPEIYzm0qX49AiEA6HzZQTBh6kqkqUsqnTtDrqGWNt6gBJxPuEb/p0cBD3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KVfCRA9TVsSAnZWagAAF68P/jxIYx1auc5a2yM64m/h\nxPVPwx7BXLlTjMpTgfyQHyW3Gm3y/FMY5CHcLAvttS8u4bH5tIr9lElUQfMZ\nVLgoZqtVajdxOKGiKxnfciNhgBihIj3Yq+AnHTmUE1oawpMEMCCpWgOH+mjW\nzEa1ASQh96CbBKFDv9X+bNMdaqQNVOaYvDPo3Ybt3BespXkIbt8rWq3V00jk\nAkkULoASKTTfPOrC9ohmyjIxjhn68KY867RfbLjAUsgXFm+k4rKdaKL4oPzE\nuqlS/6GnK9A2sMyIaDOxGVOxM9yIvYTeWQLNTQf5oP+J1tOeOBWKv5UqgBZd\nx/35pzgS3PX74QFc9YBqkNMXFoMY0SN5wiPBGNxBNrF8jfFwfXkc+K23K0qG\ndfbtNaGsO4AB9G3D63YqK4sCyKjyZY5Hf3O71a1Xy9R0Gt3DYTbfgTotd6xr\nLBeEf8C17nYd9qA/tH2swX7q76tb+nsC+66daW0qCL10uMkXs/mCfbITjd03\nBiNaL/iBZiWMN1gG3YX7A+yuU37nOuuDbbFvQpoDDS46VegVdk3xk8XvK3lt\nuEtMP8sWOxujhN0LAP315YWfGplnwwTh2bsFzALl0CRJR1qkAX1Vkcn0VVy/\nvhwubxwGWcol2k9EGgIolODDzQLDFQPO48uPfr42uQJxUBYHh0g2pgwcngS2\nVyDn\r\n=yyPG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.07a73750c.0","@material/rtl":"12.0.0-canary.07a73750c.0","@material/shape":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/ripple":"12.0.0-canary.07a73750c.0","@material/animation":"12.0.0-canary.07a73750c.0","@material/elevation":"12.0.0-canary.07a73750c.0","@material/typography":"12.0.0-canary.07a73750c.0","@material/touch-target":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.07a73750c.0_1626121566758_0.950917002666986","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/fab","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"420d64a9d5f3c929f7fdc2acbb3dadf7e0cfc24d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":22,"integrity":"sha512-fNJbqXa8sJL7oKtFDIE/c4tci0tT7OOP8ry9C+mqTV2EGsW57wTGINJseg9JX2VD8meHy1uUPtrKWFV71Vq/pQ==","signatures":[{"sig":"MEYCIQCn3pN5dsg2vIKlCCAVI2/VOnJQ3h6d/nfXX4IHi7CcWgIhAN2NpZCkwsYRlFPq8KLSLH/Qal8ug1GSQbPYl8mgmrro","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PHACRA9TVsSAnZWagAA2rAP+wQRzRtMhWZKct6mA1Bk\nC9Xx8hONHW+7ofn4yZUykPcTeBl0jJJWDyMtiRTxqyDKNAPWqJF9e4Nr/Y0S\nPo/WNAr2F3EFyeC3Cifvx7KnoQ1HyQ3oDeHzluibgLYR9gTLzNaNXBIJ6ff1\nrLk9xc0uAlD8yEoSpd3FGsZdeyq8f0U8w66oxgpAL+ksVaLWHCJt2SF3g7K6\nRhbd3gpFfpODq5Pa6KFzH4Oe4A5eESVpn3OntgjFmzOPe4wt3QPZK2b+DnxO\nr1gesf6ax2k0zTI5uy/eF0T+h3fJla+nlFE/NkwoiygncymLRN25GcYxnXV+\ntbbEzWc3czXOq3yvvkUIZ8/id0diOWo5K3Q3Vfesor4R92w9pSqUu/DOqSSa\n5E+yhrI+VN6/emqaGaQMCPLj9E71BL8uxFSFbfEm01gwUEjzMjaRLAxTbWym\nvMOBSxbA7aK7Vy39n81DVB1F5609rxZcRJNtf1pBz6ZSAvpZPhE483NkQ37V\nEaj3+QwM7dF4iDmqo/CKt9GJ+aPFfsrvEu6C8ZVAcXVFq51ZoiNxn5AKIsXK\nl1wABib1WIH4r53Hgr1zT9fPnaiEbRKBLJ2C4yKg7LkSs+tPENkonve2FTFi\nIeSWA5XWiyAdk3MyNomyC5RFDfw3pvxpr+xwOKfq2qVqBX9FCV5h2+xHm9m8\n+ykR\r\n=XMJh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3e4c6dca1.0","@material/rtl":"12.0.0-canary.3e4c6dca1.0","@material/shape":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/ripple":"12.0.0-canary.3e4c6dca1.0","@material/animation":"12.0.0-canary.3e4c6dca1.0","@material/elevation":"12.0.0-canary.3e4c6dca1.0","@material/typography":"12.0.0-canary.3e4c6dca1.0","@material/touch-target":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.3e4c6dca1.0_1626141119836_0.4445215700306595","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/fab","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56b13ca6f4894214516a76c555f935210730388c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.ea77795b1.0.tgz","fileCount":22,"integrity":"sha512-1EFy6wuokAKAA4khgAyVjjSCw83awnzUAsY4iKY1y+ybVi4ttRC42y6qHdLn1+oF3YFe5O22HXAqcbCpgouNOg==","signatures":[{"sig":"MEUCIQDi0dsYEBv5rjyIJjWTVbyUsOZa34mC58TJ/JCIkpqPIQIgS1GONMcq6FHmMJJZiou4MrD0vFvS7FapXfasmtoYjWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bYmCRA9TVsSAnZWagAAtVsP/jXTmbJFWkpGjwDWNfOU\ntGLO3NqDY5DZOfsE0Wase6YRzBiVG6QydyDvLfoGHY7yWttBdiPNnrqEkVWP\nmIj0JnVybVzUW/vrrrLDfQM0n0aJqFB02cpCqA42iSa1IOEKIiTND7YocxlU\ndhijvV3pNVGQ0qHfQITGj8WVlqhnqg76FCE9RU1Y3g9YyUOqDSJuaWNzvPm3\n4/es9756yYn0xWE8cD1SlqHZOfPddqZADCxaFztUEKJ9wcpCuo4yGpPVxxU9\nygLInBua3YPHYZXmtwqVzM95uU9/CxUr/TZaj815ruBtxVazvslwth+unedp\nC9rJm6AN9uZLXJ4i7C9SDyfjjfYSbqdFNlxTn17vVbC0v60151B42F+lqhF5\nnzHV61lkZLeiTJ0wjOj6/ThMJg6RmLfJXmEtB3h7gm8gHdPgvPH8Xw6Xbck7\nL+Dgmtf9XhLqGFOLBXCBiQBR5saYSagQdxbE+xxiJxaTKP0T7jvC95D1louI\n4fm67HzMuMC/yQORwvcW8I8TzJQ9NARDXklCrgSxFDuYZNhSyFKG5i5nzfO1\nt86u95cgu0MYpSKONvcDcClrjsX4/KXDX2M9c2xLvg5tl/BMNotrdsdwiH3A\nixUjvsUbMp6ENOzeN+L0STmAZy03rsNfaP45NoCJrX1NrtS09LqBcJ513mGb\n3UTY\r\n=4g7U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"12.0.0-canary.ea77795b1.0","@material/animation":"12.0.0-canary.ea77795b1.0","@material/elevation":"12.0.0-canary.ea77795b1.0","@material/typography":"12.0.0-canary.ea77795b1.0","@material/touch-target":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.ea77795b1.0_1626191398374_0.24410505528093696","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/fab","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.15a179fad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1063b9d6dc48a47952915cd67a6c0154783c64b9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.15a179fad.0.tgz","fileCount":22,"integrity":"sha512-WQ6TXiOIYx90xWlvwVbk7QUKQdogJcRssHjaYQg81n1GX6pm4cRQtb/oUv/X2R6FyPVX1d1Jhy7Fs0HcKs2IWg==","signatures":[{"sig":"MEQCIC/HhGITvT5K6N7Im7HRRplbmwBUfFwKB59UKA6jSMICAiB4LTiKs8AXbPkBeuBuJwVM2k6/kcrhVaklqs63BeicCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7db+CRA9TVsSAnZWagAANGMP/3r3PtJby6sVuyIECN6z\n1kcWnSDgu9f8CHDPq5OIfTWrQueMb8+b/ClVta8Z22h/DMG7/CIP+IIU3NW/\nbdWJ6RPBRv2lKx9WoGe6USBx+Umi5GPscstBjd9nF+Z0xJ8S3Ox887jeChpG\neHC8Ewq+FfGMhFEo/y/5n0UkL6NMHz0JwLymRRwi1Y/LcDpZAvFGfH3eXUPb\nYbp8/rcVweokQfSsllztC0dVRayVheSt/5oDiKPMrBBXzewylgrWsKVN3cwE\ngDuwDZVPeod4lkPZEOK7r2IAl4tM6yJV5unHilOdJcVADrDCgMQqXljRy5ag\ny+SiguULvvE+Xmg3Pl2Iy0O8U3hz1P0v1xoq1RoFGuirLqywjid/sds/DLT8\n0vBQk5bCPwTAPaUXVdcF8rga7yut933K+QLt+lfnF6rN+s8NLwG6z59SKVgl\n8wthVAXSdzNau3uIGvEvIwT40TdYheLUq6TqytmAiBs/vu3svgHPIhftKMth\nVzTzSCcB1jl3B+v/uHJWlIcB3DAHcALQOrteolJf5oNIW22M93k5eVLNRpsz\noobBGtyRPqtlpjgyIzr3wtRGW9o1CREGr1sdO1n4jSplo77155J9byOvzsMe\nmUxY4f4xLXKKT8ffy199ASeq9jvFirLfUZC3E/l09kU207gUfUD1lhRlAJYJ\nGie7\r\n=q+5H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.15a179fad.0","@material/rtl":"12.0.0-canary.15a179fad.0","@material/shape":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/ripple":"12.0.0-canary.15a179fad.0","@material/tokens":"12.0.0-canary.15a179fad.0","@material/animation":"12.0.0-canary.15a179fad.0","@material/elevation":"12.0.0-canary.15a179fad.0","@material/typography":"12.0.0-canary.15a179fad.0","@material/touch-target":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.15a179fad.0_1626199805760_0.16310313551212663","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/fab","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fb7038eac3a6def09ccfe719eace26c4d0ba52d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.c73142a1b.0.tgz","fileCount":22,"integrity":"sha512-V0ahH0k4H/XHrMKhq8qR61ltrSDfafXcnD3q/uyPUcQjgn7ktygY36Qr+b9NTdwQrw0iypNLJUnS3pQmwaKiIw==","signatures":[{"sig":"MEUCIQC4D8bwDsZ01P6dAh6zucVwe9wQ3bU5E54JIFXcjc+LkQIgENNc/QgVnNlntJaoSktZVk895FaB6JEid0lS1htlhL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d8lCRA9TVsSAnZWagAAkIQP/jzkNb+QzeW0YkUN1sSF\nfm0PKyNu2/pjPv67gqpEjvfmaffnrU+u8DqzbzvQKTZKiYCouBEmIq9jbn7Q\nMtoiwAgnN9fXweskG5moPn82JcneWBAnA6gQpgEL2FX1tXup8NBCPXg8MLWN\nMfkhMqqOIrlIZWlKC1orVh8gYJCmzWSbVPbPJ0x0pSrqTAhTMZWduY3jVjNQ\nMPJVqQI3ggVgKil5cE6yc46zvLycxg8ID86g46Wl9IRkiV+NcTQf/nARywUV\nKCh/OBaftqNtfxDnItyfI/eF0A/wR7NzX2KKj1B+lU7SA1WOlv4u7X66cSEG\nr19cDNhcGTNzmMgjDvPVJr7EhgvSktje2cXrrrgRL+j7kPla0YDyTh5P68nX\nBgXg3FN+YycF6tkRzMrD9sy3qXZAI4/ydufcBlfKoQOkIECgsPUHxJaaWUlq\n9X+oSzlOjhfQNkgVALhwo9OhDToAaEBEqSAqiFfGcaiQ+bYDO8vt/oPJOfDh\nvLivN64o5imuGvvI7Ef2+RwNaKhR8Ba1zjH7KUFap+/NoxrceeNpPqzuAvDf\ntBfIB2sjhPq+xJpToX5GYFcvkfGolFBXyIJSAZN2IPfS4ecsQmiOzjTuz+TW\nkNHJWQFF9RQKCPwDLd8lp7A4DXh2B8ct4Av7uHmn6vnrJ9xN52JnML7iGBp7\n49Hq\r\n=T7qH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c73142a1b.0","@material/rtl":"12.0.0-canary.c73142a1b.0","@material/shape":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/ripple":"12.0.0-canary.c73142a1b.0","@material/tokens":"12.0.0-canary.c73142a1b.0","@material/animation":"12.0.0-canary.c73142a1b.0","@material/elevation":"12.0.0-canary.c73142a1b.0","@material/typography":"12.0.0-canary.c73142a1b.0","@material/touch-target":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.c73142a1b.0_1626201892887_0.04708942805803651","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/fab","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.d923db73a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ead3cd8a18e135f0c515ba62b376b9bea9f8ee10","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.d923db73a.0.tgz","fileCount":22,"integrity":"sha512-+jX2pOZ8wt3k6Ltth707RL8t/OWRD0QproCf+vNsyK8l8ItfFqj6Zvn78TjfOCE1F/glX9R6BwVakOLvrbhjVg==","signatures":[{"sig":"MEUCIQD/9Y8G+4AaS+X+bq79rLER6ImaX1wmYPsJF0F3ogjOEQIgJ30Xf5qOosFf5Cf3wYL5PTpDbqPbHYoCUlnBfdeEFco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f2ICRA9TVsSAnZWagAAFaIP/1d5uvcBOvggKgYwNu53\ntxAlTWjczjj11HwO0w6lJbeDe/ycqPvwMRc4hy8+urNawnPWmTzII9JzmfdP\nnj/M+KYbwHx7TaJdCCs7rFNMZ1fCbvgZYbct1nTvyhTLf1Sc/IcSXSf8pMtr\n3dCHFg+4CP6vUlSgiSzDUCKiBg4jKerTKxsJQYzEGcWX6jkna3LVvitwHUMV\nS8JAK8xKHS9hclCWv2Ndbn5fllMfycRpftISqN4+Y7/esh9vXKso6TqCIGZo\nCdTRHWGfYKSnj0TBg8XH2wjT8TDpRGJ0R3V/yv+fu1G78B4ezj0y8eBUyub2\nRSrEkyyNi+wf16Ygdqvu5G/STgh988+8sV/Ci1HOeXjUP6Z7LURsZOPpunIf\nCWH0jycnSP8YU40p7Tnz4eHPm88C15beM9t4+IEf/zfCJ1FIIf2Fl33oz4SN\ngMDM+klm+6gsJ6/ljN4MQ3qwoDHaWbLFF9bz3XvuC14BwL27LI+T3wRkUiwu\nXrJdjMg1TUnUZnn3gvdIXuClgwGFJ0LW/rxEimOpu3G1x+cQjoXYet7/eeK2\nd5p5jLgd8oLhfdYAULyhjzUPsuuQZAh16N+Ye6jnCtXAIYaDrDI9T4CTdNGb\nyoTBlnKPmtOUMfCKUzS3yJyIcjZ7ixsXYXQldM95yuf+bnBDhYHKeS1IF9RZ\nlcAE\r\n=b+sA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d923db73a.0","@material/rtl":"12.0.0-canary.d923db73a.0","@material/shape":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/ripple":"12.0.0-canary.d923db73a.0","@material/tokens":"12.0.0-canary.d923db73a.0","@material/animation":"12.0.0-canary.d923db73a.0","@material/elevation":"12.0.0-canary.d923db73a.0","@material/typography":"12.0.0-canary.d923db73a.0","@material/touch-target":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.d923db73a.0_1626209671848_0.7596361293112632","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/fab","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cea7bfdc735bdf3df75fa333257d0946929f549","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.22d29cbb4.0.tgz","fileCount":22,"integrity":"sha512-Zvz8xuWXvg/bNT6pS8LcFp2NG8Ir1dYEp0ceuq09Dp4glwUaEK5Nre6Mg+PO7ZvYLKbYm/ryJ35T4iV+VodUnw==","signatures":[{"sig":"MEYCIQDFVgZU4MCRT2amj3oBCe8a0fRd5drGF3Y6XrWMEBtL/wIhAMdyVcXLpFYrCXQ7HevbqqbJ4oIyW8V16PHbcWn6w+N8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hjkCRA9TVsSAnZWagAAVuQP/RQYtDQRwCFkUAwkd+P3\nC1GEXe0zc3blTCVauh8/muOJ37jQZoT8KphCRu0Q1nUTxQ+YXLTi7OUqTI06\n0O2MIA6WOUThgphrM0I3iq0d3cCVOy8k/kL9aW6xNharcrqVC7Nq41lpRkRM\n76vLkffgsOftoYXV/BTRUfCnty6pWhQVgOJ2U3AIYU+rSbr54V/EmfpeIOCv\nkUCRjRNMqF2Kfhj/nxnpSGqvifdRaUnh3cogS38IwKxQxJvKI/zWuqjBXbOY\njtv5YX/rc/OQSug2A3s2RN6FW0A9g8+nol812FzD1CL6kNtmRrvIi7nT3nu6\neYSwRHz95wOOBEQ5qLlQjge35Es80XsUSquqvHAs3m974FB9gdYFAHlCrY/6\n8gD6chic0PsM911t5tYDFummWbEt85EJRz7vZig4W3sO7/sQLIYJph8RgbXw\n6DRtei8vc/btrFYYutz/AVUNIvLRpGSM9zW/ZS4tUQmUEOCbsKVVeYORFUng\nXeGqCJvUkGe0pkqKo9yODZnTN5y+hkzF144uZhqsikvHX8pSJzddnUbNheLW\nAeRFTH9tsuYXyLV+uW7WLaHy0aUzXUiwx369umVzql9r+0hR3MolqmH/jtkr\n8XMi4XN+F0RpLMZVLX913hXGdL3sHvNqKctM730Z/zJAuG8WckI/qsJDqfyg\nZy2h\r\n=pG2q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"12.0.0-canary.22d29cbb4.0","@material/tokens":"12.0.0-canary.22d29cbb4.0","@material/animation":"12.0.0-canary.22d29cbb4.0","@material/elevation":"12.0.0-canary.22d29cbb4.0","@material/typography":"12.0.0-canary.22d29cbb4.0","@material/touch-target":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.22d29cbb4.0_1626216676325_0.1942220468916236","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/fab","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.2749604bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a28f19a50fe9e4887761ac792042eeb6d0b051f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.2749604bc.0.tgz","fileCount":22,"integrity":"sha512-hLvdRDR44STtVGV8jXm/90slRIgSBv/x3WoruTc9aWPJOV9+y+dP/uu4Z/zE/nyOzprNjCBfV8zD8gbVB/Gn5Q==","signatures":[{"sig":"MEQCIGjwdSENTT4kIfWNG/iw5Q0E2dfvcTDLUG+n/MbpIrSmAiArD3tAM7W+S/k5X+Ks2UI2Fc2DeEwdmtK5t69Iqefong==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w9qCRA9TVsSAnZWagAA7hYP/ioJmFM7ZzisPeb0pAc8\nfIze0cYkk2ztgDA8ojzNIqcGeTaHkc+HgwZWpi09M87Jq84lL9OtvW3jXBG9\nLN2NdICgkzVCn5kNNewYTfrLWJp61SSyI+/lc3uwaBFV9PmJjgj4xl450dNK\nXhB7jf8kBTsxnRy5LPjblFAciD7DEmnS0Z99iEYZ6B8lxOV5/VvijY8O8Wvb\ndY5rpz2NXlGsIWMSXTXhPx2mnyQ8q15vdIIGkCBd3jBypDby0caiOr82I95O\nS78xAZckSpYAVNCSnX2txosquuRpV60DCTxullIjgwz6n7kEm1YI2QRFFmzQ\nL9Pkyf7l9lfSFO+pYfyv1uzqjPIx8RDZROe88P3cyd/IYeIMbHy67LR540Yi\nShGbOwH2qbpM4qEz0qKr4ThxPXSCzKeUBzLsO1/n/xNt46E5m7rEZEELHgvX\nE+erY1ZcKS5TUgTU3nLgcYAHtk6kQLnq5EiVqADy1pBJfNhp2/LNq/BoRIt3\npgbgXNRpfRqN8CQIlNd2klPp3p0ARJwk7+hZsXmEm4EfbPQ4M3VD3JrNB5e/\nE3+tl4xdp9X5HiOWDNhLG/qQSRWwq8MUdRw2l3GvhnAxWEbCLMtn43O1myNR\nngqtH2Og2A9PnykpgyNgO7ogohgeG55zcL1ibRQpJiWS/5C0EuY78dzM5mYd\nmN7d\r\n=bLDN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2749604bc.0","@material/rtl":"12.0.0-canary.2749604bc.0","@material/shape":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/ripple":"12.0.0-canary.2749604bc.0","@material/tokens":"12.0.0-canary.2749604bc.0","@material/animation":"12.0.0-canary.2749604bc.0","@material/elevation":"12.0.0-canary.2749604bc.0","@material/typography":"12.0.0-canary.2749604bc.0","@material/touch-target":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.2749604bc.0_1626279786075_0.7063218228260324","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/fab","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0249390797ff9f4d607169c66e1959520519447","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.e1703bed9.0.tgz","fileCount":22,"integrity":"sha512-Su6MxlqQDMbUKSonjSXhNgvWiqDIGoTGkShoOmjgINqQouiSSDxexhPKBciYJB122OaVajcetuXgBm3//FR3Ag==","signatures":[{"sig":"MEUCICTAyXJyn6qkzbuotDzNrw2W0e5LY85oCFQCZuUUqtBkAiEA+cjl3G/70/ZzenM+Y/DkUEvGRidoExE7jW9TzFBSMqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71u8CRA9TVsSAnZWagAAsm8QAJwsihA8m/DlTVX4tERJ\n+NHB1XABWNF4lcWwAWALfUszYKqcC00BHus+HwBfD6OWr8MkmHLYyTSFv7JS\nrEFrtNw+XYCZBbvW28xk2tGYMbjxYGnFZd+frUldgS+/qYAjdvkN2ayXtw2u\nPKNebwPh6k6uCk9l7aIwSA6I5O9X8cfr9UfvGXBYl29WtLBkWoG1grPuAZRK\nnSDKJvMZr49BqdN7I/MXHwSZGMO7L91gl5EDBpwMg8cq7QXiradjchhGqkje\nXeSd90P19i29T21b2lFpRHr93VJtCDdGP72Zxpa9C225mKkhHR3wvLZ9weUT\nQpLC+jAZr8Tns73WShwQ1/hJm4QTIKzm9GGlfOub3IMMEw5IK3vRFfFuQKp7\nHjx4GiHXizKA6iqz7r0UbC2igeONzQ7H6W1faxj5iGmgcuEQE5Gvvot3/BYJ\nlFt2wpatwjhtL1OWzkNk6Pu45o6OOP7Nq77H1xXlkf8F5qO02x4fCeRLp4EJ\n7Md3Dxuaubxd3i1waGicIR5/iFLClO/b7nYQGwvbUIynrvSrDz0ucvhCk6k4\n5mVtyAH5qjG7lqEKakgkj+GOrtOsXbyBvzU0R3MOLEaY1m1ahD5tU3ujV8jQ\nSyXV+dkMyNATAAEVGgGurLnvuspLiIXodYR6T7Y0Q8ekd2298JwHSATlIjXh\n1hIN\r\n=ben6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e1703bed9.0","@material/rtl":"12.0.0-canary.e1703bed9.0","@material/shape":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/ripple":"12.0.0-canary.e1703bed9.0","@material/tokens":"12.0.0-canary.e1703bed9.0","@material/animation":"12.0.0-canary.e1703bed9.0","@material/elevation":"12.0.0-canary.e1703bed9.0","@material/typography":"12.0.0-canary.e1703bed9.0","@material/touch-target":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.e1703bed9.0_1626299324216_0.22138259599714005","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/fab","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ad031f817055ab7ad950eeb824c8437ec06844c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.de48eff0d.0.tgz","fileCount":22,"integrity":"sha512-2nRl4OwvaDyms4nX0Vzgss3JBO9LN02uN2aftJZsE/3LA6qh6NYkDVVAXcTQ8bJSe3mWU8IPWJFvjSZx8LnXpQ==","signatures":[{"sig":"MEUCIQDHSVYaIqClwv9BDOXVlLZ+a1CuOy2acGpRCT20EpTOJgIgdARsaeN7VQOKL8E/z56otZpNo6EYOOv2TzV+eRsWsZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GueCRA9TVsSAnZWagAAeQcQAIvozTGKmzUnWrAqymbz\nnd19rFP4Khvlp1eVcjepox+LoHNngCv5bMEtTFmNY1JoEoB8o2ptksTZXdLp\nSIGXtyFfNC5WPOX18vKieLJq6vLS09zjomhMXR6bUHhBtXMjpS0CEc3qGeiP\niu2lOY1sNVesi4x60lzroriH8UQYRs/mSoGQxmp3AfWHm1RDDU6sy6DCca/L\nG6Wf71Uzfwc3/cAncLHmijwaSCeRuv+fA4aWCLdLcrVG9u0Ij6dJiByHv9MM\nCVlnsCVb77gfy9PH5+7JybjGfBgbD/fHJ1FGxgM7IVpafbvgXSyRfVyFZo3a\nzEnHkNkUONJS8t1piBIpwoiqV744nv1T+/ZbcXhPQyJ1e3gYpHwIXIs50EK6\nb1V/9z99XfNoKWFk9/giYtaNMub83Fch1HxJ8JTibzGblV4CqN6O3uKDORuO\nzF0D1bsWw8EYvJP68Erwuujd5C60mGqkrhbzjE7afpLf25aZp3hSI5FeCIft\n7v6m0CpyU9tsB7+CpSvavwjMh1nPtCQoL+Lnt0q242+JHUGoIUygj5KS0QhJ\nqMupGJmfi6j0K8KALAi8IjohyjS82pPVrsgwRfDl3gEqrXv1WxU8G8WldJx9\nXG95qxL+aNacOLZsovGaCmaShKJd+a0a2YWR0emc1mfgsIIHYQ3Uv9Cvy4TC\n0yoN\r\n=r5fL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de48eff0d.0","@material/rtl":"12.0.0-canary.de48eff0d.0","@material/shape":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/ripple":"12.0.0-canary.de48eff0d.0","@material/tokens":"12.0.0-canary.de48eff0d.0","@material/animation":"12.0.0-canary.de48eff0d.0","@material/elevation":"12.0.0-canary.de48eff0d.0","@material/typography":"12.0.0-canary.de48eff0d.0","@material/touch-target":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.de48eff0d.0_1626368926485_0.4999874851778512","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/fab","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff38b1136040b8daea52e8647f76bba85df1e68e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.4f060adc5.0.tgz","fileCount":22,"integrity":"sha512-Op1OLznybJgJn1PfKRpBMx2i1kFhC7zDiTmjFN/cPAJmMTQsCEpZt7dqZOin0brcrdNVp+dYJCgA0iFGDvfUqA==","signatures":[{"sig":"MEYCIQDSFMybGzdpcaFv8IbEaB6jBO9Y8lwA7tovnyE+19PYnAIhALDAD5WZo9lAvEUehl7isdmdKFDXHqSWYKjM+3E+gUFV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Ir3CRA9TVsSAnZWagAATMsP+gNpXf+UIsAiHa/IxCkW\nLQ4lJIU9h1nEBaTdClFrjgjlDGmv/1L2YFdCQ//2aBVc26sQYETyyuLPNyG5\nBHu4zPcg7gzZjmpzgpzXj1HCUSNVEEcFAEhWWlwOyk53ASMxdJsT06uX+jt9\nZMMygfTdBFhchDMFfF52VNdjyMH7JGplrjWbxJDemOSKyFSLIYPMS9UEHn5n\nWmOrWK9Wy0kFkSgf5dmGNhkOgPDnCYcV9tDxwO0M3wcSPyqbKhwXnq8sRbk4\n3j8eF7oSxnTEmwFwTtN1Rfm8Axu53dPcPsbt1auyKCLXIc15ORh/WwT194Qm\nbWScHAwYGf+V4I8uqTi+TIfOBBovectrL0h2/byFKsDdR3mRFPgcPAeUJTIn\nDu8lWwjy12pU/8sV5VxlsRa4sdbNRzcS8nP71aPltZC2MkHN2OPoyIMOX4W0\nJJoYBSd+HYbY4VEs8UHVL4nYwaJ6e651xLAoZPpDkWDLx0G3cumszJF4RbDa\nOGqoMMqDAe/Urz+FlOHvPAYIklA2zS/JB+97Z9jXm72l5u6SolP+I4vzAD1W\npZ4MFbNTyLAylbBo9W0Js3PHJfKYDLjBsDaR38ZWA4vync5qr6dWiwt47dxx\n4eLN8WetKb0P3hPNBYBEbJLGpQ9TmT0/TqePWLFGDk7lxPeRzVFnzDojroW4\nKM5/\r\n=eZLD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4f060adc5.0","@material/rtl":"12.0.0-canary.4f060adc5.0","@material/shape":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/ripple":"12.0.0-canary.4f060adc5.0","@material/tokens":"12.0.0-canary.4f060adc5.0","@material/animation":"12.0.0-canary.4f060adc5.0","@material/elevation":"12.0.0-canary.4f060adc5.0","@material/typography":"12.0.0-canary.4f060adc5.0","@material/touch-target":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.4f060adc5.0_1626376951699_0.19762388739804404","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/fab","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a1b1a9a652441b549236805f952124aee2b0ed7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.bd25779b2.0.tgz","fileCount":22,"integrity":"sha512-I3Wp9krhPWEDblR7jYfVrsnYdOjx6yDK53WclN1vRZxJjVHWCNm7YVTQKovSA4youFdxT1tipsMPXXsbijuAPg==","signatures":[{"sig":"MEUCIQCULUIoCEKECJxWvRkjdra+zXyt2hlNEEmkV4AnDbGhMQIgRSDs6uZFSIaME/58Qla5YEHp1OEI5AbF3HfZ8Ff4gFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J3RCRA9TVsSAnZWagAAIHgP/jDNmn6Id6VjNxeZqq5A\nobkZrPHXDnQ6gE56M6lyka6HccKD6DsEPMiX6s+oMkoZQWCKOV9lqzTxu8MZ\n2ko3ADTPpU0SDlGeytOfF0Hlg+DGGbIu2FT8gNs61Z82jWGCwEs9uE2Dw2UT\n51mXGU4uEX0qGk1zOnp3PNoASGX9czSTPrZGDpMOzr2UO0BZy9R3j5SGlzq5\nLAaJxXE7SoPA+Ub7GWrfGodofG+kTK2pqlW/SkviLThJznT0BkVTsbW4YH+j\ns76zh4OKJmCTOlutyxr7Fi+W0DdRCKN3+Njne7BPD+GbplEIcZsBT/lwTxdm\nBfPwb5/5+mv0az+qtk5i+C2akotIhCh5md/RgLMM8fSpIzSYEyNV6G+RlyDb\nYA3B99fKozENcscLyKq18MKZ0FQN9acmZ+h168PcEvqAH6cB3nnq8UsgH9zj\nKGT2lIf3xtmBooh6yGuEYU9f2tOohNw1Ve44WDHtkZOqFqd1pwDjQXbJQG0l\nL8d5XfM6qXHZB23EY4TpYw0UhpQ2uCl83K4enbMRCO6e0kunQ72wNBaXOVvl\ntJPC4ILkAz0enzV1B/4gIm69dOWZhTwABSfhiugd0pUAwPble5v/vzGZlMKm\npytPrMXJqLWSjUjXuqHScOOHFrH/TJkzqQpzfRJTRKuSiGiBjeVu4tZDARSD\nkyge\r\n=szMi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd25779b2.0","@material/rtl":"12.0.0-canary.bd25779b2.0","@material/shape":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/ripple":"12.0.0-canary.bd25779b2.0","@material/tokens":"12.0.0-canary.bd25779b2.0","@material/animation":"12.0.0-canary.bd25779b2.0","@material/elevation":"12.0.0-canary.bd25779b2.0","@material/typography":"12.0.0-canary.bd25779b2.0","@material/touch-target":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.bd25779b2.0_1626381777459_0.019055516506371717","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/fab","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18758a09129f273f2bb08be7f2fd8ec309866fec","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.9f68a932e.0.tgz","fileCount":22,"integrity":"sha512-3Ml9JCgOuOU/XVFRclKZri8YDzBs8dZJZ04mkZz4kZlQzp0yHSa5w21blQooH45befbFipbvua8kfbMnW+Z0wg==","signatures":[{"sig":"MEQCIC+u2bnSmPvkr9CMH3qfLZyfApbBsSasRZ7wVynMTT6MAiBAFeeXCiK+7BE0o5JlVKzEk4RN3oiU3OrwOgX2PjwPHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LGzCRA9TVsSAnZWagAAdKMP/0nlX1eK8G+2rm1gIjsb\npjN5pmXUxk/kNsPdeKuBwXMFX4QoNicx3Ewkv8Kth4knyDtQiCwy3MGO05Tu\nVjQJTIgc1qBAEVBGeCQa59qwiyZn4pV4/yfY5H2dIwZ2J8PN8N8QZnDBQbUo\noWWtUvhJIvCv0DuDPlPZiZ/3Op0L/gzaME8d37zBD5eBbT2ANGeGh/DLYhme\nzq6tv162d+1CkQbbz/OYRjiVD//FTpDZT74U4iHB5iAmW/LR3EmVN7jt6nLT\nS1z+OMYqRYLIeqattkZnlhXJskHv2HKfGnKotNL9DCkiWxQp+6ATIn7IVUfW\n8e79EwuBgomxblNRRzX2U/dBLpz1oakQj+96dx6Hn2XidugsDOiQARmYWo4r\nr9AEUo+rut3Ufu1raiF6QFeTyfmQ7Dhm6HQO+mpdUEmKKbi9I6hNh25klnIE\nR35joF56M04nxssGjIcVyYy939/C1HU8hzvgopezDi38424NRr565fANLDha\nFf2czx+FEUxnc7lENO24H33LbLExNgLFA/yla3Yh1C/l24nBGhOORXX3dDdp\nHxDqr6KGWEHwMY1Wo5WNcioXwcwsWgOdPTSQuycvHer77VZrwyiB5gTvtSgp\noAMaOBwuX7wcyS1aDeXbjzZQVBlC/9NfLK78mgG/NzQ8IXPBbaYTBN0Hniwe\nW5+G\r\n=e/mM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"12.0.0-canary.9f68a932e.0","@material/tokens":"12.0.0-canary.9f68a932e.0","@material/animation":"12.0.0-canary.9f68a932e.0","@material/elevation":"12.0.0-canary.9f68a932e.0","@material/typography":"12.0.0-canary.9f68a932e.0","@material/touch-target":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.9f68a932e.0_1626386866918_0.27769174111081085","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/fab","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c970dbafb6991ff43aab9d23ae6a8f47ebf649a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":22,"integrity":"sha512-tXCy0MnTPQxDG5APZo15VUvedScLTpHEbYEry8J92bBBPC6In9AC+X5HzIPI4ry1thUVapHwhqwFtIdgmAyDbw==","signatures":[{"sig":"MEUCIE0PlBlXnuA15cC8bBzCiKbdYcM9gtDA3EcbBYsKb1B4AiEAvGgllmtnk2nkK/gMvt3KOibLLJ+S154lOd71fenKSJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z6cCRA9TVsSAnZWagAA1QIP/jRzRuWdlypXL7liZuEI\nRuWIxI+qMWd7UinSA5g+nk8ToZZVsePu2PRbbci8Hc9VTcv4BbLKgsYolUBG\nTnPT4YJsr52RNm0gxRf2mNwzyS6fJ7vuAu9Vb7VNnvKelXv6G+SFal0NH+Tk\nInYMwqWgl9zdXGgCse7k6aGs48QWLl/0eERGbI1ZqhFqLcBwsh6MfZnshZKf\ndSvAS7AR9azJJjPcA3y1O7FuRdPnaibqCM5dFIANqW7ZJt/tZ2KEQDprbVlK\nnjXrBQu6E0ooBk5uHuJX+itWQ26MddMmu8UVYGofQ4vPS82w+hnmLc8geco9\nRpCthst/t1eSbh7RNuFmKsnfyYcyUADB+frp1cAimTmQ5qXH7VO1YLWTdouN\n2HtYon2t9b+f4DgF2jRv02ibYcX76LxkhJwQlba1PKgVkQgaGQZNFv3yBw5Y\n1mTabs8rfa0uv0yOI4AsY/h0dYB5ZDKeh+XHZFYJBBKFse3XXxNwEB/lCjgJ\nB6ON1bMyhwJUwNeyhaV83UDN1/V1xn0lDrgMCdyHLTafWenJLTFmW05zEGPK\nMgkEMoMoZKTyom4wA3fkWTgBaIHuaNtVrj0gvifDjg6kmIC3fR9pU8u327MC\nZ6YfsScs1imwNPwimivY2dYyVfDP/hkkkcwft1FOYGRuMjKM1AugfjFgl0OT\nS56Y\r\n=BnTK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4eecdeaf0.0","@material/rtl":"12.0.0-canary.4eecdeaf0.0","@material/shape":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/ripple":"12.0.0-canary.4eecdeaf0.0","@material/tokens":"12.0.0-canary.4eecdeaf0.0","@material/animation":"12.0.0-canary.4eecdeaf0.0","@material/elevation":"12.0.0-canary.4eecdeaf0.0","@material/typography":"12.0.0-canary.4eecdeaf0.0","@material/touch-target":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.4eecdeaf0.0_1626447516473_0.6435913068558998","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/fab","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.7239684d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ff578b3b8315e5fa8ef63e2382e0f85c6c937e4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.7239684d4.0.tgz","fileCount":22,"integrity":"sha512-xUrns9s1MTqO2eszsuMHifxH4HvLSTVL5KCKArtuFSf3jrmzVswWXq/KyXkYxyC2YeFsMnbVO91x+t0cEPrPkw==","signatures":[{"sig":"MEUCIQCLbYBMPArPglxhFfY9DMQ43hCHB2wyavR87NkNV/U5hwIgEDr0T2KepnzMKdzQ9KhF2b5kd/zerjGtw/lPm5w/meM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8azxCRA9TVsSAnZWagAAMC0P/3+1xPZH7k3j8cfP0xo2\nj6ZIbafv+2JKQCPHEjfxPh8fVmZdCu1gNBVO4sKhtJ0kQjuoEyRpIdR49hi2\namgZCrzcYjE+sUT9F1XHjP7QiUgFYU4MITWa3yBd4BsK+9RQ4Q42RenN+JUP\nMWk4fFpow03X0tXstQOaBelBzGukbt5TN8mu6adW5IW+GDvJOlTaDX1Tcx7I\nkhxXst7uQcs/f6pn+b4cU2DiKgHAoLjWeWqPBt4BLRZyNZxhvfZr6KWtBuYI\n36Q4zmC0hzmXCCwcb0TEV5+V7jfnu/mMRYlEG1ZYWMaqAJjUrqp0E7mLYID4\nnsU120gE7jaTSsM3JX4wrH6klLmLzY5E79XP0pVoI5M0FXB4XgJUukKw/8sl\nTLzD/MmFdriJadkUbAOJ2neHPrv6MrSPyIEpl94cNrAvR+lQXTUTE8kJP0SL\n5i7FztpMW57cwljO5gGPAdv/sunPc731mVH8KWgf8oziH/BJLjIwGrDlagGK\nLsQI8kAYPKGZ5/J2qk86I17YB5MHpjjYohG/zkh+vkMhxaPDoMOlnthwGZu8\nyAW7kYvtFo+1dUvoyS2s9HEHaHSZprc854tHX5H605f8IkDXjgRg2IkD3eNK\n9iRjPFbohk1z4Vq3EHpxiSGosNHbNW1pCkPkR0Pr7KAPIWamnRDE3wnLoNWn\n+oph\r\n=tB6q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7239684d4.0","@material/rtl":"12.0.0-canary.7239684d4.0","@material/shape":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/ripple":"12.0.0-canary.7239684d4.0","@material/tokens":"12.0.0-canary.7239684d4.0","@material/animation":"12.0.0-canary.7239684d4.0","@material/elevation":"12.0.0-canary.7239684d4.0","@material/typography":"12.0.0-canary.7239684d4.0","@material/touch-target":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.7239684d4.0_1626451185422_0.5838738393130072","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/fab","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"398842467b7279cafcb01c5836decef4c67ed15a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":22,"integrity":"sha512-624Cld/TxbdpHP415wUrQayeMj424W5LnChtFoV380tw7X6ISsWgNpEV0nfdXcEfYNHJSdIZIwQ3WiKLUexH9A==","signatures":[{"sig":"MEQCIBZWY5iLWRlVHkQ2krb9giMJfQNpPk/Qpiz4Xe0TC4KQAiBDPgF551T7DX5/2zFcFx2oRf1xe9ALBYh4eVR97rimDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bBtCRA9TVsSAnZWagAABBsP/Ak63FhGrArlSENCo1S0\nbMjd4ViOHRzsqMTTr67FBVtAQ7m3Kqt8mgSjrteuBapwAMVCsDLs3TcH0deN\nTJu2N5wplmZR/cmh73kExbMyxE9G3JI9w97P+SwRgOl41XOTwfP0ZgNWTHz1\n6+kEbS7z4TGCltQGn77DQyb7yE7AtRP45M2LY3OQJiX1wDvMc8rT72szZsHk\naC8P+Spbdh+nYg0J+1PyyVOwss44rayReZhotyK01OQu9b3ucQdqKnzzfG6f\nK76gkdBydtuHtWPb+jOk0uGZ1UCSc1vIyd7kt023WnySRC8J3O1WdSE55pvN\n1VqokuQEY55fkKUypZ0q2h/+8DGSmeVyiNtEJsKmgv7r565QROV0KYnIS6Rr\no/l0dWRlLnIpf6NH1omAd7/XwnRFvfrWffkeF3X0CrZ5AglGLKlfu6GC+Cyz\nBHCNU8esPOJ64RVod3G9KJbxZME7mS924LMBM4M8KGw2USJjzn4cLmwumVNC\nyEwq39Vvww3rE4vol+3281piWD9oK61BE9uar1QEbNhQZX8VbYZ0JciInFKW\nti9yUhjA7RXxRNEH2txbbxdu2vuC04fDMaBxh68PB0NcHuNA+nBkzdwfcWGg\nx0NgSit3Qyfo2xpikWCfQ31YXGpPbZSTLmjcVDGBF6dec7CiSln4+oBfq/Ae\nuNHG\r\n=KBcq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f1f7c72.0","@material/rtl":"12.0.0-canary.d5f1f7c72.0","@material/shape":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/ripple":"12.0.0-canary.d5f1f7c72.0","@material/tokens":"12.0.0-canary.d5f1f7c72.0","@material/animation":"12.0.0-canary.d5f1f7c72.0","@material/elevation":"12.0.0-canary.d5f1f7c72.0","@material/typography":"12.0.0-canary.d5f1f7c72.0","@material/touch-target":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.d5f1f7c72.0_1626452077517_0.48332512152053586","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/fab","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25574a27d1438005f945b0c4bd2e646aeb33fd79","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.4d95812f9.0.tgz","fileCount":22,"integrity":"sha512-wkImcIeGpuUHj9QVyx4rARd4yWnWJ2d/Edok7J+svoc7bZDEtIHWB19lGevbfEjGsm6hYyxX91Tvo7JoeHCV3Q==","signatures":[{"sig":"MEUCIDa3YYfntzfbYmiU7e776WkLy6QgUWsFM/9CzTUo6x8XAiEApSs1PhCT2tDDJMS7wm/RcZo5XwU8pm8mtckOGtlmQFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eF0CRA9TVsSAnZWagAAAroP+gJo3VZXdPWZe3AQ2FSu\nGrTNMt82Ptua/Mn9jM5NampDgJxO7Rk1IBI3nnnSJYD2ssL98CzkI1Gfpjfq\nhOJazkmM4ZkW5Fle6sMiDwWtEG24tPItbUi3KHhiLA6ujSQhbInAXnKxZmE5\nePEOXEeeluIjUReV7xlgJD36WNcfDMbOmFhiiJpe3X8L2Zw8xhEv6tagHy6j\noh/EmqSQJsi7We4xpWdyJgvq91kVi1JpPvpnJRi989/Z77yTnJF9p1IFSMtC\n8Lud6IXI6Fs2xttaA8+ecg93xP/GuW53/zoGeVzJN7ZRyJ1CzK+DPMzWKIzW\nV0reu5ikn4tvnN/cOMlo0NRXG9UXrPduq5venibBUJ+4gNnVBeFE8mvFaMsz\nuMtKjgsxUPB4fR+/2tHbJF7q1ebRVOus8z3Sn2cSjcl8d8cEOFhkAp2fUBqS\nVJbWOPCbEiATBREKusIvV5t0OmMY95JU13HsB9Ji+Dh8NT/d6WB7kv69ujvW\nlD/QeGLe5xVjOwLdGLooWXsoYJRrAAz+sU+JI9cYPcu7uDPzMcYiAftVaVC9\nsXKJo7CiH077X7ZRurRk/4DpLFYtJFSS8fY8l0KHyXIhwv0cC0uMewfNWm1D\naDk5oHCW22TvYP8grzmc7gIzWG0yLmw1EvY8JEOgVLYbVpFe3BHjWhia4+Up\n57Lk\r\n=p68w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"12.0.0-canary.4d95812f9.0","@material/tokens":"12.0.0-canary.4d95812f9.0","@material/animation":"12.0.0-canary.4d95812f9.0","@material/elevation":"12.0.0-canary.4d95812f9.0","@material/typography":"12.0.0-canary.4d95812f9.0","@material/touch-target":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.4d95812f9.0_1626464627993_0.9228565386217531","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/fab","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b3e9794e84f55d8724029290e6f989fb4c52ccb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.38d1846cc.0.tgz","fileCount":22,"integrity":"sha512-5tEJcFTXHWbPT71vrXYj1mvEQSAqIkf3SsDuT1moYKp4KNwd04xTEYm1Q456cxLhVtQuZ0FAU3App3Ykiq6ApQ==","signatures":[{"sig":"MEYCIQDcVMN3qUnNwrhxBCD66KIJd5lAFIbPb0Uq4b7Zh1/qcAIhAOdy0y4CR47tbjSORjUQcC29ojg/0PojcWIaC++9ekD3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9ceeCRA9TVsSAnZWagAAJpAP/RDQ09rtLj6vYgvDpO3I\nkQPHM6niviRCgpBFtn28edWYRDugGgo+Hx0dlLwWypvWuDHnPEXodCxF+gXa\n3bqdDpYvLSFsTKI8/oHVpYS6/UtgUWkSr3+nWPf+/3zqiM4cFBeyGulMqVCX\nBYbqDj/fWpsGGpJdrS5UZlxC1hw5cv1ZlJybKQm4zKYjZ2eDD3GuV+NHczz7\nc6/jjoDK1wKlh3ja0hvdWopCZjyJUezMt81j3bH6LbEJMiiAHaMm8hTlv2R9\n6Nevyrr2P8GcyxetmUbHaZyyx5yQmuDGcngkWqYlDpMNaboCe51DymYd4IIj\nwrYWPt4UDegnj1992Ijn+a8wclvg1smdjtbGfyCw+EwoW54pi5+zm18pXBpK\nPKUnTsSTAJAYYORSZ/8i6vtOdpG34afh1gnmuRAEfNnGwQd+D2Uz4oIJbSFX\nm4+UaTcIEW0aLulCdF9h6YsANEqxZtsoQMZ9JxxvtXh+q5SNbVkNwwdiFwah\nP37lZn/7tpaWrzguppWVhvtQIgQ11d0ItzuXRNOpnnLkgTUqEyXUonTcNhR2\nn506dJCHV3G8sgmtYfoGYqB821CCwOtFU1mx5mvOOkIiT00uB7RqO9RFVFb0\nXNSPuZtsqgsqFG9I/wqjE1UgQ8jkmTTUBmILf+ug9Bi4MfKEsLllGER+2t+A\nBEP8\r\n=h1fs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"12.0.0-canary.38d1846cc.0","@material/tokens":"12.0.0-canary.38d1846cc.0","@material/animation":"12.0.0-canary.38d1846cc.0","@material/elevation":"12.0.0-canary.38d1846cc.0","@material/typography":"12.0.0-canary.38d1846cc.0","@material/touch-target":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.38d1846cc.0_1626720158702_0.5438231801958167","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/fab","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa82474565d27e281b1624de12496becf4b5e92e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.3f691eccf.0.tgz","fileCount":22,"integrity":"sha512-KR/MfIzx6+IIC9AGTI0Xh295RziwnaDdWmHS4PqMycVC8XEujPwyOkm3OO1oLh+o6jp3HcNByqhl9jsrt2j4CA==","signatures":[{"sig":"MEUCIAw++nMTqmUypWEwKuqguPNKwrHJrfZ2tjW+IHm1SC5VAiEAkzhm9KATYj6DMswtp7yalnQbL/j3l2901katOA3Kles=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vU/CRA9TVsSAnZWagAAYU8P/Rk8R9foPUzGDVovpNBQ\nAYK0oPKhuFV9eEetAXSeATQZhjr6wt+XtSJmk7WniiwxNvs7H6k8UiDvzZre\nTrXX+1iT/HxgO8XpP3gGnZeP69gAJNgrV76Ch291htw5BA2/gxtDRzvGK3m/\ntkZCd7TXBforpePt5WNgbnj6JGrhpqvjN2csy7+JH6mp35qE5YLRpcuDjyB+\nebuFB4FpMbetyiDMj/CTGadoTO9QnO/AY5p3SNW7oA0IFAdfqxCtU2SG4vd5\nbKD6oIWujuWP0Ah1X3lIc18OUPwaD9ZfxTkFDom1Ssuv4mX6FzzkqFLCjp6k\nKfHwfePIlfcp59aJlL1+d40pJuQCwbJ8IZD2b7Ky8oBUJIQBbxBsFF0uAUiS\n7+zHDW+ad2llEi5OdxQvj/+7qLBaeHjJMU+2hjjLT3wSZSf+AE9wx3BRCcJ7\nDB2yOX0ORNhKhOtcr5KMYKCZUw272hDd2WNhR1kJwIKUXUx0pTUJsLjoW2vh\nHzt7KAGshQwD+4VbEUkbozCpi3911N9KZXx/1pwvMep+zmfPRP2nnShlrej8\nghn+oYWotv/IenBQY8VO+yBDW+5UCCK/+WuZNteYQtYtk7D35xEtIMdkfFC1\nQklfpHzLNhmLXHRDvz/ooIINmyJhaFrRPf7hlaOmA4KfE6zGcbNBIBq3WM6U\nYMpY\r\n=zj2G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f691eccf.0","@material/rtl":"12.0.0-canary.3f691eccf.0","@material/shape":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/ripple":"12.0.0-canary.3f691eccf.0","@material/tokens":"12.0.0-canary.3f691eccf.0","@material/animation":"12.0.0-canary.3f691eccf.0","@material/elevation":"12.0.0-canary.3f691eccf.0","@material/typography":"12.0.0-canary.3f691eccf.0","@material/touch-target":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.3f691eccf.0_1626797375193_0.4896114142433927","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/fab","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"732e09bebd86f3ebcbbb5bc27459d6f247aeef58","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":22,"integrity":"sha512-Gvcsx+Eqjrdof4sfStYk8zw7jTizwzN5cWe542stGmT2Mf1879w3wVWiF3l00bWy2QWY8sBFPVqDv7cyIdKcuA==","signatures":[{"sig":"MEYCIQCaHWt+n8K6EbbU61OxDQJPyEsR+UkynAbZBmTnfu308gIhANWcB0x0hBpTwLrLG1cTHyu90rU9ejXTnbhixfD+k/3F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wB3CRA9TVsSAnZWagAAKVIP/2Z6d7AvochwUfvTrJAW\nkFu7dFD24u6e8SquhxDVNXpfFvy93sFSdPveLbNnF5WZVz/BNZboL6iIHuK3\nJ0sDT43/fe31u3kbKJwtiGwlRi1u7oOzRpx8N0hqPQQMg5sWaMr6U7ri0qig\neVmuOhJdmcwmi5OOyF92aUud+C8d4xKvLNh7E8cak1UlkXiFgGfYrRZAn7Lr\nlhi6vBZ5R8ey7yMtBAVOobJl5oFAfnyl5Rkwc7djFAFyjSGjY/PRO1hFMMn5\ntjUAVbJH148qc4gD4TpvkX/GRU8GBeNdF6/neZHNtvFK4ciA3KMTd0kmUh9r\njH2CB9JdWhr3nonTdP80qS7djqu9khLbzGIlBj+9Ki74q87NJ6SPQQrj/ZR/\ntaVvnr8b+yxzzCiBwO3MYD9BKKlHVT274hNktORQ/gQtJas+oIwe1iyIUhGQ\nza3nW9mVvbM57vvUei36rJHUlRfFjMTCCqz6W8RFtc5fpFpEGqBTG1MgZzi+\nGg9QNr8p+lxilXdj3Cwb4ouO6+OW2BA6b+hOpoKJ+QFxeRhwOVPR5Cewwdd5\nNh9qxsZa1UUaIgnWBCSLXGBDRA4n2bZ0AByaYe3epRxSy8nWGwlMATg4LEr/\n0YUrpKa0FOE/ENbeQVR7V8wkzjb/DCKeIUhG6Aj2dBpC5zErhhPmDFMGm8cN\nPBrm\r\n=gjvg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ebb5c73bb.0","@material/rtl":"12.0.0-canary.ebb5c73bb.0","@material/shape":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/ripple":"12.0.0-canary.ebb5c73bb.0","@material/tokens":"12.0.0-canary.ebb5c73bb.0","@material/animation":"12.0.0-canary.ebb5c73bb.0","@material/elevation":"12.0.0-canary.ebb5c73bb.0","@material/typography":"12.0.0-canary.ebb5c73bb.0","@material/touch-target":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.ebb5c73bb.0_1626800247228_0.4314134339912781","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/fab","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd031d814cd7ab503f782a4065ac47f058564c24","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-nightly.778a0e8a.0.tgz","fileCount":22,"integrity":"sha512-cTP/lMKT2mGVbcGbnXJ+evwI1JwMTg52YP/VS+qqDeSUtgqhYzvKKftlTeBzSLzeQM4NopxnNfiiXucBQs5TWg==","signatures":[{"sig":"MEQCIH1HTC6KmCkbWjvMeYbPyul4jIZVmBZyLVSsRVJl281oAiAiOOi949RKpN/ZfeUpmgniPRT+WjILr7Bnn2xwyKFxFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":392541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zrCCRA9TVsSAnZWagAAwQEQAIQvmHmpx0bn/2GEGUSt\nlnsUJFHneOkwgbRDQsmZ7zKRQ/vCgOQGp7wObT+z50hLncn53jnv/7ZNubRd\nZ9FmRMseVrQVt75loNNGCs1/PEqS6o9sp80b1ekjbBblt6689NiwfyuK2klq\nqMn2GnNcbYCn+M2EB76C5CGvL8tkn00gGCke/rtAewL7z8xcUkh3mOsCap4G\nu/xD7ZqP8NR1R7s9+bfzeIc++9+niM87ONtsUZ8cmxpfp5MVfp7p67AWAERu\nDVzshM1j29lwkDY2Z1P2spdmCpPXWxns/36gxDsm69ZSS4Z1/UWlh0VqkAo9\n1HgfFhgrokP1wFUD0TOgjFxQE1R6YuAVXRALz7xDKj+AruoZN62reGedBq2i\nnn7hn011tQkvXGQccKhxx99gxMV12dwnj3uTd/Xj9YB1HekH2D7P1X88epIi\nQMl7RHolftOpbl3Ff1ADWyQ/0pJLYWgsb3t3+XMfLESZRDjgoKxxqzogcRrk\nyL1Qp3C2OtAA9I1uvbkVVQ7MhBErtMkDAPPMARO01KpWXGTWPS1WfoG113Tk\nz2T5mT8ckwgT2ixSPiRnfX5KoE6+ltBNIMKMB1YiMu/itkThKlYY406k2MOs\nDxCchNhMlr06f1GZOn7xEhBnhYXPRuSe1p3QNhkxSgKy3a9uWRxufdcXsAs7\nJU+l\r\n=FUSw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.778a0e8a.0","@material/rtl":"12.0.0-nightly.778a0e8a.0","@material/shape":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/ripple":"12.0.0-nightly.778a0e8a.0","@material/tokens":"12.0.0-nightly.778a0e8a.0","@material/animation":"12.0.0-nightly.778a0e8a.0","@material/elevation":"12.0.0-nightly.778a0e8a.0","@material/typography":"12.0.0-nightly.778a0e8a.0","@material/touch-target":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-nightly.778a0e8a.0_1626815170626_0.20517341002541678","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/fab","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.791311bba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7edf5fa34bed5d84cd2b407711a5ea7c98133192","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.791311bba.0.tgz","fileCount":22,"integrity":"sha512-ZIUGKU4DB06wEqh1ErB2sxVwMs9+xGGrQnv7qx9aoiL7yaNQCryHxTVhskNljtDfNKIpMV87mDt7LjTbnykj7g==","signatures":[{"sig":"MEUCIGcDLUpsbXnJ5kI+a4Z4xfxVb4f/tlzG2MgnVTNl69RXAiEApK1H21oTj0LDS9z5pFaP5haxHBNXWHG5KV+q/4KNZds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90lKCRA9TVsSAnZWagAAXgIP/Rj8+0t60ihnFLkpVOqq\nJcjEqy/IkG2sHyRGMyddbE1Np1aJ0OA3yy8Q+p7zA0KkrPrAq3gV45gbtZDg\nYxgVQdqHY4rZLW3V37+XgH7GSHO8PgTSJXy+yEnOCuFbzrjRLZZTfsM9FVlw\nm1wNc0hlo91fwLOJMhruryWSX7REq+6XFzbfqNIw8gqsO8oxUOuFRkYQl7c+\nmkwnUB+Gn0LALJ3Rzewvx68wv7HG+Leuy+aBoYxwxn9yIL6hHS+jJySW1+g3\nHnE+tLI0sCDyc9OGSXAKjFdidlBdAFk6/a7RrEDrXg17JaCrc/+HJ0ryfI/0\nQhC4+Len9GH9w953Go6TwUnu4jTGxAvMr02H2TF9fjgyMTAfFYpzoIeElB65\nix/z12L/PS9PYDdTKQ9tja7zFhbyBcsk9gNByJrX1lUJGLtpcdPjuW59bguZ\nLvyVLINxH08bYWtLMJqsoxVhzaBUdF5RPN3Pf32D9t5ir7bu4EPzRaXOI/Vi\nCiMk7elJujco6JemILuxF0LMOqpjeymar9+ToiCLgOlF0TbtFder3kmyM3dh\n76PkwULoKg2P+Om7sqnPv0t0nOLpO4KB+pSIVB6uqCuGeJlyvIGdl081kj+Z\nMndkO3rPlMy4FkrFlulK9zJ7qvlDDDlcu0bAYUPrzGoBtMUP5oT2ervbLCjz\nH66T\r\n=nQIg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.791311bba.0","@material/rtl":"12.0.0-canary.791311bba.0","@material/shape":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/ripple":"12.0.0-canary.791311bba.0","@material/tokens":"12.0.0-canary.791311bba.0","@material/animation":"12.0.0-canary.791311bba.0","@material/elevation":"12.0.0-canary.791311bba.0","@material/typography":"12.0.0-canary.791311bba.0","@material/touch-target":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.791311bba.0_1626818890199_0.9364281460625097","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/fab","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e0539d361bf5f5ffeb9cb4b1f79f98dc689e482","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":22,"integrity":"sha512-c9P3I+m8I+H71JyRJt7iqe+DQbc/w9T4riKcpNDVt6phXyH8NrCo2CkJQVWlEJP25yUOfxWLlmNDhnOzk5BXLQ==","signatures":[{"sig":"MEUCIQCB0j+Xloe8LX7E3IVS4xjXaBh+7QVyLcgajqL7PNAGtwIgd4FxmHTkbPAj7MJ3ltiHT7ekOnUK1xnCtMYXmB0efqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D8DCRA9TVsSAnZWagAAqzoQAKPr3sYeHZNmX1Tc1vHm\nFyLtdMbqulFHP9xj71YFlHFTa3Gk8YrUQJoh490mmX8h1tVMKAJ6HA7D/Lq0\nOsNIRyeZsm04p3Jo+1xhSTpmkq+JTRm1Wd819oRC0/otlISXi+kkP1MmpWqc\nA2eOIe2CsZwUYLVfMJGxne60qRHNNRfbCjbRTPClQwZhRyWWfLtedmNUolZY\nOK6r5/C2VofpUwUyY3gw7BXuQN8aNCUsdO90YPcDd4vFgVtmPiJYP7wLEhpm\nulDTpH0u0dl+1+Nl55kjI7XbZO0WmFEne+Wqy1uU2SXi4bJxSZvLbIETrxaA\nd3wqbCnnPdv62vTUfgnkKTn6nRAHTMXGMVjT3Zj/GSbEDv5VXqerG1iZnXcK\nWaQEYVkoXJ8piY1d79fqGfVGihl/3nfRkzcTHrApPp1tOzkbp0zI17TzL8KV\n6JcER/GAoxoLFdTX1H6PLhXCIzgM1TFf1OQjbaBH7WT+1d9EDYNZLkQiLsWS\nDE4pVn4Hvz2GaMAHViINkbRC9rKCxz4JKiA8oE2jIzZaoykC16JYUaNwW22v\nB4DXT7qjvl/7vWVAVKFy41iDNvW7eO+1DDHYq55amenUKpJttsvstBUg/su0\n4nhXH7m3KEtyen+VPL08RefSng3Iu15UOX9fV7RvW4DPygfGvJd2a9jH+TkR\n9KT/\r\n=12i4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.85e9a6ac3.0","@material/rtl":"12.0.0-canary.85e9a6ac3.0","@material/shape":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/ripple":"12.0.0-canary.85e9a6ac3.0","@material/tokens":"12.0.0-canary.85e9a6ac3.0","@material/animation":"12.0.0-canary.85e9a6ac3.0","@material/elevation":"12.0.0-canary.85e9a6ac3.0","@material/typography":"12.0.0-canary.85e9a6ac3.0","@material/touch-target":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.85e9a6ac3.0_1626881795651_0.8642164339683855","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/fab","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.6b0442278.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d59845bb3c02d11cbd70169dde6b0106ea56bef2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.6b0442278.0.tgz","fileCount":22,"integrity":"sha512-8c8edowc8MYgGKV7blBlpjskurnDtYqO+FOo88Kerb34gYKjcWRDdNkJsgJnYuNFR12oKyoN8KGYzAz+iG58cg==","signatures":[{"sig":"MEUCIDs/W7teWMXSag3bDDfUSlflfWIvopmqVK4HDT2+MgdHAiEA9KuphBgM9f2HwmRV3Pp4Y3wdWpKdha94hAFaLQqa4og=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+Gx5CRA9TVsSAnZWagAAeXUP+gKxTiXGiPkPmg/9og4Y\nZJh9+7SXg7eAbGGJRR/VRUS/rt66bmCLXDPj4EuhgtP0R27KVpLtRxAb2BaH\nA+0rHMfkFKUPTvCW8ilRPHULtOSbi8HH5oF4Y3U1KUaOwDjI2kMRqX574A6U\ngvphE+EViyxMLSlecCoR7WdZ+9nX9gi7mlz2x93E68ZNTA2D+G1zBHgAenZl\na5ZfdlIznimXXj01jpko0YT+3Sg+G3FCvgEErovyDizdwI2gHOuDMPBxrvDb\nte//+ale+66n4VJTWZsgvRlx5XzOJV7BUp+0+lnDKs+gtGbSrHvQxkCMKHt8\nb3yDTO5xUTFaABCUKVCjvEL5YA2fe3FoMacYSeDn3GoSCipUNlepes9yXDli\nUzKWrUEjZOtBKAp6pSZoyb3qJdPY6iYaVi3zl0tK7wNeog05B3x+CdBrKLSw\nx7AMhhSrnwMgPMYQqyPR5O+UlHUKgDSrOnhAA1QvXcYQWnm30/AQ8sJuJ8ri\nh+FcfPggSnu8RMdb3ZOFeOPsGXORZgYNIl7XjohbyAjAyaVnOs6znee/SR4q\nOq5cjXKFN41IvErAWa8vlwwT4m3CwOoakM4V3FMBP6Wp6BLPKyscL52bvAKH\nh6kaHw2ZUe/GUK/nJ6o09dNf+8y7vICpkPuiTYbCy3lMuuMG7UhNU3fVyr4O\njX5M\r\n=PzGL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"12.0.0-canary.6b0442278.0","@material/tokens":"12.0.0-canary.6b0442278.0","@material/animation":"12.0.0-canary.6b0442278.0","@material/elevation":"12.0.0-canary.6b0442278.0","@material/typography":"12.0.0-canary.6b0442278.0","@material/touch-target":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.6b0442278.0_1626893433071_0.22404703467090892","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/fab","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6251214c7b91d3a3090f4f86e3dfdd6eece7dbf7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.5f00e454a.0.tgz","fileCount":22,"integrity":"sha512-P5nPdzAItnJwoCy05WvgqfPI3VWBZpbgLhGrTVBPUmV0Lj2JAJmKxPQc/cOnaYFidNJ+QDn5CWV5m3+mQw0SQQ==","signatures":[{"sig":"MEUCIQDJLIqA5WyOn+vgIxe1EFajdemNaaAL54si3lFjuqlxFgIgfo/YpNOFmMvaSqiaiCYz2t/WrAqSIsC+rdNj1/fe7Uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aW2CRA9TVsSAnZWagAAQ6wP/j7sfDVzc3v5Fuws2cAO\nhQyzZ0TuIW/LKFIyGvuvf6mp63LGELGXepuWsQfYjRbpVTNkSbuZghXouTan\nemreVKnAG/rZESsubcF3i9NWKvWKMhLBG4bzobDAJfeSjEOtJ94ItiQfuQCs\nL7m5OETf0TALRPr87S7HaVykI7WWefUQOZ1XJkGWRrz5VUhwq75r/JOXPdb4\nkckyz0hbWXJAm8tR+2HOeG1suPErL2fcpBlSzMJKvqLrcyMeZ7RYgNWyGcMF\nAbU+pDdIgjPaK14CKyW/riUuEI/ET5NcWx+EUovC04ndDfcym1VcKX6JdkdS\nlasOgGRyKKOZWUBlQCjSrwLOIcNVLHHFmDZp/c2/osQoZr4ET8g3ZyKB134c\nCBBWjkn1B2NhZ9KvfWRp09tGioeCkQn5SaFfJ8t0JDSWugTTaRcdTYFcdhMk\nh5cJYk1tH/pxDhOFg5SzJKHnrqYVjZT/SXNYPyW8EeEnegSxG1ODDskCqUwq\nasIb6G0qkHrrqtapxGV/HK/f48+XFaXAUddrMb6DFSzPOYyu/OFkOAJDI5Vm\nzcfphMjkMnpBUB+GyGvJMZ48RhpvVPQP1sIVtiNjT5sAj3KUn4UcTfoH4PZr\nRZKLhLUPQtC1T85LNUsqhaywXxb8KOsGi+DK//Eku25rp8SffvmNCW1zujND\nmE/o\r\n=krkg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"12.0.0-canary.5f00e454a.0","@material/tokens":"12.0.0-canary.5f00e454a.0","@material/animation":"12.0.0-canary.5f00e454a.0","@material/elevation":"12.0.0-canary.5f00e454a.0","@material/typography":"12.0.0-canary.5f00e454a.0","@material/touch-target":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.5f00e454a.0_1626973621933_0.33729064929807184","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/fab","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f893de969eed3a8fe0baddb06581dc15ee10721","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.90e08fc6b.0.tgz","fileCount":22,"integrity":"sha512-SplOolhfnchmYgDZrWLwo9dtasd+QzvKjeWVehZ+UiNXevjBTaP75FUpbAYdRhSszDaDwUEGJIjLCxY0QzHYNQ==","signatures":[{"sig":"MEQCIB298quDSKQMtEoqkfU2EfUe+k3bAkB3AOTMIGZbNWqLAiA9pSq8qR6EJSJZu0zakMpbS0fyA68yAvXkdebzsaW9Ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gGOCRA9TVsSAnZWagAAnCgQAIUBVtObjS/CSpS1CM//\niNg4cgZCSWo9MtfuTXDm6DW3vzdgvF/6YcoP2XMsHglhxhbq0zmsT8yO3kGy\n1SBtM6C3S56N0fscP1QJPES2Yj/ou/H9FUuJ1Jr5ylXz9q9mHriaChDuDv5S\n9WnI7cgdip/huEJVGF6lzo5Q7hlzCrn/AUVuFwg//j/0Eer9XCEMqDq3Hk19\nEWu/iLhf+a5XdqYG3FZpwcnlSdt7PpJMqEXG5ErlHCHJ1VyCvg4x8Qp1rgVG\n7+HXt4MuoxGqzlbZ3Wwl2hnMO65sbAFgOWe8ELf1dwNPThzxNHoRLk0L9iiV\n53cSIsYvShZMCKv73iox9AsKxFeIDnCD8iwVjlFdmXlkErKaP7/Yj5YrpG5+\nojNCAPgf4lLOODifUs8FO+8pz63bYvwvSOF0fb3r1V6tobyNx8bO/TPrN+eL\n/0cK+i1vJDX0zTfDyPR2aaUO/PMwXYz+wU0xxUXZhAptF2k27znFg4oMJ/ly\nAXozwkYHwECWzQix0O8TTFt6n3houVA9ezoHPwhwQhR02bYh04omnBAX1cUD\nxLUiOf9EYK0OHjqw2bUtH8KoYfbxBvpm7cJbQITl5X+579NuOF4vZCf+G0D6\nfFYwjQcHU2JOEckcbzwgeFGbYz0zfUlFuweK9TkrTCumYavB11EyG78dqXT8\n7Ea8\r\n=qDYZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"12.0.0-canary.90e08fc6b.0","@material/tokens":"12.0.0-canary.90e08fc6b.0","@material/animation":"12.0.0-canary.90e08fc6b.0","@material/elevation":"12.0.0-canary.90e08fc6b.0","@material/typography":"12.0.0-canary.90e08fc6b.0","@material/touch-target":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.90e08fc6b.0_1626997134249_0.006299527069930866","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/fab","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb9da2bd007b0a12a62c4efdccf853ab1bcabec3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":22,"integrity":"sha512-Fib/Ja6tmwRtAqjgyGUsdkQ8E32Hn3d9GrXwmCpmdHKCCMXbrNmhaILVfiVFUn5r+yAC1AcBPD+XFh8cQCUX6Q==","signatures":[{"sig":"MEQCIFT13GFbk2Ufw7ytBPbVcgRJAI5qYRE994F5mYOt5qJxAiA6YpWS7xQRpUnRU6hmZFbtSu0o4/0X2VrN6yOyIUlUuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wamCRA9TVsSAnZWagAA5xEP/1htttWP8f76XLprgCEe\n1A4nBOM0VmtmQNSvpWVDJqvJyU6V+WfPwJ+XyC1RbbL+ltmcqJkCspcEfIYY\nsNLXmbVlqixlycaGHOsOUX297uXDVDBtFuXnAwXwNbLlT/VDGEDq9MhRpkqD\nQQV6bN5iv9uK0mlnIEMFBkHfdkEForIRE/mnPktxSyDgEQO23VLopfwCvJEr\n08PM7shTeCHrpy/Xhag9JEsjTQXDdd5Lu1Eh8ab45JssLk4u4xHIP8L4HpAQ\n/UHTKRB57cDSsumvdOfoUSjnI9bFW04iFm5cydXrF6AYerFHfzLs83IROeNS\nHNVdGxupTAp5kSaYxWdJjHqydLi8SvLwLFCdZUa/G5Gw7BNfOq/5lXYVL2UW\nlQCwEMqhknkrsDcljFALzpKenQmjSf0NbZHmlRwD21rOfJg5dWHC9swaonvo\nWBYTPzaC1QJjjs37KH1+DyR4pZJICuDLPH4OVO/2eFZZyh91H0F0FVnjl/++\nNpfbKHpbrhY23HKmojam+X91KamCVAd6bbBbm2d0KfkoP7CYRVyF7vSbkpC+\nUNWcBAQ/mcGWM3PU+38Tc8QzB6kT69NhoDQx7txzxPp2WaThIf4hQ4xu4H8g\nLQC4/08Q/a4q4uslZQ7Mdv15AkiAy2NOnDytkvOgZ3o6i+GTRxlIWBcWcQK8\nNNnG\r\n=rcOp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cf5b9eb86.0","@material/rtl":"12.0.0-canary.cf5b9eb86.0","@material/shape":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/ripple":"12.0.0-canary.cf5b9eb86.0","@material/tokens":"12.0.0-canary.cf5b9eb86.0","@material/animation":"12.0.0-canary.cf5b9eb86.0","@material/elevation":"12.0.0-canary.cf5b9eb86.0","@material/typography":"12.0.0-canary.cf5b9eb86.0","@material/touch-target":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.cf5b9eb86.0_1627063973942_0.8534981269290156","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/fab","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d0f4bb77969d1c5f92a1c22ee5c571a646632aa","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.3f36ac75c.0.tgz","fileCount":22,"integrity":"sha512-hnJKC5Y1xxm8asTvyWk1vX1XUUKta1ApIwT46LFWnMHTvdHDIJxuJnbt7cfFOfzDUvZcp67fernzOxqK6VzDhw==","signatures":[{"sig":"MEQCIF32svWBYMrPqzebhSbxv54sBUIbRswzRdxDbz4v53rIAiBCmKEpKMTEv/nBWPVYpAJRyzlo0K8kjBKIwqSzAkfFIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wtRCRA9TVsSAnZWagAAtYUP/2zXghJZ4HWCkgQKgljQ\n0h171YVs1MA0uC2AO5R8KjuXJzZNJccPcqDkz/f14l+Jgz1PWN1Bu3Bsaq6V\nvbkDeG5/Ld2JfU3HdToujqXeu99cRUBlhqyys8Yj8We4fc4K8enqAB2H4nma\n/7zKS26UVbJX/ZtcfHonRYba2tRvtKYC/nLcuEDkQmtu4HEk+8qevm4MUJDz\nOSungVUPGWLtRqewc7EPDwyBMgWlSiTRkFswNncbTUjlMNEUDO1Lj9Or12kb\nxAVB8ck06OsUvrWLUwWOi3wZJGiaXALLJTnER3VTvrN25PgNBj4Qq8YXx8VP\n2uuR16m4VUORtUSQNGN7h4CGkueYiA+SXaOkrkie5P3MIz/V3uP+q6cOtyvy\n2RFtSE0EZjnVIsEWaPEusNmmqegmZIyvECFLeefWYBoEMPe0amETjNjJ3kEO\nxrRiBiWogJxZEbtmPyiqhEtSPqVydnxVaa+OpNhfiGys745zcgx2043x5mJP\nrbBFbBgLaVa3vV2zhiux1OK5i9yzlKs9evWAc7L3g88SLExLqrTXFNyDnGFT\nWYmg43m0lcqLlsEBLhFyLWrbGihY3sCxx0NiX2Y2OEtf/32rYhp7iDIhPheF\ng3oc0VZfyB7fk3oubkHOvtFq9o3A+JT6Y4lhRPg9eia52OUitaPNbo6Jdhea\nSTgx\r\n=MWZd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"12.0.0-canary.3f36ac75c.0","@material/tokens":"12.0.0-canary.3f36ac75c.0","@material/animation":"12.0.0-canary.3f36ac75c.0","@material/elevation":"12.0.0-canary.3f36ac75c.0","@material/typography":"12.0.0-canary.3f36ac75c.0","@material/touch-target":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.3f36ac75c.0_1627065169294_0.7828970528406411","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/fab","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"846e47e280a8cd2298c7efc5a8917eb31bc61431","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.ea1e1b850.0.tgz","fileCount":22,"integrity":"sha512-HQkBFo9pccEoq09wgPftpkVGfjtZyw8i07vzXGy/df+6/FDqJN2s+ss+szqwQsQujsjpRc5uE/t/nrpBwjr/rQ==","signatures":[{"sig":"MEQCIFqIc80jomYDACowpkncTe/i3UZremuDB5/q7B66B6BqAiBs7y8gGBNooo5dkEhp4NC8VEao7q5bGZxg1F2U4Fj2Zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H53CRA9TVsSAnZWagAAf1wP/R41yIvw3aQuegfC7q7x\nTNfRy0yWXxGvuQySe7LscRmAa6aof2lwisGKTZzMaLxxrD1d0rMKfUm8QPkj\nRHDEXiJ5/2PEeaIEidVRC4l8vyM+f0v1nh5k+VE0Jk4N8WUR7p/z+77dutFv\nN/8RHO3fLoLJMI5OhLZzjZtvyEwQopcQYZ/gf9NCAYXTG+adGmZif7UXyk9G\nTRIGYGe+GjIkrG821PjRdJaJMYquJnj2ukVf9Ta/OPKfeBy0JOT9hTamNrcx\nYcUbAmaLReyab4PzKu27hAqeJjP/TzJbbWinZZm3JyPs7zzn7F3Ggrb0Jzkk\n+F8V78sTA1k7yXxKIBRdOe38rxGImGMaqZTew1RJik0OwChvAIwL+A1aodrr\nMH3wHTYYiLettaCzSkmBvf+LyE0/LzsvpIIqM2hfX7+qg84N/VPVYa74FSVD\n66L9HXxt2rWlrHb9iKGuLntBSdR9eDosvS/dlJ2GHpjFQOeY/IrDusPAbT5u\ngiM8W8hDXqxqeo0iN50FTeP7fY6cyzQ86YzTjy4uLB2/9nUOAPOHAumU3Pf2\nLYRsaaIe/+EWJqSZIYZ17NrFQ6qyhNi8kzRENaKU0LgPciUgzd9JdsTNNaeD\nmxfLbfHLWeh71DFMIoYyDNHHpDKv764d3TaiEBJJ79LwlSwdU147B+T3MgDt\n+tpK\r\n=Pb71\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea1e1b850.0","@material/rtl":"12.0.0-canary.ea1e1b850.0","@material/shape":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/ripple":"12.0.0-canary.ea1e1b850.0","@material/tokens":"12.0.0-canary.ea1e1b850.0","@material/animation":"12.0.0-canary.ea1e1b850.0","@material/elevation":"12.0.0-canary.ea1e1b850.0","@material/typography":"12.0.0-canary.ea1e1b850.0","@material/touch-target":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.ea1e1b850.0_1627160183464_0.26517016412631866","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/fab","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0-canary.22f390c43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38d08c102e5b0c5249e5411dd22f8d00737414eb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0-canary.22f390c43.0.tgz","fileCount":22,"integrity":"sha512-wDXCv9BkOF5QmvZrxGEe5umyyd13I/C1S7vH0ltV0TDHsITsPEJUaCy/svSG49cEOhXx/nlCjrddVrI3yDfAXQ==","signatures":[{"sig":"MEQCIEoSFeXA4T6pFEv9CQ7oRgA+9PoC7g2p6Z2A9RP0A6wbAiBJATKAGeOb2VZQn23amNqJveWMFDSaVrqdQ6kBQ1fk9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFfPCRA9TVsSAnZWagAAFt8P/R3+YpfuS8jcOCuGPf0c\nnLZNFlKXGiSIfp6axnY1u/CrfOMWO+WTEd82whgxvp9lGB/fv9Rdv5l5hcMM\n3Yq5d05FZGu7u8t5+LJMRKnwTGYzd5i8HGpu2XBb7ZiGTwbhVlpR8htZSqsh\n17U1EVJ+0DJ68iEpsfoZdZYFPhrjqpctNqqbyCQX5OfLH49nQ26g5moZT1QX\nM0D7VGq5vWWF7JcQ/VuZa0eJffer03ii3rsOTUTzNZqqY/XDnq/HvkT05igk\nSz0RboVGnNsggIAxRsbGeL0u01gzrMFZqvicEqkDrivDUSgDx0++MHRjZAO8\naEaTcmlsNcv3JzdLmLBgjE3XjKfTxReIRTh/OBGZ0V9jcyVQ73XWlx8M8Mo+\nM+MNw+dG70gE5iqhY1VftQ5YM8P9ikHJZwnlIomsdDOQ8wz1GC3cqFsVXK7k\nJpmxqdMVzaX1mh8MBnUd2QonIXSkof2E3dJ8Mv1Ek0yx2lbSCcj0PVzYgG/L\ncBaNEBvzFVJ4rDRviz7Z7mKOGFME9T5eFsuKGq+J5W6BYHbaPxUvpjKtEoNe\n8y3PjZQqij86Jhp0dZfFuRgnHwFqlkdhtYPPLGCHYDriBPkE6fcXC0FDeuy1\n31k8EgQzYzjWGhV9VOdSzbPkNiuR5w5MNITekYxovkKwbTv2lDyqYoXR/7sI\nOHpO\r\n=epOn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22f390c43.0","@material/rtl":"12.0.0-canary.22f390c43.0","@material/shape":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/ripple":"12.0.0-canary.22f390c43.0","@material/tokens":"12.0.0-canary.22f390c43.0","@material/animation":"12.0.0-canary.22f390c43.0","@material/elevation":"12.0.0-canary.22f390c43.0","@material/typography":"12.0.0-canary.22f390c43.0","@material/touch-target":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0-canary.22f390c43.0_1627412431573_0.9988547237352339","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/fab","version":"12.0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@12.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32f5cb2f5cd5dc42bd88a91683dd93eedab80a31","tarball":"https://registry.npmjs.org/@material/fab/-/fab-12.0.0.tgz","fileCount":21,"integrity":"sha512-6XfU+ZcNej2+eO0TFIyo1eYHEyvGYCSxlgO0P1gXavPNKyGLxkGhQREendxlc1XyAVw2yvAPzrtx3puc/xMd0A==","signatures":[{"sig":"MEYCIQDoCsT5wCee7dHbGa7lCi4tFWxAukrG7Q3LIR5MDi2sagIhAIjKlFlL8lHbd7F+oknSGu+vpJa+xRbZth7XD2UQxzMN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":392225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGOJCRA9TVsSAnZWagAArqMP/31N99Xq9t3QRzKrk+Df\njLicqDAhYUyoKRkq5/kLwtbmYfETHEknhnf3CkP6rlmogu0EdEWJQz3rRWQv\nFh/yLLSXpf7oLKP/qrfmt4+kxyaimJPxPoRWhs0CXMbqfPJYH1ZgzSAPPWd9\ntkCJdmkiXjoH67ePrfJiw+BHSpC4pPUKYedqICa8EynI+nsnFvH0C5DKrYMG\nL1Dy5COGcNKxurDx2akJ01F0ELgsg9yaEO41bi05qgYwsN19FOq0prFMzdKT\ni60T3nerPBdiy1IDXhak2+LVywi2mnQ75w16qmk8zLG4LEXUF44JDtDbiUFq\nFx04fTNFtrwIT5k1eWsFZykxTZ3JxFoD34kTX2ZXRtC6CdRE3lj8ByzRWEuo\nnGH/cWsGxVWZyLvnubHPInUGBnrRxT5M1MJTfNyk2NoyTmA8pQOtjw3K50kt\nL2ORHA3m8Erd+TuuKbupQrioT53Q3CoBIXZGe/XAArVYcq5V8vtNPm298pWl\nxh9zJV0QC5nl6jieZewxb06XRNegTOX76n5WGYaND/MpGemSUqw9oPgSsX4L\n0OS/MZODJjOzMYmPpBFdyEHsdd0SWH8pu3ukW/brfGKAuwkT2nLW8Wit3v7b\n7FFx4ncwrNxmVc1ajt4MqHCHaGxs+7gzCykW/w0r2vkadi+cGiNuPMpSj5V2\nsQRj\r\n=rRDN\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^12.0.0","@material/rtl":"^12.0.0","@material/shape":"^12.0.0","@material/theme":"^12.0.0","@material/ripple":"^12.0.0","@material/tokens":"^12.0.0","@material/animation":"^12.0.0","@material/elevation":"^12.0.0","@material/typography":"^12.0.0","@material/touch-target":"^12.0.0","@material/feature-targeting":"^12.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_12.0.0_1627415433108_0.0860446283556997","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/fab","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c3b9e44e992a4646a0ad94e83755af4871fa12b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.ae85f7eba.0.tgz","fileCount":22,"integrity":"sha512-FzG34NLGRu1cxgycstmzEQlRXSchyY53DRJprAXoN6jJoKiCgtzJdCR792ZTyXU1xDVts41zZTjiR2sRytiDew==","signatures":[{"sig":"MEUCIQCboeaR6vz9pi1iR3hOTh4tb60cZycvQ53YvOTwuP4LUwIgdPJvoisDYJUvMvQU++rJqbvdtu5PVglOSSd8M1YLBno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGPoCRA9TVsSAnZWagAA/nQP/061KldTt+Pcvbun3KH1\n8qQh9rDuG/vpoGKq+wwjjXw0XaQ9Q2c9Vu6LlqMWwrsNqsiPPK00VbWnqo/6\n1cB1SVH7f/wBUrGswXMUp49tXPjac2OKDSPrxKFDj9haSay63THwKwExgncw\nOiMnGEoV/W2jiRacD2WbtSWfcgOriQuGLV1UWww/ojKR/WNryiOfm73/dU26\nG5Ve/DNXYAnSlwB/sZKbNnnTosHYiMPcDBRQe37HjNYTSjbvbefSUoUQLRZK\noNyqlRlNgYc/docUkdmNIKUoZkq64XAaSviafoZmIIKZEX9KiCeuxlgaen6A\n02u5cl6SWh4YkcGNe9+Ho3d2eyU4fXTlbJzpZh1OS9P6M4lXffTbDG2MaDiV\n2UA58aCwxxcXuRDXiS2JzmixlKIQTZM2lACRzD8iH94s7pSBhlQzsgnCSATT\nYWFrmT9b2hBVqGBkDG7G0SZiUo27vkbv+umHYfc+9RCPAdDvuMRiUqORr7fV\n1NuoaecU36NW7Q8vn+GZRx4hvNEMnYgnJ/OovlOBJ3GMERA3pRGPrhcof3K1\nH++yWgd2u4qIPnLPIPSYYmgETtDeF6yEdz/YstzV4viqxg1eHe55ZVfE4lW0\n+6528rTHvBo5XWsVRq+QPIly6ldoljhVvpXelZmfeE3A7boR/qOkS9xroN1q\nSEpD\r\n=PNWc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.ae85f7eba.0","@material/tokens":"13.0.0-canary.ae85f7eba.0","@material/animation":"13.0.0-canary.ae85f7eba.0","@material/elevation":"13.0.0-canary.ae85f7eba.0","@material/typography":"13.0.0-canary.ae85f7eba.0","@material/touch-target":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.ae85f7eba.0_1627415528780_0.049624282533586195","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/fab","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.5981207f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79a259c1e3071ce9076bea6f820f2ba46de81512","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.5981207f7.0.tgz","fileCount":22,"integrity":"sha512-83a3bcCEgxH0MEvflPKTgaFAlSIckAQK17qIj46azEW4DGqUhHjN/+P/dzsJU5KW80UJeZp0Szb2+0t7/CQf0g==","signatures":[{"sig":"MEYCIQDjTtVEOwY4rbyYlDu3vJ6HcZDhdqfqxOHjkF1IQgedcAIhAOabTzrGvy1VRcQIzhassi9P10ox1I2VTwTgsmhm76t5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":392816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJRbCRA9TVsSAnZWagAAO8oP/3lpt8F+ySY3YqohEfQR\nbeH5IEWkQAm6BFY3dee3vSUrOjEQP+tKOqx4K5yRqCAS//xRkHgthBt8tRT0\nZgZ8pCT0yrV1MJgWOVRn4d9vqW7gEXX1OZbrPd8pj7wGrRVS77qPlzWKSyzG\ngsJb4wMey+p1b7A3o12kcH4Qf8rJ037DicYHJehg+w/4hQHDlNJ56vfnbiQK\nvtKmvDCqaNqOCmfJi0jEus6Tn1hL1UCMfGG7/XXeIMSM0apyLlV2EYdyA7UO\nyvfYBrgM1M1/gTyrDIr09mwwMKNOEzhXE7bnQs3GSvY/8AIxQWyOItJENovI\nrdjViehWH5Gy+96fQQH4LGkEJo/MHoA8RKoZ0mzxvh3Dd3ql8p3ZjDrEkG+v\nhnBiBVjP0mFa7hB4JU6+UQ8b1fvYrFJsUuUPfqpziWZY8CFVzcxqGmftWS0g\nzq1QygWhDRM2Pap3v1Atm7lCQLOLOEuWrGi80msNqc/g/cyg7jMCJD4CN9ZH\nHEdMFcUEke0EnNuL43qL+j9zl5EUvTBwzXcimilYcpKI5H3cWs3yw+v9FBgW\nJhgvCU6PzDI2YJlnyWwpB26Iv47MemV+K2iwjQ6UcC3eq+BXU+7CErlNs27C\noxjHwKS220Wp6YvlgDzaJhMsf04v+OFgAQUYHtMdPQnzr+GbmnfA1azCX3vg\nCRKk\r\n=1c+j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5981207f7.0","@material/rtl":"13.0.0-canary.5981207f7.0","@material/shape":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/ripple":"13.0.0-canary.5981207f7.0","@material/tokens":"13.0.0-canary.5981207f7.0","@material/animation":"13.0.0-canary.5981207f7.0","@material/elevation":"13.0.0-canary.5981207f7.0","@material/typography":"13.0.0-canary.5981207f7.0","@material/touch-target":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.5981207f7.0_1627427930946_0.8593918445149591","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/fab","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d6ddfed54955f4a1f522cf28a38a287af83b62f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.83bdd0222.0.tgz","fileCount":22,"integrity":"sha512-h9e8gMyQF8yx0aSDBBqqaSZwHCkwi6oab9UJrA4VK1jFW4sZgURdAiF90Gi2614FssHSIMp4NUrmDmzDmyapvw==","signatures":[{"sig":"MEQCIHch1Z22kxGSpEfPw3eDsLblmIcRpGPqMxOY0uDvVeEJAiAvSDpbxxtjAkCn0nkwvSKZeMAE1pS9GUCzeTaBiVZ25Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":392941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZNECRA9TVsSAnZWagAAa2gQAIo0SKCUXlDIJ2AJX2q8\n4ZrRxD3LRL0fMErNClkpM84Q0SKfBFs3sS8Nqyz/Z4wQvaqEo+YruZcOwmie\nMERIFzNWFUv3QPbMV9CZCraKu6lyVrNtsHT7NdDjXrflk63e9icuBoBA8dMN\n9lkebmZ+PZ0mYZGvx2x0RnvPrAqt28SWCH6F0oAWcaKRdkq3bheQphPzp5/Q\nu175FfjMbqdF35Mh/vNFxbcDHfnBAZF9ze24YHSa207Mb1yDr3YtTaA7V4MQ\nV9hbstsDCm4OngbxvApdYsTxFVKS0kGs06CfkRrPgOEZCRoVqkeHxr5pdkmT\nWADrlzBjznZzXbWv2aJpdiVAXHx06nISISOoJB87OaVc+w93xNfwG6mvTLjm\nW5N1sYayRFm8kxIcNDoGQAbbEzRYiZi0liN9GxJMjPQzkI4VuEApErgJCC3Y\nggfEUVDOzJfLCA3twlIN+flpGfY52gSe40i2RPOhmJ0hxi7Ddh/SCO5kHtuG\n7cAIL+vp4qgmcoCVxxRyhPPgTwobZNIFntQ454/r+ZrJgrTYD259mOnN1Av6\nl2MIMrKIJQriHdZfwn7FGiK0RZwAhZ+hHxS619Ualhfi7mAHzWg9yxmXc0NI\nLBtW8f593wq7nUyD7l5cGWdbmZhBR/4A9i553ChlecfhiyQggmxK3XKBquP9\n+1o6\r\n=OZDv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83bdd0222.0","@material/rtl":"13.0.0-canary.83bdd0222.0","@material/shape":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/ripple":"13.0.0-canary.83bdd0222.0","@material/tokens":"13.0.0-canary.83bdd0222.0","@material/animation":"13.0.0-canary.83bdd0222.0","@material/elevation":"13.0.0-canary.83bdd0222.0","@material/typography":"13.0.0-canary.83bdd0222.0","@material/touch-target":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.83bdd0222.0_1627493187986_0.8441043341635985","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/fab","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.28656298a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"336187bbdc1edd97b1407d0f3d6f9e5fc0c595dd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.28656298a.0.tgz","fileCount":22,"integrity":"sha512-t7Qle3RT+ku5OWa4Ok8bVbQat2PjYfGzgxgqPWC8F9M/3OF/bZyyhlv0s6txESYYno1bJUb1Mu73OC0oxh6sWw==","signatures":[{"sig":"MEYCIQD+JST7ok6wnnaJL8Ny4E4jVjml4j7iZsE0zGjAOUvJegIhAJCkdQ03zbw8ohvH12Jgf+u8ZmLAn/mUc3mewMSuQylo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":392941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu/VCRA9TVsSAnZWagAAmZgQAIpbF8+7JWYPubYQoSog\nw2UTI/XVot+E5tDvDBGxncryF7BR/7h050oiacXvV21dxlHUp6DwrjpLrigb\nvQwmf8MyJcBP0famXvKDD9Nx/GzJzW3oh80LpEEzaeH4XBJgf7tiOuuG5wjo\nsTB1svyPI6wNWFZLA2in0Vk4kkpNEjb8KULCfJp0inMfRvbylLfPI46G9OZg\nHCcx10YIxVQekwk+JsGhxcDUArOgpa+ACJirue4kdH4Conj0hW9CpTG1mO/R\nJcura1V7f/6dg4DJGbWon6pbM6f1La6iHorP/tp3/bnY5CKJaSgzCIqnSl4P\n3K3nZfKJzA48Uk9+3OIsdy7Dxwivb4aSuyVA4Z21xBieXc/evkKMGdAfXuJI\nW8mCu+4h/aWpTYz2UnjjReXe0XneY0yPr3fsDoR/hv+/znl3RYq1dn8fZeHn\nzLdKTxI55bG11JWLxW22SxONkSW7PaLiUVpP/1k+1YmBPEnzuXiV+et5yAA2\n+oMdxnZoq55pb7eT/C1TTrrljhvgxAAaVL9mHdQTyWn8lPv9MfMlQI1U0r1v\nw+wMSw7AZwSEs5CBIjHbA9dN3cwQEHf2khe4a95eiQhNLjuW1NQ3qPNxvTnZ\nUnVuJmRxNE6zJ3A56kl2qVzRvGL8cTulz/ug8hDbQX3XxjYXHOks30jb2WhJ\nQk4D\r\n=dnwf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28656298a.0","@material/rtl":"13.0.0-canary.28656298a.0","@material/shape":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/ripple":"13.0.0-canary.28656298a.0","@material/tokens":"13.0.0-canary.28656298a.0","@material/animation":"13.0.0-canary.28656298a.0","@material/elevation":"13.0.0-canary.28656298a.0","@material/typography":"13.0.0-canary.28656298a.0","@material/touch-target":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.28656298a.0_1627582421061_0.16813171222205647","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/fab","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a43142abc808f58689071cb3c4c2ac202994ca4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.9e797daaf.0.tgz","fileCount":22,"integrity":"sha512-pkai1hnKh1OYCXzAbsTedZ5/LK91pJIwnkTsDd6QYseFvLmv2u7F9kU8VYFha+T8ys37K/mtwrRnJOs4mzDvNg==","signatures":[{"sig":"MEUCIQC2MiGLW1BXZiDIofC5BWsiCCNKFXHKfqRtknY4HbZ36QIgZ6s8H4YVIRPsKWQhXO876w67FOnGvlzohqyANqY2VLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":392941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvUMCRA9TVsSAnZWagAAAB8QAKKJWc6Xf/nDhj9BTHW6\nV2E9XKH8OW2SZT3EBJWm/lmUBmZz9BEnCJCd0YiSCMnLEZ0wRE5MYlJt5CyJ\nwDSeDypOtKOOCmx1ABlPByzRg51sVAP1Y43ByX9xqKyrJdsCuo6c0Sle6rsb\npu93ENC50gyjeTxh69Zh2gOpg/CRYnFyujBOGV7VxOc5iioltExuKZgvVoBJ\nUSzQkwS/xAtIVrtag/0hR23U//XnmeSoC/l0DMLapo+CjDpfvSxi6wApnx+c\nqgYllibOIXP6eVHMS9A3Stw91vNE96x0Rl1whh+4awKTaKyvC6ijILsgfZNW\nmjISQUmaBuWQcrSRlFAH4R+EJqJsNY3O/RE6I3VCKXxbIc7EFzXkxzh/DMNT\nx8HIFQvRoRxAB/nLxcVeKMsVK/la9AtP0LRVI6lPh6s7UAbjnWR3tO8Nc44Q\nYSdvInb753a+HXppes03DK2/i9k6YzSB10f2vBqJf+i/ooM9FSnkAGPSG5mm\nFMOPvSLPCjphOIxg3oJ4NniUauFcewX1HRrBLbfe++4iRGSI46uFTy+3CIZJ\nEDNly47V4h+XMy8dA4cjZ+gP6uG/5MimGyTA8udiq7RXMNBxPeRRuX5iq1C3\nd1quZSdYUvEpvDkWfvRfQveF+HjULE6l88B6WwlAmILklqTp7Y6Y+L8GbIQC\nlXEd\r\n=f2MY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9e797daaf.0","@material/rtl":"13.0.0-canary.9e797daaf.0","@material/shape":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/ripple":"13.0.0-canary.9e797daaf.0","@material/tokens":"13.0.0-canary.9e797daaf.0","@material/animation":"13.0.0-canary.9e797daaf.0","@material/elevation":"13.0.0-canary.9e797daaf.0","@material/typography":"13.0.0-canary.9e797daaf.0","@material/touch-target":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.9e797daaf.0_1627583756810_0.7115183869512587","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/fab","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97292f895e94a9fb2b6d3f92b7e7159eab9cfead","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":22,"integrity":"sha512-9lmINxAtU9yr/ebT4IuCrm7Gledsh+xxIgploXOVJ2WXFZdGi2iwaqlNLCr85MyFJgzuRAArhw8UW1IFSOLhVQ==","signatures":[{"sig":"MEYCIQDKCsaXPJtkAvRRgDRdXiRJ52QfmtFW0RituT/0Qv9vjgIhAKI2N9Rkp5HTP3weIo7mkbDM63HdEXWfW/IklvpER8hs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE2GCRA9TVsSAnZWagAAnXQP/2zt5oJwm+W/9kRAvPOv\nKdzT+Z0r0CYtEGKzCcOJ3YL5Yvgmd/kKTXoEVdoEtMwr0zkHuOPTaMJgDGww\n8CiKRQkqyo4YPaReW1A9INrg/RCxhlmYMZZ7nMMENFX9WSlzRekkkpqnp6fo\nWa9OrSf9rXaIJJAwj/Y6SGwSGgYRdJIjqFNON/HcUGhMvPldgTbVzGHvfzF4\n4ZvYKCq/VSQYsadEV9hSRUprLWSTM38MfHtOyQvGA3qUeQ45PKr8/9N4P2zT\nVj4m/A+dIgZ1xwJii4U8qP5GoQvtTK+9vi/cpMJ1tggqe0Zc6I1317R0lTS1\ntkwUssOkxtddqPnEmWxb5lEY7a1qMbQWapSMJQ3MefXRPtwnYDzvq3ATC+hD\nZr3QKyxbfRH96FCtgKMas8ZC4acCf39oL+3pHop4p1kYc7FIbgAHHYOTGm7M\nKktEuqAgykpd1+Wyov9vLavcDorlwIVb9bV0DTCSTZ3Wxxa7eeVDg7rz5cO1\nX8o1ri7YpgyggpPwzQsUOhYrT0GqZPwPKyewpNN5KkBdK47/2kkHL3joYa5x\nHvcs3/gSzpEjfN3yN18IP6InIXasV7eWNLj3hoVZrovtRWgRa9Ch3w4UPgIP\nBP9JtbCmKSm+7WjglV6GuJad2ez3549PgHrAZ9ELSJm5nEcLJEntqvdmP+uE\n+gsN\r\n=aoQR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.adb9f1ad8.0","@material/rtl":"13.0.0-canary.adb9f1ad8.0","@material/shape":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/ripple":"13.0.0-canary.adb9f1ad8.0","@material/tokens":"13.0.0-canary.adb9f1ad8.0","@material/animation":"13.0.0-canary.adb9f1ad8.0","@material/elevation":"13.0.0-canary.adb9f1ad8.0","@material/typography":"13.0.0-canary.adb9f1ad8.0","@material/touch-target":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.adb9f1ad8.0_1627671942152_0.6960126915290823","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/fab","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.cc5377458.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d15596763fca910671e700069d20043a8b705874","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.cc5377458.0.tgz","fileCount":22,"integrity":"sha512-/efVCNSIrCSiMOAq/ziOmBK0EBylBrEF6ozHhlCcZO9nJs6ep92/2uNap351fKWyPwhh1MEAOXrjqRcjI5XayA==","signatures":[{"sig":"MEUCIQDk/VSbTV6WUUrajUvW79WFWVrxPcJ23mZymfMtaEmuIgIgSbGl3X0ai17zWZG6AU6inUamGCcJ7/rYtXNsrEEDtoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHBJCRA9TVsSAnZWagAAHEAQAJzxdmKb9as1Tv45JxzG\nCOWuBghpq6hAWJ9VRXNzliFJpanPCNum7YFwO4zOTdhVMajb4lB8/QfZ7Vrd\nOelFxs5fVuCHbv27xxDjhKP9mjC0xatprkJu0t62QxZCgQHXe9b/QMSSsNAM\nv/zHSOid4y0c9YEsnf09+rF1zEP5nBoWRSdPc2MVlSL5InB2G4BHK6lfmhPW\ne0SZhdjlHwzHz5mTGaR6958sD5zvK+0SF3NaZoe6LLk4xWvrXicNkXDuelsO\n+Rl79tVCSIOdRnaxIr2MXHhH6sf5mB52ysQbzz3NyiTbyb6ewhmvK8qzj+zg\nyhiWrVns7r/ujp2wP6zmHveED/z2yzRcNb/lrAkdYxeopCXoCV21rqbi7FKr\nBjJM1RjcAkDBHnBa9pj36xDesQWL7hxdYYtJ7qnv4clZyb5gKQnAYNeInRkX\nQXzaOHdC9rYbOWlbUbRjvQzhIQEgBsM0iMjdLkuJuyJjyvb1bA2aMdLKqANN\ndF+lqLw5p3yhwYQupzOJXbofy6pKPAeAXxVGx/w4A+6pDuVQjpYK6QorsHMt\nitvj3IqPRy54JnNdedW4cx2HOMInQhkS7hS8LCzciFsJ3N2NQhJ/jzSiYiuH\n9RXIQxPnQvO3v2VY60XGVbqanDTX1r9k1tdcR8nFRiG+p4b14HbVNsWJMt0/\nq97s\r\n=N1Ul\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.cc5377458.0","@material/tokens":"13.0.0-canary.cc5377458.0","@material/animation":"13.0.0-canary.cc5377458.0","@material/elevation":"13.0.0-canary.cc5377458.0","@material/typography":"13.0.0-canary.cc5377458.0","@material/touch-target":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.cc5377458.0_1627680840829_0.8757654617694355","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/fab","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.a395972cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"237c1d10cdfb3e14e2a958b8a063ab11c5d45951","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.a395972cf.0.tgz","fileCount":22,"integrity":"sha512-m+coyPeTkcjQ8vRn25xhW+BSoVRhRWNs38vZ0aEqkaSYUEWFcJhptgGTKOzXayC+n8rJpJX3T8w0DlCE9Q4vng==","signatures":[{"sig":"MEUCIFwrgdppJv9TbTKTJ9Rf6NI7U3fAKrIwMG0sS6h0T+nGAiEA6dYb8l3e+uivAFCFA4WoUQD0qzjIYvHX7vYKRm2mxy8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbPvCRA9TVsSAnZWagAA9iwP/imauHcNvka9jaYZ5qz/\nK/dqnTvHH67E3sqID2qtM/N5zd7oJRJ4LzpQATHngyOeuVCFKr1JsVXm0I9N\n5fcN3HBwOAH1nVTNsSgyGuyvqLR0LL5ncHZ2bBo1c20FpIB7fD8sB2CF9r7a\nJ9OJwJY+8HbgApRbA9UMcgik4UllxabD2lso1fn7Dluva6Wa/X9K7zfWBjaY\n9SRiEDaT+lpvtcbzRzboN+MTht+pq2FKuSggAnodhqXIrV2ishT3m34GZux7\nU/h4qH2xgqPWonmk5KlIPtENp67Xelm5CNvBD6bjo2J3PCwh4TzkVmKxFzDx\nGUwu4m8o0i9hd1tsIuMUuL/glHZ5RAKU0A+wM3l9LBGHjeWZ5nP3LZvdyQ8f\nl+BepEa96mZVSK/rxqXaAS17danrBXxpuSIcYvRKO3GxQ68rjuj/9ZcsOzGb\niRRufqSoCwZXN536JR7Bn6zHErHdqLx2SuFqnhJKPsi08R0SfE+zhgMgsesL\n1VHZuE42L+t/XfPk0HTz3h7xwnZhGPFjGqcezEOGcL/h3cTJr2SIxZ1vfChW\ntSArKhaOxbWG942tnxErPtgGDzAZCenDFAnS4YlBR+iFC5AvL4UvIU6BDZh4\n2szW0s38DRjPa30NTz09UFkYJBwmVycUIZyHk3p5iJJJlr/M9Zay5eqQBwTG\nn56m\r\n=ROWe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a395972cf.0","@material/rtl":"13.0.0-canary.a395972cf.0","@material/shape":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/ripple":"13.0.0-canary.a395972cf.0","@material/tokens":"13.0.0-canary.a395972cf.0","@material/animation":"13.0.0-canary.a395972cf.0","@material/elevation":"13.0.0-canary.a395972cf.0","@material/typography":"13.0.0-canary.a395972cf.0","@material/touch-target":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.a395972cf.0_1628025838877_0.613415804487476","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/fab","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30f06e71ea0446dc219ee8965d96a9e4b41b1bf2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.7c96e6b98.0.tgz","fileCount":22,"integrity":"sha512-cqlYpHaC4Y9KMpyRknKQZiimmWOwvm4DdVg9yZHX3oH1mfurAeT1HcyZjOcDbYiIQv6ocwBrnySZNMe/3jA2JA==","signatures":[{"sig":"MEYCIQDX/inVCtDtjAtXAnMdhny9Ui7SerQ4ueyte445ewpE8gIhAKSTovBN7VpRXYPqClbVnCWIHaApOXJ1UJJjTBgLUyX8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb/GCRA9TVsSAnZWagAASAgP/1Viw0Fy3w2huDu6SFxk\nArwDuCBd1V6x4FvoCz6gfIi6GbJ82IReYpmG5BL3c/69HBGOTnqiFGIgwzcK\n1/QXTPwpyizjC7ZKBTiJ/ws2RG+vWMIBzrQ+6cFljilzX5fIuzSh86n2ejbC\nK9GLEOlbwfrOIcYl8YNSrfGroZgi+QM1sPNjc6QvPJ0QZMqh9Z1x1BbWBNHq\nsr8fVLISyHTPDQjrW68SjGqb2oktAsiS0cqKve1YxgBVNiAaIS2yWPlkJSQx\nRHrRH1eX6U2sOez9/lhk2BQ5CiRyBp5O0fQ2EUqt0nAfr5CsrP8f9to8beBt\njRuOD4GFyQxPmA2CyI/FEQEExH8+wCn3XR3+nZX7Rxy7zgSOLUFQoOEO3JkN\ntepPyEkFnPwH/KqH9Qy5PFVLG8nNIpIxkxz9UNw9v9BxFNd3etkNsPan3qAX\nLmvu0V6jaAME0/OUaR3qX/gGE8HWUOMmH0OLMz6496CKcPu1jYLrXLMWzoSJ\nPiSPvjEIx4eokbIj/DW8PVeZ+HX/e8YESxuzPOkoYnyFhwWC1Ib6F8SgTx4f\npx8Xr6ZC8x8tlonOrDvSsGkU9kC80cQEJZFgzK6Fu6BFgb9gDGXIE1VlgSav\nG//ZRvE7G09usOwCPtcV6QnH+RRMlK18uCtMj/qt4XEjuGGc54ebiJdgPA0u\nYO9k\r\n=aOcZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.7c96e6b98.0","@material/tokens":"13.0.0-canary.7c96e6b98.0","@material/animation":"13.0.0-canary.7c96e6b98.0","@material/elevation":"13.0.0-canary.7c96e6b98.0","@material/typography":"13.0.0-canary.7c96e6b98.0","@material/touch-target":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.7c96e6b98.0_1628028870482_0.6495564826882836","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/fab","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a7db3463a0c5d2463bf98a856d69d7b6ceb39ef","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":22,"integrity":"sha512-7PkJq5u7738mcNloUcKI1JJCpEC96NlBYQ4efa3zvuwJ90xH6j5JEk0ebzCJvnt0ecTM6kehy9ihxPqEE5G68w==","signatures":[{"sig":"MEUCIQCMzMgeghIpD6sWRzy52CBKwqW/JEse3BE1kYiOYKt/hQIgELbpJI7+H0TY2pOPOXgj9EgIdcg+p/0H4F+et//1tk4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCyoYCRA9TVsSAnZWagAAc/oP/3rVMuLCBtJfXK1eSlq9\nQQF4yanIj80WoiiYSRaVBLOPBYrNDm3pRE/RtuEITgEsJv4iiDR+Jw5O8StE\nNFH21cU4NrIKjLKCxdcDmC2Qxulk1z7OcmUyBTjDwP9NSyfLeHM/kL8JTPhY\nTMrUTfipbm5LwFJrdZ6AUEbpRK8SfHHrRVZkHyfKRhMgQjejGeiuS1Imb4yu\nM3tIn8dsBLFmIpECcZ32o7poIyd08y3qt96k48sGbFA2T02cUR9Gt3z78QNB\nBwB1ov4ztaEOSEBqf98we4SkcHtBwHjq+tDRK6Pa7kDMc3g1mE1vCdy6RNRq\n+euxFy+K4Ha0NzxeuKsJ3MA0r4NBcgZqxM5m/sXThbcpnIKOw67TnqhYawsZ\n7NxF1neZV0eMwShjawtKARRVj0beqTBJda+9cH/Zn3afAl/7DxnXaCcCaebJ\ncwr6U0hnlqT9vyTLPI8X/kRcDLrUA50+wtjrKrmO1vNdIKlh+9Z5QY0UIao5\n6LdXctKjeTf2GOua0fnmIZuLOyCn9wt2lcbBS953VJzDPuAZ+H2oALUeWyDm\ncbS/MQ4l+jzIrdVULUIJ4qWHmxxul8lwKASzavtZJQKiUUK2ZOnYa7C1Qqzv\nzkHstEHgF60XZeFRn/WBkq9/bO/vp6KXOLiWMA3VjMql6MctCjbvSrsb277y\nZmyj\r\n=NGUT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a80c8b2c2.0","@material/rtl":"13.0.0-canary.a80c8b2c2.0","@material/shape":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/ripple":"13.0.0-canary.a80c8b2c2.0","@material/tokens":"13.0.0-canary.a80c8b2c2.0","@material/animation":"13.0.0-canary.a80c8b2c2.0","@material/elevation":"13.0.0-canary.a80c8b2c2.0","@material/typography":"13.0.0-canary.a80c8b2c2.0","@material/touch-target":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.a80c8b2c2.0_1628121624692_0.4623729908234948","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/fab","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.3dd611091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe1fcaca946e3f6c0f86be0f1501613d96bf7171","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.3dd611091.0.tgz","fileCount":22,"integrity":"sha512-pwlD5BlCXuiYiNhUpq9dcLusWJgiaHhm59nS2K82BfHp83vmweLvIggwbh4TUBAFJG+tvQweT9aJb3vaBvS/AA==","signatures":[{"sig":"MEQCIHX58AaHurI5OFtU/+DDuEThg03gNBsOsQfkqcD9ul9YAiBJzyM3hDiFCwlAYY0+dLC+OLtsSycNH7lLq2dwhWjSfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2GVCRA9TVsSAnZWagAAHgIP/0fifaV9p+5Gq7bR4ieA\naYHu2x9yrQ8kYmamET6fvrnNE6W7Kyki/umsP5kYGd9xPAYhSEcmEnNMks4z\npC5sK1VXDv9XcQNLGY9ovonkanpCbApLPGuxGz7aWgYqewcTfCu2te5CMbSK\ngb4Wq6ObbQYR6Zd991ScT5YdTPcEGr1FUmvy+AfW05/mqo9P1Mf9JIYRFDvG\n+Vki7i6zmQVHb8wqRg0FvM5aF9Q+/bFQ8crvJ6Wweup1LAa/RRRJI7JEvwy7\nCchN1TO4ACimE4FI2R7hQecXiDP3Hco5Q5wM651PMp4B27d0paFd2SU81MWn\nSr7kIPHcOP1iugBFwo9JDtAAV/hbVndDhMBqyqA3r2eZ1oOveGsLl6m06/kv\nXFIslVgti2V/iT8vUPZ+5l6kyyAduBHAo0fy8Uos6SjMqLqBPpzvxrMKV7Nc\n815MAww21mTBoS9yXeeSM0RQDr2lLUxZQCQTBASVfIrukEqR+DWz7bFQz3m/\nKt+HgA7TBej7xEL6XH7dHiS6s5EUe8Ofb215rmoPiQOBO5I3bDY/ru4w3QN4\nNp5f5OE2CaEGro39XU9FMT3C/zeTpCmhMgLuc18nCc3V7iU7ZJkXgQ813hCk\n7gPBzIUuws1saf0iSuB8GZGRuCWK0z7UZYgXMngFPIVc9ilIusOKlK8YgOZm\nwwZV\r\n=goTM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.3dd611091.0","@material/tokens":"13.0.0-canary.3dd611091.0","@material/animation":"13.0.0-canary.3dd611091.0","@material/elevation":"13.0.0-canary.3dd611091.0","@material/typography":"13.0.0-canary.3dd611091.0","@material/touch-target":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.3dd611091.0_1628135829832_0.8599458268976761","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/fab","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b83ce981387dcb5de2a171cae214d1a2605c78e0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.5dee37ff6.0.tgz","fileCount":22,"integrity":"sha512-IFS9cKZUmlUXN5b3DUY025LoYMwZcqDQiAuzUvu2yiaWG412O9bBxNMEcdU3ZjYHCEn8+2fFg+mKvEg8H2Jv3g==","signatures":[{"sig":"MEUCIGwvcISDVV7lWSwO7qRf7M+apNS+SbUTCs+rjjkqCybzAiEA/+7O4WVtLrtwwmWuZqQCFeN3Jr+vv2oLIm9wwqlRvW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCMgCRA9TVsSAnZWagAATnEQAIWju2tKgQ9sEJ76AUa3\nBEfFEUS5a4wLjYvQlS6Qe/ztGUKxAiVPTZtHG5kPl04U14tKdtxWpXVc+JBA\nkJGsFWC1FsJjYQJkKm926Xyxwc6Z6FwQ7YFMYTCismVrzbN2Sq7uU6tViJ+s\nAyDMV/PwI88fuOdictA1r+FAuAGDfEJGS7e8oRgbZMqEl4pHGWZJM0u9nsMc\nn7FHHyXS8up9CZ5Q26e3GbkFPu124rTTkVAcU3zdNGFph+defmEp/jSU8M6y\nuy7ddOn1BAe5c1rW71KOE+7/EsPrd5vXLrYE4BBZ602rvthQgIjbjgrbRCav\n+rze3ViLp0qotVV752B/j7HsnB6fLN4jWikKzfEJ61cEx7Tacy9ajufwEOKf\nTSYmpWPoZ/AtTm88L5xmj8pvCKDkb0KIPp4tZaWAxE//awHlznnQJzV1F9EV\ncw6Zt40+LIj1wi+QSMbphYIYWxYEBA8Q6Z+16mae0B0W/M+2mRVE43cJkFtk\nvc5t3rTan4PAsJNPAVBOYG+m+Myg7Kkg8r/qagOydWDYdVpLQamCWQh3MfWc\neau/WhWmz6i/f4WByZxDBcVIena5lKq2wG5yKVwZXZYgx/QtkC+7Gb/q6c3b\nPYxl5lsefJr4GapCod2fzvTi99XdAmhLK5YI+bb+q7RwpAG47MnZ38AL86dT\ns6+u\r\n=gHMj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5dee37ff6.0","@material/rtl":"13.0.0-canary.5dee37ff6.0","@material/shape":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/ripple":"13.0.0-canary.5dee37ff6.0","@material/tokens":"13.0.0-canary.5dee37ff6.0","@material/animation":"13.0.0-canary.5dee37ff6.0","@material/elevation":"13.0.0-canary.5dee37ff6.0","@material/typography":"13.0.0-canary.5dee37ff6.0","@material/touch-target":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.5dee37ff6.0_1628185375919_0.16173139145579496","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/fab","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dec655e627671465a10fe69dc0e2c43a00b57bd2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.bf405d22a.0.tgz","fileCount":22,"integrity":"sha512-Pq1WzBMM2dEzivVo1DUnhFsBlkAy8cwpt2vVhUZZbnu/5u8hYSYY99GGpAr+FBRYwfHs2by0BY9V0/pSx7KW4w==","signatures":[{"sig":"MEUCIAWWgvgPMmM3GqxsZW60iHAovcBTQOmL+12AgDNt3Z5vAiEApVCi0TU7D8L0K3oOjUUFYUf8KoIIh7AlgBmHhMtXmxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEenCRA9TVsSAnZWagAACgYP/iAk9WK+5RWPZZTrcTx7\n0N336MUnDas5yDaSrVo3M0b+jGbA0OpVBAoqYzK2sacyR4fD42QGsIHDLisS\nCiwJ4Om5/+vQcpEGFdNJ6639TtrTUYnTtg9DFU8BJx7ql9Qumw9ijn70y8CH\nQ/dyk5+eU/G4c65KdOkS/fbNmlraPNE6EQAxdPYB1Yz8jONCYh7ET1NAkCNl\nkclQIVfS5WJ8IUYkbN5f7W7o22QyY56n2Y7xPFGH7f4TarQG97cyv/wu6K01\npbsEvbHipbPPwMk/3U5WemDAtjyqIyUym7uxzAddmGWa/F0qBc16CQeWvqGA\nXrj5Tvj7TOzdS4vDbQVK87I50/R6DrC3x35uqdcvLfNO1/3k2wdL7dLIqkeQ\ntakZKITKniwmymAg/wb9MBPtFr+zzzniL8fiuaeEkzbnGoRbWOEturXIaMXX\nfc+Ym2gX2SAui43dWrt7PnV/9/r4i2HkgHvHc5edZOxw9J++mBn9CDlHv9YY\n/8zYLk3TGNgbBW0GeJWToCsBS/AVaHmMVNetxTqGfDeHBuOALdqHpL5gMN69\nQ1P3bg3KgIRAEdbs6/N91czPTEN47YJrldwVZoixdMCamONPhMBqaUfzKabQ\n4+D8OiCuDlfwyOm4zPcI4gGtv7cV6459qW/jFda83VJzPTLuetp0IPagnyeB\nNNvf\r\n=Eips\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.bf405d22a.0","@material/rtl":"13.0.0-canary.bf405d22a.0","@material/shape":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/ripple":"13.0.0-canary.bf405d22a.0","@material/tokens":"13.0.0-canary.bf405d22a.0","@material/animation":"13.0.0-canary.bf405d22a.0","@material/elevation":"13.0.0-canary.bf405d22a.0","@material/typography":"13.0.0-canary.bf405d22a.0","@material/touch-target":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.bf405d22a.0_1628194726907_0.889735438570971","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/fab","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec549ee3d3f582bc57c76f2b9d11544563a96746","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.b47dd37a6.0.tgz","fileCount":22,"integrity":"sha512-RlAK1605v+LGOE5oo3U50tN+r+8fWYM/NCK9v9x8KMuWyTAzLJOPlt6hbiAgplEdCXUoDvboK/sTJhKad9qhNA==","signatures":[{"sig":"MEQCIHpDF2++NYkDmQ4/QRTz8BpYFK8xrb7xyuKw6tqH+ZDgAiA26EYm55SL4JttXsfoxDJAcCVpMGKpWQk3DtFG1XP0zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE8aCRA9TVsSAnZWagAA+rYQAIhFEK/DnwGyzmux9n/Q\n0j+iVK+UnuXswywcfLXiW1t4UONLgXqV95pLHF98pLydNGixNwigrFDDXPX+\nU4t1FjQ4+RaPErDNJ6UcbswpJHzHn1TibAyzTOHgk5GcATVWlCyRmArj2FfF\nqJlf8yogFF8izItK3W0uWOH2r03u0geO/TOViMTVYySEYh3xLwo6ocjo/BMT\nZuehtmt94tNm0Uk4S1d69+9/ZlOw3tuh1Jng6YYoBRM8MSM0QCa6dprm2A6p\nUXXlKK8qqdhOEXL4f068UPL/sVVq4Cla/xSCLB7GzSBrGDOEG0YZwjUCPWGK\nldmxeKpHhYLGfPqNf/dDLomWUFo9/TwEGDp2RJpD6xchbK0s+qbjgy0n9aib\nXs9WmkBNU2BnYJfEAgOXcmj3q5JIeH+F37og4Icoqoz27DXp4XT8P0W6afbE\nk90E0wsVtZwwJI3O/OQTHB2taqz6WDbt9I5T8QYyW28tqrHkb5MpWP5S/3n3\nq5Jjw4heBmNfjSCJ8Cz2YQtOiS9CGwZbQtn/kRS80ODeNc3RgAYbpwuRhoyX\nZhMIGM2PRb4Tvk3r2FoLO9Uwo/fgfKIEc6UKwOD21Jc/4OrYPNzFQqAAqFyk\nUeRuvLgXsGcMDQ5wfrVPqT4Pys96mhCOiB6/LZ9RkDDabFthejd74iABUyg7\nrOjo\r\n=O15Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.b47dd37a6.0","@material/tokens":"13.0.0-canary.b47dd37a6.0","@material/animation":"13.0.0-canary.b47dd37a6.0","@material/elevation":"13.0.0-canary.b47dd37a6.0","@material/typography":"13.0.0-canary.b47dd37a6.0","@material/touch-target":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.b47dd37a6.0_1628196634014_0.09813309821286942","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/fab","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"502d5caa9f14bc8eb1a8a0cb5e424bf415aef374","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.6c82b965b.0.tgz","fileCount":22,"integrity":"sha512-fbs51ESJSy6LQB2HkYnVzoSTa1nOEkJXLbTU1TKAia50UG3VqKo9lujR+zkAykVHsNiZOGXhRq/eBL951AMTHw==","signatures":[{"sig":"MEUCIQDESAt+Xg1jf+aym2k4JtfhDkYLhZQ1LYFXaWRtoxj71AIgDRDdCqynX0Qw66ywy+avu0I1qGNwT1fZXe45UW7rmqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWAjCRA9TVsSAnZWagAAqn8P/2hKip5DFFkd0RYS5/Zy\nlIvuKOHIh3d03zZLzlo5w17j4ui4qsgOoSMA2EXPkdI6tjw05xPZlBauQo4u\nE+mmxRo5EfdgTAO1JYLnoq0eHqiahD/Q42sfLW98jiRGl/dqcUUQdhSC0UfH\nwcKuCplGXZaWh1dmR+MH0wAGnLWVu1crMG6Hid9dnCGqI5z5vmmk75sJgt52\ni8n/F80Yn/C4X7wmP1xvNs+QwSrjZM4Y2V2RtQK1aGqAHizshTM70BMPPsOt\n3TKB9JgGwjlr8QS7VDSPAej4nl2QwseBsHWpuX0/FnHy8kLFNjr0dT3rcnuW\n4kk8JFd8cFCGJkAcXDn1b4FHIJHAIgoPUcdsCa/5y03GWR8384uHpxaVweMX\nSx4Ow0lH1mZKmgWj3VOJpgevKDcz5oeRYm5aRxiOo6PifIkob5OO9qXF1qxf\nhnjOCESbKTfLrdh2Vpze8ALK2J9dHUZCwT+B5TPJSetMBOn3FIqRh9gTXqVd\nt7cQADZKLEmTOXtEWsOGBeWuIItzFeOpcNMbJ13i9V5KZfB07rBlQC9HYWkX\ne5+ohXcTxpmkhzrAJkxfeyyOJbGokYJt+jICLUWi2LP7q7bnOEh2G0xzuk+9\nR68fQ0nnbGl7LBLrHP7t6FpSGcJysp7SoWxysYE+QCnNmZu6tlI4UZ+/uyZ7\nS5mp\r\n=UFIp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6c82b965b.0","@material/rtl":"13.0.0-canary.6c82b965b.0","@material/shape":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/ripple":"13.0.0-canary.6c82b965b.0","@material/tokens":"13.0.0-canary.6c82b965b.0","@material/animation":"13.0.0-canary.6c82b965b.0","@material/elevation":"13.0.0-canary.6c82b965b.0","@material/typography":"13.0.0-canary.6c82b965b.0","@material/touch-target":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.6c82b965b.0_1628266531128_0.914676646873025","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/fab","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e3bcf2b488433f0ac281fef26b72812c6a395b5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.4ca11fe76.0.tgz","fileCount":22,"integrity":"sha512-wRW3ybKltL6F955FbuJ55rLw+EKKC+CPUsEUK31j5RzrYitqH+eg6YboHU3TtmDNCuJW7nyGViMpPBuZ2NwlIg==","signatures":[{"sig":"MEUCIA3BO334RiaQqY0nSr/Oz0WsULoFsVpvTCi7fCHtixY1AiEA+AmecoIh0QlaR2NumHO7RrZJC31ik+Kbgt4Ki4NO1Tg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWxzCRA9TVsSAnZWagAAwzkP/1ZHL8Gf8D0Z01EFtgYF\nfk+9a+WvUGrdn+15yHsS3dImvVQ6Coo+4ttOmjkdIfWKi85jsMSQ8JaZisz6\n+TRZw/bwF4aHg8FtO65OrQb57L+1RqzWBWOPhhZ24AGqnT+Uy43wbdv+kpbY\nUj0PfcTTXgUlF8oK23yOn0HIEg3rIlN57PigyKak9WgVNmdR+VL7Bo3koZFv\nGEz5kJxgPcw4W6d6yQTGhCN5JtpNq7ScxdiH9d9ELmFDkTYwoebpHaqMeSpi\nmSQD+cUTlNe23c7hEXf/byQCySHm3FJjBse058qRD58wG3M6IOERyFfkklvG\nyEgMpHQZDLFaKYg+7CBGFnEjrnM/cU8G372LSOR/e3c63h+oyVlVtkwyiWMk\nT3/bINGuIpdtJFvY7Abfi9P08GsycN+unf7OKi91Uk96anTKzQLE7boJrcjy\njw7QvWMoTNU4btwkpC43Mt8nnuYpW7Urh0rmO2L6yoOGJJVzEKorLMXDzzAI\npZsB1khZCw7UaZR+8BX2n8IYGIhbvSKEzVElxxmn5vXkmxQ2w9vsmxkETUy2\n31sVo4SdVwLBoYW8deg5D3zqModrsLedlK26wMpeahpOCU35DOuGpQvOdY9i\n7gZ7IB6UQ508E1P9yUIqXr/MGXqebS+8K9dMq7P0rrJgA/lJlDNIbLTuk/o3\nLILb\r\n=I0Xi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4ca11fe76.0","@material/rtl":"13.0.0-canary.4ca11fe76.0","@material/shape":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/ripple":"13.0.0-canary.4ca11fe76.0","@material/tokens":"13.0.0-canary.4ca11fe76.0","@material/animation":"13.0.0-canary.4ca11fe76.0","@material/elevation":"13.0.0-canary.4ca11fe76.0","@material/typography":"13.0.0-canary.4ca11fe76.0","@material/touch-target":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.4ca11fe76.0_1628269682783_0.8561253162803826","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/fab","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e035da4993d7eeae96586d22b46ba19a737c4e60","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.510cf90f2.0.tgz","fileCount":22,"integrity":"sha512-cwJMCHW4LQYuZqrIC7MNeR1HFGaW7rbBdi3ScIVJnQ2SaChk3l59nv2Hcq2ofL35XvcsWvF4pivJy+5P3bJa2w==","signatures":[{"sig":"MEQCIGIMLbsy6mYE5cteVnzBcsJkM0yLp9xMPt/8duHzSbA5AiAv5GCcb4+GPEZx5KJCaRVxBhkDvW369X1J7j0K/F16Cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWNECRA9TVsSAnZWagAAYaAP+wVrVHLfZBklRR/tsiAQ\n4sywHZoRjq6x5kLb/QddkC/etIRxrYOqmDgLd2wWyb0h/LTpjWgoETwg/E38\n12FZ4DXqa+un8OV54AVId4cmfNEmSwWLUPN66KFW0qAsu+HtFiu8eeVhDsDs\npIv6xVpMFvmh2WF69yOBMT422EUHP6I3RrcXXZJtTEkfzMxvuXbwd7Zvonax\nNbpRzL68HPM1IZEjajaxGMW9Q7k2E9+pOyT0ZMLgEJ7EWHrpy/xnyo2YazvH\n8sjsgMiXubq1QoggUwxcpnNi2fWzN3FNE4xbSRC1m/0LxIBPyxxcCU6rLAP3\npa3LkPKTKDl9lMWrTLalHnXbxgm2vNjHBUmyFgsF9GTTlnFw9jw32Lq4X2Vl\nS8YlZ2dt/hZhv8yohy+lillXyc4dwcm+Ft0VAnDE9x8cwul72RssDq967X0o\nvXoNW4PsabGWDkgwOJzUemZSQBycJj1LnhAYPHtirA5SpSLFlNd+kFWTXCwq\nHl/NeS3PuhArz4e/HHPHG5M5LBg0VTxnwdJtct1VKwpiQZILqnW/WDnkIbgk\nmMF7o5iJRKbAy1HsHdwCDkjOsBeqgaxpRv18rrJzFK2d3WLqAELHg5yeUi3T\nMCYTUR4bk/1MJ1cce6GbfmNxE35ot0nDwo4iL255N2ete9t4beaht4rxO2Ny\noPhP\r\n=Zx86\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.510cf90f2.0","@material/rtl":"13.0.0-canary.510cf90f2.0","@material/shape":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/ripple":"13.0.0-canary.510cf90f2.0","@material/tokens":"13.0.0-canary.510cf90f2.0","@material/animation":"13.0.0-canary.510cf90f2.0","@material/elevation":"13.0.0-canary.510cf90f2.0","@material/typography":"13.0.0-canary.510cf90f2.0","@material/touch-target":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.510cf90f2.0_1628529476012_0.5865205370074162","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/fab","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"544d9d18eaa086732f04e72ff7019f3fc5dc4c67","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.17580ebf7.0.tgz","fileCount":22,"integrity":"sha512-uuaI7MqcHxcnTi+o4Uo5J0cVs36o2fovPIW0j/o2qskOVbGzC1OCC8QBiThAl3TGyw/f72z7mYZxoCJ4+B0lXA==","signatures":[{"sig":"MEQCID/pJbFhngv8xluvSOxL0fSrDU0Yq7A3VNcK9yNpvNwoAiAbODgDn0VkDh3lUcvew2KIRtNQep5wLg4sbshA4CUG7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXFmCRA9TVsSAnZWagAAyEwP/j/6Vit1s/nX0fEFPonH\ng4hOni2hDoWH7FFYDegqpwmNvdqwrHWae5L9Qm5o59QXj6bP3mTzH15m09jw\nqNXlCveNHTZhRg2FqkU2qodUcFkN4w1FRl29P5KPCoIbbQQrAQxgHRdgihbU\nOi0vGAAwC8ArtXpoIqFXq3CT6nR+zhGCXiVcN7AJ+MkV4FXuB3vpg0jwKxKu\nU1LAreudT1Wygn9HF01rvcyDCI811Io3GcET1iHFBHJg3NBD16Z1++MNz8CW\nR97W3W5Ot/2Nn6KLCRNX4m5OV2rw+cxdgpXdpcAZ/f9mxbRQc4ng+UI4fwzI\nI0KEKfIjDW9G6Agy4O4uMSGAmiyHMGvgUrHko9zUfvRaIcYOhfc8H2etX5vG\nqISqDArqUnSOygQDU5F8Zd6Azw41LAiq99p4a767y5aCNy7nBgAMLiOk5uHB\nrTKsJgXuCh2yNmHB9kUxS4+1nt5JgWxZK7E5JyhJRBu6ELGvhEc8ZmyAZp7w\niQPiefnE0vj2tWaM4FDE5nK0Nt8SLZu62tkldHzYasZ+56E7cS0p9Cj6oMOp\nJ/4Ep+gzKhET7jU73HemiGyJHcfahyR6CXHNorNtL1a/MqTwoD0284LEqpek\nB5ldeifUT0O5bFzjqh5rVSQ2Tou4q9xwvthXbXaTK5W5lPFItnJcsDPzWFxt\nHwCO\r\n=CtCe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.17580ebf7.0","@material/rtl":"13.0.0-canary.17580ebf7.0","@material/shape":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/ripple":"13.0.0-canary.17580ebf7.0","@material/tokens":"13.0.0-canary.17580ebf7.0","@material/animation":"13.0.0-canary.17580ebf7.0","@material/elevation":"13.0.0-canary.17580ebf7.0","@material/typography":"13.0.0-canary.17580ebf7.0","@material/touch-target":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.17580ebf7.0_1628533094366_0.2592649407181924","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/fab","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.7249a3060.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6b8c500725950afc4d614436a63e2c9a759dfcf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.7249a3060.0.tgz","fileCount":22,"integrity":"sha512-9Vrb5n/HdSXBSIHEDD4pafbXW/BCGQviaSB/oEsv+J03Mjfxaj9xAwMDM9d27wfk9a2QJmH86vxWkUJNx6eQjQ==","signatures":[{"sig":"MEUCIQCi5kWNOeQRZIF/HVW/kKmoRP2pz6z29QqABlQO3owjWgIgHkrbTrgeP0mI0I5wJL1rVYkHiyvpNxYkcKzGbn6+kPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXJWCRA9TVsSAnZWagAAvCYP+gOQp86es1bRCsYvi1Nk\nQJuEk1yY/bJ482fXFgDKxicbMtpjI3RVhqXvOz0lb72/moW6RFLjc1RnYIwi\nABafIXYRLbMZKxyxRiE6YNVaq7IYBf8Dfz0onYwEhpcYjaL4nVy8GKNJkRUD\n0+j4o16FrrPb7JvnpD/Jg/P+1eqBpAGU/jsB3LxO/ldHwfVgTQAf+qNcTeCm\na1SCcSHSaGttk1gQdHqw2pJM4+m0ErNk6ik0552nry6L6OjxDbKuy1GhwPBh\nTTvOqUJDaSCSJYt5Z90i4Vk32y5c+ECot0qC0x9wCGysFy0HtdORIHwyXF9O\nZHOplyD1p/In+NmXfoZTq6O5aR5dmjMqy4tOIbp8d+56GYAtQa6Msqk7YVs+\nfHWVRd5txiaztDHmxDbLI5UKbCr0fJnHsZR1ODTaJrf4cGIOonv0fIwjpgtG\nIIhJDLVFopF1nd1gjnn8noHJbXAKCADg+85fFrmreyYGwWGv1di1VGH4L2K6\nqtBrqgp2eZE8Zfuy+fjSraEBlL0GhV2sjuhItKSjt2OFmDCn8Wx7m//FKU96\n/lYmMY9rxu1nIY/9aQRue5vgmIl+TeJ4MFCEUnWE4amNGzhMREjYmo4YTk7i\nq5uEjiebxyKXghxjV1HJxs7qugUoO3xdGGYhkfa8fI1wNfglhnbnveAlvniu\ng5TA\r\n=Rv/j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.7249a3060.0","@material/tokens":"13.0.0-canary.7249a3060.0","@material/animation":"13.0.0-canary.7249a3060.0","@material/elevation":"13.0.0-canary.7249a3060.0","@material/typography":"13.0.0-canary.7249a3060.0","@material/touch-target":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.7249a3060.0_1628533334321_0.09197782906826024","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/fab","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.4c405863b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce39034573ec100c8d2d130ebf359c06585d4ed1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.4c405863b.0.tgz","fileCount":22,"integrity":"sha512-OKNF2Lt92dRw6gS6UqT24VWY65UatuzMsTB5KGByI0BwBLNp3qypiPIiqMN5yF+JOn7FdVIAlCWaa+VRwWjLVg==","signatures":[{"sig":"MEUCICkQubx8ZbyssLFNa3hXIPc1SsMV3YEGFkHMT+3chNaBAiEAj7rLwarrgq8SyqCkBAVVg1iXf2/jVQ91kpfWnlwaZLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErpMCRA9TVsSAnZWagAAOBIP+gNStC3JW75lfipxiDpB\nDUYgvfyBHkUHkNV+ApMbYcGWnzj6ipkueSOpmnU2VkMoiWa3MN8QtYdIVIhQ\nib5dVb2uSFV88fLcB3vzzYAC5wEMhWMmhofj/P8DIhfKovsn5XLwL2MvVTTZ\nIV32FLKHhpLi7WnOJQpXg8ulbP0wFSIUm90yyFi6+Txh3a5sfCEJusRDeLUQ\nSwHW6VZQVMq+dZDDBC45PBWKMhMVymFfRVtYUqXqQQ83MR+bVQOEK3SPCxwn\nmflvm0ERmWtSbECjbuz3CW86XJfNc27QJB8hpZhOPgokLKe422bsgDIs+E6+\n7zJfiVbvKWFbz9uYkfjzCdb821WRvAvGE2MRoN9dpgQ5wMXoR/AS39L7GgjY\nbC0JEJCqK2rjg+z/l2l/buTShGTqfKIOdXpvtlCdSZLBmxBVLVQhjzV6QfUZ\n18V+aLlsAeHk1SuRNi2l0NSpji3WpwqXplAWO7rjU3rDNBRTTP84h4LscgpB\nFJdWAvp//JgM8u7osOQwy6LdfjolNHogeYhs9d1AfJfpJ1kWCafplWo88nNC\n7V3utedlzjLjAVQDZn6JMtT1jh6rlj4cHa2+T9y8P2B+I6IJERALrqC6cn0F\nPvPfaQTGJOZHLKviAiLPyFvaUCHam9SdePA3Kl8b99r4Mh/K4hKuKxEdYwTE\nyywd\r\n=/ETS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4c405863b.0","@material/rtl":"13.0.0-canary.4c405863b.0","@material/shape":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/ripple":"13.0.0-canary.4c405863b.0","@material/tokens":"13.0.0-canary.4c405863b.0","@material/animation":"13.0.0-canary.4c405863b.0","@material/elevation":"13.0.0-canary.4c405863b.0","@material/typography":"13.0.0-canary.4c405863b.0","@material/touch-target":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.4c405863b.0_1628617292777_0.4075088996191101","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/fab","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c7bdbf568dffaef2621fd321a316d14e80abebd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.f4241a42a.0.tgz","fileCount":22,"integrity":"sha512-KpNZr98Lr7cxU5B1f0+eQrByu60ZlHilT9EMxw2r4IVNqamA13qErHRA3USksXfg73RT1aADR0I2IRHyiuIQIw==","signatures":[{"sig":"MEUCIHRNRi9yJnIqFk9jRXFMsfEL+wcoIRkUVwxMxMiUgNndAiEA0N+Rfh2G+p0KAzHfiuhmPjqxB1L7X++FPc0rDKXdbm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAIfCRA9TVsSAnZWagAAjN8P/AuD1hExWqOtVE2OxI0G\n6MsNFB1T6qeZgPf7y5PHBln9CAhE3cMH7UHXBiGD3gmrmBWqahTg+PUiEXi7\neqyPtw3ncfkqT4AbM2oezS0kHR9QeZ3zcReRVfZWyv1BUIZcHogwpf1GKc3C\nLmjCi6yKkDUQpwZ9F+f8iBi9uJPKJCTlldrGLjqSz0ZCiU6jCR8t7UPnlJ9C\n1YvJZJBnXQZmdRbDqndBebSoGE9f9nXyxyUN1xLzm/AQ0NJde8+w9/4gz/U1\n1ZeEFVBpw03dzOYg/SuiHQU+BR6pnqd/W5vKSpnRfzAnN2miK2WTtdwBGN+S\nB00SQG06xsbBsGYIe83QSi/Ufi+IxgN2nEpHFz6Rqe8xCkscFxh9oGgRYbrF\naT2e0J5/dXf/EGpZbs9Wg3RzBpsdaNPLjvGjhEZaO5nQxlhF4JLeODkOdYMi\nJ+5Yh1lDv5Srl8c+f05Du/wgZC19KbMiWUZf3oWoOCxLL2mJbjS84JNzcaZ0\nHmIf5jv5ladnrKxG4oAJMXmJo1tS99abD9TUOAcHQBDYSdw8UwfIE35Moirm\nt94GVMWvjRdaW3khzyWjUFoWFZK2YfExifpKNX2iP7KNeFyDHuyiCjdqJvl6\n/qAs6frnsJzFFaNBXKf1JcM18TEzAelb3fNno/nScDuhbkb7EHW98RbabJQW\nhK9z\r\n=bDnx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.f4241a42a.0","@material/tokens":"13.0.0-canary.f4241a42a.0","@material/animation":"13.0.0-canary.f4241a42a.0","@material/elevation":"13.0.0-canary.f4241a42a.0","@material/typography":"13.0.0-canary.f4241a42a.0","@material/touch-target":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.f4241a42a.0_1628701215252_0.9741122452009916","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/fab","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63a63016c1093c4c61abe36fd386dcf7b438208a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":22,"integrity":"sha512-JXUT6UUbpija+m+JfNPaLBpaFa29U+3nnWJ54JMNObdQlgRqMC3Vvz+c30x8kgNSaBMzCZOE4jg/3VDHUWyFTg==","signatures":[{"sig":"MEQCIDMraSniHXaVGOOrRyboeovKCrmSdK/KImz8LPfHaEq2AiB8keUCHdqmwuTTX97FQJkaEc2HnuP0+pCUUP8LRQJbDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEE2CRA9TVsSAnZWagAAb+sQAJF29seNkfHeAMsxTM7f\n6+eMNd05B2FV/mq8TEb19Zz0kPq686r7QXFl/sIFBkO8WwqlIpgHKWmRYFP8\nAoH4EkVKoOvKyczLPWNPFZC/tV/J4YIagEpMaozSaUSvhwtsbZjV9+/CewaU\nZRCbCz5idBiCwLizlrV8HPN2Hsh6fMV8NebXD50cr5z7t7ilIpo5bw8pZ15A\nulJ1vS2EVmYzGgAecbyNNbsF6NUUADV6ddS+dMnYDAglV7uoiLg03/v8ls1z\nlwFw9p7G0q7PzRfoDgUkB/+pzYcRsZFs/tdVugxxh4p//RMbfqDxaMVKDBtb\nVWSK4JJEd/Hqz8S/hFNLNQkqHQ3HvAfw3OTDy92EFEsSzllRFMrSmfYnruLD\nTN9scPP0Vxj0+L82jYBVER96I7Bg4eiSaXzK9eXZOJ0dAYhaluglfGKSIj3d\nMI6+49Vob8tCK+w9rB3VviXWeZo/zW9siA/UtbQfBMlOjw/g0O+qdg7vxxTK\nSM3T0RScartqjW3ugzzYpkBrArgw7oRhrzugnJweR934nwY8hNfcft/tZvA9\nh0gBCvBYBpQrTj7zRVZ/5fYAtqrNYhzl497ABcPZdu5tyuxjoFXfjMho4OtD\nb7eFjowRVg4BQPpfkPewZXBwWxwIP2kf1KGfZnTz0LlAEN29k/V1NFG9pu1o\nmlqy\r\n=Anfe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.0ad12ed3c.0","@material/tokens":"13.0.0-canary.0ad12ed3c.0","@material/animation":"13.0.0-canary.0ad12ed3c.0","@material/elevation":"13.0.0-canary.0ad12ed3c.0","@material/typography":"13.0.0-canary.0ad12ed3c.0","@material/touch-target":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.0ad12ed3c.0_1628717366817_0.13206861446067375","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/fab","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bebb1779520f2e67442382b3f1c96c4f6e43e72e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.077dcfcfe.0.tgz","fileCount":22,"integrity":"sha512-L42ifclA96rmpzhfvWEj1O1Iy0CYVnnC8sk2tkAXl2sspPBBYgrgfCEQr6vfT8IHqf7QBSg6D0Xf9SUsex75Tg==","signatures":[{"sig":"MEYCIQCUciHZGYRCTaOn0xXC7fZSkxOgVGWuVabJjvtHKwIANAIhANF7Elkn0DUbF0PErA7C7A6w6Nw1B4xkWwV02yZpcLA9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWCtCRA9TVsSAnZWagAAs1MQAJqIiqSavu64d2zdsTD6\nGhvrn0rwn+si6+v6D31VNQOugb1ECiQakKO66qUgLN7iAZ0dR6vrDbCPYjUr\nOCnZKv2atyG3MV38ySZMeF0UsOh3rLny88yEBQePG7Dy6DGLcQsfyXIfmn/Y\ndpJGrr74um+8a6OA7H0fpR0vCE6VxNNCP43LJHeBYk/HXOmS7T/fIeV6zMAE\nC8yfpfWPeQn6ezKvWAe4+d1wvRjOuH90p46a8WMXdH3ZoJW/TD2cQPw5IM1n\nAdaFWa3wupLiMOW7hZCYdVi27ITHiw+sXywGjVH129m3pjjfXt+PWpzPyS3l\nKhL5TpEUqZl8qXyi4KsjthlJMBTf09NlKl9qyOoEpWgx/Mo1JMuEudpq6ZTo\nz4kn00eL6OXePjS36UR8r0Ym4ktGWx0EvxnmTRCzlzanNByO9hVNxLgPlma6\ntoI7bz5GrCydUTyg4/ZPdxrQuLCJcVeJG9uxaCYAfmvKjJa0plCpDXaELg4W\nIIpD1PXalx7QteEtD4mpvaTkgZxDWbhWs1U4Y/PqEJxNzVt3PFSmPMg2bbsW\nCjR2qjpfUak4Cg2EDWoo+Q+DKs9T6L1Qyvf2DmZn1Mj13qhGmvqdBR6yFjel\n8rUJaJNBokECdyiqheG1jWo25kaP+ndGB57O9f8ld82aHArfjNyPCCgHsKuc\nRX2I\r\n=dbgA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.077dcfcfe.0","@material/tokens":"13.0.0-canary.077dcfcfe.0","@material/animation":"13.0.0-canary.077dcfcfe.0","@material/elevation":"13.0.0-canary.077dcfcfe.0","@material/typography":"13.0.0-canary.077dcfcfe.0","@material/touch-target":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.077dcfcfe.0_1628790956893_0.4975091710184618","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/fab","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.e3346766f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b8700fdf49ae6be267cceae6b6a44aede98fb6f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.e3346766f.0.tgz","fileCount":22,"integrity":"sha512-kBWS6mM8xqcZw5P5Tc+/IruAsdi5+XWp9NHZEzw1tUm88nZCukKVsnXn/83xpPJ7A1bugzKdBU2VycsCx0Xkyw==","signatures":[{"sig":"MEYCIQD+KhihHL8u5oD6+K7ZEocW1CUVKpHaLMlR+ZOg+sQidQIhAOiwsGeBEK0u2Pqh1CSVnSn7zSyCiCxsT+ZmWmOa76YX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsv2CRA9TVsSAnZWagAAm3gQAIyEzE3UW5sFkEg4jiZ7\nhk5lPsclOC7AygPwr/9W3uLHg2xFs5RraAtu44J5GqrHgCpYFxRlnD864fhL\nBkwSli7Q75DulfAU+eLXBKXczo0zFyaRHaq7zkgs/Kd83TL7+TYGSWoLiLf7\n9p9uA48vDK/D7xGQnS/cHUrqenLFucmkkzcuAKrUwqgO2E9d9Mv75I3N+mwV\nxcZxj78crN5Zr0iZ6InzC2cDO3Iwjr/UsX+4h6a/DXWH4w7znSI77qcnq25O\nVyH5Di3bHpctQMrlJUr8l7lrvwI62cw3hc4VU0KdHRCnje+VhQhzAt5Q31rH\nAbaNI6kf5oKQKOur9ItVDCas1OmdCJb7MMU+Js7pOJxVNgu3gopBF2sw9CCt\nkC/j9nmU9pjZuBt/YhjBfxDW70KDJXT6r1Grm5QNvzjQnoUAdBI6AuVbi42y\nuLbIvkNMm8H20w5IJF4JnsEwSRqGDUlZodIsWwdox9PzI0hM14edC+adVSFn\nwuPah+R+YUuxR8rBVUAxH2dcYt6jkRG94ORDRhPZ5d8zDP2b9Dp+hluoIvr1\nUb1gzS4Rl/zQIyhir4JbJQYtwxPMCuCNciXfbrvHIbSWNVsHqbVK7ctJTdCt\nw2EVM2tWjENPqfOK3EeSJ2rvgNRdRhWL9rCTIi76jFb8LGZCRSRe6eftgzQR\ntfVJ\r\n=rZ9P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e3346766f.0","@material/rtl":"13.0.0-canary.e3346766f.0","@material/shape":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/ripple":"13.0.0-canary.e3346766f.0","@material/tokens":"13.0.0-canary.e3346766f.0","@material/animation":"13.0.0-canary.e3346766f.0","@material/elevation":"13.0.0-canary.e3346766f.0","@material/typography":"13.0.0-canary.e3346766f.0","@material/touch-target":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.e3346766f.0_1628883958478_0.47737979697835087","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/fab","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f0b7d10beb046833d0d623a76e4485b2feefb1d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.2fb068fb0.0.tgz","fileCount":22,"integrity":"sha512-Rr6Lf+ZvuYj7r/FisysUOIio8w3/EUlBTq4LGUa+Au7w6fflab37YTzzrhzuByrlzf3X6sHEBuf6s+U2nzyHtA==","signatures":[{"sig":"MEQCICJStd4S+fELWz8036o8EgrY1Crnwi3poN06QqjTU8t7AiBDC4u9JyFJoNRwYDQSmNEqFmUUNzLYuHr41nqQ71rDDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsy0CRA9TVsSAnZWagAAZSYP/3NEuq1tOggPdrrmOr0A\ngws4B64IQFLsGGaIxGU+2KyTOkgVIFbITeXRMI43vHc3KqOZfieKePpYb/rp\n3m9I56GWLqWf980aq41DFUajmiWTEYFcBg+UeZ81dhWq9jxhhLrGbMVfCaGs\nFvL3JRLkdPL09RxevV+gjwJ1Cqm7gHkQ8IRfJjm76XfpAZwX1pLAo1qrT7MU\nmpwq7pfSWpf2X+fEuvxqtxY5Wz6nC3VwcvpmPgj7bnonfPSWNR6+e93FsedG\nMeqAIlQxqs4CIiMh0EuBTJ65KyX2Gm/4jzD2tHobB/wYSsQ9937l00vMXhWb\nTL81xiMbtFcagCvMVpeh0ImnxiCHSJfJ4W2HODQaqft+I3Gk8giHSFDN85xL\nDCIL48Fp6hkxLDQa/JlgMPLYZTTSgWsweaTIEEwrPiL7COzzeApIczQvGAIM\nRgL2G3AbMzIn1MEnw+nuibZxuWMas1XYmXira+Stl8B7foEb6xKS2mjzXQyU\n0RWMN7TqjVrrGyWwrbEhQHjfokLG0lp4BRjG/4Ezt10QV+xQ7g3pMl5Z/R81\nTkEpFBz7rTyiN94BSjHHhQum8ePVvOKWDdxdDtvsxUCIMSwwxXMW2MLiAc0h\nBuE2ND7cMeaRr/tJSQzESbIUS3RvyM2UK4Fz0MtC+nQIFG7bouHvGj0lVSLt\nTwIi\r\n=8DwL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.2fb068fb0.0","@material/tokens":"13.0.0-canary.2fb068fb0.0","@material/animation":"13.0.0-canary.2fb068fb0.0","@material/elevation":"13.0.0-canary.2fb068fb0.0","@material/typography":"13.0.0-canary.2fb068fb0.0","@material/touch-target":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.2fb068fb0.0_1628884148541_0.26257029663702935","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/fab","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04016cf9dedf34c806baba8e5a2d3e79f6832135","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.fb76c5069.0.tgz","fileCount":22,"integrity":"sha512-RTKEz8efMYOi1E+D+rouNwitHcJeiURwpt1c/qZ3l53OBPipdy5r6aCmFg6BVs7K8lfPfj5hfdNJgru18kHwlA==","signatures":[{"sig":"MEQCIHXZeIXU9K7V5QxZkAEC5ahICNWC3M4wneX7kQra0E2pAiAo00D+NsmUdkT+bCWd86S9G01U7toQWYh7f/xRxeId5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsXOCRA9TVsSAnZWagAAlFcQAKKCfjJeq5sJ5CofuGLl\n1S8F6kP6UrGsREXug9kUb/REXndahNMuRDFSK9CwbmzuK2pZWFSoxOBEmsLw\nZrbHYk+OFGM0Q+b7C2H5cqyVTSUXrGqoxexKMmsnGr+dgQNQeR5gPP9txiIV\nJOR8WEVpxg4JZ8gfqwLmQUN+l9yQ4Z3y7WDcs0Pg+Tm74KtCNiGo/vRA0nyW\nF5/oPE08kxAPO/1lFU5itV+AxcNf0ZHVxT+ajuVXmgeR6AjFORiFTU0GoDjt\nCB001yIY+ODHU3wW+1YR626yhXbq0tJIV4teAK4tsy/6f8qMxLQrydQkOi3n\niqf6RRjj3mOP2PdIUh89gGnqkK89BXZBc0mFMZUF4OtP4mFyVfAtPWHUAjrG\ndCkUu1BNNEZPNvQs+vHluDgqvk756VSW0lPkWU3tia3WH1X+2d0ZaAgw20oh\ndKpjl7Ptw73LJtGCIBfK0sjw7uB625u3iPaOL+clnlRauLigtM0JTcpZmi4h\nl/RGAbd4lZoWIrn6vrk/QLvKpOJ88XiemQY1/GOsV1RXV3zs57Hb0cTnKDNZ\nRFXizNK/St4IuQtDPI19vZNPPD13l6NnorKPs+DPT4J4EaprUR1kwrONWqxn\nLZsiuQninNTltSYIW8CSMldwWuu5mMjlb7eWsBl+gVicgYyJAL8van/WbSsW\n6SIe\r\n=xUsD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fb76c5069.0","@material/rtl":"13.0.0-canary.fb76c5069.0","@material/shape":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/ripple":"13.0.0-canary.fb76c5069.0","@material/tokens":"13.0.0-canary.fb76c5069.0","@material/animation":"13.0.0-canary.fb76c5069.0","@material/elevation":"13.0.0-canary.fb76c5069.0","@material/typography":"13.0.0-canary.fb76c5069.0","@material/touch-target":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.fb76c5069.0_1629144525979_0.8972756520437684","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/fab","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.457d89aad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"004b62a2a1231adca8d82c40b847efd22f351a3e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.457d89aad.0.tgz","fileCount":22,"integrity":"sha512-Sdshk5pEqj6RRA5Tv1i2UEFW0bJpEwnylB4Sdxm2So271P4tObP//RgPcEh+kh7QY0W4E65vyaAFwIFVoQhmdA==","signatures":[{"sig":"MEUCIQCasbvHJ0MmtIt888HXet/FFnYLw2xdjoF4OOiWMUJFygIgISkhBC/y9PvCpFRaR/tL695e7lX5LdRa0PGoSxzsP94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9Q3CRA9TVsSAnZWagAAni4P/01LIUFiS0nn1IQ9qGey\nidgfMAIjt/QeUWs/Y3o4F3Q3Nfn74HeAa/IvzlayquMVJhJxDckf4TOQkD41\nEQ+GVP0wwLgZckDXt4S7F2/94a44Hff+VAi23JJP5chFxaJGIgyAWDdDAHIV\nz1XXtaE8n8DlbpQid8PE7WX/s2ManBrZgLoJjoaXM1erJhbhsebdx8Xv/JcU\nBa+RTlbN2MhnEFz2z0r/rqX+YdUw5CXM24XkV8SBuZnmSUklItsUolg+Y3b5\ntF+oS8yvsgwEmwt9FIjhYiXPD1qIOdvccjyFJR51Ri3bIDd6+qlgGCHcncKJ\nAAhe/SwmVV1vIS0EgAsfQRyv9E20A33qtcnHmAn/W6BntgbolUJnGHhtx7AV\nKNqjxvHHmWIMHPf50FV6xJpGINKOROv54codm1fx9miAKACWaoYgQe0ZrkG1\n8V813FcOSgZlWE5JJQZ5orf2aoGvqoxGtmebp87So7unEw6FtwpTraC6I3yk\nT3+EkLf9nHGwws2Aelmh+OWMgOz1raL8pGl7Sc2pnwleCf2u7mz0ScD8PTbf\nH4Ig3eEGkFxESwqCi5K7HcLOoiEnR2/xfTLJWVlhTZx/sgwdU6iHuamE8DZs\nshwfmHGws3Ja099qGr1KPq1yb0e1mz4M8np7mQuUW+5eDWrIcnhJPLOcYmju\nxGk1\r\n=I1zJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.457d89aad.0","@material/tokens":"13.0.0-canary.457d89aad.0","@material/animation":"13.0.0-canary.457d89aad.0","@material/elevation":"13.0.0-canary.457d89aad.0","@material/typography":"13.0.0-canary.457d89aad.0","@material/touch-target":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.457d89aad.0_1629213751653_0.8122428854289439","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/fab","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"903b99666781cdd8b43bf621afee581b19b59aa4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.0de2f2edc.0.tgz","fileCount":22,"integrity":"sha512-skxI3WCke3oKVnXaQiF7zkwIDK9Lqnp4tTbo5uzoCKGgl0VM82xeus4HPaw6FDCFLLYdrUbObVK5oVZfUtROSA==","signatures":[{"sig":"MEUCIE+tbAd2uDE8pUyLG7XU45lROb0Ui3Ffsl8xPSb7cSLIAiEA9WaM/7mdfkon6qTyQFwj0oD7Q1t8MdX9Uex1NOc/UoM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCIdCRA9TVsSAnZWagAAOYQQAIESD3QyRnFY/64PQMuV\nOuFy938Lr8WMX32yhrVgptsfG5vy2mM3TzhkWAerBhouCYX0hYpbje+8OGz1\nBcLUz5Jms6PRoMR6g+zcdFmE2LfbJeSrl+OhT8LJdr19XmgohZZt+19VZUvj\nbaVZKbCeHsqOXabUQdSM33u8OB0awYFiSHcysNrp02rlAjLlXrC03OuA7bvX\nuOE9EftHlYmBSO/38gkO/+EU/9DzyW+n6TedVRtZ4fiqRX/UqUsDMoT8CAXW\n2e50MaJ2yEYqHbs7KvOUUQBdhd78KzX02ZiCPW6jP82fV+h4pOxfx6m7R60c\nn2rzJ7KeeE2KMqq8FfDJ3BiFFKWyoYgX0cgbiAxL/C7k16Y0e/YeOPMaEXCF\ne78Jrs/q1u0hR4emto3s7sIyRiYq+mUJmRU19zgIBEWE6y3X1X2OMXEMIjOF\nyvzCbMZXcsXrHikgiqi+L0cf6w4RwFxz+w+m1WJtyws+wnQiWTbiE29Fho/R\nI4fAyINi3mfp3qWda8S1OidWdG0wn+AqYijR9c+vR0UcRIBvYBwilXLTGW2l\nAd3OQ7p+SUzJ/fElj5oUwgZjSsowtnMLdgcXHB3FLbSNI/6goPcuGkjpaYTA\nDN03nV5T++7gqJorFezS5C/D37TPp/+Y/zn5/bp9zgna3v2pftBYo00q55u1\na2AQ\r\n=XI2g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0de2f2edc.0","@material/rtl":"13.0.0-canary.0de2f2edc.0","@material/shape":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/ripple":"13.0.0-canary.0de2f2edc.0","@material/tokens":"13.0.0-canary.0de2f2edc.0","@material/animation":"13.0.0-canary.0de2f2edc.0","@material/elevation":"13.0.0-canary.0de2f2edc.0","@material/typography":"13.0.0-canary.0de2f2edc.0","@material/touch-target":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.0de2f2edc.0_1629233693232_0.8306708180186837","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/fab","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e326b7ff3cfd8005ea526191c9cd401a28caea2f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.1f9259b9d.0.tgz","fileCount":22,"integrity":"sha512-Ix11T/GifXp9eiSss2C3O4FymlZ0lxXo5u7rJtRK1vExHRTuSCD2v5BbE7RZFm4ZSJ25UU7AhuePMrJ5mTneJA==","signatures":[{"sig":"MEQCIAeNQyP9cvI4r+DLRRSbSNW5ADohRinU8rJrwKID7MvvAiB72G5pl7SL9DKN8kQC0k43QjJ8qu/HA6jkdVrxYmJbCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDTfCRA9TVsSAnZWagAApywP/3SmTE2oIf6G+qNn2Yk9\nuNuamd7/DttvL+6gjHMfLAbpF3pBA779Jod9pRx5NQLYf1RWyi93a7V5L1+3\nEf08NBiwoYFUrecjCBL5tjlVhjawWxmbw8+hhWPKESeq8YJpKEO74L3uLMGW\n+3P7RyHsSzN4kUevE9Ko/5fX81FjIC0e7rn2t+9n2e9JW2VF8jY/nNZEMpdm\nTAS5q43Khe0sG9y8oR/LC0hpSRwU6I3nVbKeRQJnuSJIEQg1OVdQufHRZ4mi\nfZgFtnxFK3GtNkA6ZFxFTL0DHk2ae7mZqs+9tKGM9dA4n9jg3366VLleTyGl\n88Q68iIcDVUB046EcBlDVQn5wY9zUGQgoRRFhCmeivLhLxIarMh8cC8Sk3oU\n+r2vFnKhRiuFvm07n6Tk3rIbFVye9ZDkeByQK5KYQAJrkIaCTeocWBQYXojw\nusRa1zNwEHzzwaXTNcmWDRUEcw87AZTl4F4w7ymB4NXJWPmTtnsvTWW8fpfE\nuLAa9VdEgpS8Wi71FqCF4XRkeK84in96CMubj0DpgErsWtULlUi9j5OZECpU\n71vcizL9qQFnRaROHTBEjSbp/3aPMTJjpFWrw6ZY0KkGffl/r+PPqL3zXyNP\npg83Zb/SGR443FCsP/oJnA9CFjIUFsVDhlBOie3QXUmXZqmBL339r31thtZP\nUbHq\r\n=kp3x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1f9259b9d.0","@material/rtl":"13.0.0-canary.1f9259b9d.0","@material/shape":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/ripple":"13.0.0-canary.1f9259b9d.0","@material/tokens":"13.0.0-canary.1f9259b9d.0","@material/animation":"13.0.0-canary.1f9259b9d.0","@material/elevation":"13.0.0-canary.1f9259b9d.0","@material/typography":"13.0.0-canary.1f9259b9d.0","@material/touch-target":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.1f9259b9d.0_1629238495279_0.7357490650139533","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/fab","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.3b9290351.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4b176eab8103c73a5e9955b74d69c3f26263121","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.3b9290351.0.tgz","fileCount":22,"integrity":"sha512-NWNHUyqVehm2QrnTEd3YoVc7dSsdQXKiKbSfYQvzhBcV3Zn73EsRwJ1dPFati43/Vs2G43uzpVAykbfLdMlPiQ==","signatures":[{"sig":"MEUCIQC8o28K48UpnGrQOAW1O1juCRCuxzGHzAa3ybhXQ5oRkwIgBHMoFDesPuW4M/zvo21nbwDbNYIsAiAqO5H/X4PM6JA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJmOCRA9TVsSAnZWagAAUWwQAIb8dTVTtXdiTgoikJ7h\n9tX/E0RlFvDm5dyz7m9dIL1DX3egb8ljY1WwS/mvdi4j+c4FO56X+smzCtLM\nEy1usp/CFWQBqx/KeoekWVbWPxEJ4ABrVlP36PtoGYTkYAgiFvGsj7d3Pq0X\nxuM2zYZEEcZj/rSrWSr7Lxxp5hDHPAFyy6nC0klKuQxdQkqdmCICxmXavz+B\nKrxLB55OEfQJuSX8u36X4l138N2FXxps3V9Y4Sbgrx6cLYBgqkY/aIpRArL3\nsj695nJNsK8DQDqbEozG1Cpe58580DDv6SrqrUz0VTXYBzVvf0x8fFuaLprI\nULAn/fvNCqwg2BKCO+ZhW+cL1YnmZRxO7ksR3PuCTLvFWFf17S67TBgMZa4y\nX+pN1+zr6NE0FtB+YThqteuHOjoDeuUbEs4F018ST2ugOmu8Pwqxv3CaWAUi\n3VzPZ3dgMjRGBIZl/htUZLKh1gm7r1Y21DT5IxtvNOBAe51dM1ZPbxwioSdx\ng0Y65KCyUDy4hmy5MpI6VyGsBGrLBgR1A4UcGUrOuktfqZLROxU/zLgmA0ka\nCM2ggQmVXfsYJETE4x7936LenKMsej1ylkrtzQaDBTIsxrz/7xbTgT5cx3er\nogDax1kFJCNkpHC6HOhh4ofSd45SWifpts+D8gDe37fHBEUYDFo337k2PP1f\nq9VP\r\n=YhM9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b9290351.0","@material/rtl":"13.0.0-canary.3b9290351.0","@material/shape":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/ripple":"13.0.0-canary.3b9290351.0","@material/tokens":"13.0.0-canary.3b9290351.0","@material/animation":"13.0.0-canary.3b9290351.0","@material/elevation":"13.0.0-canary.3b9290351.0","@material/typography":"13.0.0-canary.3b9290351.0","@material/touch-target":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.3b9290351.0_1629264270125_0.09717686478234655","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/fab","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"846c836ba829a3f1a2e75c8182f9f207db5f6063","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.43d2eed2a.0.tgz","fileCount":22,"integrity":"sha512-Db/7UDe2Lenykgoy1ZOw8zigHToKMeZVjzAnHpgFUj1gddalSuKPfUt5uadiiu0uqzLGQ/ZexSIp+i3dDP5M2A==","signatures":[{"sig":"MEUCICXxcOZHhaxhVP83RWNbB3sfEW5Hxc1HYHu9pMWvGwjEAiEA33HSnZZcX6ATKFtnahk5k6C7gezCNSu4aufVpk7w2yU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS8vCRA9TVsSAnZWagAAVtgP/0HojMpy0Y6JCArYtCHy\nHGXzkX9fys3vufRNSrzDTEVPJhqgdhdUcBf6OTni7gFJJzVrGdk39HZKhBMY\nHjUo8CSvw/R0RzOmWKyuMVu2315UqRNyIIxXknmB5JaW646Q/+d1CuYHXMPm\n8NKgpDEdQq6DHzjkyy9Ym2CsEN50f0GokRKdqx5l7f7S8KXDkkYpLClpnzVV\nmK51/f9LKb6U3zZcVYbplxc5EWUjOvZxl77e/PcNmgMbTcedtU64HnzN2gJZ\ntJGVIkD7vxfBQG+toMgNtvRqOaSzENmlMvXvZPMVbKsafc4Yx6iTUj/cBYQE\n9grCMv9dKzDPwYvb7kN8Fni/c/VzRzhGfHyQCnVkJB6rz7XWMg0hJcSXYyzK\nH3CFrUM3Gjn/W+9s99L9zdskHdMEPhS/mwbmgRepOfYe3/V4uqZpFiuexQlT\n0cxhCWwwZjl515dO1oUkmBDF0wlBqwRzqMSWf2LJq8n97uMLs2fg48yH4Hb+\nZe6ysm0W85vxLJ+Tr25Cg3mLaZnYV3OQov+S1s60fy8eDRf2/8t6J/0ts9yU\ntSNmWNyzwRsMhSsZ1LyBLVZYUBortr+CHd4O/688ZBM3R7QORcERsZ9R3Tpg\nNe8YWDljDYClUvEMaWFglbPpgkKfVdHfB7Oyh8By092D1r6iR7rNSZiYLlHo\nLpY+\r\n=fn/a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.43d2eed2a.0","@material/tokens":"13.0.0-canary.43d2eed2a.0","@material/animation":"13.0.0-canary.43d2eed2a.0","@material/elevation":"13.0.0-canary.43d2eed2a.0","@material/typography":"13.0.0-canary.43d2eed2a.0","@material/touch-target":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.43d2eed2a.0_1629302575249_0.9692393696866133","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/fab","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.0a9069300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51994aaec27fb9cf4d1969a0c635b75bb720311f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.0a9069300.0.tgz","fileCount":22,"integrity":"sha512-7CnzQSR4Iknv/I3Ah7wc0yK+t62vNXARkRDbfwPEk6Kbpe4fXddHr4WmVj1jx2NGVpY+a6Wldh9pKKvFctz2Dw==","signatures":[{"sig":"MEQCIFhvNq5qxvGkcHlD8eVFx2n77XO6Vbs5Mj5hN+Gmd1atAiBxg4EvzklRjtm3NN8+eUkz9cGnqRhvkUIEuumZJaVSmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoRKCRA9TVsSAnZWagAAjRMP/2pj6ychjaXnW4T+ifC5\nl4L7Blny+ynio3ZSpRaRKuFhKEpDkzaedknPGBxzOUdG0/AwQTiMv4jYljHL\noZ7NCOtOrQIBfdRN8oug2MBcl7NiSOjQlrocx2ZoUgwXHtBJXllVGjshCQm4\n+rEtRAl9GoTd9LCuUcCyUTJNgvsRTcjMk1ftfFln/+1oQuRVkJlYAew1AQgg\nI0Cq3Hf+px7LrXAvS7DXECUuGjDNvA/2+RR4Boe/wVJ10Ah2we9GcuJpppcf\nkmAFxTMSrxscwR3rLDoIh0TDpn6E5hv0wn4obvPMwjnjJcOI/NLEPZdV/LLt\nxHrN0g86DLGL+sPmhC1aHnteS1SCeg2FzHDTBazTr0j91uouRFCuTfA/qg3D\nTmuwvujw1OSiPoa4uUdvOBEr5esGD+66woOR9vTkkCTNerdChWO6IFwwTgT3\nB/5h+yPy6C82s87nns7SX7fzAExy5wcg+FBCMIxVotlKW3tT/9EPv0vopPdt\nA8VsfDeEMu4dcPN2YKl6KgP45AUTsf0WjZrGrode4dbnaqwrA7ibzsTnAO/y\nfWSdwD5zpsNRZNS0Vequc4kRqtTVg+YcOQoOucy3cu/5k7LZgJ6RrADHlZSK\nlrPtmR1Vo9Mp7MVWlQt5B8mXkd3xkwLGNHkJZMiJNagFUpdL6JzG5QyOE/OU\nQ+8E\r\n=HPtb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.0a9069300.0","@material/tokens":"13.0.0-canary.0a9069300.0","@material/animation":"13.0.0-canary.0a9069300.0","@material/elevation":"13.0.0-canary.0a9069300.0","@material/typography":"13.0.0-canary.0a9069300.0","@material/touch-target":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.0a9069300.0_1629389898554_0.6053772217389413","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/fab","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a4a779f1a3d809d3341b81251de868a729057f1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.7da413ed8.0.tgz","fileCount":22,"integrity":"sha512-z3PDcFGzaqYAw6R/NhvwboBM/04GExdcCp15XNPQNjm4puR8fJ1MYqqcJN8BvYqA/6KsabuvjAdBslwUtD0GEg==","signatures":[{"sig":"MEUCIQD43v9V/07J9MRq/VUc3dbkZqSyWZFKGkvBU2isLHafGwIgEpGuuRqneJYheLJS66AlSJpwLeDP/NAXfvGHK0NCeJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH88KCRA9TVsSAnZWagAAWaoP/1iU34cmGVJcZdqJLzB/\nqwu7IYAQJi7+U1mZ5O4nBqw1PMKqLhRMcVxcJmN/6Tp3wFnECAt6dU7x+1QN\nG/joXb9U/3OMaGw/Xl1Fs86mkGOXZl18g0zM7CSygpJJIRmtgrcEVS9XBwik\nb39Ndkd3acokoK6A3cZ2bQRffSvhIjj6S0eFgSw+JZf66XqY+m86xCrSATUk\noyvXGs4v925wLWzDklu0VBzFbRkyTPq4uflkd/YTsJB09HSuoCdxGeo/dRvC\nGdy0bFTeKZdH0gzveny53WPl6OCjdHDMhNJxwLXzgRbMl9FN3vswOJvcDKV2\nxtiWNC29jMuBwbHWOuv9kOOSsxKtw/nQI0dGY/dFy7mCgjyr7n5NmiZysUAL\n+aKV2J2OBh56QwXFLoxka8Wjs2uMBCHQhgevVy3z2jpEq8MhhaVkMiNgtEGz\nZlXfZv1cRUB7KbMuiOmYazgX9zZsnZYDx8UbCKeqa13OnvVtBmz1ioOX55sS\n36Lkzz0g90gz1YuV3rGb69rpu2RIA9RyGOQuiqjz5U4nNno4kwuOdV4U+2Pb\nkFD5OzvgXVGSn6fLjMisOqnlDrty5dxHnWnm6rhA+mbmmdgJCS8JJFRYNc6m\nIFnmQShcX71JzouWwle+Mp8T7YvVA4HU9Pg0/8NfJM+7fWsjRMIYsX3DH+BX\n6MHJ\r\n=MFqZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.7da413ed8.0","@material/tokens":"13.0.0-canary.7da413ed8.0","@material/animation":"13.0.0-canary.7da413ed8.0","@material/elevation":"13.0.0-canary.7da413ed8.0","@material/typography":"13.0.0-canary.7da413ed8.0","@material/touch-target":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.7da413ed8.0_1629474570753_0.531363468976946","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/fab","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b77eb46826310aef966f3fa31e3e4f7f97bea577","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":22,"integrity":"sha512-J40FPqNpnbRiCHhvBwfgpyg1kkA1UUjy1mEWranvuB5bn91QhtMA+RDv+WggGCWfDqMWXNQD+pe2hEnDVygs9g==","signatures":[{"sig":"MEQCIGmY3rQNaqFstVNtDkoHG5Kcboe/oov+hk1PXnlLX3gQAiANfRxIR6hNu99DKvsOrnOPe7v/z0BrtWRCS7zGx5I0xg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIANoCRA9TVsSAnZWagAAxu8QAIx/prcWzSOyGvKb3kCs\nNYLUZbqLISkdqb0CWVvdQKLskK8Cd0lDqeXnH9VZWGD3MROWGyTCPPRXwgxc\nfg9rEsEhVlH4BwJXjzVaH9be4tzH/4fuPAjS8EXoS+EP+pllIGY804x/JbmB\npmdYJli75VNltclPJhXa/HA+gGJDXiZr1Pf+rooeQoaMIXvCKOeFVchl0Cyb\nmnuPOnb++Tz0lQHucoI6RCjSDvgDqkufoQ0jaW10u5/ui8+WLt7sybYCxx7B\nUw8+PNxhNNKrRRzeIaDrS68j15X6co9xsyBZz+OLBL0B50OQC1A09Hu1zTTq\nd0opT1V81Sgb0PsU0o7h+FTkQbE2825oamyOC2EJfZ0BU9QtZllSoJypunRj\nryx5BwGLiO9dUnG2I20zc/HyDAP8f6Ez5OQaf8Kp5/R4jSgRtipvFOvbcIwL\nb/QwzhMMhMm92bIrmHlYAE94WcQMRILoDt9Zmp8HTDaIqcg3Amhb+jL6PhFc\nrYJxlRhxskKOFrn4EO+YQIoBz6p++jtbwa23c6e1PxcTYEd3Rn0Gs1gFDo+n\neMZNoygHXm333tjSDKOUXA8FFXpO0mHGeoKE0APDtLhk/0KlQUVtIYpcSGP5\njlLMPDEE8akcRsc59YPrka2v+DlhcbxZrVkGSMb34ZX5RhXWRBPhAYXFNp3M\nc2d0\r\n=8YH8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e1e69fd8e.0","@material/rtl":"13.0.0-canary.e1e69fd8e.0","@material/shape":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/ripple":"13.0.0-canary.e1e69fd8e.0","@material/tokens":"13.0.0-canary.e1e69fd8e.0","@material/animation":"13.0.0-canary.e1e69fd8e.0","@material/elevation":"13.0.0-canary.e1e69fd8e.0","@material/typography":"13.0.0-canary.e1e69fd8e.0","@material/touch-target":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.e1e69fd8e.0_1629487975864_0.2667383319041903","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/fab","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea628be13e7cdff68cbfb3ee2bd8e1d630c251ef","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.f5afc16df.0.tgz","fileCount":22,"integrity":"sha512-RmnmFx+YRA3zyx0OjvVr5aQm+dLTaNiKUe2vcO4SUKXGqsHACdS8hniTR0p7FXdzUpvFcv4Or21rEfLD9/aSHQ==","signatures":[{"sig":"MEYCIQDx3YhlAtTDuoQsetd44NWN9jKTr+aI0xUoNjn3fXpA4gIhAJTHmNVHm4yXalsPOQf6wiXO/Cizv70BoMCJtrO+/bHi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBAoCRA9TVsSAnZWagAAADMQAJFLTwQo0s4scRx2nCIi\nkBhCcS4kov76Z+ZhEEynhi2s5CNmmELgiaJZWgq3QNgrlPqJmVuUViVZs9Ix\ndqXzJ0+7Q7SoJRhoczJDtUxNhEJKUXsVEsvL/5VGRz8S9uDJ4MdCn+PQ102l\n1PpPmijhwZ9QPrArdWX00k5skHaGhtAiSkwL3L6J5g5pZaFfZGy3t3yniuc4\nMfAYxEvghs64nJ+YuNQZmb4KIIBzsihRl5T5HruiEJ7SI4Ei7bvU4+lm5Dap\nNw8TstrEZ1NnCl8qq0UQ994cbdNHjY8hzDJbn3gsr2QYD2XVqsteO96DscPS\nn2GYuUBqJ+YcQblABumlyPZQSLHDiSceEu69ZzFfk7xtUeWax6KKu9l3VJ12\nmbz4WMNL0Lob5cubCDlup2w9govS2ZJl0KqLlxcTr8gHEOSEdPVdl+/EhybH\nx0KJ2I5x19PPkxVyZzXrD5W81hqSasrFTI8DPT1k8ZZfCyczZvPyWxyeYt3s\nPi+40ipB1mjrdkeZxR5E1snRkL2Z4/XkJTajCcCCu2pr93wSAE1JzrhKCTjo\nDMP49cJQKAo+hk0jwACQAnHGjSBNBislfRHAKqRPYRjMuqvD2+j06Lzefuk+\nqy/k6oNRPTSYIxg9adTivFfBb2Jqwhyi4v3fxn0DuoaszRRPpG84ti/r/XeM\nA40B\r\n=cP6W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f5afc16df.0","@material/rtl":"13.0.0-canary.f5afc16df.0","@material/shape":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/ripple":"13.0.0-canary.f5afc16df.0","@material/tokens":"13.0.0-canary.f5afc16df.0","@material/animation":"13.0.0-canary.f5afc16df.0","@material/elevation":"13.0.0-canary.f5afc16df.0","@material/typography":"13.0.0-canary.f5afc16df.0","@material/touch-target":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.f5afc16df.0_1629491239841_0.5010318703008532","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/fab","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22666ed8ee2fa2d0f161fb12482daa2d7eaf7eef","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.28d0d75bb.0.tgz","fileCount":22,"integrity":"sha512-SOYAsqhSf7CmrNDUz/whLsne735Tv8le78T0Q0D9pvgkZk6vTyancifC3p7C2elNaob5V3kixKr/H+xZMAJuZg==","signatures":[{"sig":"MEYCIQC8zyBIl9mb96JEywzoYlzo0cxbYiV+QgyIeAPqhoxIzAIhALGEEC+im/MvGuBic/4lDYoui/M6VVts5QQgDs30G1Ky","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICrNCRA9TVsSAnZWagAAU2gP/iqST9L9X3Oz9Vu6a4dq\n4HMvhyPF4S/+WfYDtmOET4a/ozC3LjxC/R8vWPtp7Gq0aKaLPpoVDqKQXYJx\n+anvTZCHrYkWM6EOMOxQ6rXIGiQ7VSy3AWWRo818khwayahKCSPeH+zwaZfQ\ngi021VWZ5oMCuAdXUb2DkQUkpX10fTX6gNvPghGjgZaXWzSv0jqFurK0jNcN\naSYL2pBZBINGboFNkYnoVhqsi8GBYeXCAwyWtT20MXk+tqpAWHAQCYU8dXR9\nfE08rStbADe8VJJJd0QqRPnwbe5VtNYS1SlwYhlgNEAc0VFKS7d+rsdlC3g/\n7kWv/tdC1LxAlF94xK5wFcRndb1vgKAa78neOU2s3KMoje8kOLRgR9+7piU3\nLDxM4xlIIt0xA8CzrM3WUJrScKAfU+ssSlYSwjyirkBuTGyY2cPcff1CHPgv\nMwJw85PcFBl4wArmrsgrP02SKEhhr/6w97edZUspjKyYtmWDbhl8Urp3/c0D\n9N7zGgdLBHhDnFWEnbW/APrAgQGBKyCALELLd6GZO2AfQkk9gnXumU1TwZ+R\nSMvz57nRoVXLnH1UD7jQkL7KpjXsO17JSEpCUOTu7lKM4WnW5L3i+EX/6cEM\n4K61b7Et/ScyV9/SjhdCJBEKmP+ImQVlIa+xZ3eokXfJpIQzsBG6ZSPkyA0v\nunCg\r\n=5ek7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28d0d75bb.0","@material/rtl":"13.0.0-canary.28d0d75bb.0","@material/shape":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/ripple":"13.0.0-canary.28d0d75bb.0","@material/tokens":"13.0.0-canary.28d0d75bb.0","@material/animation":"13.0.0-canary.28d0d75bb.0","@material/elevation":"13.0.0-canary.28d0d75bb.0","@material/typography":"13.0.0-canary.28d0d75bb.0","@material/touch-target":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.28d0d75bb.0_1629498061139_0.7753244963565231","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/fab","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.21ece5360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58283dedc324a5a3a99621db5761543779c033fd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.21ece5360.0.tgz","fileCount":22,"integrity":"sha512-VBotIHuN4cjyXeu8QIZKbryFX3PxUFTld3R3z3HyEFvF3CUf32s9UujrR7IOA36y1cEtTF5PimnxAAMVPZJlYA==","signatures":[{"sig":"MEYCIQCd7D5T625Nc84yDaM2FVvdu62ta5kGez5T33H4S6yuBwIhAJQD8Ovv0/BjbguFNsjqPwFvBdWzl4hvEIBU8PkfmHvl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID54CRA9TVsSAnZWagAAtcwP/RvDxDBtlxk4vUG/fVap\nZwPLQJ5EXI77kjX5m0tZyUJ8GgY0sRUgCgGIanRsbpWvurfzQ1cSaCgaHOi1\nB72YMModQSEYxbgxw5/QX8mYOQSvQgfyiKJOKFbfAH32JEz/aaYOQdz/gJgf\nNEJJTjuWtgt2FWjfhfWLUWNf5usqv2A5r+66N4cCJqpKmj7S8GZKDqrk0Cug\nQxBmPNbeFw/zGSrvCm9ADscI0jqTgTlW9VhD95dk6VRy5JrGkXCehgTObAOa\niJ9VE9nHRGuUEmriUMSys0LnacrH/HAuyRqKgEJ1OR/GU1FV8FermmwNBYXT\noc1i9VgKQwPBY91pra/PgFDNRMO1dUUhbREN46S4x+z0NvBFS+cTH9wYt3Qo\noWQbr5+4WKp367s07+2dNtuLFhYYGlVr0EHcsQ3EuF+xxbmJqSwevEUc5cUM\nNzxYOhVzThELg6AnL61ZZ6tZPNzfpH62doMdmcQb3Lm8Qibfn+tX6sgXCqm+\nGnOCIXya9V6tZtk4+k1fvzkVRvdvzOTk8GR3c47ovuuvc4GdtK0y+MYe2Ntz\n3r6K8tbda4lsDwKhfQtmD21vFLN/WgTctnRZ9c4W5opLkTqAvSZdkdi7xVMs\npxxXdCfH+NaWZ2WScuFnB3PhWi7YMHRJrFed4WzPReC+F1kV9GPGsjY3KtyN\nwS6Q\r\n=LCfz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.21ece5360.0","@material/rtl":"13.0.0-canary.21ece5360.0","@material/shape":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/ripple":"13.0.0-canary.21ece5360.0","@material/tokens":"13.0.0-canary.21ece5360.0","@material/animation":"13.0.0-canary.21ece5360.0","@material/elevation":"13.0.0-canary.21ece5360.0","@material/typography":"13.0.0-canary.21ece5360.0","@material/touch-target":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.21ece5360.0_1629503096746_0.9170795429160916","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/fab","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fb869f50b41763bf7abf316caab7f89a1350462","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.8de07c02a.0.tgz","fileCount":22,"integrity":"sha512-cz804dj//h+rwpE/rzONOzGdQUQxzEAbv9FVHepGoEGfUs1AFmErV+w6IXONsU0C55MIplO3zSC22dCUvMuE6A==","signatures":[{"sig":"MEQCIEmdwdKAmUWPl321BQ9bjVeiwGmKMltvgHfZZFuSEkROAiA8nUfDa+Cb7Px51eROe5jDXjILmI1u5ad+L5Xq7tEWVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI75ZCRA9TVsSAnZWagAANw8P/izpcQn4MvjtqYC0pSJB\ns6EMBQuAOdS4sBGW1lfuhvwCCUcyM9iVtKi382eqbAICKmmwU9yfaEYi3qXu\nreeXe82D7U3CtrJ/OBCuDickr6a0vjrTj9ETJkHaqLRYK7wyNxAk4bitvFp5\n5t1x9ZzRVdW6Mbvk3es/RSNWELUbStddjRwTxuMB++48PSUfme0WVxiHFWZp\nBxbZ86wE3p7rQutvTuFAStOX7evC5vxtNcsS3oe1FmVnUKQA/XH2j3TgeTXF\nthsZZzGiSAklreb14SdOGGDhQE2Qq+HjHWDQrXOavAPpP/8nBVpGnmPRbDDi\nHIM75OmC6aV2yYnilNNRMnWUqN/QEo4NOW7QZD3Cqglwj9SQw7MkggfL9Nli\nhs6BdFDHGi4ELEWAEzDPS9FwZsGkbK7DjYr9Ll4iqeOgDrJ+nLPKM4kJU5g1\n/wJwgMl9nxdO/jELaTq4NsI+RK7rRbDMtcycEvczKfpbCeJc5FSKRit3rAzZ\nMZLNaV7cUtaAKMOgVj7UNqbO7UPsJgQSUi5Bs2DOaqVHS0YHkyrXfgAGL3qj\nKBfES78T1TquqwvjjU8htNjuE65LJMdyA1wu0jFNSctE+ELk7pE0/VpxQlg4\n/fqfYPt+vr+0JAwZaRG9rX9V7ibTEB3sgjy98uSOkLc04BMF/cs6NEKuF8HA\njUq6\r\n=eQ+j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8de07c02a.0","@material/rtl":"13.0.0-canary.8de07c02a.0","@material/shape":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/ripple":"13.0.0-canary.8de07c02a.0","@material/tokens":"13.0.0-canary.8de07c02a.0","@material/animation":"13.0.0-canary.8de07c02a.0","@material/elevation":"13.0.0-canary.8de07c02a.0","@material/typography":"13.0.0-canary.8de07c02a.0","@material/touch-target":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.8de07c02a.0_1629732441794_0.17558489815600864","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/fab","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb92d7b1733f7ab447a696cda4ae88b862ed3f56","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.65aa63b0c.0.tgz","fileCount":22,"integrity":"sha512-rIvnvY8yRmAhAXuuJzOhJuBTkyUuSIs6ixMX/1+bfOZVow2uqs1CoU1/RR2Zg8IUMTdqA4lM/0Y8r6rn4uq4yg==","signatures":[{"sig":"MEQCIH6d9Fy2NY/i7azrbJ0sigQQ9jaZB/KXqTYF9FmeLerrAiAc+S2+z95sSxq2HpLhdRaPuzWd4vvHFqmIIuU4dlchrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRBVCRA9TVsSAnZWagAArkwP/RlZqGh9lq9S+A5a41Uf\n8D4jiigCFfr2ViCE0MliuGYLXvgmy/uCBPAkypixRtuooUGDh0ZYosRPaDb1\nkzBp3whEco8VGdWlwoMa1myJTrEMADHOrRd4Zi6l/d1uvU/RaqtIUKylyzSs\nWzXkBtR4rGo2Lphj6bD1CTX0LWc9DpAObhJg51V1p4WAgfKeVjxgGN8WiFDG\n9S9X6jOMF4WcRmH3gX8TSYRVXc0GH3ve3hx5ByI4UVDKZG3aRgHA9x/zDk1Z\nhaUBRdZonLhv43+6Tuh0yxt5scviUHO8UILjH8+NBavgp/A9g7n0ncLPR3Jo\njvQJ9Mp+UHuvRMisHX7Ewp7kylN2bMsuvZo/CG950tu5gkQIwODTzKzmb8zy\nn5wsUi4Hmi1Z4V/+XEcqVj1UVxmOXpdqSQ0TxezRjvSvVWx5qYOoZjBMS6Qj\nkr9WjxLVRUp6YkMgUvhMk5rxYO6QESH+iIBbYgDbgK9toLviHbhEmXxB0raL\nAPwnRODQ299dOMHMl20/uGOlkfKIXsAgiNVYQGdbD+wcU9bm4i71DlBM9rht\nG4tY9t+Lbbo8BSY+nC1gjeIVW+xJjSWURnUEMtb3R8n5icBJR4GsiAmfhG1/\nQJQTD7mtw+bC1cIZOlI07FzcnD3dUsPoZ7wBhjYrRkW4yQNHq83/rqayPrhC\nxwFZ\r\n=TTm6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65aa63b0c.0","@material/rtl":"13.0.0-canary.65aa63b0c.0","@material/shape":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/ripple":"13.0.0-canary.65aa63b0c.0","@material/tokens":"13.0.0-canary.65aa63b0c.0","@material/animation":"13.0.0-canary.65aa63b0c.0","@material/elevation":"13.0.0-canary.65aa63b0c.0","@material/typography":"13.0.0-canary.65aa63b0c.0","@material/touch-target":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.65aa63b0c.0_1629818965559_0.8075021940161018","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/fab","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87b5efe6e6c4dbb63e621749273e776dc2c1c21e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.15981e9d9.0.tgz","fileCount":22,"integrity":"sha512-wYD/dNvSqxevRiv0F7n4W0MaDzLV1/FWMrSYPIMNUa2H/sWHGEF6reBsuqBjsF0miAtZQDILKtOFj0emRIyZpw==","signatures":[{"sig":"MEYCIQCfUlWapRvdkz5RofHCzQPUc3/5qIzghpaUvDIJI3BCGwIhAJXQzrR60R6o+0oK0HRToeWoziHXBxgiDq/amtTcLq92","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRutCRA9TVsSAnZWagAAXa8P/RiMoQzswVUHvgmv7juA\nSk0Z/194mqofpVwCCig3LREjnrVgmIDRMzq5l6hj+Kh6ls6qYr4SKlBYU8GT\nL3iTuKedKqUWBCAmVKT0hkXX861IsA/WC0o5BdJiV16Ye2T6rnklm3mRAc7O\nGCa9fHgW5wqsgpZwq0ArG0Uu8r/bVhcANwbguPYXceZ/4slO++X0wZ2514sV\n6AePmzKFL+LhcsDo8zsYP8Fk4rccOL90hvxfb6IHXf5woxl0zgjZcF+jSve0\n2fvB6OjxcMQOpybJ1/kAeDt++elkPF8z5IVLqyWjEjX98IN5wl9Pgk49C5TJ\nrbIMsFUKR6aDZMchf+6uKjkwCfpJ3tJYfrMqA7Sg8MQSTUAy2okBMnlCnjkH\n2f97e+ruUdQCU9eWwLcvixEqB0Z1NIgQrcUZ4w8eJ4AWN4QibGCaH0xXMsBS\nHbBM+MEYvaosEw4p1ScPdVi+kI9t8KQXy6/11F2Lc5qcc89sAHQ1WFrCZmDQ\nYMgDxYkOxT9aJz0ACbn/S4C3xOQQI8Jj/R0zaUFeRllXn3bk3OwxqRU7MXhJ\n3/1vfEaNd4wYTkmLhPKXkQvF7HIZQqqpTiFzyzbly+bLTR4vk7fVb/p93cPl\njib5Ub+70FNdnvy0aNlFQZoOcjfgwZK8+7g2NdTDF3lKBn/KknrtkEpcs6ue\nvdwM\r\n=7LQN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.15981e9d9.0","@material/tokens":"13.0.0-canary.15981e9d9.0","@material/animation":"13.0.0-canary.15981e9d9.0","@material/elevation":"13.0.0-canary.15981e9d9.0","@material/typography":"13.0.0-canary.15981e9d9.0","@material/touch-target":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.15981e9d9.0_1629821869232_0.3502567161648269","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/fab","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8403a04b133734c6ce558ca944f4805aefe251d5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.fa7520f62.0.tgz","fileCount":22,"integrity":"sha512-6WvP1ldlQ5SXYKV9L9TANDYxPKueWxYEiE7Wbc5PaAp+YGyX3zY5y2g8EzO7YIlE154dmFeegU+hQuGOwh163Q==","signatures":[{"sig":"MEQCIGa8g185Umyo2WKYaOsAxiseQ2TeS6ZNe8RWhNiAU2hmAiAq6bfeoqrcsvmhfZyC7qaI4PaE7J0Z1Jljd0AKf+s3ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXKRCRA9TVsSAnZWagAANq0P/28tQsylnKmfYrj0HBAO\nBy9MGYCM0gXpP7pR+XhoAzZn/ozj3G28R07eEJDlFHVZG8d2P6wL5gcZctoy\nOeTQa9iOjPFbyeIXJAnQ50GhQtIJG3jIQ5mO8sqyax7EZqAjX3cIfvsD60e8\nZm5Rr7yYD6TwN1crkxQRhJcrCvjKhJE+iUE22FlQCx9NaCuWGYvABCUJ0uXJ\njFmTWWkrhaZpR79xtcCBCBR1vSrdPVFwCuuzsr+f701TcXbdeCirRy+OqR69\nEiY7XI1xkdM67OQExk3Lii82qEjunQm7GZjDIN0SVpOxsQMoYgcfSYHT9Ukk\ntnV+mGGSqVuj4wUWg0F/w3PizqRJCnNKAFQgJvte6LfPqNKgrB+6whBT4bBu\nL2HZttA2PU/4g/OhKAJdxXNxr3wLpX+cfQ1ZTQrW/uQgs8dNB/pgQLa/djoi\nJiX+rX1zfPhAjOuM5hUwcAeEIHQ7TwDFFrw7+SvRX/ihIBYM/sYpUWkOfvk0\n9hDGZND+v1S8b/pOMrJqqY1+REBlmYowfl5Kh5LI3iUWHukxeMFvkbnc5ySp\nHRkiF1Url9ebT5PJQrJW+ONUnAuHUtD/Zh66+8G7GAz//J+dyOiEX5KZbdKp\naBT+SMe+iYhgwRgUTTwx13mSn30KrxClX5WcU/ykk6ipjmSUlDqFhMp6Siu3\nVPm/\r\n=ABlH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fa7520f62.0","@material/rtl":"13.0.0-canary.fa7520f62.0","@material/shape":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/ripple":"13.0.0-canary.fa7520f62.0","@material/tokens":"13.0.0-canary.fa7520f62.0","@material/animation":"13.0.0-canary.fa7520f62.0","@material/elevation":"13.0.0-canary.fa7520f62.0","@material/typography":"13.0.0-canary.fa7520f62.0","@material/touch-target":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.fa7520f62.0_1629844113711_0.27994994072202783","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/fab","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"201a531a7680fc6aec5addec9059f60aeab7fb19","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":22,"integrity":"sha512-AoSU1KdAbQsQPNZi6oLQpFPImKuhNL+bJBz0GKpMtWGu2MqZfWBQpswiZA9TwzTqRnrMGmWtWkVFjwSr8PShoQ==","signatures":[{"sig":"MEYCIQCV1OUfhD/Dssv+h9EebBwUthgR/l/eZSQhyWVUFC6N9wIhAMrUG2t0I532OMHgRIw/8N0JGUVOd4K/q/DvFfjBwtrM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXdmCRA9TVsSAnZWagAAzdEP/isFlwxMZktQvi87S0f7\ncvGN2bEg7pXqnhzdTniYRBmvDVDpyCUR0KqWnlDej9KWQ5xLf2U/KxMq9kJD\npcpXzcwnLHZf1UHXE9fZw91VPwdgurYLsT+SJXB868OvD2Y5Ss6v+Hj1PRkW\nxY9EaG932BppQj/Kuoyy/X4eZoBbnGv5Uj9+TRLgWe9EqM7oxSnr9QjOHx2F\naDOHp519Zt0s3UtOnX1Br8OQnkybiNDXqaa2FpFdW0qDlAscdxqlBERvd7hR\nkffoE+ut02nTD36A14aZ70cARnPrrJX4lrWjfFfzh3UqGpTDJ31Wexkwz3ES\n3JG789nZz85z+gLaAnIoQRSsAKv7mRQSy0ysLzZb8aBTsyGM+WYy0qFTS2/m\n39oIc3Y0Asa25ACEoBmQn+R4fP+dyU8Qfdic8cFXAK4njrbFtMOiyrnZYfIH\n9ZFJZ3R7Fw0g4GLBrP4GwwnquZUs3nyXkyqW51Y5rgS5pL5Aa1768QP5P7d3\n6YImdyz19seiBZQ2BUJU02bJDnifTSuLGJsd9D6uQY9Dc/T3PayS172yztqn\nUonfFD65dYs1Uqg9UpTw7l8It+vlYHkhkTKRutRYSjVQgxsfTrpxz2ftgq2D\nRol/rug02ArCv/Z4HzPBfmwubIzFCEPQmhUntlsQpUO4NQM5UqNLO9YJ7D+4\nv9Og\r\n=6CRA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ce25bc3ec.0","@material/rtl":"13.0.0-canary.ce25bc3ec.0","@material/shape":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/ripple":"13.0.0-canary.ce25bc3ec.0","@material/tokens":"13.0.0-canary.ce25bc3ec.0","@material/animation":"13.0.0-canary.ce25bc3ec.0","@material/elevation":"13.0.0-canary.ce25bc3ec.0","@material/typography":"13.0.0-canary.ce25bc3ec.0","@material/touch-target":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.ce25bc3ec.0_1629845350778_0.22778350183862783","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/fab","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9603cd6970c4655d4483e6b72e2053ceaa382c66","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.12f5622e1.0.tgz","fileCount":22,"integrity":"sha512-b19a9SPkT737TkY1B06lqlsbmSesgtB2LrcVWNdDIS86u6pkleUZcbDmj1j4kd/5smX8V3Dp1tObB9MyAj78vw==","signatures":[{"sig":"MEUCIHSU9wTEy59saL3JRZxrH0lgAf6Fee1BzXn/ati/4DINAiEAyIlbpWn64uW6/nYuT6DttRjQaEA2dyHAq/z78EdGgYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX5bCRA9TVsSAnZWagAAB7oP/15MxIbOpfcO2tJz7KJI\nbwL2gLP7sROZ5MlEogTbMwl9bwPGyOcZHc2jsAeh9un53ezVbap/tFn14J1A\nhryBM0w8jM9UIX2QXL2Sx4f7Ha/E76jpHaqr3ZHXbs17CwObbwAsm1ufDUYJ\nfR5gWaEdWgGU1BmF6fwIcO8nCmVG2yAI0pNLPv+fBjv20Cgp7LxlvoWqPa3X\not8OQtw1tOhb0vRuQ7GE/TUa9FkXurz8+lHo3KYCJmg9gOsXyxi1M1b5Ocl3\nVAZmd/p7sN4BGysbMDE0JENTEIhBvCImpCMWbCyxy4/AeFHnKAwBZhulxaxl\n/610qHkMMODkcjszrC1X1GDCFF0naDgTCTrZAqzdZsP7wqcGHDHRDKjNnBgv\nUH8+AvuVt8AsEBNW4gjs6kHJeUIDPPFejo0UA4DWsAWDY5KBzjvPeBftjTop\nRBmkZIUuVGnrH5mmlWDrjsKsPW0VLjFPdzFMh6b7TN/3Zn0nhep7XPX1SxqA\nQRlyztl3HKUdIROGkL3MjV1YRVZwT7R8ELm1PbB8Df5WQFA8Bnpvzx+WVdse\nn3tXnPfcPBFtlHJp9eHv/PIZp9UE/qN2cQEDhA7MDdcaAk7VmDs5jXACh4f5\nURZMJfofbAkL/v9+1eIsJT2FKukufgthaykMOVA6006ExS5oWy61GkRQZhA+\nuJjO\r\n=AYRS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.12f5622e1.0","@material/rtl":"13.0.0-canary.12f5622e1.0","@material/shape":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/ripple":"13.0.0-canary.12f5622e1.0","@material/tokens":"13.0.0-canary.12f5622e1.0","@material/animation":"13.0.0-canary.12f5622e1.0","@material/elevation":"13.0.0-canary.12f5622e1.0","@material/typography":"13.0.0-canary.12f5622e1.0","@material/touch-target":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.12f5622e1.0_1629847131196_0.6452816914930564","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/fab","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec3ad17c3e28beb655ad514d6ab148baab06ec5b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.d97f8f133.0.tgz","fileCount":22,"integrity":"sha512-XEmoIlSBMjNn2RVUOSHxWdpcYhhwcAEMTXLr3v1IO62RdGWbzp+jfSuzAfdIZdlviGjNa+8nd+uYMFlOQcbEYg==","signatures":[{"sig":"MEQCIAfFAJ+XWo9kmQaydCHcYuhHsf4meTGlvn3jiAOAV07/AiBFLL65sXcFfybISlnP99loHnmd4U0QOP9hESdDOmYzyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJo0TCRA9TVsSAnZWagAATQoQAI2T56VKLXcv9b5pwcsY\n1NtE+6motYWgwc6mJ6cxCkHgyIuMmTPXT1+BMgKq5jLWd/elych+8RXcm2S4\nI9HzAypIWi1RJjzqBL5OIXBjoO+2R5o6e3byRH2RHRf2FI+q0BA6DpReetzq\nhxE+zLv1G0/IVptmDv8wjIhODGnv30ZIfiiI7Z0VuZTz7/NBar+rQFrHZhgw\nj10tqxSqXYyZT5oTQ0zeP4ZxdDoHN3YzeYNPgfSMSuhOvEIv06S0tPG28d0V\n+g18Ic25/H7JsaHlfGrrCe8EPiUMJDwSgWjcXdUEl7EKkTM7ciw67ImsQoBQ\nd0nRzFH1ymdjklCys393eEWNFvBMBl45q+Gnhe2Uui9a7iWxQL6QQh25q3XK\nRW/+vmHaAJQVanRZFPlVw5yy+F4uPl5d8mub9qILHe8yewQnSa1IB43tilNt\nyjJxOOSxmaLn8eFKnIBcWFFmQQr2Q6zL59Jv4ol9LVGxmb7guuZ/ljLo6tYb\nTvdkeUE5/bIpKOgnSykFqYwa2rKDXvoSZ70wyy/MJGlu8VuU0wFmzeuUR5zE\neK0aaoIudvpZg0o0Q6EKURZrLUQTDPZy7W8xYe/l/K0F3MqEf8ewktYBcZKy\n5RbprLph6BcepnMRtV37YNmbzSsPDytgDpQBZ5MrgDxz73f6+zp4J0WB5526\nHDPc\r\n=iaA6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d97f8f133.0","@material/rtl":"13.0.0-canary.d97f8f133.0","@material/shape":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/ripple":"13.0.0-canary.d97f8f133.0","@material/tokens":"13.0.0-canary.d97f8f133.0","@material/animation":"13.0.0-canary.d97f8f133.0","@material/elevation":"13.0.0-canary.d97f8f133.0","@material/typography":"13.0.0-canary.d97f8f133.0","@material/touch-target":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.d97f8f133.0_1629916434968_0.9495790803534332","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/fab","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f629c7fa9702afb4cb3cc5bcdae067847c2170c9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.d86fb6fac.0.tgz","fileCount":22,"integrity":"sha512-kWqC3MnVNLIIfKfjjQR+WYzKvDumOSQfZHrLQS+mIQHRd78NNzpC+sCNAWwnaua/TuE+3lmfaY4Airodr0JpMA==","signatures":[{"sig":"MEUCIHxrvIyShKzUlRrzYetfSt2hs4Tp3o/2+lRfJ+UxOjA+AiEAmmBkK4BvUiN2pw5XNl++6mEz9VS97FW/PZXjn2NSUns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpHkCRA9TVsSAnZWagAAQbIQAJfyG6iIKCKnVBNkVdUn\nPC/i5CbP4VL8XN5kDscE4uIsX1tyBJobwbQUaL3V1MNCYdC0OI0B88Fdj1yW\niR7wBj8FChslFC0HtKzCvV4gTR0Iw/uNxx9Jhwc+echm6LbVzp4fQV4ssAtO\nZI00MPA3Q/5VuzN2zdeZltxWbh7XI0fNIW5Ss0pdoJtY2DMfqSrblNcTaAN4\nlMo/BC520TlrbvMry1oaeATwU6rSPPVqNZOPc1QTlrB/PvR6e9XgzfaZe1VD\nsoU2IDbYhbHtDHo8ydY9omwtQyNy10oC1zgFxyU5H8JwQQ7SG3LCNv1vGS4H\nBBeQVNy46hDChjJzgjNiYg6ZwbDM7w+giIBn7eT3XOizs4pMlxg7p5nig8G4\n9jHswptW1ykjPaXtgXJ6d2fZxf5o8smCtE6g17X/mIT5cCN2EKxBEURJniBt\nVGeOmnb5sn2QEkMhzVt5pPcj2Grjvh4olTQ9NGvr7DZpIUjQxj09Xra2A4ij\nivda1V2AqksCUtJ3JNPIRCDjl3Fw72NjDQ45ID8nnzULto6z8m3EB2F0+63J\nlgMCFQ9zL2pgOOz4c/kaihd076bt4QB+kWH2z9pCt2ALO4JhpN9d5TkAqLW0\nAzsxaFHJ5nNlaV9sPm3gMFQ0s+Yf+p7E3NyqZ6s//7iYaSIbwgeUxU4WhI0i\nrI6t\r\n=d8CY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d86fb6fac.0","@material/rtl":"13.0.0-canary.d86fb6fac.0","@material/shape":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/ripple":"13.0.0-canary.d86fb6fac.0","@material/tokens":"13.0.0-canary.d86fb6fac.0","@material/animation":"13.0.0-canary.d86fb6fac.0","@material/elevation":"13.0.0-canary.d86fb6fac.0","@material/typography":"13.0.0-canary.d86fb6fac.0","@material/touch-target":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.d86fb6fac.0_1629917668408_0.48912935756028","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/fab","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62803d759855e0bc9c2d92cf6de83fc10f1c1972","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.e8554dbbf.0.tgz","fileCount":22,"integrity":"sha512-kqI3D0juzddLsBIHstdr3sBoqeUeuIvn2DTPfR8NxnWB5fpghaK2k8dsaEdG6hvTxi3GVW7sjxzvQjNJZeLomg==","signatures":[{"sig":"MEQCIH9DSAxIkd4vQGq0ucJdJIMndvwFAaLYGdjDpKwZ8ryIAiBpStXz4KvSI929Dj2qV2NYJ+nv3h0yAh5171CSBSLrsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr1mCRA9TVsSAnZWagAApAYP/RRRrl4yUB4iUq07cNPb\nqn1sbtcw+eVk7FCxOUt/sse6nTT0zk32jnKDcKlMyONCliaYml0AD/ooc1gc\nX2BTZRYad3tYrOIEkEJdMg7yWdIyLqcYEWGhq1GulVo9EK2S2SMC2dnFJ/bk\niJ5bcgQ7NVJz3n5dxk9cJb2AXKmEi/pVZf1FOhFn47IlOuZXS+PvD0xRHTcQ\nySbYHwBGETA9Bs+mB1H39zJlp8xXiL2DkY9yLO4hJKQ5RSzdXO2ZqnUBL4zV\noOZRaYtF23RKJrSJRXRaVRG1U7WqIPvGHvQBtIMHYpYaxiAKJZQcZ+6/ITm0\nRbEXS9gRMY3Fp1D4YWVpxVOSINXO+vvwUITHdjmy8ZXfCpNtecYjzhF6p+cb\nClXdNh/hL3csU094AZdqKn7B7PTnHg2xmC+da35mcLe02/g64JxQO1/seaOO\n5VpkNTKwGSUxrQxJrMi0Tq34fpUmcEWTOCIRB4bCSYQhXJwDIr3V1JoCVO8z\nfg2g337aVEA155v0OX5cVS8Uvv8xUaY/qH9P08MZaPcwCn+nX/SPkyFW4JgH\n4iUWFvzxiYc2MXFnEUJJm18vQ8KJJYafCwHjoTnCwxwJm4yaOKcZStQ391Y+\nTDhyUUb/T1O131BQSGy6RI9gKZTe92bRcWXR3AciEld6WmimEclCd/W4yO0d\nt4gU\r\n=dj54\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8554dbbf.0","@material/rtl":"13.0.0-canary.e8554dbbf.0","@material/shape":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/ripple":"13.0.0-canary.e8554dbbf.0","@material/tokens":"13.0.0-canary.e8554dbbf.0","@material/animation":"13.0.0-canary.e8554dbbf.0","@material/elevation":"13.0.0-canary.e8554dbbf.0","@material/typography":"13.0.0-canary.e8554dbbf.0","@material/touch-target":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.e8554dbbf.0_1629928806140_0.9905489936184493","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/fab","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec3ceb0723ab9162ad252874a3e8e14e8f6bf18b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.877e3fb0d.0.tgz","fileCount":22,"integrity":"sha512-pGsE05qUkS86Awg1e3ERQb50UaUL5+IfBCOe4Ax+AGK25QlTYOKB/TNviC3tmguKdisqrb/XRtIT8dVxLzix4Q==","signatures":[{"sig":"MEQCIBSp6+iI1Ye6p8dgrbut7YQv2UqfqMEo4/uKqRhGYCyiAiAruiiFmFtGst+ZDfpTTt9Cw9vGB35Rv+6FFyUtiL+W5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7WQCRA9TVsSAnZWagAAEBIP+gJQkOTyHiKksfYraEcJ\nQEC/SavVKpJFx9aBDJ5jABXsAsvrpEkIvKSFQFc3UEaxUOKNK7Kqz0KaD8md\nT2AfVE0xUgfjbl251U85z9d2Ym98jAHgCVXW5lAajH9TePaVfECZeUwTWo2j\nee1VxdlHwufGK+WC6qOZ7ezzwYXkOq8+ZvW0udIDR5KIKy+yaHEODYXpW9af\nV+Gy+XDnDOHlu6KpHOZO7Bi4PjB+ftEeuua/fbVydQOHplFUnGcKwozQ8N7P\nZq1Q20Vm22bC88pQ+NgPOl9T978mn4loHccM3OZ/XuaCBQ3sgm7SCR3lwsn8\nekAzR6KPEyyUVP4J86MmqRpVvnYdSMm9q/sM/XrHPfmQ8ge+FR5jlHbiZn+h\nFKrfMwBF8b9YtMypuqudwdVKfCjdOf8Jl9+hcMFxufzqeH1pEwzrpwMQlHjB\npYn/oqDwra/3OLvC7ksi6xQAAfrxtTJa8BnVr1bQj6bAwPz7XdM9+aDXVota\ns5xWnF8Cg1ZeDr3qTUstmKJr7rV23CUDeP+CLWAABSmQzNkXLSAalgpvo8AY\nvboGGTOyFB6Lra4rj5MPiQI1SquVFJNmkP2l3nU4EcgBart/rBR719oEdX00\nMyiwNRqswotiGxOUoOhuS+f6v/jqlHXK2pVVfS3YNA/9VDkbefrERlT6VOv6\nYOoi\r\n=QQf+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.877e3fb0d.0","@material/rtl":"13.0.0-canary.877e3fb0d.0","@material/shape":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/ripple":"13.0.0-canary.877e3fb0d.0","@material/tokens":"13.0.0-canary.877e3fb0d.0","@material/animation":"13.0.0-canary.877e3fb0d.0","@material/elevation":"13.0.0-canary.877e3fb0d.0","@material/typography":"13.0.0-canary.877e3fb0d.0","@material/touch-target":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.877e3fb0d.0_1629992336303_0.6596515017319471","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/fab","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.6236f3576.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e40d2c3a2738adfe7a24b7997a2e6baa48d892a2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.6236f3576.0.tgz","fileCount":22,"integrity":"sha512-3f5rYz0wkEw+ITcaJ7asMWEMemWVVhxlmu7RprHTjF3ZK4TSVxdh14QusvSaWAJ0g//UPNwm/nhFD/46FHrPpg==","signatures":[{"sig":"MEUCIQDuTyO5aMopGyKx4kWeDOEL4cCCJag/meOhO2uQ7Dz3fgIgC/8E9ti0jtOHEyAXOUylmuPVuaqIKWweM30l6E934dI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7wOCRA9TVsSAnZWagAAnCAP/2lpZJQQERwPyOVLf8Vw\nIbuEmps0xHswsRzwyaSY6oyoQXKNVa9VkITChEbNX2nGb6taYR1FQgiBMvAr\n+R9vNG/SNtBUtHnkbStvPOrZzUiTO9OjW+/19MXQB1uKcDMsKEtzi+7mPB6y\nKi9uCnWxPockdf2y1TvpzhOelUHI0Nu/6eH1Tqy9zrT+p+xzrNpNf0LsdjJf\nj7Ffz4gyA6tqQ328yxLNSXKIRbT/SzrncUVcQ6IROuHCibJRj4wyc948a4xO\nkA9LDiqp06yK+nRakLi5MybdTF22siULG7NTq3SSMBb/98qBzFWyRjhVKJD1\nDKti7gxUOqvUuwmwKUCsG08I6xJa8/1ZHhNO31D9b0mk9BOQSiflkNRSy3E7\nCpl/SxM0LQS0qXKn5JohMxn01Zgtr89sSDdVNKiDLHExIWiegnqeMh6m2lKg\nPRYTIFoPfb3TH4ImJKF0nH+pkGYJ1D/8d8W7CqTBr1gduJetBL07ha42NvyB\nFNumiBMEVppLYc52XZyTT8Jcc3uLLJBQCWvclf1BT8ZkuhlOtjG5jWmtPNKc\nsRV/k9W7t/E8mAIms2fwSN7LF+Tx611xP7Z8oGMACK3MqeasMQp1pBbRbl5Z\n/qlIySznpwHZnAiRfzXSlYTM+T5PCjHTUN2yw4UIobf1sHFVKC3yjX9G6L+k\nYJdb\r\n=0TY9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6236f3576.0","@material/rtl":"13.0.0-canary.6236f3576.0","@material/shape":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/ripple":"13.0.0-canary.6236f3576.0","@material/tokens":"13.0.0-canary.6236f3576.0","@material/animation":"13.0.0-canary.6236f3576.0","@material/elevation":"13.0.0-canary.6236f3576.0","@material/typography":"13.0.0-canary.6236f3576.0","@material/touch-target":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.6236f3576.0_1629993998433_0.7787369686009928","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/fab","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc35eff2c743d8405c08de4403516338d3963901","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.1d19158a1.0.tgz","fileCount":22,"integrity":"sha512-8n0idymAhsKJFmNfLfw0WRUZECjGhaS3+FiI9gerCchyrZe59+C1a07CDsxV11aPWP5FRCPzEySTv3PyxUmwIg==","signatures":[{"sig":"MEUCIQD23QupH8AXGMn5sow2qxg/wa08K/CEPfigSUQ6+3+6HwIgHU72HakCnCZQ7maS+gn7+pN2DrC+/SFNtJ85zEgrSRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8rhCRA9TVsSAnZWagAANakP/0YVfrV1q+kZQyl2FQpZ\nU8r9XTDBfiwt1YRKf/VlarQ2w65pF9WDdKCjTY4+aBXIHghd3O24w801v9oY\npqWtQC1lBq5KIb80rUqFibEK1+bihn6NTolO6+SfluYHnvCS69AMwJfxb8tt\nIILJ08uT8QqO/H0etBG5Qf2JfjvgFTUFLMPb+642/4iWnPmjwOIqhVCu3uJ7\nAFzJ/OXLgSt19sMzFkrT88M8crzQy45FZAIgYqIGHQhcJtic8Ww8X1jAE8JJ\n+saCnhh083OSDsnYl6PRP59SJrMKx18pjO+SERq7j3vum8LRj/hdvTIJthUl\nXVzpns5SU/cBCo3Y1an3QfFlNfQ2cLEQbKgQ+TH4lfVC79YIzPABs4dG3VQq\nZ1OjFT7lzQoMcFcdde0EkNfNMDoqDhtLGN2dPqnImXHwwgJM62tnMPRETyM3\nloc2y8kpjc0q0mHh3jt64DbX+fFVrxRIDnmZig6OGDdKU8gnsDKzJ0zpJRRo\nLdI26TcK12vZnOj1Yum21oTpsVOYoGgkJDN3CxOml3bPgeoemBZD4y/dTsmx\nVMtCeZ60aQynsNccq4AGgM6d3wDlmp/YdO6aP6UJul1hQelZYR5JCyXGpwi5\nTQqxmhptAC0NaUv0E4nlwBvO8VbvnIz8oJZelE4At0+UNAxBO3OslMTKUZ1F\ntDNv\r\n=FnhU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1d19158a1.0","@material/rtl":"13.0.0-canary.1d19158a1.0","@material/shape":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/ripple":"13.0.0-canary.1d19158a1.0","@material/tokens":"13.0.0-canary.1d19158a1.0","@material/animation":"13.0.0-canary.1d19158a1.0","@material/elevation":"13.0.0-canary.1d19158a1.0","@material/typography":"13.0.0-canary.1d19158a1.0","@material/touch-target":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.1d19158a1.0_1629997792891_0.44357718622275844","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/fab","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f0681047c7febb03660b73abe3992047f4d9793","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.6adc9e83f.0.tgz","fileCount":22,"integrity":"sha512-wUnChFHMG+T8zHSszItug7YGO8BBxrxvLFKGBj8UPPbVrMSOg/OY+lo4NtQsfkTITqmJZ6BUds13atJiQcCOsw==","signatures":[{"sig":"MEYCIQD9ZRMdoUYer5qbzNlngjqaZqQVLhCSeoePO9kgzXD8dwIhAOcnXJsEZxrgBgXO2aUNpS1fFjIs6OhibovkwY8k/fQO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV9uCRA9TVsSAnZWagAApTgP/iQ1xLBw0O0ABFKqn2te\nQ0eJbw/ENUUCCMqKBIDLRBYF+WBv86jWpUeunKN0QyDAIlKuvte9a/f1t9PG\nNw9m1MlsEa84myvZUNDWVs0/hljRMc8Ks1TR1PZCt0HYPtMl0LLneVuhApz6\nVWgery15RQ93umef0sx+At3VpzamMR45/2Iou0TKAigwGdepxf03739kmwR8\nbtP4jzGXGIUmgMEagoYaSGAfSmwun1j4QMACWXTGfKUGEe4DiQ6/BE0V4d1K\ndTCh3DEnI4CD72Tsjbn5+7L7e1pK+bVleKQcjBVdXDZUoAGtlyBgSzkaLdpT\nIp61MCeAsWi9Vp33rtH3OF1MhPkXZ6wbQhd+8FcwyjK19ImlJkfz1SYpv40f\njeKEpilIeihMktCvIrkt7EjdIamJEoNg9cOThEJDzxAli7lizNzMEipduwc5\np1ThfYTSxd+2QGPeYtgxoR/D69IGPwU1GgBbM0pe6jPhfTQAvmkVtOA3ajCq\nMNaQ4C8QkiByXi1JmUvrvf/9ZZrdlgd5xmAb4hkMQdyKeV5OBWmuClGQyonA\nAbCvXZhuO1pcREHJkLVBcHmQSfDGGJsYnUWMf/3nAGfpMao1v+Gmd8tYCCpN\n12V5mV6t2lcS9TASS6xkOaJRNCZH5Y7/d+YXMPPT8e8r/+WFg+xNn1YS4PBF\nFmvb\r\n=ie39\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6adc9e83f.0","@material/rtl":"13.0.0-canary.6adc9e83f.0","@material/shape":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/ripple":"13.0.0-canary.6adc9e83f.0","@material/tokens":"13.0.0-canary.6adc9e83f.0","@material/animation":"13.0.0-canary.6adc9e83f.0","@material/elevation":"13.0.0-canary.6adc9e83f.0","@material/typography":"13.0.0-canary.6adc9e83f.0","@material/touch-target":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.6adc9e83f.0_1630363501988_0.6804962806654622","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/fab","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.d082790f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a59a7018fd3552a471ed73d0265084e4e4d00b7a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.d082790f0.0.tgz","fileCount":23,"integrity":"sha512-MFF5NxSfFTMqflFmt4qa2IJ5on4Cg/U+by99py4OHis1NlZlYA3znvmQ8BIESNARQqT/BEudfYMelQXtaifh7w==","signatures":[{"sig":"MEUCIDE2Quh8PyI2lqOHJaVM2PS8LMf4I7vgdOGnpwgSSPTKAiEAqSNh+n4g6432qbPtanNumSPqGDTg8cxCXuC0lD2mkhs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/a0CRA9TVsSAnZWagAA3M8P/1eLDgd29PFvVVp7IKUB\nZGMqIHopv8QEQXKqctTOXqyJ1TtlBxg9ekmTxtYfCCDFVm2MeSyuMVIfXxKu\nJfggYw32uI2DFWaTrcByysoM9Jyrujkqc0+pAX7Mq3cHH0v39cV3Lqd4xzao\nD3myZzk00C1kYwwCBpChuCT4vcuSTcOMM1eMx4+qIlmPlq7aImDJuCZc6f6C\nULDiD4L+L8A2YvEr50yxv8aPz4emORMUsyv/Ojhmf9XVhZubMsPR+O5uEgiU\nwOC+K0xo+kBq4O5fyGEnx916Iircrdzri4YWtvIKERl73QixtbfjrH8IVcQ8\nBPb6e+X9HcXjmpxmENFrvLit3JoNZU7LA/jthhSs5kSLv8tCYhpCVC1Q8eBy\nzPFsmpRIEmzIHj3JOmQBpnSZx+9WFYaUh52kfBMb/kjOByFk7JTycm1E5fA/\nlkVF4lp+4q8672r360EbV2GypxBwCZIbDazcCzqdV+J38z/nWzGROzuen0g4\ncDZ9DzXr9YnItUlih5e8eQmD77Y9pVt+qjAUrPwugFNOIxgNVDnOfM26GynQ\n7lK/XjYwxZy47Hy1JkbNvfBIQv9fQBtsCw2eSNXrnErh4oVYoyX8blaRYtDX\nJn862oQpjycn0U0OXCX9k+K0j/p+ioXrKNI1om/Q4THG+wAyzY8guJwpiG06\nogT0\r\n=GIOZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d082790f0.0","@material/rtl":"13.0.0-canary.d082790f0.0","@material/shape":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/ripple":"13.0.0-canary.d082790f0.0","@material/tokens":"13.0.0-canary.d082790f0.0","@material/animation":"13.0.0-canary.d082790f0.0","@material/elevation":"13.0.0-canary.d082790f0.0","@material/typography":"13.0.0-canary.d082790f0.0","@material/touch-target":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.d082790f0.0_1630533300803_0.34034391512895334","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/fab","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9077f1d3435765ade9fa131698897315e0aa9bcc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.e2c4f0196.0.tgz","fileCount":23,"integrity":"sha512-Cor040PNy9GCSns0FPrVERtYg25e+qRkX4cr7iq7x/x5/B0S9VwPiKHPN+WlUmV9m3250ZLEXEMg9icGlLEXwA==","signatures":[{"sig":"MEYCIQDMCPXe8sZl9AOeBQUV0aLThqjkSnAnD4k9/tR+ekPPBwIhAN31nakjwppVfEAmiK2c3UBrEsbogDvsW+/kPjIKxZxb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDL1CRA9TVsSAnZWagAAInkP/3C+ODevrjATFTm/OrJY\nfXq3+UmLNoah8zkbtspB9hYPmUAVBedtSoCZID3S/ua7BuAF7F/StRNMb44I\nPeHFG1nxxRE0BFz6Vh4LLqqtTfKUIs4JLWg8NJYlyEZEw4gnI0Mlp7NYBadh\nucaEWQB2oFhWQ0ZCL4f/X2bKCLYVt3Qa36JazSoLvCRUretBHUW+JluyS0ay\n2XQ3QH38tsE4Wx60pyabXCqRnjt0GTxqh5ZnNzuVYZ6q2OFUfkCx2Qrnzmkb\nalbgYdC2K+qtLOAt/h/l9n0///O5S2Ppo40Vl6/rcy7bDSQu4O+MPCAGLYJW\n71uN17PMGsVLSW1EnYBnch0/SeS0bop42W/c95LbA/v4vFOb/Olg9b1REg52\nNWG8U/0NzXVV4NjeazqF2E7qQELuGX69jwvXgUG9M1MGbgglIEMXBDnV21OF\n5AYxye8g1KWdxV7ydD0y8Nx7uW3ozJ47CXE17lYTUbe8waToAFm1rHbU0z/L\nfItlgxRzoMtfI4LJj/i1YXvCtXL0B5/RZXV88GZYQkMJYFexdDERb6lRsU5m\n49a8EPW4WgZq6kg4tCqO4vvtBfMyHfg8Rh9skKbB9WY5274P3+SYlfGEqgYT\nztF+bxnDKQ9glcAoD9EVZQhkK/MV302rY7MlFfiBgLue2Pa+3nW6sUsYsAyX\n3vub\r\n=thJb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e2c4f0196.0","@material/rtl":"13.0.0-canary.e2c4f0196.0","@material/shape":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/ripple":"13.0.0-canary.e2c4f0196.0","@material/tokens":"13.0.0-canary.e2c4f0196.0","@material/animation":"13.0.0-canary.e2c4f0196.0","@material/elevation":"13.0.0-canary.e2c4f0196.0","@material/typography":"13.0.0-canary.e2c4f0196.0","@material/touch-target":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.e2c4f0196.0_1630548724995_0.17454344639503372","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/fab","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.611db508e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18fbb9d67bc643b616c795390073366319bcc635","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.611db508e.0.tgz","fileCount":23,"integrity":"sha512-leYv/ttEGHbu7xIbmWqnGE9qtc/NNZjpxqMzCnANZaoW3pXAn7AVOvPBorAM1r6VtuiwXCj8BHuNQCugm3jMCA==","signatures":[{"sig":"MEYCIQC/c3eB9VbIF21n2h/nWk/lccOw1Cxbb4DLON9QZDRoaAIhAM3LvRtUaj5S568l9/mPS33Cd6HKN/Rw0ieRNh2GZdeO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEHpCRA9TVsSAnZWagAAEP4QAJWAxECPLtjPzOQhyqMs\naSMNJcRc+aFL78NN2FfjIFMKR8aFBhEacQYaQhYrdBQjYntO/vmwpfu1oXw6\nj89ryXNrQuHEyDJhV/sWH99oQiH6zgtpzIBw1msNaBKCVUp+saV7VIDKtS2D\nWKXfnLO/lZ2Ey/KPhzDlsd5NDu28DaaAvU7Ffi57vlKArnYfpxPUNF1twgWi\nBeKlYixSnXM2Hy5MKLQwPjhUrlr5uHsj8w5AibTnoe5DuC236Ldrt6ir9ODQ\n2K3/3tu+se1Im3jWWZ8WS/275yRPhCG9VziW2LrhNGtBVINKjbmuFB0Bvi8/\nw2W6VLhpuuklOLnCZrDOiP1X8SA9NkiC25iUcfBfUMwWdNBRa37n3sjBN2qM\niYQAL/9DRphGVJc1TGmZethqVCWH9uyt+uaJzjIqC2YVqjhhxig5WE84UZ63\nWdq3Utb+6GOkSaLERlEarVLNEwOcR83l/GCYVUY3+ycYnIQzgzAKYzdL25Db\nWJpYCaTCMgILBf3qcFu5n4I5kAH5sQrETn5M8j0sv7Vyod9+ZxRB+HYKRz1U\nhNHqs6/doahxzqhl/gQ94qJb63Y9HniXfxU2k8xJ/R9WBm5ZzkQ7/8OUDYQK\nXQulu1j0tqzV+2v4iBognLADLXDrDN7P4qRnSXapH9fx8Y+qeZxb0AZtYbNW\nuB90\r\n=KAsy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.611db508e.0","@material/rtl":"13.0.0-canary.611db508e.0","@material/shape":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/ripple":"13.0.0-canary.611db508e.0","@material/tokens":"13.0.0-canary.611db508e.0","@material/animation":"13.0.0-canary.611db508e.0","@material/elevation":"13.0.0-canary.611db508e.0","@material/typography":"13.0.0-canary.611db508e.0","@material/touch-target":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.611db508e.0_1630552553441_0.9844704794131434","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/fab","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.d4706933f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbe9e992a8884422ef04d06393606596f007feaa","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.d4706933f.0.tgz","fileCount":23,"integrity":"sha512-B0dwMFfIw72oKAFDaTEbIqUIMoDOsDgxxUvkfARUWzhZiheAwCdk2dz6gqYPQ3QbQCFteeVgEm7B3e20egM58Q==","signatures":[{"sig":"MEUCIDw/B3Z/8ipJB/8eRfmF2eV18ICyunSaFzHSofK/UwknAiEA5w6NNTmSEC7uqo08oAi5k+q2AF+XylwqduBxB83+REA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO/0CRA9TVsSAnZWagAAjGYQAJcqVFVmBR++5s35khoN\nMgM+kbLIUMV/BIr5XQ3/LtZQ+1/NmG7ubKwJ2g6ScjxuE3/iJnASu9DQdeWz\nPeHbERXUNcjUWsfWezQFO8pTWWjuKRmusCKvNfvZJ490T3BNplZL55KL1LmF\nfOaYK1nftT8yPV3Opb53w6+76dArB/l6veN/7I/ZpQIHRIwHUXOZqR8fkeGG\n1WobRDK3JYOgH0SQ7rYLXWmafRrUXK4vv7GJkUQ7yTk69IkUgSIYP/w02qBy\nK5AWh9xWdLqM7vYqfNJIv4rXoc5hi5I+z5cmoU3+SVSyuByD64Bq2yDl6Qls\noQfJ361rUb+wZDzrynpTh5aQrWN2TSIp9btXDe2Vq9zzfif/evVeH9D7oLCK\ncT4wklV/GT25mw7BSBZp/B+KTpXYy0GtWSlEBlhDR/3OCrbJETuMzM9jRQxq\n+42yfZepQSnnoP12BjBw9gkT4NpEBh9IzdFwiK7cO6LtRfA21iWNUuMD4Yxw\n33O7D5rIXnPKZwft4qInmntD23wZ6kRrWHEf55gKWiPjZn/kP/mCoN8pYWzS\nvocUQNKz4gt/hC8K7+TccQ6MyezQ1+8zXHd08bqqCU1nSVnsrBWtVkIITarA\nVZJ4u3wadSoX7GnXD8AgPggP2inS/y9HTe7/Pbc/4hOzmX5NU0OWK5Gjltz+\nxMus\r\n=jdOv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4706933f.0","@material/rtl":"13.0.0-canary.d4706933f.0","@material/shape":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/ripple":"13.0.0-canary.d4706933f.0","@material/tokens":"13.0.0-canary.d4706933f.0","@material/animation":"13.0.0-canary.d4706933f.0","@material/elevation":"13.0.0-canary.d4706933f.0","@material/typography":"13.0.0-canary.d4706933f.0","@material/touch-target":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.d4706933f.0_1630597107888_0.3585794132944047","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/fab","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28097762b63b0d4966f7e32c759436fe6dc30349","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.c16fe03ce.0.tgz","fileCount":23,"integrity":"sha512-LaupWqbJL5h0I7Er6IpdRySEdQUymeXeBGZ/aFiFyV0jpQezryT8BzLud3GBCTDdJlkBy3Zx0RjBtzhNR5CilQ==","signatures":[{"sig":"MEYCIQCKCC4uDVNcGkxPjWDqDYAxX5FFcJb/wCaqLHtyI4QZnAIhAOFiAqxRQDEAcAv8U9J58qtV1UzOQZ60qrLn/TddO40n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ23CRA9TVsSAnZWagAAt9sP/isoQ8KiMfwwpf+5dWHi\nRlJliOp1v6wzBwRx9/mDc+FaOSfTGriEXrBBCt1Bx/QHuXzsTFE3Sfh2GoFR\nQ1XXdke9aGELyk8Qm797pxSPPZrKp3OirVWseUbDy3qzXBH7hoxxL9WWaBNQ\nqYGBSfGXk+ZRYvxOqNxlEchqejT6n/h5NpL1DcJWk3BWd6RTVmFD7cvKxCOF\niW9RA7XmTqZx+3tjueXip6rIygWdp+xDOTO196z0KgUpQ2oUsU0fVVC2ngGe\nuuBijrurvTxyRkIO4kPdqgTiXna6aPP5G04+STxr+VSB3VLROGl+IsKczIca\n6SyZN4UQrQgAlyIW+KiyS0Re4saRh4ot5YYTMHYXhh8v5DVqplhcwqhLYykV\njU+v+Mk+NLNpDnXWMxQu6CYq5PQhhsdkmOIKN+JwIL8vbrD4IrFNbJise+vj\nO2mWuPCdDjQEVaBjQZ9pWS+OUOR+QAM1EP3Cmm5ILnCGs/OAtcIkoabRGzSs\njaphHWD/tmZx53QiKawZWAUPKNT3JOSXrPiTakBWC/mbwhbacvZeVjBKoJH6\n33tfXXae0rRDdiOcHtAPLacT0J9NPjwMrW+LtD09Iy/trjb60zPIMKh06IC6\nx1w8b1o/Wfe1ESj5DciaUx18lJQmK36wOqEwmZAvuCqij9ZtFdaWUVxgTrcq\ngy6o\r\n=3hHL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c16fe03ce.0","@material/rtl":"13.0.0-canary.c16fe03ce.0","@material/shape":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/ripple":"13.0.0-canary.c16fe03ce.0","@material/tokens":"13.0.0-canary.c16fe03ce.0","@material/animation":"13.0.0-canary.c16fe03ce.0","@material/elevation":"13.0.0-canary.c16fe03ce.0","@material/typography":"13.0.0-canary.c16fe03ce.0","@material/touch-target":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.c16fe03ce.0_1630604727815_0.2635548088802504","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/fab","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.9203a958a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d1e86c429b9306cd881e8199257cb85557e0128","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.9203a958a.0.tgz","fileCount":23,"integrity":"sha512-61B7iToOerrrRcaI/L3cEmXUBcwyvXwiIdRU04baAb4rt8KE0zD8jo+wxuSVgZVvK9OEVR7Jwi4bpSy0nL++Bg==","signatures":[{"sig":"MEYCIQCJ1xVgzEELgtvsnqksvhtzJdhmL2+R5q6t40FUPrbHDAIhAP8pxTxay/IIQhPVYDEqXgtYjOd42tjSPi/47SsxlQcS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWKQCRA9TVsSAnZWagAAeyUQAKPvoEKiNYkiaeq37DoL\njyNlAm8ZNkKHuK6M1wmg4nvNVF1iTKXZZDegZbv/kzW2+gxsgu8t2M6m3bU7\nB2zhV3Hni9YdB/dcKX+dVD7yWNpRgFKrULhyMJ5519GblKA3pUmfvuoyA4KT\nJqZPpTkcSSdyZvfct8/GtY1b9ke3M+FDWKc6vzqDIqO3HoohlEShAu6DSLJh\nWBj37MKNTl1cpZWAWyGRimLzCZg9XadYytHtiiHGYbvikXZxA6XOJTNyFNze\n34Prr0f27fCnw4leukXmxLDICatxU5HAk/Yjo8hG8oRcte1baHjxPC/9XKtS\nD7rbePWoIddd1pwKWg9Lv09JIVjESywCo6SP3Il9yEAgrbfH6xKEi739thOU\nNMcZzU5xrwzHdZriyj/q29log4HnnheMwZBpHBHaH04hXb0ZMcufBb9vxi48\nyY9FGGFnS/wyuUe44BLEavWgMw50ew9CqSZCs2on94Y79/RIZZ/REPqZ+aUm\nrExScqS8+GfcAGHVW0h8siEusDm8tzCzNtPJTVz/dVTJQ9zrdUhfSQ9MPr1I\nQQ5y520FL6jKnrvf0lDWbXS/N4N0BtKfgMjRJzegfzzUXZ50FXCIeyLtHj80\nA/05LMG5EI5t1njlN29EUHAE5/gwptsvReVwH8A7nfBCHJONqE5pfsV/Wff6\np/JE\r\n=pu7N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9203a958a.0","@material/rtl":"13.0.0-canary.9203a958a.0","@material/shape":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/ripple":"13.0.0-canary.9203a958a.0","@material/tokens":"13.0.0-canary.9203a958a.0","@material/animation":"13.0.0-canary.9203a958a.0","@material/elevation":"13.0.0-canary.9203a958a.0","@material/typography":"13.0.0-canary.9203a958a.0","@material/touch-target":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.9203a958a.0_1630626448110_0.4850660291938438","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/fab","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c10a0004e28d474758d761fb66a396215690ebc9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.fddd5ae93.0.tgz","fileCount":23,"integrity":"sha512-AEEVgpbqkQOF3XcmIKE8xrWER5CHSQD3kgiYqm6hxdOuwwQvM20TxlAw9SFFQtOdIeIcsl1gajExYOiMvSXv2A==","signatures":[{"sig":"MEYCIQC/YsTy8mZ3/0ojc1qpC8Nb2ZN52zSgudnaaKaUmwI3DgIhAIqGkLFEgPdsqtHlZDMGHxEBbJ/4kSXL2skrAPK0D3k3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc8+CRA9TVsSAnZWagAAIKkP/3jTT1AJB3YIJHAohw3+\nA1yqI2pVwv/gAfBYc78BqpaFJi6n6+dAb7Cj0fWS9SbL0dyKsx5lZjWt4yLs\ntFAJ7emyTO29nrjCm2ubnt0Ov9hQAG5F7J6SuilbN81GFblzLtmTraMjiBFV\n7UJ2poK3fVQHvY+2Z6cpr2oYnlb8vIQqvj+wkgrLFrA/1xwpVkssShu9jipC\nmUbHCOBQTiBhEGFSw3UUoEoHmSzcGyq4ssQmoxu3yM6YPEFto+zuNloC8pQX\nL6/0UkZwcZqwhKkqvqf3x5VI+E/1lO+y1tSUR7twfkM+Y4FkxMo0TXJGoGrx\neFhVUeiOGmpUytuGq4yIn7e/kzcJh5nr5EQboFJYQjJx8gHGhGsUuVl9kMyo\nHaJbXDh47SceafPK3pp4z+n+7Q4r9mEN+z1yHb/pqMXp6TKaKi9in7zFcGlP\n3HqM+8PCUsHMx7slbQGqq9HzAEfjqzOJQ+HzO9q6xj2V6ESn/6hWKsLwuCjX\nl4K+lQsDf0ClR1YIiB5yAilG+fOWWyZuXveLMWz1zgPRVOAjFGDCDLiq3Xti\niKOKJWpZDbqXbtOi6Avn5I3rSez8XQuDsZ5W7Ednj1oX9tzlqq12SF41ON+7\nj214GRHukQyq9w+iB91YqG670DeO+xApMYxvmqF4nqcQ19qiQ5CNlTRygAlA\ngx3p\r\n=qS7W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fddd5ae93.0","@material/rtl":"13.0.0-canary.fddd5ae93.0","@material/shape":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/ripple":"13.0.0-canary.fddd5ae93.0","@material/tokens":"13.0.0-canary.fddd5ae93.0","@material/animation":"13.0.0-canary.fddd5ae93.0","@material/elevation":"13.0.0-canary.fddd5ae93.0","@material/typography":"13.0.0-canary.fddd5ae93.0","@material/touch-target":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.fddd5ae93.0_1630654270071_0.8971809643635951","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/fab","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.117599a8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90ef2bf9a5a164e2c383600576d94c264341c357","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.117599a8b.0.tgz","fileCount":23,"integrity":"sha512-nPOB3GKJ6M6GGx9BkT/mGyH7UB7YfNThDyfBplPc4Ae9BiNIinDCqFj0J00A0dnguCXukGPCXSdHOKNK8vcf7g==","signatures":[{"sig":"MEQCIC3Wfwm1jqI+GlPn6uk9Z+IU8WoBa0MJ78lYDQQviZ56AiAXWymrMzQ6HjESRq9oNwkIbYVwKEvBmL73wRpPed2dYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+dCRA9TVsSAnZWagAAggcP/iEMcf8gonwO1qeloMlj\n2XjNwmsnI0U17ghKM+3QEwPk8whBVl7IxuxIsijSMSA3yaHc0xoYyeb/QQof\nDBkeD3AT7iVvKj4MVjTMAPDiUC0ee/o8FXxqnucUrKiHJo4qWvLbyg28Bkiy\nrMRhXI+EbnJ6Y5L9R0GsXOiD9azpUXQW2QTLbMS0XDTwfEum/ZdDGuRxL8r/\nJZPgzrR1g4B4TbJrR4fxi6hEbTaFRxJQ1tzQT/l8/R58iLLBLYED9nhki68d\nm010iFzEqnrPENx9lOdix8n0jTP67FiWN0ip/vUOKWEq8jUCHGRLAxE3N3Ui\nHY2gRnPgEndW8z/Q5pgdbTPtXviU/O+zdV748rnGbcT2ODEoly19DWL7zO5w\naAxCAQMr5LAzTXX09kKMT8R+hYyf/jYE3MycCtaZ3mFvGdQBb6mRTRdojKJN\ndbPHPEJJ6pAKY8kMqkPKsLa+mf3ErM51SkRdwq+wSD1yfotCHxlX9HGq6gl+\ngqyWLpQ1LMvEjZzM2JHCyUS6FPK6/djHH4PWeArh9ZfqwsEYaiDkx7nyh4tR\nj8Qcu6SDPVLHgRCAoCKdQ0YBZHjDFZqxZ95od8pwv9oeORNZJ4HTKLRYewMI\nOFMlncZYXj3q+JmKpk5/QyiEYEQIeiOdEX6kubeE8DiXPm/A0R9war5c38Bs\nc72c\r\n=7/MI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.117599a8b.0","@material/rtl":"13.0.0-canary.117599a8b.0","@material/shape":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/ripple":"13.0.0-canary.117599a8b.0","@material/tokens":"13.0.0-canary.117599a8b.0","@material/animation":"13.0.0-canary.117599a8b.0","@material/elevation":"13.0.0-canary.117599a8b.0","@material/typography":"13.0.0-canary.117599a8b.0","@material/touch-target":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.117599a8b.0_1630654365799_0.6837317485753576","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/fab","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cd93631f086ba19fa9f1ed45fa85b68562a2737","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.e4180d07b.0.tgz","fileCount":23,"integrity":"sha512-0BbvChm1+XGAsSVr3O9cYnenNZzowINoHq9cg5/bQEEklMPwLr2psqtFaEet3YB1ZNcBBRdmdE/zQs2wofknPg==","signatures":[{"sig":"MEQCIDpsvGljSP7ser1jO49ftGlVt99CEQdekecjznQHsCWnAiA887HbS4CJUS3PXU1ENmEeQHNnTvAkgMKGDNUkn61nqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+zCRA9TVsSAnZWagAAGekQAJgBqhZM+iYTTlfYSg2z\nCXSltYHLdx1D+0oIYJP+ofzJito/AAXwH2+HPqFods2mxRWCPpL4wSvKgk9j\n956PJar/UrwX0gaJts2yqoBKr10d/htRHSJcY+Bpw+nW6iD/oBnAwJOV/rjW\n3wdiCmVCLfrvQwW7ZA5abnvKgpMYLwx2rJ/b9BDZVqAq7jT0HEjwkdNFe5L2\nSjrDFWP0y3eqja08Q+tpZoi58lwebMLQA0D1d2u3AVBT+ek8WXrJX8Wnsyvr\nfPt59Wg+5TUpMgTWjmGy97R6FuhL3A8Kiy3eAa11wzcld4tYfeN/p9/JhPLs\nqxC3XvVYNRInfX1+myMzMe44REu33Nf6YpES2TanhfzTK+avN7u5j+CP66dM\nL7w65/SyIMJVdeA1t1M8gNrHwhOscg3d1+StNwlrLgHD/iJZ2lJ0crWOcNqX\nBeGk+efJxRCbm/fS+zMu66Vx5HInFEuDg914bUdyJmoOTLy7rxj5QTy7NzYL\nsUS3/hbOqlfwp8OhTCF6M30N8IfTaO67k/egjeLodM5yGn0XpZ6AZWNNwuhS\nnkcAmILuhoMDQFpoSX5wnQ/xp/PORHv+0YtJTBvPW1wOlS5Dnj7djcSXsmOb\ngM2yrKwe572EFdMfwNJo4rR5dMK2XZFl3rrDgk/P8y5xdxTQILSNQnEUNmAr\n/Ee2\r\n=E++6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e4180d07b.0","@material/rtl":"13.0.0-canary.e4180d07b.0","@material/shape":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/ripple":"13.0.0-canary.e4180d07b.0","@material/tokens":"13.0.0-canary.e4180d07b.0","@material/animation":"13.0.0-canary.e4180d07b.0","@material/elevation":"13.0.0-canary.e4180d07b.0","@material/typography":"13.0.0-canary.e4180d07b.0","@material/touch-target":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.e4180d07b.0_1630654386397_0.20869912489433218","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/fab","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.42d175efc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51c341e14b5de243123df660dc97ff0840ed3d68","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.42d175efc.0.tgz","fileCount":23,"integrity":"sha512-ArOpOF8m2dv7aGirS6I1x74L5igjvttFWtJaYaz/Npc1OkS2QquIxRxiWI9rITZfvqA9Gz9Jt3CiXc8Pw+5Klw==","signatures":[{"sig":"MEQCIEAyYw+NZiZpFgSfLX3QvrtTgRf5rVTZtNgoRpW+IYuAAiB+G0f9XLnb6JZMnZtesORtdTg8y5/6iT16LzRD6H8BGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkK+CRA9TVsSAnZWagAAyykP/0ye2cXM9/dk78aHeBwC\nujDmUfzt36X0qtXcj7ziKRGjCAyqNapYzJC4bPCeswNJzB/vbzhT0AJLAmEH\nBiT+t9SgeduqTuCXe3m74+mcbyD7Ue9Rga5xqwHXT4xxnWhEMcEzGzBxMMm6\nOZsLJ3ioxBo7Lhla4No4aVOgrJ+QXUlhlciCBNw0l7Q94PWjOnW3rJ6LhRGQ\nqGT2mOpfsqss/KyUtOnSEDssUDD/1Gf/JniJQuqEj9CEs+tjQSszdnrIW1vU\nVBA6HeQdCWxOZ1dHdusdFx6uhHU+qpnGgyvSUVn/nK3XbUKDuSlYLoRAm0ve\n3T4LFu3jdAOQ9z1hLt5gPDSyOv4vuCeuWysU06gjeilCmIK1qT8aZ7MUrqWl\nCr7x74bLJburB4IICgyq4IxwkwTCSlWlja8fXtB8uh6vgJFF4LkvneqUBvXM\nF23dFKBmOBOo5C5e5RijERLmgUtcsQacYSA0Gl/V89PSSMxs7wUojo+R+LkP\n4KatNXhn3UsAG7OfZ/TAihCwZ8wv9JcVja/KoAsp3gbJY35Q+TFq1iNQ//b4\nlP8p4XyOYRSCVercIcbnwPFt5sJuQ/SFYOEXSHTa/5Q14ycC8D2pTfEgzIeT\n7hLQ36unKbQyQSVEWVL+UzjDVRM21CXTRf5oKGa3iX3SXvhSwwN18uMxTKO3\n6RSk\r\n=GCY+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.42d175efc.0","@material/rtl":"13.0.0-canary.42d175efc.0","@material/shape":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/ripple":"13.0.0-canary.42d175efc.0","@material/tokens":"13.0.0-canary.42d175efc.0","@material/animation":"13.0.0-canary.42d175efc.0","@material/elevation":"13.0.0-canary.42d175efc.0","@material/typography":"13.0.0-canary.42d175efc.0","@material/touch-target":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.42d175efc.0_1630683838486_0.5352294150044472","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/fab","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.72464476c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a92534b75782c062cd025fd821d261b41a18c61","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.72464476c.0.tgz","fileCount":23,"integrity":"sha512-tAluKutyUUYAN//m60jWXkWxXstSXrQkHS0GWy7AXXNaIs/Gw4kVEzu4t8nznSMZ1Cx0nr0SAQjtCq6bsDXgNA==","signatures":[{"sig":"MEUCIGQwT4Rr3F2mRn3uAANKG3kjlbKBbi1C62qL8ThdkSLQAiEAwTlatHJK/Xb5tBgbFn+KlYrYiGejo/4ki107QRej66E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4a2CRA9TVsSAnZWagAAdegP/jDF3PSbUHIXloBij32S\n3KhAcO6KBm70ZbA5K7Su3J8xTNE9lTFMvH/yX62DouLR93RGe/dap6Yn+7k0\n5vaDiGc5NLfg0wUxpJIpP9tiEITqVIXg4DKYPJrcIm9T/b/JSPIZdu6rNjpa\nSJa9tBZw9QFac/aTv/nEFoxlkBOmnf/+ojSaRtsOrGVP/OkOzNU/d/KlI6mx\nuN0XPlfgRxIeamNo+8ouUG0fGzUH2ae6iWDCnEkXZgcnkuVyPY9imUau8UW6\nbBd0cHPes0pu45gZghIE/lG4LftpDJFFrKes50RQbwqFkqQ/T3C1hV6XOSII\nfvbxbM7umsqUAokIQsz7DaJqNkcNxQQmriQ2/4jLXqGzF8Droi7MN7+TpnEz\nmt3iHK8UZar1lwwZ43+k1a5gjP/04acSev7YI8rJLTp9IWw0q8Dt8+cY9bW+\n0JcbLs/Dq4pm7O0drFj31Q5g3McjVSWpZpVHEWqLme8sWp4D18wkuGqhJimr\nUVp5QotzNsfzKeqYXjWqKLslnLtvGGQLjkiDemASZM9M3cgneT0MyiTq57gA\ncKvDTbyaMiRPipDGl0dSQLJzxqEZrXDj9B4V4oAAAjQbSX5oXtS7I8vFrcDr\n1EpvfiEVnKdGJhSvuXaMxeRs+hoNmjHAR8nQjs3gvWY42RCxSWvmcEK0ZYjV\nbU/P\r\n=Lov+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.72464476c.0","@material/tokens":"13.0.0-canary.72464476c.0","@material/animation":"13.0.0-canary.72464476c.0","@material/elevation":"13.0.0-canary.72464476c.0","@material/typography":"13.0.0-canary.72464476c.0","@material/touch-target":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.72464476c.0_1631028918779_0.11874220513693423","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/fab","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.37d4db866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"515bfe0019c53ba4609b7e715d89f7d8d7b931aa","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.37d4db866.0.tgz","fileCount":23,"integrity":"sha512-yyvDZBi/itgCLV8f6PR1JRH4m/EQJrydwfocf7uj5KI8MwWFm+FrUmoq7gp8iCcYOioh75rarrGZgjHGDB6kOg==","signatures":[{"sig":"MEQCIDXdOeUx6UKZxdiGcYKhRtmYSAiOBduZ609Agf8w/WIEAiBW+QzQnV+ITI1BJnrnKZ6icMGnAbXsEqTVtVpKcXNqgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOht4CRA9TVsSAnZWagAAcwcQAJVmP1B3skQSnwYwdggv\nH1fVry/jU3RwDKGfebTJ/DFSHIIfy81pQz3tIXw/kQVuxJsNIZB331WnDnL3\n7j1Xwpel4RKnD7s4T8z6qxTFxKzy8b/5HkQfRLFpQ6u9Xb0GE2cfOcFrwNt+\n/uzK/rKEw+oITOEfxRNkyUjuadslYkF7zgHu3X/ZYSbH685E650BZJ9iqKUb\nqV67vFNWo0RAdJ0IK8LttUqUKA/bdABhlFihLxqr2RnkvMmszvrIghKJcn10\nZnt9/ZuHgFStlJZAjNIWKvmoJXrZTS/PO3tKxVE0TxGiA7Yug/h8vis45tUC\nXYwQGpf84i5jsrJ8LwcysipHj0MM6Mve7O3q9SlWQp8AIcId/njmkV2D6bUl\nIaoraJvEm+AYjMasXb0x02yCYDRJ1NFs5jZDVr9SMM8ghZj7CCZRWm/49+sp\nWEhLTqFAnUnSZz8J3Ggzb7etuwi/jPAj83Ae2v1hev7wQ1h1rlKzYMx9+6hK\nXoBvfrNKiKhmT4cUlVb/yDe304FL2DGCRD6MpQPP9YnZU8ka2M3a9zKaw0Ai\nmDVUT8ro0Vdu5/deKCte1TFA7vcEL3/DdTYUw2Bk41ZKelVFqy3daLh3gIew\nu5qpLU/14iwiuDK4NW3pP53pK67uF+59LwSE5BZVcE5XTkyyOw4iquU7sMQD\nWPTm\r\n=puM9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.37d4db866.0","@material/rtl":"13.0.0-canary.37d4db866.0","@material/shape":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/ripple":"13.0.0-canary.37d4db866.0","@material/tokens":"13.0.0-canary.37d4db866.0","@material/animation":"13.0.0-canary.37d4db866.0","@material/elevation":"13.0.0-canary.37d4db866.0","@material/typography":"13.0.0-canary.37d4db866.0","@material/touch-target":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.37d4db866.0_1631198072806_0.5943069965168106","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/fab","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.6df682e74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a14de0f622295e6b763fc86ecc08eb9f7bdc618","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.6df682e74.0.tgz","fileCount":23,"integrity":"sha512-wKqRDH3Ya8QoBFAGEZTcCfUC7m7f/caCT3Z1+rYFFNq6awQt1MXNDZW5eBdwm29aYLIF4Pr5+3EyM70/lqUi9A==","signatures":[{"sig":"MEQCIE5V12vjV6ymGe3f8HmpoMdFAGS3yl7oRG9KCxftaQChAiAlhttA5TweUkOp1BuqVps7RhCKnAY/W9r5ydeMuO+U8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOivQCRA9TVsSAnZWagAA+jEP/3LQYoVaGM9nYZNDakyn\nXzAbfPoB0B5p52ikYgRMcBOi6/iZINPWkZit9iuphyDgJteFFmhLUE3Xo+CG\n2wvA/f2X5QDHQsSn3l8xuXcgKynBA3Cb7FmM2z8U376vZOG/euqNkwOzYRpZ\n2IC3hlaA0XNmUFfg5uPVKgCqihtKBuq6RcXLR1Wz28B9WYitjLR0wvNQovy5\nFWLwDZzkuVfYzUTD1x67z66hM/3DN2rAl+0p0e1yOimaYceYuX6s/xvJg6x4\nF703hB5lwpjW+L8DnUNEvewvFaNRRIAudFVAWCR0DAn6zXlIi5UJrgbyOlmB\nZ1yftZdGAIkcHJ3DsGWWfVW+8UkOqatdx2gXrJGibJIov4ZxwkXbuKYjZ/86\nbhV4e3+w5gI8Cl8vvHCBNI7muachviAAZZ9tjXrhE8AxkDtIfcYCmDZniesa\nKikPFU/ran9ZPxFxwZ9cfAcOkUu7I17IuXxAeP7k5QUfX2bhdYsNGPBK1kZ3\nb0lbsueYhc53KptL1uXORwKLHF2lzLeaJKbdF04TxxLu0JjjdZFMvCOur3+X\nwZukLp4rDuEXA9Hf6tH/4P1L5owVm3l21xTykEtHmfIICeprhGkI/DOWQ4uL\nKX9g6UZ518KrViLDjEWwEe05Qx4HREjGHhlRXWUQJpn2mn3biIhy3kLn3FBM\numVz\r\n=35/T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6df682e74.0","@material/rtl":"13.0.0-canary.6df682e74.0","@material/shape":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/ripple":"13.0.0-canary.6df682e74.0","@material/tokens":"13.0.0-canary.6df682e74.0","@material/animation":"13.0.0-canary.6df682e74.0","@material/elevation":"13.0.0-canary.6df682e74.0","@material/typography":"13.0.0-canary.6df682e74.0","@material/touch-target":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.6df682e74.0_1631202256508_0.6636081853495159","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/fab","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.b49359c35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ef4747e99501f17eeaebdf60430f6755dfaa7b2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.b49359c35.0.tgz","fileCount":23,"integrity":"sha512-DdrqffACwV2CVMUTslwCsHx8OKfCTSFFk7KdKaNMiyo8RZpkqb64NGm/fQUi9RpdUyST1TA476ICvSFjOpN5UQ==","signatures":[{"sig":"MEQCIHWsZ9uBhvmWu0zSwgSWUK2zUBc074BfcQZdLiIGAO6JAiA6j5dgaGVfpEm/haOXg0VgnjZz7sVF33HSLkxKeL+FGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkYmCRA9TVsSAnZWagAAZZoQAIaFErO55oNyBzPlqK9Y\n2SPhZwPlD0sj85RL++gXOiP6G6BFtnemZP77m0lvtjaF6aKtBS/TOTCe8jBK\nrBorjarT7sOb0cYkoQu2+1gOcsHJJ4C79gpsxc5v08x/LormAxcAXko4cwwW\n3pDJYxxN57X6Q9pmYU23IV7mzcl90FCi7m20YAQ2VIgFWjffSEKV8CYwMF1c\nO5YtMgDyseu9prxOM5P8ZiB3iI802vspjCHx0j+QOKvGHmaK9gwbCOmlcHmD\nQie17nntT2gPx7rxosxBXXxr1Joslu4dxsko1TbDLnu4S8UMAJpvvSD6mUbk\nEj5flXy423DTN53mr3pwlS/svvbdZp4YLcCahW90eAF1po74xccfsAhck09C\nNsBvnQhO+uldyVx/n+ikAo7/655u1WYb4nL9S9lNO3UFtP95t5xKnZKYod1Z\nmr8cUJ0p2rhEaQ/hG0JUtFPtfnqzMJVx4HpBrqOoyMpd5tdqMrxI7R07bp22\nbAYtCK+W6ze81OxcKLunlvaqKoCHSzIdrAe0+bSpoC07D6Tn+M0EcIaBnmNV\nRpZDkL13WsYxlIUhAe3rPsACcLF7u7IGXnrHb8e1PlogHZhCTDzrdQ6uRXeE\nnK9qsWivYWRFTpAA+NI4N2x/QL+8VMMbCThUyPtXOJGdK0QhvXMZ59QL3yuz\n2mF+\r\n=HAwi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b49359c35.0","@material/rtl":"13.0.0-canary.b49359c35.0","@material/shape":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/ripple":"13.0.0-canary.b49359c35.0","@material/tokens":"13.0.0-canary.b49359c35.0","@material/animation":"13.0.0-canary.b49359c35.0","@material/elevation":"13.0.0-canary.b49359c35.0","@material/typography":"13.0.0-canary.b49359c35.0","@material/touch-target":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.b49359c35.0_1631208997939_0.07072496017484853","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/fab","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c588f21529287d8b28c9b09ad9e6b8584291e23","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.470bd34e8.0.tgz","fileCount":23,"integrity":"sha512-agC4asDxsDCHpLZ5ITcgxV/RpJNLf9DRF0RysYaNJ9Q4lbpgXaxmaMMECc3ZS1vQVCl9JeL77naIHBpZbZnbdA==","signatures":[{"sig":"MEYCIQDoDg7qGUQVGl0EaXbYJqjjDieiPgZUL8WbAx4ngPMCVwIhALZgxZAFn28JIungDRXQi+THmOXErVrYkXNAjNSVfAco","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkwvCRA9TVsSAnZWagAAxo8P/3nrBDvG4nPKFMmhLLtq\nC8jLQDLocwPUyEduiCjhnPfyYw5fj86y9PfKnfjqH1xIA7jGvoaXPuQBgbfN\nxtyrT2X64mUL8ii56KR6nNhuQxnLDuSxT2rDsNfw6LtQbf8tepWXa61kiH6g\nY0igXeciFLDbtII4JqappfPtvYkTWpCeMlTWEf++9Q7KVnavqts9gcYDjLBL\n6pjqLbf7qhvAqprsyUFkhrlKkngKSg1ye3QfikxnP62snWqQDuiKTNBE4Oe5\ngLtk5m+jplcPSEt9zWW4zvsfpU8t++3UVkPhiHyPfwE/ahD7ovM/xK71dhMM\nXNuB3oAZlNErSwPwSvd9uVfH01ooKARM55kMMFCXuadazqBzT3doXh3Jll06\nEm62CaW4MaIeappH9oaRWw4bMMIxIV4WRTP56XARS95RPQIxEoCGzPC7Uxkv\nXByo1qyTrdgYgSaxY9IY6QoH7sUg0Yj2gyj0lKxtQR8F2uBYr9Ud/P+xbTKX\nwxTPIv4Q5AApPLhN38d6a1htPYCfxHHsQKLSlaGzU+ZITbV6N8Cgg6X+yR1u\nkGP550oeaYEhmTlmffnA4KXgI3JyS2f6aRQYP/KhJf/zfoL6dSUQ0YVhaDge\n+s7QaA3VwDpolvAs67SkkP0eFvEzDZV/vcAhF7HrCM0fAE99hz44rp+ctTBM\ncsBy\r\n=dIrD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.470bd34e8.0","@material/rtl":"13.0.0-canary.470bd34e8.0","@material/shape":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/ripple":"13.0.0-canary.470bd34e8.0","@material/tokens":"13.0.0-canary.470bd34e8.0","@material/animation":"13.0.0-canary.470bd34e8.0","@material/elevation":"13.0.0-canary.470bd34e8.0","@material/typography":"13.0.0-canary.470bd34e8.0","@material/touch-target":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.470bd34e8.0_1631210543381_0.5671371730965351","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/fab","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.d48a01771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b00853f059e503b7531eae4e5ad777ad5a2007d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.d48a01771.0.tgz","fileCount":23,"integrity":"sha512-GzC6AErsmbvIhaN0v2Uyfr6e+uHeuQcqecTwFQ9cIi3dPWo/mSrDcK3xvBhlTFnPX7uFAI4+U4ytZ/Ozdy4ETA==","signatures":[{"sig":"MEYCIQDI4i8U90AiySedfT/vRj0gbaAmSkJVyp12vgdzgafOjAIhANXfjQ8yKCrlKCkb8xYT1+ND8q0Gi2LxATZJdVVMmBKY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk5QCRA9TVsSAnZWagAAIZ0P/1CbUjOKIU6HMnMyhV1P\nOu+w5vZvTe4YZwUf0p27JXuzMOeRgYfuLdxGEU8eqelaTn2Fm7bOgH2bFhKN\nUKclqJMH3W+UjS2YhIMRMONp68/yuOWk3ELUu4DT2IAmNpG3U9XUjrJ9mDv+\n7xtGxH5VD9fC3trBZ/i4ok01Nsmpm+or1R02LmJDP+zZlkSK+MSvUr269GQg\nMRcjwH5JCvmHg7Gxpx48mjmSDGIo9LHZuPCPx/nRe3K/bLlgcBQsoSQEAlL0\natCrj72YmZfXWjiREd7ET/bj77p7qcuw6ZQmWpD7GYYe/IEIRvvJYBhZ/zhO\naqN0QMWVgK6mo9uyHwDnJOGF8e9lQJW18eOWHqr7JkYeFMcvvCv4s8h1NCGy\njWqdZVclgndyb1NPHLSCoAz8XzH/XCvxEAiLN3qpog5uu2F0dnKtg9eLgKWm\nbovyPBJ7cAuBvlRD53GT9TrCVZx21joZxzJnfrAATAAlSbps4JNpvikhHm1A\nvPkKiMObX6LV6iFWSqgaFKWUwEs705r+dhOFdG52m4l5FvnVAAtZ5cC17Oqv\nl683142xPWsJLv2Y9M7HAqT4aCJAOgMyzyIz8uRsRFYi24p1HUhKy+vvoWoJ\nsnQoeokVAOnaec6jKt0KTDtSkDdZWBrvAd4yQz6vhShuHgrIAsyK3CwNpNpM\nNC9S\r\n=SOAx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d48a01771.0","@material/rtl":"13.0.0-canary.d48a01771.0","@material/shape":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/ripple":"13.0.0-canary.d48a01771.0","@material/tokens":"13.0.0-canary.d48a01771.0","@material/animation":"13.0.0-canary.d48a01771.0","@material/elevation":"13.0.0-canary.d48a01771.0","@material/typography":"13.0.0-canary.d48a01771.0","@material/touch-target":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.d48a01771.0_1631211088607_0.9595993978923576","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/fab","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.13db34b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc3289c88a079e5e80907c2adda8b46dd709c1b4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.13db34b34.0.tgz","fileCount":23,"integrity":"sha512-xa00dg9amQYWuTfZNtue2N10BgciFGvqKYI7R8+Gj51HMaWEbNP44AsnvXjM90HvEXwxoDwA3XKGKMa99ZXLwA==","signatures":[{"sig":"MEUCIFiE/fKKkzXX9GMx4yGA+L0pFb2HDQKG7wBNVH5C2yP0AiEA5dQIeGf0zcxWj9vdJMaAIZbAT130217S9Eeid2fOMJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlHWCRA9TVsSAnZWagAAClQP/1FBbSbxksb3wmle4iIz\nqKW4ZaZRCn2f6jH2Yk+5P0+My13fBrNuaDk+r1yPlQOFS4rTtEZOUX0OEqqs\nes2tlzHgksLxljjvcqJRrw4Kl0Z6L9MmOtpRS2Du+/I3h3sWqxqCi4wNyTqw\n6dkf4L316d682mVyLUKJVDlLyRlkh0ptDCXMvIP0YKHNxdimqIMEi9Lv/DuO\nsqL4asMkMP6VazzHb9idYIMXatu7VFxwxNmPWCSqZaxqjeBK5ZnmrLTkTV0m\n6qGpLLKGc7UYwRb1G95hg0GFCi/mt1oBgZb2DGQu3uAnuRyxU+R7XRTJgMxZ\n0if7f0vAKkYe+olE7o278srz7zSem5xTXrINWMke73UIO3c7+hFGI2kUqykA\n9fO0t4sYczRQKGkFXi+vZAOa4hYhmnB0NSeCq/T3QQint/ujPY2MEioAfJUN\nqnDuvzQJ12qWIIx4hiPA5xYsLkPuSxiGJ80VwqzT70oPyiKwqAuU8230ZdTO\nkToP5aIxIkHFOd+dmy8i0jAxoOv6EK+UVdzGFywla3jeklc4clKPk7TwpYUI\n23j5F03r6IcVQrmLREfv7BBHtzpnkppS3lvbnJtY5oA0ILge+C5aFxD/Je07\n4uwakB4I137Iian6ZJUswW0/+j+NjFE2Dy30NcHtwElmydt5dRNPXa5cnz7/\nxAiM\r\n=iDS+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.13db34b34.0","@material/rtl":"13.0.0-canary.13db34b34.0","@material/shape":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/ripple":"13.0.0-canary.13db34b34.0","@material/tokens":"13.0.0-canary.13db34b34.0","@material/animation":"13.0.0-canary.13db34b34.0","@material/elevation":"13.0.0-canary.13db34b34.0","@material/typography":"13.0.0-canary.13db34b34.0","@material/touch-target":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.13db34b34.0_1631211989976_0.2628443774579867","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/fab","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.864798678.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07df7f040de3c68342e67bccd90db388da60bdcb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.864798678.0.tgz","fileCount":23,"integrity":"sha512-d6ZxDrqGjVlgim6bRSbLnvlD6dc9nzBZgir/AijdMvji/oq6YmaAjKliwIshwiH8NRDo5s4hMhAyTDpLo9HrYg==","signatures":[{"sig":"MEUCIDjZ04R6/2xjdHqIEu2aYtZWjb+E/7THIaXOiDo3+PAcAiEAoM7cobD23szDwwPP9utt7Rm8t9YjsW4VY+N83K4TyzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlSECRA9TVsSAnZWagAAFuYP/RuOWEzydDwS4b5AP+3K\nIjkFlwIoaPhxRmNlhc7Bp1ONQ+5CVilX/Vlv7z38/Q/z3ioPm35DTpW5Yx4J\n8p/j1YcyQ5H2dY33cMOAH77D2ZKnt0F8+NKcZHzr0u39KsjS3/dKnXGq+wqH\n3/x/reE8/WOrT4glQ1arDKDqqce1lW4fJPO4Sf2HQV9nSrCiUPUDIfHQNjZs\nzrSPi/CcwFW7VzyCFu0T4YVWepakTb8d8KZ0RP8xgWImp6bEZOJNmq0x6A0I\nl8Gt8w4h/TssLn/UtBmx7mT5Fv9l7uCmzypq3GqxyxoghdyCUkRp9lHSe23I\n/Vx+vaKKkV4aqxkaIKjWgXEI7pDvnBV7nx3Bbkm5j9CzzkXxv8qMOjAzT2Kw\n2okNWJdFBvcz04R6WgLxBod2w/VHKqi3o6B/ZdBh48Rnl2uCbqpojCvHaANz\nFqsA0i84+yUGzynEyNvuWsdOwUVxrbEK2FdPerWNMoHKM81bEX7cO8YN862h\nh8GahII7NBMxgAnlQiSwOLmudXHnsaEPlWSDRQAouuYPLCA7qkbYs/JnMqdE\nCxONsCkwhhPD6c6QL2Z+T2rDOTZQckzA+Wi0/wPDccFbMrPZmo8ZB+upO06U\nsG9N6z9DCOO9B01YRh8IrsBKi4eYp+dcxLFD68IrZpXpGflVHP1lJdjetAWF\nZ/tO\r\n=C6qo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.864798678.0","@material/tokens":"13.0.0-canary.864798678.0","@material/animation":"13.0.0-canary.864798678.0","@material/elevation":"13.0.0-canary.864798678.0","@material/typography":"13.0.0-canary.864798678.0","@material/touch-target":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.864798678.0_1631212675735_0.5470994156866467","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/fab","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f9b01d07b978994b253a6c9feae543ba408d9a9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.d04bda3fb.0.tgz","fileCount":23,"integrity":"sha512-ifvQa/0K4NamiNazE0cyjBw6x+Wzlk9di1DdSZksirTXJPMu8XodwSg0gi5bYcw2tT5oYb6AJ8qfBpZjAyQzaw==","signatures":[{"sig":"MEUCIQCSGQVvBf9bpqoMy7eRUheZa358H7BzhHLGChZweE8MTAIgEOqLRPASg3psWldcCgpqk9Fjdgc8BOZ3U/tXvw63csk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3hMCRA9TVsSAnZWagAAiF0QAJ+YucXnuM8ZZPFknjJB\nQpHviZwkrnwaYTa0A5eUlNJDCFDBJTvxzgzWACVyW2s63yYPV3U6cJ8k7Hvd\nO7H1oJROkJdoi9v2/GwCfWzY08T/kccL6YpdtXMx59YzNU2XBxK345kKXGLw\nvsg0vdw1U+dO/rsHEYoNbyiIJNDgNWBSPoDwbKCjW4hVwePLjtXEvdjGMpZk\n1zIhRQXuJksi1kQvDXAx2v5vdQR0UhAxIWm2fQOLW5Ts2NAEMK4ctkaCFS1E\nmBEQqXHvZiEetD3ICPcTBT8V/07EeHNBk82yWxgAect6JMeN9nk7T/cciJLd\non8JF+7oFNFHEP1XdpegnRM1Qh7Xfa7K4WdLwblxfSE4Lcm4JHWmGQN660in\n0pzPE/fE+ouOivmVHoDLJKqndT2UbekaitgmZgzCClbRDysYFVDzIPZxaSzi\nKfkAnpVFUp1EuR9y+v4yK7RbUQxemnS1/u4gI1EnA9nUb/zQhgTPh5fqLJwR\nSLyxeJKuCzOMUQOo8x+I1t4nCnDwVXnKhrUes1qKyhrhNLEHMAxqUA3MXDmh\nYyMlLM+g95nrsTkiWIfCKmrYPXhQVu0IlKAf8TsVImQzph29ts2a01THSl9D\nLBMJfKSH9pfIAXv57C+oynheh7ZxMmx9m8K2jB/h+pzmCScpiW603pWx5hlv\nY/dB\r\n=rvO0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d04bda3fb.0","@material/rtl":"13.0.0-canary.d04bda3fb.0","@material/shape":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/ripple":"13.0.0-canary.d04bda3fb.0","@material/tokens":"13.0.0-canary.d04bda3fb.0","@material/animation":"13.0.0-canary.d04bda3fb.0","@material/elevation":"13.0.0-canary.d04bda3fb.0","@material/typography":"13.0.0-canary.d04bda3fb.0","@material/touch-target":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.d04bda3fb.0_1631287372210_0.5807812402230581","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/fab","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c215b50415b9709bf8f7e7f9ff52dbd1970e27f8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.5533f73d3.0.tgz","fileCount":23,"integrity":"sha512-rv13Ap4nPuWPyS18waKZV+iftmCPtGaJXGMDe0dY0RXKjBctZeXIutmo6lPQNhukV8JNB8CLlfOhm7ydln9yqA==","signatures":[{"sig":"MEUCIC8ePLgo2GcaiN87v73R7TkZ9zzbBiQSmRlc+PY674foAiEAvUWok+TjHNlvaS2JgV1dn9tAxJ6N1LW3IxXpwF2jfhg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9kNCRA9TVsSAnZWagAAp2oP/0R3Qem++Ri/bXBv0YJS\n2HkAN0yd28EWAPoHeYrr+CphaJAA6fWBOLhF+6NTE9Q0EswhqXA/QB6c2UoZ\npP/kvRuEzXKyCY195tk/JqAvXSL+gw8nkU0eDoYNSKI4CHcETI6ognd6X8P3\n4/RjhLFkAa2epHmyVlQ4hLu2MMGkbo2qTKmj7z5stLxWmjzgU14fYNy+lvDS\nqBnxd5Hr2GUmL4r7ts9SxDyvc6nr/Iih00R29rCathBrsBphHWkv9oa6izfU\nqVwXLAdMTEzQflE45IWw+VPvuN6c4Bnt3k8ygdY/TCw2HZnNxTGlaar/7uZN\nM4a8hTYwH8UF/JaNRSB3LMBgPDrRYRMAvxZ7F/JncmciRWqpBunotXFqR91X\n4RqZtQ84WMThp3JIsPxHqZ3E/xDFd/nXbEskADCcbBL4Ix0oHPIO9CyTkh/z\nMu/fpmszhNc7JyT7JIcxD9n/J5xbDGue+8rXjNTtg3sOkMdQMjTddPiFgX1J\nxEqkaR2XQrR5wZpe5V2d4L5yxnCIGUwTlr6GOk3Vv9QGQzjJROZCiGFoOPjb\n5e/VS94SZalVf4lSKkvhs1YXhH94RweSt2awptdaM2HcHF0W4sIhzIPQarQR\nqka5kvWir5XaDL7UjETaPrx6dMeQQc/049QqG0Ln86i98PhGnmfbMgqK88FK\n5K7X\r\n=UA+r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5533f73d3.0","@material/rtl":"13.0.0-canary.5533f73d3.0","@material/shape":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/ripple":"13.0.0-canary.5533f73d3.0","@material/tokens":"13.0.0-canary.5533f73d3.0","@material/animation":"13.0.0-canary.5533f73d3.0","@material/elevation":"13.0.0-canary.5533f73d3.0","@material/typography":"13.0.0-canary.5533f73d3.0","@material/touch-target":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.5533f73d3.0_1631574285390_0.03556627790695477","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/fab","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.08398f880.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2f8e777095728628b3d9bd623158eff5a613ad6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.08398f880.0.tgz","fileCount":23,"integrity":"sha512-CwpN6aQgO1q1B/nmqDAQw2OefF2krM1O6yYsroRIDLOOo5cud/eE5VrRE6HTit49Q6Mh50mGIPjuoJnLXUF2bw==","signatures":[{"sig":"MEUCIQDIkBLpBYJkk90osXoXPyu0fau0zTTW+XFTLrCtkHHZZgIgbygkGOr6JF5FeiBW18tIQL2+HeEEsaqeshbx/pSa+Wo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+A6CRA9TVsSAnZWagAAXt8QAI3aAzfA3tJwfFjaQ6c1\njNrsdcXAwn+JhVmXK/eqgNpR8reFBEyrbAOWycZ7XCZ6cfG5AJxILvj0ouz/\noo6tC4S8JVmFUamikGthI/MvP7FKTHrHzj5BXlP+sZrBny1viDgEbtqRoSqd\nNDToZiyGPqA1Mooc764yXlHgbX/T/fbPiBM3eZyipTQmCvz6kYAac/FMkTv2\nEftz1wSGRBV6XlljWf8ZphTA7qK4pxYSQEkgYeJfh4Aew3a0RAe5F9DuMfOp\nckCCJ577S4jBiwfG3H48IGGjvC7Ar66IvI9OsyqK7f+H+fmCdZ0GGrDAX6Jy\nFUoXbvs74MVifvrwLk8KpURbpez0MAXdOwMrxNIvjDsCvt2sDkKAqr95Qa0m\ny92BDRfIx1vtZU2+3krzQTiwLensAR1sNkV7UqifuV4FOdmVsb+l8jb0gWyY\nivt9xu6PsdrI4XW9Gjh4dMGX9Sa347+//JyxJZFoI/zWHy8hZfWM+EljSU7g\nQEQS4kvc+gZlGUPmyfr+kKCj7a5eob9MJ6MCg3NP4Wd+QMnAcXFMETXDh78d\nvW3X4hM7C8ak1e8qArbenqYtR0CBWjFZoRa8vD2SOiopyXyLDrLgLelLS+KW\neUV9AK4yuGHOiaBX7U6upVeiaWhaWNN+aXVAlH8fZozHqbnWEEOFjqR7yYfr\n/M2B\r\n=7ATh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.08398f880.0","@material/tokens":"13.0.0-canary.08398f880.0","@material/animation":"13.0.0-canary.08398f880.0","@material/elevation":"13.0.0-canary.08398f880.0","@material/typography":"13.0.0-canary.08398f880.0","@material/touch-target":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.08398f880.0_1631576121815_0.6177724446417141","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/fab","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0c665b9d028ec7bd31de135370770824c10111a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.818f4ee93.0.tgz","fileCount":23,"integrity":"sha512-5f627rAZwHo7usFjlLIzYJCnQAPtY/WMBumsEZrhuvc0iVDh38S2uAtVy/KPRBFU/NCOvbcaYY5bV/xc94TUqQ==","signatures":[{"sig":"MEUCIG5f5d/v/bqhKJqF7LrJmnPHd4AGsPT5XFVkQ3olaBORAiEA2Gc0DVMRgywO9TmM1jGnypQD8BCadxC89Bh8LTzA2gU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjKbCRA9TVsSAnZWagAAVToP/RR0KBmHzMNK7K7rI5ZD\nlzDZ7wM7fHqroi10wj3TOQocy+Va3ZniWzPjkA/vwtq8vrYoNXqHu+5yltGO\ny+nTfVwHTs+xrSiuhhEtILHzEHaWdd6utFHoPaO3O5I8+QA7yAbNvq4lC0VT\nFBSAzWaMaNWk/UUqWNEGnAdItBxpOQwePVPwZh12l/vE6ln7bGMQeuYiPCdg\nFrx6Vq7n6TFaS3SkAt5rgTFdaMFsyxCmVYYALMzG7JPSGJk2tukAp1i0agp8\nGh8YTncQ4Bpm1nOquln46KXz1rpts4uRvE/lAaMPMerWKkclMp6Zk9qGXR/y\nL8tHzDb431z0joRFzdT5xOl/IHMNLnZouYacHkm0j4Sn02unC24X+HAFIVOv\nqJxH/YXpxtXoy2QuFct4+dxwPuPmOYNSCLgR+//HH1eGX2oBZlpJziFaDDJq\nr/F8DbG5eSU+KJZGSLrkBjO9fp5G6owQ/RAfp+jW0ia3t3ycCX0dbV8hifna\nuv9Y3dqm5XLBYQ2+UGwdAo7C4zueG0lVNCan5gaVH+yucCxxJ2cHwXMmXKY7\narCGULHBR4ARA2ZEAwdwmoYzt3oQjHqGy/W5o4355NdOM2mlsR3XnD7CFlln\nSPWe74lChxj7UO2u6ViHJqdhCSov3bWar9iBvb9YHrtXBxTkJBPFyzKi1pva\nxCO1\r\n=NCb+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.818f4ee93.0","@material/tokens":"13.0.0-canary.818f4ee93.0","@material/animation":"13.0.0-canary.818f4ee93.0","@material/elevation":"13.0.0-canary.818f4ee93.0","@material/typography":"13.0.0-canary.818f4ee93.0","@material/touch-target":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.818f4ee93.0_1631728283409_0.46068779070259125","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/fab","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b8775e6f4318105bdb12bdb6b74c21b763ccfa0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.8355e14dc.0.tgz","fileCount":23,"integrity":"sha512-kNy2ppQz+UI/E0OUVjJCdGxEiI70sRMRVhcmUZo+wAgSPE2clmDlvySj4W0b00R3QLRjpNpPhc1rMhuEDZIkYQ==","signatures":[{"sig":"MEYCIQClPC+yzCUZygohHE9VsCfCLSsFT8nCBXTJNijWKUjmBAIhAKxjuM2K0VqYCEHH3sWXM094LpPnbmTrItJIHq+LUIU8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkXTCRA9TVsSAnZWagAAK2IP/AkgD5OcZyvifsSdF0S7\nN138A20jPibA/yfaKpE68aWbibm2ziF79Y2TTXLgeqG+9yFpU8KZa5bNpvlV\n5fxm3SYJBFuXOKj9zU1UZAvviNc4nv/MyIb2OZnU+KkizRnDqWve+zwPtj7t\nG1fNRD1lRFGmYnMB0R1jg3HG9+pBCDTkmmBdUC5vHSZU3hmxBUmS7OgC6Qvp\nYNA8DqxOOyvTt7eA4cl+MM5qKXK9XK6moavoyh3j+z5RU3fMb7uQ+Sj2qvDZ\n2Xqk9WEBsJKEaKTd7RKIhzvLlb5Mqxk6VOji9LCf+eKUIidUrdtra6suBD8J\n4wJ/Sw7Jfk4M6YJLHDbpVax+jYqr16D29rmGlmKtZc51oZPYZyBIKJzjLQSf\n8sY56kJXtL+5TBAwiJb5U3CV2R+tUOlrP7gHlUG7fvQs1a9Jrd0uWimmrB3/\nP5ogwcp7jwnFNpgGEQt4xDwIiLglJc0/zD+vbg0ESp7WD07xDvnG8lHppHtG\nbWroSRfsf/lTtl5qHy2i6h+zOGP0kGVIVUSI57q173Um3X9bbUJBu2guZhv/\nKFcg3h3rISVw+4kyMToW64r4iGBRpgjEE8/TBLk6wvnO7ZakNWjFfxJRB9nW\n3nuAKxPzf9RGnvbIv/IdK0liGPruQS14cnwMWBOdrpdSdMqRDjuA7dbFH4sC\nexpT\r\n=5vzl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8355e14dc.0","@material/rtl":"13.0.0-canary.8355e14dc.0","@material/shape":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/ripple":"13.0.0-canary.8355e14dc.0","@material/tokens":"13.0.0-canary.8355e14dc.0","@material/animation":"13.0.0-canary.8355e14dc.0","@material/elevation":"13.0.0-canary.8355e14dc.0","@material/typography":"13.0.0-canary.8355e14dc.0","@material/touch-target":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.8355e14dc.0_1631733203257_0.2900920723571234","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/fab","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bbb590ab923db7c23a0e698b917899e13daf269","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":23,"integrity":"sha512-APQnhB0+hdXzMNdiIh1FtMICLOkz5fhlbKD5JNRdIJeIkfc6d7J7JBvKaWVUWGNyBFwQHiioIFDWxhCt6qiYyA==","signatures":[{"sig":"MEUCIBQ5ZgIhacVpVaA9qyMWBnXIeDS+hVA43vVDc9ye1nUtAiEA0hazzWHeS3KJgRm0cZlFX5aWhH+ETYwjS+Vmx6eNzVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmzoCRA9TVsSAnZWagAAkxQP/A+Oa1xmuo+yEC0ShN0f\nmDUsq2uemJLhE5EXNG34tJ0nseMYbslH0M+q9SVrQLNU9KGsRVeIk4LcmWUC\n7KugrRzYfcNmFEsy92WE8uByi3xFJnz23hX6DVRHntKIqdv6peOlaCqRbuxf\n0pSZVl/kA6YIRyMWX5lAE3Ujf5dWh5fHkd8rkBmPOTIlHLyC+B7bUtrJDKEZ\nJlSl8noL+4GbuLxSZuhM2WckISv+VIdzS5lHAfCKN5GYF58pV3+88mXJEsfd\nN3AYPpG/td/zmOz5GTAWLqWpfplLpsMMJ0ClM9QGzcNoexFOwnT+cAiYSzCV\nAtsJkeN7RSwsPI3Y3hIo8JInnt/W2Vr45SyZs8IjpVVno5DwglgdurUySxve\n6grsJ2noDX1YiWFZ0lvr1DHHuOh5wBpw3QT8fgsdx5xnOwSAvQbb2xgblO/A\n2O6o7UvvkTvZF/SpOkC6xigFL/wKOFOEh5hPliZ3aCQZlC+sE4nFndfXpgq0\nq8iYpZG2rGR6E2MurQsfH2SKaOvlWwvVJN/gHHsWKMEdIY0R8yI/xSrwEi1o\ns+BzcerJZsoH51aYuhAR4tHWNTklsrEaecGLjTFvE965IEtT0ETpjIepiAF3\nN/3lj/E4R+hrBCYECWXNFEVvqSR+ymfL6Cbbh7SL15TeS+Ci5yefnio7SU7e\njz0e\r\n=8OuQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.d4e16a6c4.0","@material/tokens":"13.0.0-canary.d4e16a6c4.0","@material/animation":"13.0.0-canary.d4e16a6c4.0","@material/elevation":"13.0.0-canary.d4e16a6c4.0","@material/typography":"13.0.0-canary.d4e16a6c4.0","@material/touch-target":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.d4e16a6c4.0_1631743208455_0.9130632897912492","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/fab","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38c46b974cb6b30a13ed5438a1c779fd6e223c8a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.65125b3a6.0.tgz","fileCount":23,"integrity":"sha512-yVUFsxn+ngQ5ZvY9Bi2HaTgHUhpQNKx4qDrSwd3dPlSOXFIlM99qlFBDqm6xSOY/fLSLYSpUO5/jjsrPvVdMcA==","signatures":[{"sig":"MEYCIQCfZ8urHWj5V+FZtJZvH2AbDGQWYzbYYImuDkQhTu1RwgIhALLjRsAyYyvapcf20Gy43b5DClgpcrw+AYzffJUriLnM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7SgCRA9TVsSAnZWagAA7jsP/igt3P8W+rVwTKldkK5I\nIDXBGwQ3DqmrxMrp8CMYSv9hWiH/4GXSkGv8TpdYS8M0Mzw7lnb7dS2PkiDC\nGuePVZLkN7ob5pOPXp6rOxqSTALBPLBVH1u0OeyTnq3067IM3FNcTqBQSOiI\npG4oH4O26cykFD6CyRKcUFaSWv83iXJtGLj7+94WvklW2ErClK9b44/h50T7\nA81GsNRBB6ffHsM2TgX+vEW7tmdilotbfVCd/xMDbK9nCx/cbzxpNqeFNsVx\ntj28I+RzFEBZ1trzncEPkKEH8Cia3Ufb5YzXStZ5nFiTfOcWsvXolXo9qqcM\nzD7L8F6WBokl3NWyEpYdO0Y093NeRpfZt/20bVn9pRCKxBloN690pkEAWIli\nQClk9z7/25Dejje8HxrfDHYNUtp0E9uzEPwa551h3/tsCZOONzt1y1pxAjeK\nicOwuG7J8OYymhnRvaQm+oC0YYqubGbg3ZdwiAjoEQOYSsTuCkEc9Z5cWw+r\nBut3VEOyhbhO+U+aamls0Gy9A4l5M0cUZLgYQ+9JVNjDbe3KugVeG9mYKUh5\nnVAErHJ4nBu7V5nO1a3S3y0HsLNEWIOpO7lkGr8k6Rfd6hi9Vk9RlIpobcTm\nqt21x9gvfWdR/l86oERQVc3OqYOIJNM/axQLiwDUFGQxihINb7SqmsesofNB\nVvCE\r\n=eWsN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.65125b3a6.0","@material/tokens":"13.0.0-canary.65125b3a6.0","@material/animation":"13.0.0-canary.65125b3a6.0","@material/elevation":"13.0.0-canary.65125b3a6.0","@material/typography":"13.0.0-canary.65125b3a6.0","@material/touch-target":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.65125b3a6.0_1631827104747_0.30474381548358354","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/fab","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.80a583365.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f23e4c5a84767574d8d93d85809caca9449e49c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.80a583365.0.tgz","fileCount":23,"integrity":"sha512-IM0/r2kQt0vSB9ucmXVDveUQjCXqHooBCtQBaU7ee4y0pEVlzu0NIfc7/qEhJS/ap7RHxub8TI+rdmNOsgFMfA==","signatures":[{"sig":"MEUCIEwXaguMkFvvbLic3rFsedF4SCDCjSrxz9cNuq5W86mOAiEA4VYA0/Wdd9wq7msEmxcPqSkfv8o42jucRUglqYs3MnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405004},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.80a583365.0","@material/rtl":"13.0.0-canary.80a583365.0","@material/shape":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/ripple":"13.0.0-canary.80a583365.0","@material/tokens":"13.0.0-canary.80a583365.0","@material/animation":"13.0.0-canary.80a583365.0","@material/elevation":"13.0.0-canary.80a583365.0","@material/typography":"13.0.0-canary.80a583365.0","@material/touch-target":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.80a583365.0_1631910989022_0.11371620422891571","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/fab","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.83900936a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60e352ed8528b793440f8212d294636df2465162","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.83900936a.0.tgz","fileCount":23,"integrity":"sha512-o2I93/8RELs8hINyROgUOrgGNZlboni3aPuJHjh9/nJyTAYDfQ4sFcHdnR5cq9bvYUkpA7H8VxEWLrpAm50y1w==","signatures":[{"sig":"MEUCIHHQYfaLMwupOZHnmk9FkQBfKI0aCsj4D1psZVxBgZusAiEAmNacUsNP4UQ0Vo8s5QToAf3oAraDzJoB4QcZXmeK8NQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405004},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83900936a.0","@material/rtl":"13.0.0-canary.83900936a.0","@material/shape":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/ripple":"13.0.0-canary.83900936a.0","@material/tokens":"13.0.0-canary.83900936a.0","@material/animation":"13.0.0-canary.83900936a.0","@material/elevation":"13.0.0-canary.83900936a.0","@material/typography":"13.0.0-canary.83900936a.0","@material/touch-target":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.83900936a.0_1631921098469_0.4512740751302098","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/fab","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2654c1b69f8fa89da97ee2717ee270853536db45","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.860ad06a1.0.tgz","fileCount":23,"integrity":"sha512-sfPxjSit/oN6pTNO6/1DHVsYxQEbTLECKyC0oMGJb5sReaOMNW1i5Hn5XsvLDNA1p6rsh/I17S+Xha6P/WM9Kw==","signatures":[{"sig":"MEYCIQDipyRmVuVPKbEnh29RRYtYQY3TEbxyljKVYdhl5poNFAIhAKrm5xiVfqwPko1TMpKl4SUdMjuKat3nl5+qxwWMwI5M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405004},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.860ad06a1.0","@material/rtl":"13.0.0-canary.860ad06a1.0","@material/shape":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/ripple":"13.0.0-canary.860ad06a1.0","@material/tokens":"13.0.0-canary.860ad06a1.0","@material/animation":"13.0.0-canary.860ad06a1.0","@material/elevation":"13.0.0-canary.860ad06a1.0","@material/typography":"13.0.0-canary.860ad06a1.0","@material/touch-target":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.860ad06a1.0_1631921796836_0.2689662991140045","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/fab","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f627812e684359e8788a7961bc5547fc3013eae","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.3b8d4429e.0.tgz","fileCount":23,"integrity":"sha512-4DxDjowb/ISxzxTXxGZaRZDfZGxsjtfARID027Y53LzWs6Yyy2R8Hc/Aqlp8z6KKy70O7nHqyxunIfBiNJzkLA==","signatures":[{"sig":"MEUCIHO1dOMSDBqSLjw5yPe9K6w6+GizyobnKLe9Q8wiDfa1AiEAqG+Ke/e8w+yaKUsHDNEz5jzYxCMQTNPcOh8TsWqRl5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405004},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b8d4429e.0","@material/rtl":"13.0.0-canary.3b8d4429e.0","@material/shape":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/ripple":"13.0.0-canary.3b8d4429e.0","@material/tokens":"13.0.0-canary.3b8d4429e.0","@material/animation":"13.0.0-canary.3b8d4429e.0","@material/elevation":"13.0.0-canary.3b8d4429e.0","@material/typography":"13.0.0-canary.3b8d4429e.0","@material/touch-target":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.3b8d4429e.0_1632160093162_0.2028786374937983","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/fab","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f02c0d27a144b4fd4f9917e9f869ecad8a08a33c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.2da3606b9.0.tgz","fileCount":23,"integrity":"sha512-sZRXuLE5uu3Yj5rcGZQU45g2PQFHOWCzzQhI/5MuunMkf6VTpd3QE2A4ui6Uj8qOvxOTmJjwBlB+H6ffft2UBw==","signatures":[{"sig":"MEQCIBSqYW6L+AWKVw+uf/QKmy/qWFo8a8pjl2CMjEMzLC3OAiA5H7xpV0tTJ9UNmXTJB8Fwipz8pTyA6SninewNq4At/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405094},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2da3606b9.0","@material/rtl":"13.0.0-canary.2da3606b9.0","@material/shape":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/ripple":"13.0.0-canary.2da3606b9.0","@material/tokens":"13.0.0-canary.2da3606b9.0","@material/animation":"13.0.0-canary.2da3606b9.0","@material/elevation":"13.0.0-canary.2da3606b9.0","@material/typography":"13.0.0-canary.2da3606b9.0","@material/touch-target":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.2da3606b9.0_1632166701022_0.25479572363757663","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/fab","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9393b2fcf39451effef526511f937707aacb5b22","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.e8c598d1e.0.tgz","fileCount":23,"integrity":"sha512-HYbShruo9kVtwN6cwg3M0z439Zmgl+cBliVDXKi7nb7TboyaPgfY0U+9RNb5CN7YtoGzBCTPSoZ1dqLbdDniKg==","signatures":[{"sig":"MEYCIQC5e0mY9s8/sNad/VGb79NkU0F2E9btyqzOef616bzJVwIhAI4oqV/K4Frkv/b/duYqjxk8nXUEgb05fNVgh47xBnge","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405463},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8c598d1e.0","@material/rtl":"13.0.0-canary.e8c598d1e.0","@material/shape":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/ripple":"13.0.0-canary.e8c598d1e.0","@material/tokens":"13.0.0-canary.e8c598d1e.0","@material/animation":"13.0.0-canary.e8c598d1e.0","@material/elevation":"13.0.0-canary.e8c598d1e.0","@material/typography":"13.0.0-canary.e8c598d1e.0","@material/touch-target":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.e8c598d1e.0_1632172361014_0.1759078055801191","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/fab","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3db3efc743d019523e04a18192e5e1c3e6548869","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.1340ee9f7.0.tgz","fileCount":23,"integrity":"sha512-j2HwKvAIpwixm+2Tl59H8roK1kquse+VqSWjKZjUs+m9lBiAT7zUGAq3psxyeTYSgtPnr0Y7nOzft4wRv25rLg==","signatures":[{"sig":"MEQCIG9py7P6JKWsPTimtfhmRwfGQ/wg6BMN7OrVvCEpgSRVAiAUMZrDHXajBkoHtSVpMzJSE0X1hmtwz7YBl321pLbwPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405495},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1340ee9f7.0","@material/rtl":"13.0.0-canary.1340ee9f7.0","@material/shape":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/ripple":"13.0.0-canary.1340ee9f7.0","@material/tokens":"13.0.0-canary.1340ee9f7.0","@material/animation":"13.0.0-canary.1340ee9f7.0","@material/elevation":"13.0.0-canary.1340ee9f7.0","@material/typography":"13.0.0-canary.1340ee9f7.0","@material/touch-target":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.1340ee9f7.0_1632333513975_0.06619313450825093","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/fab","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.65084baff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"599ddb8b67468e761ae4da1cebe3fe29741ea8f7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.65084baff.0.tgz","fileCount":23,"integrity":"sha512-jOWiGaWslqX09iWSe4RSp+vP5TmAQtib0KR7LfzZTLPOVRcOkpwj93x1ojG6nCCjS05L6XU3WoRxiexRlh7I+Q==","signatures":[{"sig":"MEUCIBkqIDi5/X6KJ5P7nfbwL1AoSfUwaNzO38rbGDzTwWBBAiEAo8IPrWU6ade6hntgVf99fpWrZDYFsLBKJycFrMh4YR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405495},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65084baff.0","@material/rtl":"13.0.0-canary.65084baff.0","@material/shape":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/ripple":"13.0.0-canary.65084baff.0","@material/tokens":"13.0.0-canary.65084baff.0","@material/animation":"13.0.0-canary.65084baff.0","@material/elevation":"13.0.0-canary.65084baff.0","@material/typography":"13.0.0-canary.65084baff.0","@material/touch-target":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.65084baff.0_1632432368675_0.023666794037261907","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/fab","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd92c46c89207f742ab745159b7000c0737cb057","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":23,"integrity":"sha512-azBfeJTs/aAr6aEEqhi49+e4tVAA6z9cgJZ4kS/GrYJb/vVo2X/pj6IUlihEr0lupyhrv6hECUQQP0LwTlVNhg==","signatures":[{"sig":"MEYCIQCWsbhrWwk5VZtoRnpLnPCBzyLVXvjI24oTXtuOF+VlrQIhANsx35nE1WMnoLI89OsOn3XdCloVa5n6DQJPlWu5F496","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405495},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"13.0.0-canary.c79aa0cdd.0","@material/tokens":"13.0.0-canary.c79aa0cdd.0","@material/animation":"13.0.0-canary.c79aa0cdd.0","@material/elevation":"13.0.0-canary.c79aa0cdd.0","@material/typography":"13.0.0-canary.c79aa0cdd.0","@material/touch-target":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0-canary.c79aa0cdd.0_1632490956132_0.10401255506596341","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/fab","version":"13.0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@13.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa8cf548b7c90a592760569385aff3a816c59d2d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-13.0.0.tgz","fileCount":22,"integrity":"sha512-qOi+XWEZWUR5T961UjSorgqm5VaanuZtRN3nsrKqHH1p0L8fYRc3qkGIChlaY9p7BcOYMCynXJzT+MfELVrcwA==","signatures":[{"sig":"MEUCICCH4XyJ6YTDIz2rVqaXlFItrlrSZ7/7L6OG2ca9OTbQAiEA7efpixV0CWHS1kCEV+2I6Vvdl+EcLpZrkdVmU5d+XVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403693},"gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"^13.0.0","@material/rtl":"^13.0.0","@material/shape":"^13.0.0","@material/theme":"^13.0.0","@material/ripple":"^13.0.0","@material/tokens":"^13.0.0","@material/animation":"^13.0.0","@material/elevation":"^13.0.0","@material/typography":"^13.0.0","@material/touch-target":"^13.0.0","@material/feature-targeting":"^13.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_13.0.0_1632512790636_0.7832786262865683","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/fab","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.198431fcd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3874082b5723f373428ae2a3042d8f76af8d2be8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.198431fcd.0.tgz","fileCount":23,"integrity":"sha512-VauqBoC9G/E6Olzh/hXQUBm9y7Nc68zMOVIxOzkCJhtI5uEBEGtiU7yA0lTpoq27nA+3LdJT/9cBOdF2vFkNxA==","signatures":[{"sig":"MEQCIDnGwdUxVc3rpidVSvbJK1Iow2dV7EZQjBQJAsw0KjNRAiBrB6IXNlYO1ss6c7J1rIiLJnRke2d7m8M8vpVymMaLqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405495},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.198431fcd.0","@material/rtl":"14.0.0-canary.198431fcd.0","@material/shape":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/ripple":"14.0.0-canary.198431fcd.0","@material/tokens":"14.0.0-canary.198431fcd.0","@material/animation":"14.0.0-canary.198431fcd.0","@material/elevation":"14.0.0-canary.198431fcd.0","@material/typography":"14.0.0-canary.198431fcd.0","@material/touch-target":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.198431fcd.0_1632512835160_0.3907825362810531","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/fab","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdeaabe045007d0bbfbc23cfaced55fba8d3fd18","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":23,"integrity":"sha512-fDPjTwIGb4uf66S1Z6XVtFeyCaNPb1Hy1VJbELMWSsRXLzH/kVUdyaRExh3/wbWc43xPli3wjnYGQzpISQDneQ==","signatures":[{"sig":"MEUCIQCcqoeihe1bXUiDEw/MwwwdBaxC2930Fyi11uhue/nSVwIgfdJpEaPtqRA9YfAwLcX3//4iYjfcikxfWzkmV81altc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404762},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9a02b6ef8.0","@material/rtl":"14.0.0-canary.9a02b6ef8.0","@material/shape":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/ripple":"14.0.0-canary.9a02b6ef8.0","@material/tokens":"14.0.0-canary.9a02b6ef8.0","@material/animation":"14.0.0-canary.9a02b6ef8.0","@material/elevation":"14.0.0-canary.9a02b6ef8.0","@material/typography":"14.0.0-canary.9a02b6ef8.0","@material/touch-target":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.9a02b6ef8.0_1632575500638_0.9543536384753701","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/fab","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f53a88059b42eaaeaaaa18cdea3c84e161e7ea93","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.758ce31d9.0.tgz","fileCount":23,"integrity":"sha512-rinUuGXfE8HitMkkG1OAqfGFxFF9ekN4JwcI6rMlSYVA7j/yzpBd/NnTBTeXz01g5iX+77w33tg6Am3jsGYwVg==","signatures":[{"sig":"MEYCIQCzoXLwahrX0+URtsmxLiLZqBJgAnFfHrXLXuCA0GNtDgIhAOvMgxQCXr1EY7DXkVJEXThoXVMKcFfcW50bdoHKNdKX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404762},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.758ce31d9.0","@material/rtl":"14.0.0-canary.758ce31d9.0","@material/shape":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/ripple":"14.0.0-canary.758ce31d9.0","@material/tokens":"14.0.0-canary.758ce31d9.0","@material/animation":"14.0.0-canary.758ce31d9.0","@material/elevation":"14.0.0-canary.758ce31d9.0","@material/typography":"14.0.0-canary.758ce31d9.0","@material/touch-target":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.758ce31d9.0_1632763798632_0.2350476979165137","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/fab","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5f2eb1ee3b7ef44c32d946a8cd610c56aee1699","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.86b50ef74.0.tgz","fileCount":23,"integrity":"sha512-b2C2IOUHh9BZ87tFaEiL7OEyTJJcix8Pqp4mkIA7IshQ03hnhgKUHpB5tEA6uOFjQfxrabumues2RA+Gv8CuUA==","signatures":[{"sig":"MEUCIQCqpJnP1DNBb5I8e46/rbx6Z0hojKT3Q7ogdbK1SC09ZAIgEMjzEId8RxRoXuamK+djXu0lCgCTbAsgGR0DCk6jwAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404762},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.86b50ef74.0","@material/tokens":"14.0.0-canary.86b50ef74.0","@material/animation":"14.0.0-canary.86b50ef74.0","@material/elevation":"14.0.0-canary.86b50ef74.0","@material/typography":"14.0.0-canary.86b50ef74.0","@material/touch-target":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.86b50ef74.0_1632851024097_0.14299893761492566","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/fab","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6ca16eb66d04a68a628bc68946d6acd37d3c249","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.b2fe3528b.0.tgz","fileCount":23,"integrity":"sha512-5OoyRnGL0ERYUk7eqWnmZhZX50skhunDY6s44+fg1adphqIatxjANiWgIi9HJpHAyS0bUA3QxUvmhq5VRBZnmQ==","signatures":[{"sig":"MEUCIQDsPIl09X1VceU7XEK+st4/4jDMyTOO28tPJW91K6lGxwIgHwI4s0mJOkd16V2kqOVmM4s/Do8SgJ/4/qzJHZfVF64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404762},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2fe3528b.0","@material/rtl":"14.0.0-canary.b2fe3528b.0","@material/shape":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/ripple":"14.0.0-canary.b2fe3528b.0","@material/tokens":"14.0.0-canary.b2fe3528b.0","@material/animation":"14.0.0-canary.b2fe3528b.0","@material/elevation":"14.0.0-canary.b2fe3528b.0","@material/typography":"14.0.0-canary.b2fe3528b.0","@material/touch-target":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.b2fe3528b.0_1632956254066_0.7438470806773765","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/fab","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.586e740dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f01ee532a381660388721a87ab89b60d0cae2be4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.586e740dd.0.tgz","fileCount":23,"integrity":"sha512-IyLThLF08I8UjPDRKPaKJ2DuLgAncmuC+9MjTrkIFDM2gV/WqTslTAwUzrtNGSp1lsIucwHt6AcCRicwET7Veg==","signatures":[{"sig":"MEYCIQCLRP2My2sIvlnObEzlp29BtQYhPnL4BU3nvlIH//KZ6AIhALVBnlZxF2ZJV5ZGVW05wRgRxM7xgn49ko/nHPOACmAV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404762},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.586e740dd.0","@material/tokens":"14.0.0-canary.586e740dd.0","@material/animation":"14.0.0-canary.586e740dd.0","@material/elevation":"14.0.0-canary.586e740dd.0","@material/typography":"14.0.0-canary.586e740dd.0","@material/touch-target":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.586e740dd.0_1633019518027_0.8960688630404998","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/fab","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc34a3d16303dcb0e3ec905b2c09491907243a1e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.2ac92d766.0.tgz","fileCount":23,"integrity":"sha512-r5WYTkJdcJnWsIzPUnFn0INfqjkLM2Hqx7X9c45+vE2cVb8TYzakI9hpfm/mtWJgNthdM2Ww/2mCTo7Ec6urbQ==","signatures":[{"sig":"MEYCIQCFffWIURxNpJWqIZKsvj8zweaSJf/WLdgis3iXcPhf6QIhAPUSPnmD4/gVMZ6ttPAlKDW4MHLs0gmpToGc+OBX7vRV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404762},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.2ac92d766.0","@material/rtl":"14.0.0-canary.2ac92d766.0","@material/shape":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/ripple":"14.0.0-canary.2ac92d766.0","@material/tokens":"14.0.0-canary.2ac92d766.0","@material/animation":"14.0.0-canary.2ac92d766.0","@material/elevation":"14.0.0-canary.2ac92d766.0","@material/typography":"14.0.0-canary.2ac92d766.0","@material/touch-target":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.2ac92d766.0_1633462150937_0.04879556025308607","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/fab","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81bc8d0c99660098921c8be7f1018cb713161abb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.353ca7e9f.0.tgz","fileCount":23,"integrity":"sha512-MEe7XcC/ANobW99IWASeyF3ZGEP/BjtOhTNDIzfRhtqIpXK+rEJow/ea7MWRwgRQ96QtxGdbqZnVe1OUB9P/Tw==","signatures":[{"sig":"MEUCIQC37AX7YIRUDSUiRva2zocVd7INUGxDJn0ersUGK5CVdQIgJcMkUmx3La33HfNc9+O12fMOhzsjZq69JuU8vF9aEdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404762},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.353ca7e9f.0","@material/tokens":"14.0.0-canary.353ca7e9f.0","@material/animation":"14.0.0-canary.353ca7e9f.0","@material/elevation":"14.0.0-canary.353ca7e9f.0","@material/typography":"14.0.0-canary.353ca7e9f.0","@material/touch-target":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.353ca7e9f.0_1633718855211_0.8544401212780941","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/fab","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"774412fe62cea30bc811523ed81f42014fc2440a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.c78ff0429.0.tgz","fileCount":23,"integrity":"sha512-r5UiehjHuf+Q30YLiBeinymWCzUV8QmbhGi6vB+Dm6QsOEIqsfBhezZnxdGJ4VROk+uhNZbjJnfYJ1/cxW49yA==","signatures":[{"sig":"MEUCIC7un9XxQw9wb9gYLSH8d3SRvlc68D8c5bB1PJUSs985AiEAixvciNnf+spGuuW9c4TOdhQyUReFWBpP0SSLdeKC+dY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c78ff0429.0","@material/rtl":"14.0.0-canary.c78ff0429.0","@material/shape":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/ripple":"14.0.0-canary.c78ff0429.0","@material/tokens":"14.0.0-canary.c78ff0429.0","@material/animation":"14.0.0-canary.c78ff0429.0","@material/elevation":"14.0.0-canary.c78ff0429.0","@material/typography":"14.0.0-canary.c78ff0429.0","@material/touch-target":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.c78ff0429.0_1633972971486_0.6255401504065148","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/fab","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.261f2db59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4640dd28ad0c27c61e2dae822c9ef58c621a084","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.261f2db59.0.tgz","fileCount":23,"integrity":"sha512-dMUV+V+/QnpYySPkZXURXCD2TPn4VI8obef1NPpTr8L/WgaceMCxIu3phQin6tWmtfx/GaZIwQAv4plXcbeIHg==","signatures":[{"sig":"MEUCIQC7ORULwLFcA4ufEr8nstfTr3IyoPcMuIqjgrUI4mllAAIgWSl4vEPXeVT/aPuP+GXfxaDd24g1BdoFJCiMeTKyiJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.261f2db59.0","@material/tokens":"14.0.0-canary.261f2db59.0","@material/animation":"14.0.0-canary.261f2db59.0","@material/elevation":"14.0.0-canary.261f2db59.0","@material/typography":"14.0.0-canary.261f2db59.0","@material/touch-target":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.261f2db59.0_1634749219200_0.6170617578065567","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/fab","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"510f225177027e5ae86afd20bb6a9950c3739191","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.9803d2dc1.0.tgz","fileCount":23,"integrity":"sha512-ak8eg0Hz8XvCzdrUhNpmqa5PehMfAEownlRmmXs0zlNUXmqLzWI0+pr7/83YqXnfN0FFpeIBwGFnc9BkwNkCaQ==","signatures":[{"sig":"MEUCIQDNujPD4qW0a2RXvlmWB372eNtGt5Cm96KhGPYbfNznugIgChsVCXDBEyxwmlOemKRBV44lonphpMelu/xdbTnjn1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.9803d2dc1.0","@material/tokens":"14.0.0-canary.9803d2dc1.0","@material/animation":"14.0.0-canary.9803d2dc1.0","@material/elevation":"14.0.0-canary.9803d2dc1.0","@material/typography":"14.0.0-canary.9803d2dc1.0","@material/touch-target":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.9803d2dc1.0_1634757751134_0.9388874121517055","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/fab","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.348665978.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eee16c106d6c62b7d8cbeea7442b94394280166a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.348665978.0.tgz","fileCount":23,"integrity":"sha512-nF00y6nQtr4LT9Dsh8sa787KcNhHlIo1bNm5cpUXRpSR5+BmMzcd7D8EyFxXa0ziUzQCgQ3xNH+YTQU56cblpQ==","signatures":[{"sig":"MEYCIQCJ/KpMbrngB3fuh44PVtc+kogqj4fwFtYQs3ebQf0eTAIhAMN+uF/lU7v3G0EPUbY+01KI7agsnVu7hmOcDOXrbKsa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.348665978.0","@material/rtl":"14.0.0-canary.348665978.0","@material/shape":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/ripple":"14.0.0-canary.348665978.0","@material/tokens":"14.0.0-canary.348665978.0","@material/animation":"14.0.0-canary.348665978.0","@material/elevation":"14.0.0-canary.348665978.0","@material/typography":"14.0.0-canary.348665978.0","@material/touch-target":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.348665978.0_1634827885691_0.005934345039372957","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/fab","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74e4dd603515c0afda63ba765b2929bd7705789b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.b2b979a8a.0.tgz","fileCount":23,"integrity":"sha512-+eIhBJ7Z5RCCgDEgjWPGQx0S2v3i3c98OccZJZzxxr1e1rSGOpqMQwzTj2vdtmfTbFqLrjC9FsWe6LcNLbe5Yg==","signatures":[{"sig":"MEYCIQDDsTtGsbmkZsUqjM9DnapcLfdL9UH+MzSZSgJNN4gUngIhAO85hncSIHniW3hLVDTZl+RUJSbtRFpYI7snbqi8LZao","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2b979a8a.0","@material/rtl":"14.0.0-canary.b2b979a8a.0","@material/shape":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/ripple":"14.0.0-canary.b2b979a8a.0","@material/tokens":"14.0.0-canary.b2b979a8a.0","@material/animation":"14.0.0-canary.b2b979a8a.0","@material/elevation":"14.0.0-canary.b2b979a8a.0","@material/typography":"14.0.0-canary.b2b979a8a.0","@material/touch-target":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.b2b979a8a.0_1635433980472_0.23472178454325743","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/fab","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2d5f057250f41539cc10c7ddcc62576e0b3f700","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":23,"integrity":"sha512-VV29vzjWbOOo+fsUyZt40jjZlGVUHLVhxGc9uyo8dljIoN4WAybgWEenVMQKOrsD03+oD3LCXe9HK6aqom3NcQ==","signatures":[{"sig":"MEQCIDqhxzRl5/OzjJ2f8aH5vWt3aBFlbdNE7SE0FcS+5IYLAiAlltOcfxCFnnbLeRdq2ZdOLOqJJeBYI3z1fwL3/6cupg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1af7c1c4a.0","@material/rtl":"14.0.0-canary.1af7c1c4a.0","@material/shape":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/ripple":"14.0.0-canary.1af7c1c4a.0","@material/tokens":"14.0.0-canary.1af7c1c4a.0","@material/animation":"14.0.0-canary.1af7c1c4a.0","@material/elevation":"14.0.0-canary.1af7c1c4a.0","@material/typography":"14.0.0-canary.1af7c1c4a.0","@material/touch-target":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.1af7c1c4a.0_1635443610625_0.11787874674496401","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/fab","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab3e9b1161a5a112d782de68d18ba533f2601693","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.4afd353cd.0.tgz","fileCount":23,"integrity":"sha512-oqHUm+yQL8uS+rSIxU3K1vTdfA6SQcGpw1Ykh6gvO9zVVD2Y/e4fhzAFy9nMvQPV30XmEoviyG0mt9BlXeVE5Q==","signatures":[{"sig":"MEQCIARNQvUaDxQGf4xZ9nGOOeK8+Ee/VIuhOaUFTpgkHjExAiBMe9wIbbVBIeMEYgCTB1ed4l01E1bLwBvHU3PdT0Nulw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4afd353cd.0","@material/rtl":"14.0.0-canary.4afd353cd.0","@material/shape":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/ripple":"14.0.0-canary.4afd353cd.0","@material/tokens":"14.0.0-canary.4afd353cd.0","@material/animation":"14.0.0-canary.4afd353cd.0","@material/elevation":"14.0.0-canary.4afd353cd.0","@material/typography":"14.0.0-canary.4afd353cd.0","@material/touch-target":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.4afd353cd.0_1635519733918_0.403707750121326","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/fab","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.a986df922.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e690beefafdfc3f11266b8b25ed022a09a4bfe0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.a986df922.0.tgz","fileCount":23,"integrity":"sha512-DVDC1nBxKjKmo00A+LP0+yvop+BYrW4a3iUjQd6AWzLQB1vEizWZ+mlfn9td67cZNt5W+6c3sllyyyb+Ge+rXQ==","signatures":[{"sig":"MEYCIQD8S8vhkNTQ0AY7mb8co9v8bJzwis+uQlcxuP3nfb+YhQIhAI5nMaqSSP1xJ6xiejgUJlbFlpRt9OyhYNbWKvmhkGBa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.a986df922.0","@material/tokens":"14.0.0-canary.a986df922.0","@material/animation":"14.0.0-canary.a986df922.0","@material/elevation":"14.0.0-canary.a986df922.0","@material/typography":"14.0.0-canary.a986df922.0","@material/touch-target":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.a986df922.0_1635543340863_0.5454709655995331","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/fab","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ddb591e6f91cbd9eff3085fb4e6a6402297d647","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.c3cdff07b.0.tgz","fileCount":23,"integrity":"sha512-tdhVYFsoK8hiYmzwOYwT6bRZ4NrBVICMv+tLu6k/3Wg/BaT1u105jZ6ntceA1eh02sSajKNdj76JfQeiXDS+Eg==","signatures":[{"sig":"MEUCIFzb8X025cvw988pNYi29N2L1lzHZGsgcXyf44l4tS55AiEAgqE2NoEpDXra56X9F+w1SH9V3srBG2O4uDJogysgcTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c3cdff07b.0","@material/rtl":"14.0.0-canary.c3cdff07b.0","@material/shape":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/ripple":"14.0.0-canary.c3cdff07b.0","@material/tokens":"14.0.0-canary.c3cdff07b.0","@material/animation":"14.0.0-canary.c3cdff07b.0","@material/elevation":"14.0.0-canary.c3cdff07b.0","@material/typography":"14.0.0-canary.c3cdff07b.0","@material/touch-target":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.c3cdff07b.0_1636484795573_0.2663298374104339","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/fab","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.468392606.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"606dcf4b16d764a1b729e58ddf1c8930f8f5a73e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.468392606.0.tgz","fileCount":23,"integrity":"sha512-7SCqJPMl1OLGPN6AsCBSpYgwsNMC9SGj80SHMvjSyauar5A+B7uj2FxbSOw10/di4TRccP0yHrjQNz2XUhKQhQ==","signatures":[{"sig":"MEUCIG9oNGuOiF997sRuMGkrzFMfb6/EUqUO0hAogg87uM99AiEA+NgsLxOWiHXNszXHNn24fW6awzuVY8l460gSKX4N7gQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.468392606.0","@material/rtl":"14.0.0-canary.468392606.0","@material/shape":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/ripple":"14.0.0-canary.468392606.0","@material/tokens":"14.0.0-canary.468392606.0","@material/animation":"14.0.0-canary.468392606.0","@material/elevation":"14.0.0-canary.468392606.0","@material/typography":"14.0.0-canary.468392606.0","@material/touch-target":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.468392606.0_1636659648705_0.9852997080669532","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/fab","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.828f9803b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2bd07d5e74e18ec150488cefb34e3f9ab17155b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.828f9803b.0.tgz","fileCount":23,"integrity":"sha512-+8Evq7/pRgYrDp3wHSUfDV3LB7pUvXxSd+R0TOeRT9G77o1MWTPUc59IM9emE5V3DfijvXQ1Xhwb0aKYCrbfng==","signatures":[{"sig":"MEUCIQCzMUZQD5dJSLeObFuZnz7DGDB4KUTrOL7sB8R0RnGKYQIgWbUD4C1Sro2U+J7jPmcvi+nFic7KHKGklRjAJDdCI1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.828f9803b.0","@material/rtl":"14.0.0-canary.828f9803b.0","@material/shape":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/ripple":"14.0.0-canary.828f9803b.0","@material/tokens":"14.0.0-canary.828f9803b.0","@material/animation":"14.0.0-canary.828f9803b.0","@material/elevation":"14.0.0-canary.828f9803b.0","@material/typography":"14.0.0-canary.828f9803b.0","@material/touch-target":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.828f9803b.0_1636660287583_0.6522089403159976","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/fab","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.8795cba87.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c9a7ae97a610fb0680e880b2685dfd57a616e2c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.8795cba87.0.tgz","fileCount":23,"integrity":"sha512-m8Iyv/YNA5WYRQlTu5+NhkBAIDOFXROCXkfaYNw8P6u2646nlFGLmdYmNGfqSb2aCNQKx+VOQDByodz84BE9wQ==","signatures":[{"sig":"MEYCIQClRApCyrKmqt3XgbJgwUQX9ULW4cnGGjfzfefNJmak5gIhAL4wxWQvzHLTbUQbeD0Ax2yUZzKliwZ4kPzUL0kedgT9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8795cba87.0","@material/rtl":"14.0.0-canary.8795cba87.0","@material/shape":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/ripple":"14.0.0-canary.8795cba87.0","@material/tokens":"14.0.0-canary.8795cba87.0","@material/animation":"14.0.0-canary.8795cba87.0","@material/elevation":"14.0.0-canary.8795cba87.0","@material/typography":"14.0.0-canary.8795cba87.0","@material/touch-target":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.8795cba87.0_1636660644653_0.3253991658072892","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/fab","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5fc1ea1aab20f507e3ffc2a69d46df10b6c3753","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.cd7f8cace.0.tgz","fileCount":23,"integrity":"sha512-wCzscYRIZNqlUG+l03pk/AFvfiD1csFillPTFQ2Wto4aMRpFR9KNnGmkzrbBBSdmV4bi+9xi3UvsZXFL78a+zA==","signatures":[{"sig":"MEQCH2kZu3fVRHlI6jlYqFJCGHO2UIeSv24ks5PMotDZnZ4CIQC+ae+weNVZIgegkxzWPUdyu28MK8GEVblG8RLfSFerfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cd7f8cace.0","@material/rtl":"14.0.0-canary.cd7f8cace.0","@material/shape":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/ripple":"14.0.0-canary.cd7f8cace.0","@material/tokens":"14.0.0-canary.cd7f8cace.0","@material/animation":"14.0.0-canary.cd7f8cace.0","@material/elevation":"14.0.0-canary.cd7f8cace.0","@material/typography":"14.0.0-canary.cd7f8cace.0","@material/touch-target":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.cd7f8cace.0_1636660750592_0.5416656482352504","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/fab","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.207230eb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba7c9c9ec64e61e200c3a97bebaff9eba47782fa","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.207230eb8.0.tgz","fileCount":23,"integrity":"sha512-fU7ijaNTKzHplSLF/gk0pA2fz2V5lq8kcLhGeFOs1y6TOaSkqb7iU/3vgNU+//Z5dhKqmh8t4KraffbL02J9tQ==","signatures":[{"sig":"MEUCIQDUzl/BSr0eeiE+0lG8XeXZncnPd7jZCnTmown2m9et4AIgIcxlYCDQb/t3gOWjZXVCc8gedO7p7hzM0H4k9o7w0VE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.207230eb8.0","@material/rtl":"14.0.0-canary.207230eb8.0","@material/shape":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/ripple":"14.0.0-canary.207230eb8.0","@material/tokens":"14.0.0-canary.207230eb8.0","@material/animation":"14.0.0-canary.207230eb8.0","@material/elevation":"14.0.0-canary.207230eb8.0","@material/typography":"14.0.0-canary.207230eb8.0","@material/touch-target":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.207230eb8.0_1636669511782_0.36333632812156935","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/fab","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c9dc9c6493c98db689d5abc8c09548132e5564b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.991fb99f7.0.tgz","fileCount":23,"integrity":"sha512-9KZTj15vz11wlDdv7aHHXOrVO6s2DmOiileyUJDT/X5bU50z8UJx/kDQZ2Bb6weep0pp4IJ+04oLRKfL+ebc8A==","signatures":[{"sig":"MEYCIQCUIDMOjCOli2vwXj0dVQwlpEAtrBOcwAoS9HGocRr/+AIhAPljB2aMUcImS9jAff0+Nu1/TpjPEb1XgjPUJX6lAJO7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.991fb99f7.0","@material/rtl":"14.0.0-canary.991fb99f7.0","@material/shape":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/ripple":"14.0.0-canary.991fb99f7.0","@material/tokens":"14.0.0-canary.991fb99f7.0","@material/animation":"14.0.0-canary.991fb99f7.0","@material/elevation":"14.0.0-canary.991fb99f7.0","@material/typography":"14.0.0-canary.991fb99f7.0","@material/touch-target":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.991fb99f7.0_1636670225506_0.7682317761803945","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/fab","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.15db4f164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"303e2cdf611be3f335c15cdc87959aa8d5f9a73c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.15db4f164.0.tgz","fileCount":23,"integrity":"sha512-E7kljnkjqasraQ4Qwh9sDj/ZElkTTyBhhJUlrRBADk0UCNTl+Zdzpvg9HiIzKes5FGUjXJNmr+DrMwYdpgeAhg==","signatures":[{"sig":"MEYCIQC1qVi0IIdO1sCyFsdhyiZeWqPh/HdEuctgwo49WysPMAIhAP2dYDW1dmHxvNYmw2DebSdynCYkr4+3FZktYR83ni/Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.15db4f164.0","@material/rtl":"14.0.0-canary.15db4f164.0","@material/shape":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/ripple":"14.0.0-canary.15db4f164.0","@material/tokens":"14.0.0-canary.15db4f164.0","@material/animation":"14.0.0-canary.15db4f164.0","@material/elevation":"14.0.0-canary.15db4f164.0","@material/typography":"14.0.0-canary.15db4f164.0","@material/touch-target":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.15db4f164.0_1636738227967_0.2407921967197666","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/fab","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9120c4de0ada1929e5e4630863680d86eb20df17","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":23,"integrity":"sha512-d92rJ199U1rZaAEri50K3DlVN0Q/Xq0HkF4L6lU2Nbj1wxhkbGsYu+WkAYtUqbFzzSBWfHASShyLUTX/fuJHIQ==","signatures":[{"sig":"MEUCIQDEv9eFPv57nhxpYK5sdgdY4ZTaataP+ru28W2B/TRAVwIgV3s8Ean3jpRFlHYLjQy/r28LHuO/rKfN98gDCnn/52E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fcad5a3c.0","@material/rtl":"14.0.0-canary.8fcad5a3c.0","@material/shape":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/ripple":"14.0.0-canary.8fcad5a3c.0","@material/tokens":"14.0.0-canary.8fcad5a3c.0","@material/animation":"14.0.0-canary.8fcad5a3c.0","@material/elevation":"14.0.0-canary.8fcad5a3c.0","@material/typography":"14.0.0-canary.8fcad5a3c.0","@material/touch-target":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.8fcad5a3c.0_1636744469175_0.8128450920166739","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/fab","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15b53e1693f44f32f13ea10fcccbfb1e53e38491","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.f81fb1d23.0.tgz","fileCount":23,"integrity":"sha512-Uj3rInXvzYOPYlCDeBxoTYwiid1NoamO98PlQL+re2/pY84xlNcSw0bQLR1igO/HoNKzHky3HM1j6DS/rv+hAw==","signatures":[{"sig":"MEUCIQCmiQmP96rKvbBgreDy3fxTkUQrGxKrrCFZXwBLSJTJXAIgd8KUsbYWdwCt185xxDCrVQ7C7WDgYEZBngDax+pIJ2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f81fb1d23.0","@material/rtl":"14.0.0-canary.f81fb1d23.0","@material/shape":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/ripple":"14.0.0-canary.f81fb1d23.0","@material/tokens":"14.0.0-canary.f81fb1d23.0","@material/animation":"14.0.0-canary.f81fb1d23.0","@material/elevation":"14.0.0-canary.f81fb1d23.0","@material/typography":"14.0.0-canary.f81fb1d23.0","@material/touch-target":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.f81fb1d23.0_1636756859104_0.5331753348048323","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/fab","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02bc1168147f7cedec23072125a04764b5b07ad5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.783f6fd5a.0.tgz","fileCount":23,"integrity":"sha512-0Mc5x0TQ+Wn7TNrsP/N25gvjgYoO2yw4pryjXXM+Bdb3RU7CdUQCE2sCa9ytahOT2EfbwQXsFy0Ig51dQMg59w==","signatures":[{"sig":"MEUCIGAl+LR0fyBvJvDNDitoRxiiW6i7rRRyhxkAy5sS3+c/AiEAoHcSz9BFqj51zC2+DGOD14n7rKMl7AQCg2D17+ElZ+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0bACRA9TVsSAnZWagAAdV4P/1vYA98OnMmoatNC+/O2\nQqzHYrlvXVQFsaDW10B3xq+J0s1KslbvtwUHGHWM9V3Bx1HIVEQgQmUF4w6Q\n5c++MishExdNoBkWE4ONIAqfYiIhihGJkMxScL1mWAqissBLO3/TArzBIvRf\nyvmFY8E6B3KiUQVKdPUDsOIUA/0aACE3Leth2DMPj+1ualbyi+G/uBg2qc3g\nuPdN+wLYjiv/HACOVR9OrP2DaGggsKKM00XBFcW9T/1L0LiAunXCRM59S9gf\njDaMkLP9cBSGSHtfyJMBVT4kj84E48kD9BTjcRjmwWMtvaWtj2ZuXCOFUV/z\nP8Vo8eaYJqBDtA+yVkaGa6dtXJRzLHFhY6RRVGThYKfDWpokUh3q9mG47OO/\n5dsEBNu8sKYrUQI7qs+Xh46j8rUb/OmzivPnb/v1h0+sgThzUi+FohKn+VMe\nVOZLbLHd5AcdfuhV5aEsj1swvlHuy31/6Y7mjTMS3+4lUaM986GGDjzOzsDQ\nBQZYiqYvY2rH3SBUKvZKlZ836Vm/D2z3CU030hsutSvoHLS8CGO8G+WHxV34\n1PcT8vlM+U8QIFtKLHwTnN6ceS5u6lzhYscdUzi3UlGmL4fUhb7Jv3CJamjL\nec1eaXL2vu06Mna7RkeMZJp53zfT2oEsEkkhaq4rcQB39wM9urbO8hE5Y0g2\nD8Tg\r\n=f03J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.783f6fd5a.0","@material/rtl":"14.0.0-canary.783f6fd5a.0","@material/shape":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/ripple":"14.0.0-canary.783f6fd5a.0","@material/tokens":"14.0.0-canary.783f6fd5a.0","@material/animation":"14.0.0-canary.783f6fd5a.0","@material/elevation":"14.0.0-canary.783f6fd5a.0","@material/typography":"14.0.0-canary.783f6fd5a.0","@material/touch-target":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.783f6fd5a.0_1637041856427_0.0656286577119698","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/fab","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"617031fe2fb1a152c451ab19069bfce991656496","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.d57ec74c7.0.tgz","fileCount":23,"integrity":"sha512-6f+AIJZ0FSo9ylWlNUjccquQcVnVSd2KDqQ9aPDKO6I4yUVl6HaShOrQyu68UcpeDYhlDjVuxV5r7MNSXr5mNw==","signatures":[{"sig":"MEUCIBwEWsZe+baNkuzKfnDJmfLOrLYFG9R7ucpTXYG77x3QAiEAqbbEjNSfLMZ2pFKs1OxUzYb/NWW29PuLwxKGDwKxbXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9mmCRA9TVsSAnZWagAAbL0QAJiiTTSNR30lbR0xqoi8\nQ19HL2tRThYMhUODuvRHyVJ5N1LvzocXGdpH8yH7bR7blVzBGd9GEibcsF3c\nB841Y2VwIeLtY0oz/Y+0aM8EVJRbKNTagLU9cqN+LfTIVzRd0yEeLkEyNIrP\n18q+BZN6CRt1z19jn86HbOQxwF9U4pnf9V7tqT5xij1FwBqkbguR6aX29Cqc\nWfPOkSsHX12m/Uj0LYPhRlBt3mQCmi/5ezYSYRkF6E/3w0fLQvvg19u+8rAL\nhy8OOOADlwb+QHIjM2WYaAo1u3EuxEXzu/9iPnjhwa1twDhzbNMhNp/fDekx\nYpid7g3/jHtASW5ZpKMC4KEQU/ZWF6WIV3xUbNSKVOufvlpbjU7q24NRKvGq\nQB2mgUjRdnzcSbKb3OeOnRsgisQeJ2H9aEFYNSTz5aVblzE/n7enqeGCbuCR\n/aTt38Q3OwcibMa9f6ShmUgTNUlt/1ExzBU6yGZSXCW4NMy442B+SAAXZhmA\njieZAQX9/2xKfveiY2Dz+0a3nMojTyf5o4jFbjZBRUO6iG82pX3ZBdACPjNO\nchPU3C0YkMlVHkS6pbsPquy5h0M64wGikA351SUh2c95Q5Upz8BLDBgREtMw\nMJyjVFcTg0u8wGUo92PCdJ1S/UwINp95RDlbH1E8LOEcJP1IE2kqDqmPHAL1\nmyUL\r\n=1qbu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.d57ec74c7.0","@material/rtl":"14.0.0-canary.d57ec74c7.0","@material/shape":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/ripple":"14.0.0-canary.d57ec74c7.0","@material/tokens":"14.0.0-canary.d57ec74c7.0","@material/animation":"14.0.0-canary.d57ec74c7.0","@material/elevation":"14.0.0-canary.d57ec74c7.0","@material/focus-ring":"14.0.0-canary.d57ec74c7.0","@material/typography":"14.0.0-canary.d57ec74c7.0","@material/touch-target":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.d57ec74c7.0_1637079461969_0.6614125146445253","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/fab","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.554c71829.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d1799a03e646f76b3b27e0603a6c365dee8f5f9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.554c71829.0.tgz","fileCount":23,"integrity":"sha512-KMjmvnztchIl0Nxlu+xfsiGG5+JhjYIERKI6KlkKshjUOrCCXLLRkN5bqmoCptflxM5/yWRT8bmy8w6oJ/Zr+Q==","signatures":[{"sig":"MEQCIDS95fLDzkpoMJWITZDAKyFHWp5+6JCifnBYyqb+BMyWAiB4U6hJy+8ZqK6B/+z2j8XdD6UlqvgsR5Mr55SqTm5xAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9pGCRA9TVsSAnZWagAA5RUP/ioZvQiKD0Sa1C/oX2iV\nWy0E3ZRNAzZBfTQbAZSQYTi4y7zCbjMbmfKJw5MsgmyUtZU38BG76JhQxUIM\nJflPDqk4TeDtAt3OV/HK2XN8/xAEHY/haZrTv1qJ7pujAcwsjeBbAe9M6KBb\nRWTsVoXWg/8G0VVcrwG+rDYgDZYOcUOgts9xdP9zt8Wqd3fjMVU1fH6fHztr\nohjT7rT5/I8yhPcdxB8UQfxpyod3PQcguyH2z+CzgSVJwUc6AV87QiPd8g+b\ngLVIrVOK3lhDDfZjzwBVzAvJ3Y1DywEi+iOcK1VUm96W2JESGe8Wj0T8fQfK\nB+bO3qKL9VpjtvStihHuP752X1tBCUOIsduvnF4voxDO+VJ3KwX0iLT0Dnll\nnA0apx64Dwq0G7bTbeakgkawfOgUKRAw8zJFKnyuc+Q9TwOoShHz+gUhuUg1\nYHqeNKKNZf5WxYHHV9Rq1AYc+LrBUBDj+cMW+UI0YNP3lnSgy1QgBKwhQr72\n8eqvVSxiKoYJQtrcG+nVo88qgMvNbXdE953L4QkSjbAqLkDWJZzU8katniZU\nD5XRN7qU3FDm/QZ3iq5d3gXUsQdFgp+I+6aywJ57Eo1bMABiJwE1tQt498lk\nQsw1/PSvmoGjwkWFYfXoyWVe5zinzwB3bPMP7BtQYr80zY7DrDN8zy5/cOsy\npZk6\r\n=ci+E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.554c71829.0","@material/rtl":"14.0.0-canary.554c71829.0","@material/shape":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/ripple":"14.0.0-canary.554c71829.0","@material/tokens":"14.0.0-canary.554c71829.0","@material/animation":"14.0.0-canary.554c71829.0","@material/elevation":"14.0.0-canary.554c71829.0","@material/focus-ring":"14.0.0-canary.554c71829.0","@material/typography":"14.0.0-canary.554c71829.0","@material/touch-target":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.554c71829.0_1637079622567_0.7215845287118006","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/fab","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97cc6867fc4b9bb3697de8cdc403696b487f699b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.3ef470efe.0.tgz","fileCount":23,"integrity":"sha512-s13tEwr0ATo0oFBCMUjZj0LduIhkk1KPPFQcpIr1x3bNnPSINHoxx8qpTjVhxNeMH+/Vm5TfP0rUKZV9xMYlfQ==","signatures":[{"sig":"MEYCIQCSwkmS4hjske8MrEH8ggddvrN+eX/CkPlOhDYlUpb19QIhAN+5ttjZd2lG6u90JCxqCKRM9lTo+EetPigdEXs99trC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9toCRA9TVsSAnZWagAAdGoQAIrLFsBfv9BtOkq3Z7Os\nW/pVLwwi3PQbgBRyfeZQ8fDbmy9uEx+4fkqVIBW8kCkIn7qQ9JEAMOR5edLZ\nMSUuY1VkmLr/vX9Rke3Royt9UCLX4W5xVSALt1g6n5E9iRVMEGDnTt8/lNCk\nA9gX4J2QUPTMIUYU4vYNgWI5oUOH9RT9sWRWsQ7LdRyM94icH0iDsasrhKB3\nd/hBeIhzwvb0N7e01PdL8GkRc6lSEgiLSsCbNBH+FKdOeQyjCnhaDXWH3Opn\nxNY5wKg8q+VXfEVUdYUVNzwC0cpHzC2ohd6J7Ik2ADIXcqepK5YsZNI1/4yW\nyB3l+zghD3KnimYsY9rFHH6JDXss0L+KJibU3WM+orNpvY8RlKqzsFLz+2MR\n5QRSo31zwI/671AkTfGeSB2PzfAiMxeK7AC/7p+u7v1qn3z1otS1TtQ9Md4y\nD9s6BoNV3I8gwSbjrg8rcqTMahvpNsxpl8GP5lzdgn7TjvEDzKLGYb7fXwPF\nYHYEBKJlx1QIV/eL95ZFmlRvksZTgeIt5VDKZTn5vNFjsfGEkCnB9QAmUEAU\n9sYHpqH39eByUQQ0VPws4Ha4NRxb+RPkLpqpg7Vjtg903pDeMwo9lDYni6z9\nV6bZMs/4etp7dnzc6+EP0ro/WLWXRzECGG4JJiUgVi6CdAAKmxrov/EcIM6f\nbaxT\r\n=l9Lr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ef470efe.0","@material/rtl":"14.0.0-canary.3ef470efe.0","@material/shape":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/ripple":"14.0.0-canary.3ef470efe.0","@material/tokens":"14.0.0-canary.3ef470efe.0","@material/animation":"14.0.0-canary.3ef470efe.0","@material/elevation":"14.0.0-canary.3ef470efe.0","@material/focus-ring":"14.0.0-canary.3ef470efe.0","@material/typography":"14.0.0-canary.3ef470efe.0","@material/touch-target":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.3ef470efe.0_1637079912437_0.601335040061028","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/fab","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d1e5ab5180e3dc035b7ab9926defe8a6e0adede","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.61a28b2b5.0.tgz","fileCount":23,"integrity":"sha512-TJYtaT//oWmDtIqzKGX1wD+gltVuPc6rdvQlBX6SkaObF0T3W6iay3TojTlomxt9mURb4x47mt4e4Tg539Uf3w==","signatures":[{"sig":"MEYCIQCFkzAOoeApAsPuJ5qv+fiNOOWP9W+DBKVl5TjX5usu+wIhAPKcmJ3lZ8Mv/THHtU0Pa6Q7K/7syrFpb/wk19ET6PGe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVFBCRA9TVsSAnZWagAAnUAP/jlUl27hp59pWpi2pCmS\nv61GMXiA6ZrmNLQejx17/WuBbQDKVnyz05IRJpTErzL6pyFZYzoQPgbdCZMZ\n+zNB92xOXV014FbCrt5FAnGA/KlsBEDCDmEed4gAp3Etf/Yy86Cf2kVc6MAz\nIq1HlKsGOqUy4vHiU7/3XKckD8pCMwLBj2KUWVGHaolxa7L35zKRvGymCL+J\nID2K4e1jOVsU1bcqbu3bQToZy8SFcs2GXewubiu8qv2flRr9Mjx2gkw/riTc\nyqEudZrtiZHCJ0J3M7e/PQcsyB7tU+SlzbATdpQHOVgC9plznTt9x4aKGWPg\nYasAje2Yq1EVsRuqHTuh+0c1xLEs582aEHolcLNsmGAlMpRe3aEgpAPCNHSq\ni4DSd4sKzuc8cXRBIZTGPLuaPXTg9SWHsCoGmW1WDMRrf8ymMMnk3BJIxCPL\nrGXXWL7TfPpu+9A6mV2YRYaI6F1YwkkSO9JwIzspJN0674wH7NqeJxaSPIiG\nn312sGIaUWEwwYk3VytsK9p23o0UtKTq+M0hWuuvXWcWsCwebXkR/iqqNH2a\nsGVdo94OmYaggSS2gDaPjiU3rbtPIRH0qJrWmVb20sEice95rePgBYb5Jtx6\nGjDvFuXlRd8TbRoFbAMybwI/bezdDIl02+M1T/F4QrsFFbuHG8337M/YmB5E\nb5sH\r\n=vbkX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.61a28b2b5.0","@material/rtl":"14.0.0-canary.61a28b2b5.0","@material/shape":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/ripple":"14.0.0-canary.61a28b2b5.0","@material/tokens":"14.0.0-canary.61a28b2b5.0","@material/animation":"14.0.0-canary.61a28b2b5.0","@material/elevation":"14.0.0-canary.61a28b2b5.0","@material/focus-ring":"14.0.0-canary.61a28b2b5.0","@material/typography":"14.0.0-canary.61a28b2b5.0","@material/touch-target":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.61a28b2b5.0_1637175617707_0.13066440691108672","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/fab","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6b3044bfda64df178b0b0929d8d5085baa7d827","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.fae6c652d.0.tgz","fileCount":23,"integrity":"sha512-HyEsMKGVrITkuzFj7z6dqmopWLvfJ5IuL9+/bAbd7o7Bs+plaa28JfwIeUJeyluIJeGGpd40bDUQqIv3eyabdQ==","signatures":[{"sig":"MEQCICSrJVugGENuibvcQ8D4G5Z1350ALaV4HEmPI+izwEA6AiBhihWJ/gp7xInz67v1vq3lcVomk7JS6EyeJwe6HU4bTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln6TCRA9TVsSAnZWagAA2oAP+QBXDRWUNCiv05vfKXIQ\n9ie72aVdy9noNZDI81TER3a4hjwZpLFR3oKx25ZTC0EVv6ESP9sHJa13g9fX\nKpUzNVsL8Lwn/sQyeoZ9yGW+iydXRGy1Nxs8GXZBK4NtkssxiaRTIwsffh+/\nV14fRhzlX+R1CfaFwwsQQqOq54B90n8TtaRvEQh4gQRkNkINXXIZZ4TItESM\nShrZGBMHzxvd9gVZ+gJHAzxDUvHjRC+3ELruetcIfAescQf4aaX/T9X6Qhuw\n6t+ivXzi72SpmGXyqDEtjvCi88rIQjpaBs4yCkNFD8lw4t+9OynQrEJCLq8E\nCtne54lPdARUEDdq9ggueEUDiRZ5az3eoS4G2R181voXV0FwgcDhhCEdg12z\n6KnJiKZlqtEK13dIv8I0DwidytWsi+4MZ4CKEuz2r8O0GnIufERQfP7eXy9A\nHrhy7mEZfZxMY+Wi4sN6szO8ezYNZmYgEs5sosM3AgmBMuvrNbjhX5Ze+Ggj\n5+mYZXauwlOEWcqqXEUu38SkYhTmAjFEOtnau169Jn35ywECZPbpVB8VfTn6\naZeQgQCRe401sYgwFUesw7J82AvlLFqCw59nyk0JrucQaqVWoEuWT/1Lf2X+\nJwN+/t2ydL7osxD0urSD5S0xuDjNmpKmDmIvNPeHuQFqux7rSBIxQPSKZ0/O\nUok4\r\n=kV+F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fae6c652d.0","@material/rtl":"14.0.0-canary.fae6c652d.0","@material/shape":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/ripple":"14.0.0-canary.fae6c652d.0","@material/tokens":"14.0.0-canary.fae6c652d.0","@material/animation":"14.0.0-canary.fae6c652d.0","@material/elevation":"14.0.0-canary.fae6c652d.0","@material/focus-ring":"14.0.0-canary.fae6c652d.0","@material/typography":"14.0.0-canary.fae6c652d.0","@material/touch-target":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.fae6c652d.0_1637252755602_0.23863531769284618","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/fab","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa3c7a8c9be7ba33798a2842e630612bc4655fa8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.978a3b5bb.0.tgz","fileCount":23,"integrity":"sha512-Q0Exo91Q9Y9dw+6ICa3Bbi02U+NDIZbwIkHPY4pStjuR1HQFMxxDpuItkKPnmk8zff3hfubr6s5Px0JMLHUGzA==","signatures":[{"sig":"MEUCIAMYzEcazv22LoeR/l4cHOI2CtUIFgNQOuI9XZxD8JtLAiEAh1GMNjc5tMyRnaALCpwh8Uo4qIU2Bp1EgKsOR0iMLSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/2jCRA9TVsSAnZWagAA5XMP/iDhvwEnI+kbjMqcOC9K\nx9cDKlpKA78Fed71uENAeeU1/Ev6EGqE5n7lyEHH/ZJLgRrR81eXGys+UDoL\nNNKd3Dsoqmc0mUWutZYW8dbzFJHvtfXX5xEz6BfIgpfAN21eZZ4bQB87ioIK\nHECvyDZV2nFrWDC6bkcqb9c8p/fwGj0opqHjZMpktg3c3OH30gxwp4CLpzA1\n7dh4vNvzv4k5HOzRpTY4Pa6b0fB8hDJtjpfxa0zEO5T9ATqMqphJ2ckv2g0Y\nQy2LJBySBfLoxycwOW3UWmRAc7QTVrsnMgBCXys/mXloYzCZk2b/xW75jmPV\nVNCXb8Gsb3Uhz0ZBF/9XHv0uTD07vus+jWS+hui7dAW3i9cZKrGWk/8yYKtY\nkPRKIj2Bsl3qq4h8mmahBvdDs5pvJWR3nGapkmb7iKJ5R2qtuXk0fVa9wjHz\ntfEUS2rmTrMPa+uB9MbALnas1oALv0s98rJYyi/nV7lIu8E5DuigBaLyxy8V\nvO+YtUeaY/PSPVAKNnn4dTqZG1XdJltxoA+WPsuDGoJOmy8YoNVuQJZy/zFT\na+acIuW4fabbWu4tNpxxBBKH+qdqArZRl02h0JYpQCZwOk9vM34Wdhf+Ywir\nHOSIkd7stXhHVqcw9QJIt0kiJYpOkrs+08n8FeZdlPnkb+auMyvlZsieKRS6\nSorE\r\n=8kb1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.978a3b5bb.0","@material/rtl":"14.0.0-canary.978a3b5bb.0","@material/shape":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/ripple":"14.0.0-canary.978a3b5bb.0","@material/tokens":"14.0.0-canary.978a3b5bb.0","@material/animation":"14.0.0-canary.978a3b5bb.0","@material/elevation":"14.0.0-canary.978a3b5bb.0","@material/focus-ring":"14.0.0-canary.978a3b5bb.0","@material/typography":"14.0.0-canary.978a3b5bb.0","@material/touch-target":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.978a3b5bb.0_1637350819021_0.5707895760816801","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/fab","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c1e084eb749b28777e944a5c2cd679815e2658c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.e6f43cf44.0.tgz","fileCount":23,"integrity":"sha512-Jn9M4SRsknVGQAFwvnmFpBS69O9hURXrYBffjln684RWu9FLWM2tmG2ichy6HrGdzR15ud2GYoH6U0m4nRXaHw==","signatures":[{"sig":"MEUCIQD6zfdrcl3vukGg+zSFMHz1bY2yDAh949+tt10sBsEXDAIgGbfxTkYeyZkZbHZnM7tLEptqvJ5DVYirwbCDRMP6vBk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9ULCRA9TVsSAnZWagAAr2wQAJAAzD1ZCOyse1iTZQLt\nLRFIdKRtq00+lyMmLLatXrPV/yvHT3fnBXpZUTVqAbicuL61G+UPbAvwly6u\nTeGzzIuM+eif2mwpkhPL6me3Rd5tsaZEslX72BCniZK80DwtDwLmnW64vL+8\njxMhG6e8DlNzNh7ZSBXFCWOPaVmoEwXK3Ih7ohqAg1UABsWV1o2GmivlNapR\n5CtiDZ5SA1x9zyLpVt0qio1NgfH6aFumX8qGMRMyc1BxAVv2KlTizlbJGGMW\n25G3fBF77x/9+eHbfcpmf7gHhPFeC1W1nwxAmY7l5eNqDoEYpQeiZN3y2CFm\nbqRWbXhR3HpA5LqYLJp6fMsXVJ3T0q9vD6iE22/Rr6tDZ6tfUu2PL9Aq6Zw4\nHUniLnDZsYdNG8Sys0OKUzDUQmEVYKkl02XoRHa3jXxevOB/MrU+aVmrKpK5\nucAciZ/HmNa8+04hT8y+/tsNTduVwr6tudY3oxQUnIhwhIpasEOdFdbz7i/r\nxrnc6hXqy9FF1vHUV6dyoflGOW02OQrEPYheDyKwc+Ay4ZSvsuoJ1NM6Tm/W\noZ4acOF4pcrvJP08B5AK2990kW73gUgDPTG2Pdyd6LwXdsUKSjkhPNKa13HJ\nO0+a5ozl6Qu4oinERYJwOPZtJMsNgdluwk4XFiT3rDhBpiVN5rJ1CMnx7+VT\ng89i\r\n=2fTA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e6f43cf44.0","@material/rtl":"14.0.0-canary.e6f43cf44.0","@material/shape":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/ripple":"14.0.0-canary.e6f43cf44.0","@material/tokens":"14.0.0-canary.e6f43cf44.0","@material/animation":"14.0.0-canary.e6f43cf44.0","@material/elevation":"14.0.0-canary.e6f43cf44.0","@material/focus-ring":"14.0.0-canary.e6f43cf44.0","@material/typography":"14.0.0-canary.e6f43cf44.0","@material/touch-target":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.e6f43cf44.0_1637602570774_0.23971249631552793","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/fab","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"308d43dfb718c7979790ea20210434ee62e3fb6f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.39cf14bc3.0.tgz","fileCount":23,"integrity":"sha512-Hgj5EaTDRVA7l0di7M790m1bEaHYdNpX/CNeR861bHfnkU4NXSJm9k0upIz+6iy3FEQghGnzKFyRZ3w8+8C+0A==","signatures":[{"sig":"MEUCIQCuFcDPv1vTl5/zXQ2BVGljWD61bOSNMAvr3AVRgDCrSAIgLjqPeo1lnAmHB73Tb7dx0KuO9ZJnXJ+vvFdiBhVqZLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCI9CRA9TVsSAnZWagAAyXcP/1tMI1m+JETU2PZHXAwA\n2cIOCuic58Ajh0jTVuMXu6rplOSRXytTPHv4dlSmVpf4a7Rcobo3cpIzlNQv\nMy9ikvDFYOBTLUEgLkLZKcCHoPJK7uj/xtIzQLKJb1CPXmg64UHUhpc3M8KA\nCgsfPpK2F6m8iJ82aZICUXKKIacizdrdgX6lRGWQnMovKrdvy5t5V8MVQrjS\nS2YIE0J0g3u4fMS0PsnY04mkpVmab0MyqRXYnZuhrQVqnv8c/r9N8sAomhek\nql35BXSJ6Vra+OYC9zSUhriIMe8HRqYT1yvwG8SIBq6c1Puctrf4EGDU6Fda\nAVfGNisqlNwQ0iHM5s7CfhDJ28HVEnJgrDGWOLg7jPLR6mdfT1COJQ+D7A9D\nxNdTNr2SgY4gS1pKKRuwwqsuQFYmqdd+Y2IGORIjRBRZ/m6kiWhXpyCXtlZM\nLe+P0FiHBa4mNu5PYgvC/LQoMNBsuHoVVhotIRMLkZqPxh0Qj28bFIR31AMC\ndIjbFDz8fFq+0Owfy+BZYN6a/8OAl60AuYykLQzWPAoYCeqqqAszX6Y5QQiH\nsgg0Gbf5tsMSNgD70VGQMIQ2Yb49RluF5jYZ133z5TZdN9nrDoUDtTq1vEhv\nLCr1pUD68zLNQtOEo313IxT98GMOe5W+fFm2zewQ/6f8FJd1TkxE+bgCTExt\nSMrz\r\n=VRXB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.39cf14bc3.0","@material/rtl":"14.0.0-canary.39cf14bc3.0","@material/shape":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/ripple":"14.0.0-canary.39cf14bc3.0","@material/tokens":"14.0.0-canary.39cf14bc3.0","@material/animation":"14.0.0-canary.39cf14bc3.0","@material/elevation":"14.0.0-canary.39cf14bc3.0","@material/focus-ring":"14.0.0-canary.39cf14bc3.0","@material/typography":"14.0.0-canary.39cf14bc3.0","@material/touch-target":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.39cf14bc3.0_1637622333792_0.6973053707238757","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/fab","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.93134d453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39da1f86e46ea6254eea3d9a332aa03d786037c8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.93134d453.0.tgz","fileCount":23,"integrity":"sha512-TlVOCTXPg3j0sUseuAD6ThzSHe+EelYDEqIT0j0SRWrXhGJiEwJTBj8aF/jOvS1FdNlZqdQUL9g+UowSSF4EnA==","signatures":[{"sig":"MEYCIQDm4/3SZ822gvX4/i/3EHvUIh/6ONEKL6OUvWZj/VzIUgIhAKBuimwNVXOsP6l5cAYWW6by50n8JDMz1f7sWRy5jkM2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQtiCRA9TVsSAnZWagAAi9QP/0bQ4aegBwIw4mGwhmeZ\nTx8wEDdIwmCASgJtn23gLPCARYoOoiROQjwRJI+tccSY7czonER4RczBlcE3\nLxwq1jUkfC/B2f7oRf7glEOrIhYfAsjYAvYNDJRCyGTGFGIGU66LuqSUz6E2\nvzDbS2zMsHKn0XmckodEtdJgK9dWJSzvz55mwK3VA/S01uGZmSoB4qUxmJ1p\nIKGKgEH25uQdhfjKJMvP7x6fOGQZ/q9FprZQV+ZsjG7YxTxUHgHY+/hr6exb\nOGt6AZwZJs4zOTF23V3fY54GqLpDGF/gwC9z36FqOyOVay6QVuO2waoTHsI1\nhQoscYzDr/BQvanEDqdJrEoqyyO8gLN4UwJ5qW0scPzHVJbLXJmidnwPij6J\nAl7LeJ766kpdFMe8dQ7SOaK/8KoqJoAiXff9SFrqIthTFt7jLAN7wE0j9AK6\nkH124KBMoAGLmu7YdI+mia28uLKGQvbmlh5fUzHhv8/cF9M7y88MuV7eX6Nu\ngp+c+mLNTPI4P8orsA6Q2XpV9jQQqob2L7VP/7UUpdsxE3HCRFz725Sb7eTS\nocgb7jGtZwTwqVaa9OXHqLk/YjMPbbP6B51EycvfGPk7AEPaoSExJrNk0onU\nzywg4WFKkx0ges2oDjMXw6pLViVxi2AbtnZBvAs6Y4my3Rgw+k3rLZtThJUs\nLWcw\r\n=K2gc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.93134d453.0","@material/rtl":"14.0.0-canary.93134d453.0","@material/shape":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/ripple":"14.0.0-canary.93134d453.0","@material/tokens":"14.0.0-canary.93134d453.0","@material/animation":"14.0.0-canary.93134d453.0","@material/elevation":"14.0.0-canary.93134d453.0","@material/focus-ring":"14.0.0-canary.93134d453.0","@material/typography":"14.0.0-canary.93134d453.0","@material/touch-target":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.93134d453.0_1637682018778_0.6208423441800388","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/fab","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a67c1ecd203cb1927ec815233b15635696dbd17d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.bbd11268f.0.tgz","fileCount":23,"integrity":"sha512-x7K7RHL+J4q7pgr0JPra+b6EhtsaiES2kzbZYgiRlwS8gPy6sDAHGP3NozOTj0C8GNhwFpwQDpy5nG/HsFqp7w==","signatures":[{"sig":"MEUCIQCUWDQ3f8R6s63h8vcWxRUaa45OQew5+SKWP42PPnR1AwIgMHYLe9KVLl6U5D0Ezy2C5Wge72kw/dCxUS0LR54M4PY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWwtCRA9TVsSAnZWagAAwSUP/iOG+ClMYi6ELKS5MiCd\nXJNrQ9L52EPywfxbOJZ9Pi+WN5qBr0bed+l9CfHWuwGqM+qCSqRo6APp/IRt\nyafc9q6YfXFxUxSf34hJudZCQZ7F89Pns/1+2wzvFwq9BXu5tNTUG7RaUJRU\nk64PfXvw/i8r00cW2b44BU4I23l8BEamheDR8dK/l785LPkxyca2yEUH7nLE\nozZKQf8RdBTmKmtmLAghgKmAvv+ciwXB2eLIAggg2Ctzv/SBm/mtf0k8eC1W\n9n63yUpcUVc9xsOmxcJ/+gJyIWF6NQaRmLIkv5ofTa3Cljkzv2c8qh9kpj40\nuW9S9MchQZwilp2ovZ7zwbynDsE3hg/W2PKsci7YJt7v3JwfgYfFJbvQBQCW\njmEHv3X0Vf0+BRCTibdvt5LhzA6KYDfqxEOu+sntFltUgF8LKudGaygC/se+\nJUiW9gHBDr7aij8ieUdpPA/kHmmd3Ch5Hx0CXLm4Q4IY13T7U4FpDXVYw9R6\nr9FshZ57nt5TA/SdZDfcANHwJ1TBk1l58uxK4BR2C/0nnBBLxMtei9qet1M7\njqjbnN/cDi4CK3HNnHQMcNNctJDhdwRQzoRDhaBKlfTuqTIacE3o5VdjnDVa\nNa2CqPC7xi3lLUSnTG+RfogRSMtCQkd5l31+yxFp5McA5um5PJraF7dmY/DL\nFnWN\r\n=RF9r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd11268f.0","@material/rtl":"14.0.0-canary.bbd11268f.0","@material/shape":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/ripple":"14.0.0-canary.bbd11268f.0","@material/tokens":"14.0.0-canary.bbd11268f.0","@material/animation":"14.0.0-canary.bbd11268f.0","@material/elevation":"14.0.0-canary.bbd11268f.0","@material/focus-ring":"14.0.0-canary.bbd11268f.0","@material/typography":"14.0.0-canary.bbd11268f.0","@material/touch-target":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.bbd11268f.0_1637706796859_0.0011901891933585595","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/fab","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b41bf19835b188e0090f8d3327ed9c7f40b25b5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":23,"integrity":"sha512-1kknrFCG5apzj4C71ZyN/5MuOesUO6yuXDwYHGR1tLRGquaeQyh4dNOITPKSalouCwoU9oVyOq2g/lsyGd/lgw==","signatures":[{"sig":"MEQCIGlWtmrrCAwClJKB1htfRhv8jA2mBnTjaykTSMX9SoIzAiAlkXf8KTfT/gJQavihQdUAoThhlchK17aSLHwq6E3XDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlxwCRA9TVsSAnZWagAA2DwQAIPTBrdIZH9Js50QOFdJ\nes2HzsAaqR4f7Wad0JZHCGJOdZI9k2IZ0P/Q5HV8Xhw9LLHZAsX8lxya5Fxi\nqU60pO3dfcA5qBuI6e936f9C1SbfUM9Z/3kkxDK/rEV+K+JmEazZC082n667\nA5Qx3Meua5YgAn9iHg8wm0ltB6g7rUjCAy0b2seATWEnjuBfG0qoHU0e4OSy\n66k+TNHx0GJghqMU7qY++fo2/mK0B2vjEmjOPJ8jyPtOQcxgKOgMr8zqLpsU\n7zL0zaUoqI+v7MhHLOE16ltQvVhj1IYJYcTAmvIIS6u/v5wxYpna3F7tq8w/\nSkQOMLJ8vxWXMq3lAT+EMEfEJBJZ2fIf9BX91WcC3DNSIzg8joluXHUPoSC9\nRXAqkTKL5g3DxfgJiRrSICVXD87/aAYcnkcE0vgdEDn+1te7UKpoZ1mNFFb/\nuXk2SDa5JS+V/4J/d+6OeJJTA5T4XLeankUYlTEO9HHntC8sfXofFguc28e3\nD7Mv1ahcwaloH7ABeBhDuc6ccqj7g0QrfdBUSKhvY81ZlxQia8rqtI3F9ie4\n7MV56bCGUgWDWHm2MlytlwRdM0Q4HTZAFX3nq2hH08fMjnpfcoqu9E/K2g9D\njl9zdalXxnvGPx0jG4sQloyRnqQPCW8tl1hPRyD7pnBV/4bTTVp77GS1TM3a\nAX7S\r\n=3Qsc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3db9c4d3d.0","@material/rtl":"14.0.0-canary.3db9c4d3d.0","@material/shape":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/ripple":"14.0.0-canary.3db9c4d3d.0","@material/tokens":"14.0.0-canary.3db9c4d3d.0","@material/animation":"14.0.0-canary.3db9c4d3d.0","@material/elevation":"14.0.0-canary.3db9c4d3d.0","@material/focus-ring":"14.0.0-canary.3db9c4d3d.0","@material/typography":"14.0.0-canary.3db9c4d3d.0","@material/touch-target":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.3db9c4d3d.0_1637768303937_0.33821904232456257","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/fab","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dcbefab866b57d71d596d7152113810c3830a11","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.78305b6d5.0.tgz","fileCount":23,"integrity":"sha512-A4L1+7jxY/XOR+o1MiPFEkIgLbRpR8j67o8OjBk/eOpatMRJUEHiIOsXNqlwjt63trMRzTyEpEB6popMN07arA==","signatures":[{"sig":"MEYCIQCLEoMsnxxxTmrgt5PziZxw6Jly6zK5F/fW6ssp+Hrt3QIhAOKMcQp0/fBVQWMcAxBz20OOXpGDxNFvdqs4htvi7VId","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpfMCRA9TVsSAnZWagAAM9gP/RzfvTrJ4NTW+AFLtOrK\nSqAcPvHt5oN+KvaLgDUizXjDUqzaTktcJ2z658EJ7MDpeMGZclbL8qhoPDxp\nV2PcSNhiNWIMk7srYXZ+jkHtgZNQ47DIJA6Wsrerk56dOJSIrBElwj8wEfWe\n0swd3oOkBAfmSvohyw4R8sTLsxRITN0OmcIbs5If0+wTJqgzlvskj9uR0TjX\n24CevMkf//M34mPDNIT94pFLC2sV8WwxumOObMDnaPmopqROOTVDt4JqjHCO\nFboreE+37nXZK/4frHM2ntATa8ENTPli2SphuYGTdWpG3FjD3ljEOllkj21s\nUmK9EWDnkRcPtuqoaGd2DRBMfyIL7LREH1B4eFNP7d2c31OHkKy6si23DRm3\nzNAfVYnAZE02VUTCeLNgkNHtkgPr1tNcNCj0NXa3wTdZo27PLEjqOGxfvOFh\nEAz81F25rkhhHFcde8DfzoOHWdUCCbg3I7PU4W6+XPl7ZYURJQR439OSzjlA\n0qhGgpXXkJ1WXd+GTSpGZFOzMPDphODNSdUYfCkHvARd6X6/qsJo9ZKUSCo/\n71GRe7zOLd9j3roH5XqDjyHXEMkjg7nsYGZmoaqia0qsEe7TTcU/gkcSA2dh\nS8P8DKCDMmj4AW4gdUW3J9BcGBvQFHXNT11Vw4sYnkUb1Qw0lg5wx4yatvH8\n8+DP\r\n=251w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.78305b6d5.0","@material/rtl":"14.0.0-canary.78305b6d5.0","@material/shape":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/ripple":"14.0.0-canary.78305b6d5.0","@material/tokens":"14.0.0-canary.78305b6d5.0","@material/animation":"14.0.0-canary.78305b6d5.0","@material/elevation":"14.0.0-canary.78305b6d5.0","@material/focus-ring":"14.0.0-canary.78305b6d5.0","@material/typography":"14.0.0-canary.78305b6d5.0","@material/touch-target":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.78305b6d5.0_1637783500673_0.026427951334460076","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/fab","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cead2d8c4b9352237451fa6d67d3026325fe9e1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.43d08ba77.0.tgz","fileCount":23,"integrity":"sha512-C2Nyn6ZX4iee/zKSBP2zn7weZ5cknGgfpYmxs6rTRcrbqRcE40vZmUKQ731zSJ6ZyRTU7yZUOiobBEC2lcjdEw==","signatures":[{"sig":"MEUCIDuwbZi8z0M4oVLxAbN4xmCouYBOGD5Grag1E96Rdwd5AiEA4nC62uQFSlY3II27nwSfNbeJClh2pHDyvXg7pO0r5U8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqw/CRA9TVsSAnZWagAAEpYQAJ2S6cD9yZqrxiK/nlRL\nZ9vNAYLtSz8WjadB5Hhn+eQkdWpJ2TTGfoGqv9FUar4adHmvF+YTy46L0sp6\n+1h+YefiIrCJT7NrRCxz/s4Iy5iW8HknnimasonfhUSNyodZYQHZyidWBYMq\nE24TuKvTOq7YOYoiUfsfNnT8DzxkoqzipgZgV1dIMdxsDY6f0ILTD1g+gDen\nmPmQuCVcdMuuxwjuJXkLPncW/bRMlJV3Aj2UmH9BWR1QCnrrmUnjZpJe98fN\ngPYpF2jHLs/dVdrwLIDqAJ83mHIGo9iacqjJcQJkD1LDrEv9sO5recJValjO\n0SV2E4iO0Kr3/8Esru0f3pFYJ72zcWHYBOQ0Ow1glxIpmm/c3tJEF0sE9T5D\nI31qmDhaSX3OyNAqSAFLHPF+S9iklDHUj/ZOXxhqVDRrFvFUNp/aAR02F/12\n48iNM6ciNueL8l0xkBE89q6nkkdsfd77uIyraLQQ00sZ2sxpYrmoanvJrst7\nykbSPEHBJlz/WIaI1n9NMwaAmJXLPZb58a2gQVcPGGDW5cnq/kq7R3y6/qIZ\nzLNhnwmTMM2CwshrMNtybla2SFqNEtECk0dj+V4xS2e1Iqy85GpkzHBeSbdL\nUrImBq30Rrm5jH66F1+Rmms/YP8Q370O79+5TlAqf3wE1uPuXvWc9K+hynM0\nGlQ8\r\n=uj2k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.43d08ba77.0","@material/tokens":"14.0.0-canary.43d08ba77.0","@material/animation":"14.0.0-canary.43d08ba77.0","@material/elevation":"14.0.0-canary.43d08ba77.0","@material/focus-ring":"14.0.0-canary.43d08ba77.0","@material/typography":"14.0.0-canary.43d08ba77.0","@material/touch-target":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.43d08ba77.0_1638313023650_0.5913400073472361","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/fab","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.17a072535.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b70c605ba300900f63783566c65e494b4229d08","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.17a072535.0.tgz","fileCount":23,"integrity":"sha512-8DjbfhI8WtgAYgar0QcLjFCnfTiX8AXayONY5/IdGUBwINZtLMokbjAJDk0UTCY4wcxu6MBAbjv+x6qYUqBc7Q==","signatures":[{"sig":"MEUCID3BnHmdzXwoPuL2xpgsk+Fxo/kCkDEtFBfofKtd8k2uAiEA1J7zqoREpHLB8pJD0KYHpt9xyJ0tjtPdVu0iySTAtaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQsaCRA9TVsSAnZWagAAxtwQAIIbgR/PzartMvY/C26g\nZFUQcwx7qtnkDwcWK9xnzkOeWJb6hDzNudq2xWPz4Zg8rioDp5urLsUFj/eT\n18wsh1CvCEP+yFKykoIV0NzybIPBSm7EXlaXOIY7xifbjWdoFHxkE6pJFcGl\nPGV4sLqSv/dDB3UIzGDlJnEdUz/q8rutGsOm0BmMVz0G3fTf6+03yUQg3KB9\n/llzZR0UlJ/lvLZWAgTThnw7zSnr8GS6yASt+htxGqJamOMzhMLkbuwzhUWT\nK8QQC9SercjQPKrP+7U6Bq9fDeioQYAnNVXirGxvGDyhStl+zu/U3bWlRItQ\nMTSmrnxM9VYoOhAFjaIjC9sGwtjFRKZQ7mq4ro3uYxAcMPmea0NCXVRs6cr0\nmcQBkcm5+PEGqizYdW/TumQ+Q6tq8DMXr1Eo0SP+0wNmcQmo2/pEqSZWbopx\nGwa66doZFBLPMTz68HW81ajsrk5Un93MJAvIX1e3IRg0K70GsGRXmF581WwO\nMFefa1YFXqbPqlHGRqBUvnjCwyEPmk0U3zizOYmU0+Q6dx/96FHfsCNfoIf+\n0IdusXt/fuuneLxMc0Y4tfXUvzeB1M0QE344Nhi2VxSXkXyHmizk/LH8eUpU\nAJwSa2SzPsIb6y6ew9k8R7JaTgJ2hMJ/kHnxIKhZKM7t0VeS0Hgk9CgEmSQr\nWjH4\r\n=gp8C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.17a072535.0","@material/tokens":"14.0.0-canary.17a072535.0","@material/animation":"14.0.0-canary.17a072535.0","@material/elevation":"14.0.0-canary.17a072535.0","@material/focus-ring":"14.0.0-canary.17a072535.0","@material/typography":"14.0.0-canary.17a072535.0","@material/touch-target":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.17a072535.0_1638468377787_0.1957435381913717","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/fab","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.5d809696c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"651fa81720be187d19cf63ed60d629d29917c8cf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.5d809696c.0.tgz","fileCount":23,"integrity":"sha512-WYbnqkKmE470RZqEjoriaNtm5HNzVjl7ubgMRbadRAXYUXpmxlFeKwFGVJPcPPQ6oVs3+M0wfAPBZaAuVSKj3w==","signatures":[{"sig":"MEQCIBXy0hHLA91/gg1B2yPHvold/1rRbpmBHsu59MVNybU4AiBgZYyYs0gYesDov9BnMakPZjSTJRN7qC0FaPGveosFVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO82CRA9TVsSAnZWagAAAR8P/2mklQG7yD3PAjPmZPAd\n6x1WZdn+gB8Gik6t+qlU9JhxRL5l/Xaqj5XaQ3XpaBSzYiLETQI72ZrX3cnw\nhuOqpKVVbe4d14Nb+o42o+/EQPjmWaXlE8Qwqfvyl28G6iuNCoS1a/JNrMXr\nybMZqSydPMqFdEWhaJnqAybT8SszG+bcV+N1VO6OoXyXS+x1JXTEvBWu02LK\ngoJbPGpPB8t6f3blFGzEFZwhq0M0SSos6NJtXLDW7AX2n5CGHPUBcJBnV/S6\nGRrCyZUhv6Ord8tsSPbreWjHJr4C79zlE/Ahaj0OETHtp9EMfgUPeJgnGfjd\nF1wOQDTT33FU/okQ4aA7UiaqMuscwvsbh2gE1MKXTvhpkH3azXzan5+FyX7P\nBHMfavEuUkuKAODF9YO8mRw0l5fE88b7b3qojIIp73gtcbYBsoLt7bOmDQoM\nAt5EIEnZIP1t1jqv6NXTBbMOoDN+UxfG4Of/UeOjV6jTKBfQwc4bqr+ilhTn\n/3ueMS7YAfy2lj3hspeaDNq786zIfKdiOjd12rw99CtJ7QSKKznHyTxE6A40\nFNPsLuglu/yj30EURo0pEKGaagVw/MShg+9ouV+SkQsCN+p4YYG6AULyOEeg\nWpZu1RE1p4Ipd0cVxWurCTVkPIzm3dGw4ldbi4OjdkhbcQ6XrUC6GjEp6boN\n2Bnq\r\n=ccpc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.5d809696c.0","@material/rtl":"14.0.0-canary.5d809696c.0","@material/shape":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/ripple":"14.0.0-canary.5d809696c.0","@material/tokens":"14.0.0-canary.5d809696c.0","@material/animation":"14.0.0-canary.5d809696c.0","@material/elevation":"14.0.0-canary.5d809696c.0","@material/focus-ring":"14.0.0-canary.5d809696c.0","@material/typography":"14.0.0-canary.5d809696c.0","@material/touch-target":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.5d809696c.0_1638985526230_0.06367134866994162","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/fab","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c11f9a42e7fc46a8e3b0d66852bf85864923f063","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.b6510c8c1.0.tgz","fileCount":23,"integrity":"sha512-VoqVxKpTYNnAaSjmPMPuY9Pve8lKkM9b27Pc/e0dfrMfX37nZqFFnVphQ3tLr6tAnlUb/eYL5yG/L/W8IutMRQ==","signatures":[{"sig":"MEUCIA/VZK4A4FiqyHDECx46cBDXdnFOeYP1OD9HKuebVSMVAiEA2RpPVJtAxYJpajGJ6L+KTRNPu5NokH8dO6ksLHd4/ks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPRpCRA9TVsSAnZWagAA9mMP+wVZY64JQ1G4I/0nioqZ\nbwm+Sk6Bm5ckfgwOqEoESwIIcMmNmhRFe6QL6JsLO9ugVc0+nx3HUne0RLFl\njbpe68wzrvoZCAgOOyMywqAhT2DhrxA6pSMyT0Pns4EDioBx9LRNnljHRc3t\n93hSyBi8/F7DdwP2bMW85p2euApIQrRR+v6f6NkfPgBHqtHgxPzlFbYbeaqM\n3bB5VNAJ4qmPlhCaWeHdEyNdNi+BvisPgGkXQyuyktrL8Hoha18wb8TOKkUc\n14S8IKIu8iKivZZRgQ/A1J6GS8/c6uso+CnMh//RuRniLVsi1bREUQ/JB7WU\nAs8Eja4oORJvKkrwCeGLRjaw2ttm4uLqNPcSk/M9E7vf5L6p0Y6zpTKboIjv\nCh6ltClKPTs8Y6M5kRgBSKsDMdgzkqyIBEOdzjO5Gij4ihGHZ7Ibf2PP4PJu\nFATiHpVZNm8SiX1pe8Hx++otc9VJCO4+LkArbAwTqo8MibJjhSlWfANwaF82\n7qy82YSVHQuNqOZucaU2nwAV3eh8vH2DcM1ryigo+R5kbbhF/7bQYK7B85y2\nSXYfufbMlGWDUBtl59df4mhv5SZNWvbIY3SToBluXvWLXBQ4Dd/x12517M+S\nhIbpEuh5AlmiuGsZ56y9EKxyu02GZJTk+m18GJ+e3gluRGUc1qHvjOU6u1Il\nK5Yi\r\n=7omk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.b6510c8c1.0","@material/tokens":"14.0.0-canary.b6510c8c1.0","@material/animation":"14.0.0-canary.b6510c8c1.0","@material/elevation":"14.0.0-canary.b6510c8c1.0","@material/focus-ring":"14.0.0-canary.b6510c8c1.0","@material/typography":"14.0.0-canary.b6510c8c1.0","@material/touch-target":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.b6510c8c1.0_1638986857214_0.711473982710235","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/fab","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.f460e23da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c8b7af52ec71372066ae860a42726b8f1ff6409","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.f460e23da.0.tgz","fileCount":23,"integrity":"sha512-n28fbAZUtWkyQPCVXcokMv9oJnqxtsklKIzQC7r0BIwwxgEB4n10me5YEO5wjkEGZy+qDLk2olAFDODa43WosQ==","signatures":[{"sig":"MEYCIQDEiyjHO7bceUd2BPk489q9JyK3wkpxMH58VgWiBVatNQIhAI/o8nGZ+b4YVeIfzbJsXL4DCFcNXU5gEmJiaa6aPv21","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3GgCRA9TVsSAnZWagAAos8P/1sXoWEqd3n9P1B4s5x/\nME6y/umus7+vbpuMoCkFsWx2roopK+mbFuviQGVhGnyPuc76yJnpk5FQBNoc\nPtqKXzpfgT2i4owLB8nFfctfjoqnTwj76H30YwrhazvQgp5Q3QQWf3xAK68B\ntcvcXUO6UKktzZPghfkn4S7IxO8OBmG0XoqUvO5r7B+a9YsRDsFKo4/gt3ge\n4FSFfcSGHjNCp4SlPdEX7wye0MDKbxb8P/CV5kefpkEhyoMH9o00HU1prYnp\n2XM6qay9C6ssGX3mAuOJ3by6EtiLcSDAietIPjWBPuM4rqnJISNfCZsnv6sE\nqthzN7egbVXPg0l1pQ1l7U3oNLzjqpTuwDCSfRGO5LppFkiZ9WCVZ38hnLcT\nJUIPKdKGPTtX8zBPxg4md/Qn27f0E5FFxtLGbPcKktIQuo4ZJZOXPOa1Hb14\niePPzsp8Y3x3xR8KjRu7TCBxI0bsSj7V7FGMbKAgHKRWUFWWLafsxtuotW8q\nPnEO2vwoCMgjFrNqZrQjRuTxk36ilFCqAUhGrZIE0LrzYK/ntQZ6sFua+xfW\nAvlJVRAheznid0nfshUyqo/9neqIQJSAvJ2iroXnN+F+jPCTT0cOn2Nh4a3C\nvLgl8xRxBsoJypRYo84mkfGzPVYSL3PKgMixVMDdEPnma4+2+pJtbqPfpE3F\nBjfY\r\n=WkBB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.f460e23da.0","@material/tokens":"14.0.0-canary.f460e23da.0","@material/animation":"14.0.0-canary.f460e23da.0","@material/elevation":"14.0.0-canary.f460e23da.0","@material/focus-ring":"14.0.0-canary.f460e23da.0","@material/typography":"14.0.0-canary.f460e23da.0","@material/touch-target":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.f460e23da.0_1639149984681_0.058625853946651096","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/fab","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41737f38ff36fb2e3dc95a1a0f86dea91b98c1a9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.7d8ea4624.0.tgz","fileCount":23,"integrity":"sha512-3JAbLjnm3nZCUocR4J+3kLjBSd6Yq/qsleYnQPQLo46lFRPgw5VGTNU8FU5uT1GK39Q6N+mLqL+oJjqinNHe8A==","signatures":[{"sig":"MEYCIQCxteC18sLS4KneGPIfisNWCnkhBQbqx0W9x1YLikLbRwIhAIqeQDUz2LNAgtaExPEh/bSes6pgrasulAhaTvknIg3v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6rHCRA9TVsSAnZWagAAYdMP/0gkU8sdZA9GdG75Puz/\n+uZ/kiHsAwCQyaI6i26e+xQyH9tPwMgAbgB7mCvfyExoqO48ZuTzhPEK0UQ1\nKAfgkgbzQ7/kHZQz5EMpLCh9fAcb/h8mlZv7da//twN/5NIC/69YmulkYpDR\n0P2WZVZSwrS0RNWN/FeLqfvtbKtpp1cVJIS09hC5ASjtGW8BfJhWG9EGvNRS\nrxGyyhpQ7YOZVGyJG7/z5ZZ+B81aDwDdbh9xhg7+LuGKfJTSgH9eqXSbJ6VK\nmzOLgaEVGPEFkzD5W2zLvl0OAKehH2Va/E6USlH48ewIgUhLDf1mPuGNerTA\nQepzGcCTtBQD1mLdXKhTS8r5gRT4On7AMoDh1+kqAppcq9flHCec5s7A+ePd\n3gxAnmItYr6cu2IvrhvD30hncXd3Me7Y4saXp6cOB/TOyh1mgcMMvZkQiF/8\n7yA6SjmBglbvIePmQS54Tn6YGv81WHTEivUTR/XOYqhw7BFsyrxCHSCJsTgx\nsbd7fuwRDHL32cub6YlM/pGgUB6EAE1mIgQNKYYy7/Mbn+dXcUpw4/ylSpvV\npNsBFaEJTfrDusK8dvzZlR5IDfghqwQaO/l/HzIRUuIeHhwzxOVZDCHK9+K4\nfC0NOVUPLk7+YHCPB5xH7bpgFnMDkoi3p+uil6GszQBicHU3eKEwHfSnlDyU\nnQak\r\n=P3ZY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7d8ea4624.0","@material/rtl":"14.0.0-canary.7d8ea4624.0","@material/shape":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/ripple":"14.0.0-canary.7d8ea4624.0","@material/tokens":"14.0.0-canary.7d8ea4624.0","@material/animation":"14.0.0-canary.7d8ea4624.0","@material/elevation":"14.0.0-canary.7d8ea4624.0","@material/focus-ring":"14.0.0-canary.7d8ea4624.0","@material/typography":"14.0.0-canary.7d8ea4624.0","@material/touch-target":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.7d8ea4624.0_1639164615470_0.37930269382520465","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/fab","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46ce578991da8a295703df7e795e533fd66e3049","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":23,"integrity":"sha512-Q1oyj59RTa90PKDqG2n0eOrik8PRquEYevLzvGrrmq2JjWjDVajFEKUMPQzy8DGJid2GOuyUVaUcEa1FboaRJg==","signatures":[{"sig":"MEYCIQDBLvFqbw/cUD3IopN4XhDtrNMeN3S+HJRFHoGx7IwQuAIhAKxBiiA1o3Khi7uDJPJXQ95l8adP8rPydVafPts0V0rF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFwuCRA9TVsSAnZWagAAfJUP/iTaLfIYdFwpr0lqRb/E\niqC96XaMRPTcI++8bZ59KSR6+uUHgeO85y9dhhK0txbOMCj9ATYwRY6bFR3A\nWyX2CyJy0R/cL1n1n9WAhzkwwCTPtM13h8OWjPxRSAhgpfub1/lWt1JAKer1\nzYM0lK4Q/bEdgA6SB3YuiNkUl/jx+vNHm/fTzAHGurUqMlZOcavS8V8hTNA1\nYE2WRdlb0t1+Kt8fiQY2HkEFKuajXypvm6taropZwdRQ/C+h8WKcboOKmdjL\nQy8WWo4Y5JuUm3X7/mE3KodTw22mNPmcoi2oLUDJBy5MkR5gw9ZEEVyjBnrO\nc1rECX5NOkxBFR9POEGuP9wmuKU+EKeaKPy8nwmYcxLJBIg1ZH5eKuvr7UL8\n4jSbNbOTY895OXO6NPXMNrES0UMGnxWduvST9+jdlHhOwdy8bkK5E3FAKpyc\nxluWOmQl6jx8/CzXGqOSpIrpSQQIvv/DSgH+nBR4+495yzgxJKdPXfdpGOBq\naZt62kz+mtj7WpJse1O99rzEYwQITV7W9KjCqZ1rpL5jjYgEKx1NqOSv7Ftn\n3GHX1DXdHpDWe0aq7qGOZ26tCy7qe9kEnpxlVtOrV70Jh+yFx2wzvxfNenKa\nPys5Nbez+kSKwm4/uKHbMjoXXkLrUO3SCJeZPEncZ7nxUfv3N+iO+zzJ/iBX\nlefw\r\n=2tHZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fffcb5dd.0","@material/rtl":"14.0.0-canary.8fffcb5dd.0","@material/shape":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/ripple":"14.0.0-canary.8fffcb5dd.0","@material/tokens":"14.0.0-canary.8fffcb5dd.0","@material/animation":"14.0.0-canary.8fffcb5dd.0","@material/elevation":"14.0.0-canary.8fffcb5dd.0","@material/focus-ring":"14.0.0-canary.8fffcb5dd.0","@material/typography":"14.0.0-canary.8fffcb5dd.0","@material/touch-target":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.8fffcb5dd.0_1639472174507_0.9362588644808989","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/fab","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb653da2026d17f05ecb4319720219d8b3c2a60e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.21e1cb9be.0.tgz","fileCount":23,"integrity":"sha512-KMIF8SWMvF/Ct4c6LjLISbkIH0HLLgrYWwLG/LxJH3K2kl24J+1dPKGCjJ6wHwQObhvUgQ/BGgyWEhEOs3IxZg==","signatures":[{"sig":"MEYCIQCiI6Q2P9OWADNWE+xP4d4IBae5xEmZlWr9Uc26beVe9wIhAIL/I4s5OsnUWRLDtpmbuHsbGzxzaLIuhTDkpIHy9Azm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPNCCRA9TVsSAnZWagAAA3YP/1bVvvBlQeHSS/bsWpgA\n4+ZHCcTknkNxjs47BzgjhpUZrbvYg1MjRVWCKbigXEL+xaLlzGjUTWT/RxXZ\nZr/sP/ptN0u/Ds2H70Y+8Hx+LZHF9EYD+vk1jTex1Uo5KXjcwI5shoYpyQCp\nEFAMvf26xgqmciXhsHyxeKnYqVmEmZ9Ww+OfQLqzUBXO/chh1igPCIU1HXNg\nTJWWNO8YfKVldmBqlFyeDZCdUsPMYY10eN+1MPGRNdWP54jZffbhTK6I0KIL\ncX4ZN5jFo5lsF+lvtlhNyf4raRkFX/WpNj7bkQ9w2txJ3i6ggUj9RsEB0rw1\nVTZd8vuP+fV6A6utHM4nYalqqfmT6LIBEIMBx/dIg+uhwF+rx0M+wkRf1Z8l\n7twun5ovTG/Nqk+YN9O2VjHZ8Ijc8Mxdct6xIjKjeEvNm5puXtfJMDuP+PMK\nDwRfhb6L3GcuWhRJL7xdAO4+xC5uiSJUDr3q/Zn7eVHBpbxje5MrN2sVeaBQ\nXW8XBQnhbQ5dDB/dhRHFi3bq+VFz6R9wLtt317fb8do8r3f9deGTS+biwfjN\nr2ORrwduuEYRWdwrvn4zwTWJQnvRtxMN1GhNn6hEgOsTC47lBLZOtXgz7LcY\nhmKwRARPKtgZRHRvndWpNhh5PLa2ut10+7RhtvvKZUrBdEc00rYAUf+KMXHd\nAyyc\r\n=0eiu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.21e1cb9be.0","@material/rtl":"14.0.0-canary.21e1cb9be.0","@material/shape":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/ripple":"14.0.0-canary.21e1cb9be.0","@material/tokens":"14.0.0-canary.21e1cb9be.0","@material/animation":"14.0.0-canary.21e1cb9be.0","@material/elevation":"14.0.0-canary.21e1cb9be.0","@material/focus-ring":"14.0.0-canary.21e1cb9be.0","@material/typography":"14.0.0-canary.21e1cb9be.0","@material/touch-target":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.21e1cb9be.0_1639510849996_0.5148591461747523","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/fab","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"032e1929ce2147c2d51bf945ed1c7cd5be2d70ef","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.ba78e8724.0.tgz","fileCount":23,"integrity":"sha512-sVEZxtqeJ/wpDVWQ5yEuTeU/H5frYrIclrez9kCNBW/rnUvkM4DvgU+gwUFbF12PmeT8Ex3ERFxkhZbbMaqdEQ==","signatures":[{"sig":"MEUCIEBiVxcpjUG3BOXhbZX+ii402jDsla010FFtHw1fpQoXAiEAgyDT4YJWPj7iYx3U3vZ7HlbOmcjF0P5oy8r3S02FQq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumipCRA9TVsSAnZWagAA7HIQAImG4od3UOuUT+5O0l7t\nSOaRehC4rzPyiXlrUxKEZuXhqHt/casDmsfQEZn6omfrMIt241jU19qtxLpi\nQAsB97IvLLEyIZ4cbV2KdLVPY3CYX4RoQe2MN0DJgEPPoOSta5WVB5IM0XMa\nA9E/jHWjCzkin/CL3PWAkjlCvDUY07NEuFS4GXdmzGY0jOK+pL1Rg9uBJhRG\nE0UPEjuAjJNqZN/gvgidS2Rr/u77EFuv7V1qT3Qq8sq/HIxns3LpwhaHhwqa\nUhzIgs7KaFD9OBKcX6w6DwZpsFI57T4waoZjyGdM3j49d38+779quZzda9L7\nxloh8NdVgQyZ0vBsVrSgd5jTd983ldzSkiHqbIhg3h5HV1N6Tk72IhtUJj3q\nfEhQZJMVKJfGe73aZrWWQTHmAp5hJfXjelh9dU43WkJuRkebGHl45Wyg1fYx\nPVVrVIdq7uskJ9EPg0kCpuj5mdT4rk4IA6uGwqpesRngQ5N+Gr1/ClY7ybJA\nJ7S7Py44v+2lQ8Mq7xDH4XCn+dkq5GvEzIw98NMOFsOi6jB3OOIlhB9NWXSI\nnPsLx2ufjtO9ocoRUc6aDIycXj9qs7faV9gUcsuqJOePGU11bSS/6ZSJrDu/\n1V6ONpwYM8Ss3wf8ChQQH15BelJjvEhcW1Y6JGjIhzcbjdWbBxnpAAZo9CqT\nnm3h\r\n=NtXS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ba78e8724.0","@material/rtl":"14.0.0-canary.ba78e8724.0","@material/shape":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/ripple":"14.0.0-canary.ba78e8724.0","@material/tokens":"14.0.0-canary.ba78e8724.0","@material/animation":"14.0.0-canary.ba78e8724.0","@material/elevation":"14.0.0-canary.ba78e8724.0","@material/focus-ring":"14.0.0-canary.ba78e8724.0","@material/typography":"14.0.0-canary.ba78e8724.0","@material/touch-target":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.ba78e8724.0_1639606440878_0.01161523011098442","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/fab","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b18103432fbd106179cee4701525e782fbde448e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.e3e073c00.0.tgz","fileCount":23,"integrity":"sha512-7cqoS8GLGbQINJn2i5IdEfLnCYQmR8/yqmfsLhtRcY5MTXOAlQ3zBuWymyixNZtE7ryQxZCWbJpbv7ocVQEOtQ==","signatures":[{"sig":"MEYCIQDtGoDGUPfsvlcC3445ok2LJcoH0dexWdCcBqQlU5cqAwIhAPTZXu7q+euUPLkvVBv2sNyuaImEvTdjxMNSDdR5/bc1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPFTCRA9TVsSAnZWagAA/7gP/076H7uq14y1Iv/FlZo5\nt/pnvbdOpVvIi2aQqdj5eXCmwg9m95KnRvtn3DyxeV/1q5fvPngc7w+IGK4A\n+cTPqpBlNsWHpIL5lhzlwI72Yqpsoa4S3YZ1uUNLQW6CaRDfBXlhMCusIlKO\nxJppQeis1Bi6af6WnoCqL28+c0vV3JGJ84PEsVpGtxm3haXg07/GtBD3O+/8\ngVCYa9FaX85fiHMLSlDQvBQi3xu0+bUcLj0gdamsf+l2+I5dScrXeh9zIvq3\n6wvG1D2IjdLqZzOngCldpKlmMNITbZFlUIFtZRpL9DaByNQksp8HLPUeSg8R\nDGvMq1EKbjkyvLlEs07SkOBqEJeSUN1CGYfZbkl9iHIy5+G7I6GWSwzZdddP\n5qDVS6qo2k1MJNJjOP8jE+OXmYp6V6NEt0ywtghisxduU5QuEiahkjxPqiJi\nUSoDEkRkAb40Ok9q/r62FYIgVB0TmHmdToK645GbiWexKiRSpdZvPC9W1Chb\nf83eY6lPXTIZJbZ+zZYAvIw6w6yspfE61WoeQDXxJBhHsGzWyaWK//iZNd4t\nVVAXL8x06qLeAK19ZDb/aMyX1DOTiaunkWj6O2aG1VViGYQfiWbzPL9Gowle\nKmDlLi7X5JFdeiwivASlHvASWyF2shNMilRKCeVyT7Hk/I7ScvFmLCRo+zg4\ntOao\r\n=1dIg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e3e073c00.0","@material/rtl":"14.0.0-canary.e3e073c00.0","@material/shape":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/ripple":"14.0.0-canary.e3e073c00.0","@material/tokens":"14.0.0-canary.e3e073c00.0","@material/animation":"14.0.0-canary.e3e073c00.0","@material/elevation":"14.0.0-canary.e3e073c00.0","@material/focus-ring":"14.0.0-canary.e3e073c00.0","@material/typography":"14.0.0-canary.e3e073c00.0","@material/touch-target":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.e3e073c00.0_1640034643474_0.7274941801601653","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/fab","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0630eee2ade901e559f6c7d901c905de11fa3d93","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.3366a71d7.0.tgz","fileCount":23,"integrity":"sha512-IHBc9xk/yGs0YYgM8jcoog0te/dY0t30mhbZ7vXEpjHNZETQfxDubfHgRm0Oywa1cw8BPC/jIhBhrPAeaGM6BA==","signatures":[{"sig":"MEYCIQCeZy2CQx9c/4cXfSVdiFF2ArqVqNexGSPucog1mNprWAIhAK5d3CzvP/OMzuwg1UoT71t/V1K3bXh0gncnur2xVaYJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxsXCRA9TVsSAnZWagAAjigP/jg0IpewBDWTSPkxyvbt\n7nbstLeSB8+fKNYnqser8n8SJgz2YWtPaAYne857RFcfZhz0UM0w9QOZtNDj\nZrKx2r6ocHP06MRKT4kFpAkbcI3BvLDj2+4O9dpvNtXju5kivweim6cTGhXu\nHVLqDuJrkApfKlLC9NXxC+UG651zFzKw1jsCSuaJpKxezo5P9iEyNCswdruL\nD1p3ugwX5BwIjhnqGFeo4imO3Kf9gKRmoQWgj5PD9x5f1ONuClHg6X1n2uz6\nbP7i5RQooXzhyrV0dqdeZwotvk+Eemtn4csbOvVO/f0DoodvTqkZ0uBUMVXW\nSFbhgKbLh8/Kw/LjndV64YK+DECsujkbKyG8Sh3xjAqjQsCXh4Oxj6hqv8Pl\nSsf9y8egftCY9jG3Uup3rAzdEzmlljs3B3RmB8zQ7Q2zuNhTQ1LZklnVF9i/\nJcxTBZzr1aBT0JhQja2x/kFlyxiSlCBpkuzMHmjmhaYV4yAqnUsXaWnTP817\nRMi0cIastycMYPStnQktgZDy+Vrd10ndeNg+HWzzGHMm9ngyeDGB6EGQba+i\nGrXNTqC4CmGS3ihbfk2mYEmycaup+SkieQ5O+t+EVncpKClTaHQ231WIEctX\nYEP+ePliimVzMfucqUAduZomYftychr6aCUB/nyFZbn4ivHaABVPguJgy3Lq\nVaUg\r\n=R0J9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.3366a71d7.0","@material/tokens":"14.0.0-canary.3366a71d7.0","@material/animation":"14.0.0-canary.3366a71d7.0","@material/elevation":"14.0.0-canary.3366a71d7.0","@material/focus-ring":"14.0.0-canary.3366a71d7.0","@material/typography":"14.0.0-canary.3366a71d7.0","@material/touch-target":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.3366a71d7.0_1640176407080_0.4029040094277039","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/fab","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b9d17385580fc94fd098566fa4ad1f4061da57b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.c047f7c19.0.tgz","fileCount":23,"integrity":"sha512-SpuRMRKRMFkfiKrIYjuybmWI9BQfa9uLhdr7cPne2D1qHh4XI33KrKcnmphC+M/G2ctrmH9bS+KjkWlp4lpCMw==","signatures":[{"sig":"MEUCIFzhnbiP3n2Gh9GFQlnu6gOgc04Vo99RhoO71cSBXYL/AiEAjgeKklU6KIYSt2ctSAh4xBdSEWamxFaz1WZ2TvL0IBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1ct+CRA9TVsSAnZWagAAcz0P/iRb0HMcW9JtNkgxH2xF\nSP3t/reekBlvIJPZ4RbfbN8D8OzeogmpWFp9faF0l5jRbPQ+0+rpLkhK579c\nbDh5NsAxJWdQlkX0YYlwFsANb/fHQe1eQolt8ubaJyipJK5o8Ll+f1NzZr8w\nlJ+U8ix0CISj+Qp94BYXbAMMpkL7++6ramRXt/o2jt8hJkuTotSRvLIVyq9D\nF3jWZPUYlexWcbWQTixEnOxLNdWMM1RPznaSKhywkXRftreytfCPvvDRNE4Z\nySCf4fyG0TEGMigUYbzf8cZnvJQO+7xZG4IbpAPcPXCtvi3W4qX08tsaAVQ1\niMjqzlBSiWGQYzszC8sg1SygY/dOdZzFVMqsIHMnq9TzzDoqAAIH3lLCpt2O\nnLgDtsv3IXWR4ulj0SLsukRh96ptt5yXAJtMbfbEaYkJ9ndEKZgDruy0zc0q\nMFWlmioy1xYYHKJrlGmo+n5IBlzjNR/W+rtn2r8Zsd3rvJUmez54VZX2T/CB\n1uxAHJfh/rxqJbUZ9jsPVE4EuMjjBNnI7cUnvKNzCMm2RsULwuX23xrfihmo\ndghURk4Anzg4iMivrr2h1PRipQcJdrVDrQTOS8NTZlUou2+4VEbEC5S0hFrY\nADEklPdPq8q2yKa42TaIK2KS+wKYVCWpx+gtGwDQDrdzDGXb70PAdk6fgqLV\nJyF4\r\n=td/q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.c047f7c19.0","@material/tokens":"14.0.0-canary.c047f7c19.0","@material/animation":"14.0.0-canary.c047f7c19.0","@material/elevation":"14.0.0-canary.c047f7c19.0","@material/focus-ring":"14.0.0-canary.c047f7c19.0","@material/typography":"14.0.0-canary.c047f7c19.0","@material/touch-target":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.c047f7c19.0_1641401214134_0.9656276816373306","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/fab","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46aa22d83a9720b5e737889ff7b774d58b9a7429","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.05db65ec0.0.tgz","fileCount":23,"integrity":"sha512-knZwGNPVl+2st8SDnPtU+nB7wq8QYXjzZnXaG9FayIEg3GNM5VOHeIjBoJEuzKAYG9jUnGG9JFcleYTQaPVGpw==","signatures":[{"sig":"MEQCIEuXkRg6YawgFWCDz3zlYjZiF5J8pXS9EZxJL9Qf4C1oAiB964nFgftzejVQx6FRF7ywR+dHQ0Yy9G77BDimMba+xg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yOhCRA9TVsSAnZWagAA3JkQAJEc1uUFWwKBB9vUJsEV\nCWhKj88I+SdB9HpND8hILAo05tSk4tA0Q/vIURbQVuIKcQUUS+LmUlnXE1MR\nP4ocV5xT8jqECM0rrosLV88vyLr4iwE8FBpA0VOtKITWJL58/iTxeVJScg5D\n2VBgiZSBewS+hQyPyZbbQpIJkwM6iNoTjcyR1qSz0NsnO0S0RWqZxTE4yy8e\nLZ0qppi3qaTcQJqAyQq8cPPq5YyJanaBJ4M1a1D3IhmIP5qK28A+zrJfP49O\n0SQ91n30IXU1Qurl0g85NuSlcSEQm+uBwF59xqA2Shy+QRkQONJmz1WOtS3M\nLhH4/+Qd+ZEGzHXn+FNWf46qSruKNxd2kkcUs71hl/EUe2tIXQnX7ZknZfW9\nkqDN5f6dSeQ/3kGRWf5MZNfu2IQ5mamngUDpuuChTQ3PA3atVTAC4u3vjY1X\nDq5pDt8DnnMSC1OMW+v8B9xpQxnoC2j2Z6o/2fkh1LMur/UvXEz2Hw69ZT4Y\n0JJClyHw2lucgqJTmESK6XHTw1Yt/ZnRdtDbPXcA0bccqWzKDgg64yrp1Gq4\nLN3avZFF+S2DY1kJ8UZckwXs1DD+lSSHwOpkw1mPwOfdb1xa7sIRay1TyYzh\nI/Mnabd+lfBqmP7EJ8r99xcq2SwbDN+LsYOPDZRIOE4K7CTRtbb3fW0CJKWt\neVtM\r\n=IRyR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.05db65ec0.0","@material/tokens":"14.0.0-canary.05db65ec0.0","@material/animation":"14.0.0-canary.05db65ec0.0","@material/elevation":"14.0.0-canary.05db65ec0.0","@material/focus-ring":"14.0.0-canary.05db65ec0.0","@material/typography":"14.0.0-canary.05db65ec0.0","@material/touch-target":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.05db65ec0.0_1641489313666_0.5399192407635915","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/fab","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b81780edd66fab7368fac4264876ca459037736","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":23,"integrity":"sha512-mbiHDI6HvvpqxGbDP23B1WMzu+RpJZ1ZoWb3Gvj6/D6/nyFDBFIDSo1zE/sS5wc7yhA5dzzSqbeyu0LkKtAr2A==","signatures":[{"sig":"MEQCIEaAxtdF77uc20vHwwBJeN2cK8ll3YncrPfxSjC4eXk8AiAj2TTif6niEEVRA+H4smQbhaKgh57bdbvCRIhLVhCx3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GQJCRA9TVsSAnZWagAANPMP/jepu00VeH7P6NQCgCc1\nh2tltMZYpW0a19YOcZ0htWOv+ofS9p506PETRH3jyzyRf7hEcKQK0S0vzrrY\n4PCW+8whRkn83p7NPduvMW4+QjNW4tYEY0cmKgzLc8489QbL726ZT0cdKco5\nMIz4yNZbzOoLltpC7ws1ft+KKmMs/f7PbFWpATgdrSThr8bQBOBbAoxLZgzG\naaMeN6Kd8NCYNEDQj0v/89hRrjCOkX/VqP/BkENKzUscXXMgDBtCLuLXChcW\nXoo/WAyowLetTxD0FG7rNrggUenmNusXo7D3ZPNnzMbjsGigGZLDH+YKUiZI\nGnzqOdveFOxxfEsjm4LdPaXl6HGnKTFOol0mRa+YOVsWfnzTW0jqpmCH/scY\n1VqvTLm4iEiQ0P/J9OSsTQIoTqc0E3IXi1uLo/4JHsEZajF3We46nYHL7Rbu\ncUaVGA5RQtLyKtSBULjBCVDfeV1r/OyQFIDVdC86zAJnItw5DceeHSg53e8H\nW0Xo2+BwgGtlLbcam850uxo3ZCPKCFbqZwubcYPbghB9LXJBEsm6q8Hgmvye\nua8+fEu3/7GAKlGkgRfjhyn5inAQpNs3OAAItofPy4IEL2l6NnZ3yaD0Ume2\nedSvCoexATPG26OEK4ezQQ8ytDIzcHGkm2FltlB1UqU0J9I9dcuF8N9Rgg0O\nbFFi\r\n=R8lq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.6ca8b8f85.0","@material/tokens":"14.0.0-canary.6ca8b8f85.0","@material/animation":"14.0.0-canary.6ca8b8f85.0","@material/elevation":"14.0.0-canary.6ca8b8f85.0","@material/focus-ring":"14.0.0-canary.6ca8b8f85.0","@material/typography":"14.0.0-canary.6ca8b8f85.0","@material/touch-target":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.6ca8b8f85.0_1641571337190_0.035763306060519584","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/fab","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6af63a86afeff71efaacd33d1ba326d6bcab90c6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.173ee7a7a.0.tgz","fileCount":23,"integrity":"sha512-6o3aWGnV4/Lq2FHYqFpPF4g/h69WCQyP2AE2Tm1xCqXpKnK5cjjbGcXZWif2B3eG45tocC7nuN1vs0t2vY9HBw==","signatures":[{"sig":"MEUCIQDSnlKCGjSNw9aHQOb2fw+66Ymxny0FZOEXyFxGr8B2IAIgWnODXJlsK9Ihuf+5CSwdceylVruHrmOZON6pwG1m6LE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GT7CRA9TVsSAnZWagAADGkP/3UUltPJgI46BnsW5hdi\nP2wPHS3kx/DT9OhmBNNDmqOjsgNQpD0XSV6+hLQh68CEkq4ft2jnE9IZ1LYw\nLB19/draZHbcki36JEnljOpSOr8yaw0jNOd9IHIIaK4DBFHQUWgbRQbFzfxr\nnQZ64fBTVPNGiHsK/fqjq3/2m6Bw7CXZbpih1Qw7T50nJ5uHzkiXyWltmBt/\nN82utiJ2+eQE4nb0Q9+hevmky+pyWiM+8EusCoPp/aqeMvuBFgnl2oCxTftR\nbebtnB95GDuWRSnGYlkq2J6CJv126Y6oksPRaOVvmZdqPcEV19yoTAfQgfJf\nsPNEXmsqCvpHm3o8yJ3NMejD7hDptDAcuyc958x43nd7YW7Wn0ZnM+MzlgXb\nmNCZLIB15KQmyxnThOvN11FKXQ3Du0DyWMLAr2tQGgmOLOS6efX3tbCalX8N\nS/aTyYuA/7dUNvp2JS7wOfOi50HCvDabnARcAbBXQRMYZjE692hKMNfyniF+\nIPJDFWerPpt6d/cHOIq7eAY0dBpchxyYC0r4AH+szn+zGiNGYYRvJN4KrlXN\n2VEwrv/8A3slsiZV7DAwaMGwqI4OTf38n4eb/C+jYxPlFW1lzs7kEWHEr8bL\nn/W3o7hcXqw0DBSOnnoTbJxYCyHS5G8UlWMT7Q9qo0WhDVMldfCMpercRJPh\nPVPc\r\n=Ec73\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.173ee7a7a.0","@material/rtl":"14.0.0-canary.173ee7a7a.0","@material/shape":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/ripple":"14.0.0-canary.173ee7a7a.0","@material/tokens":"14.0.0-canary.173ee7a7a.0","@material/animation":"14.0.0-canary.173ee7a7a.0","@material/elevation":"14.0.0-canary.173ee7a7a.0","@material/focus-ring":"14.0.0-canary.173ee7a7a.0","@material/typography":"14.0.0-canary.173ee7a7a.0","@material/touch-target":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.173ee7a7a.0_1641833722671_0.8298960956636028","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/fab","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e190d80a15a3e9fc1537d91835f8fa07ba2093e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.b704e4dfc.0.tgz","fileCount":23,"integrity":"sha512-O4oCV2FT8lddCuy8/pdHVDHWoDXgQkZT+PLm5bZxltAa+bciXLL2UGrLk1bMmjOOr9n4E5oZt+1shUcEZDtmpg==","signatures":[{"sig":"MEUCICLtAszeNtmJXm8tVOaBX+bOHS1au/R9j1V9VGeh3mlyAiEAq6Bs4aHgv7LTHSJ4MO7XUnPyjB0iqtNbKgDr649u3jI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HwbCRA9TVsSAnZWagAAKp4P/RMqmC4vPSI+CjG5z0mC\ny0aaeoPDtST+79LUgI6kCVdZ+hi6USsvxJ2coxYSWUzlkypmFb3Xw8hkw80F\nO4ILrPG3Ui4cdBJ1SvO74844Nbaz1udXYHIUru7z+c5DYhowVrUifvnAZ6BN\nHDlS0h6WSVZ5oA+JZ2Qu9y8ML2aBaFyPV6USKL0GJ/MZ1O8nlPNLzvwf1Dml\nKgls/zbgoxWvj842eZNGrBJcSZQ44kItS7R9FH2I3Baw7I3XJ//PermJHE3L\nN24D/WWZhnsgPZwfNo5r19QGETCnCyICFh0cHN/tYCXfWYISBb+DPjDLUK7T\nvpVwvSCDgcZip5nnm3C5wOgCXbR4sY7WS0YOpZsLznnSRsSa2UxrrueyZkHK\nMdMmorpKn6D5/RFJpWQSU0XrIkCf9zCDtHN2q8l3pUFjVdv1xYmWpgigkoLh\nJn0mNbfT95WrAAwvM9Qo6V/pzyRVENTrlKO6OMc8acpojtt/+GQ/ZNSxE+oa\nRxMhOMuooiVFHLnBgiBnLvhbt+PjvLZgcBlY9cdQZAmHGCpStDkdIAtjnmn3\nl6i+2ibBU5Nv7fLE6ze4k5LZyAEPzBYQzeeOPVDpKonv/EvCZZCH1BdgwES6\n7XzIodGV1zVViFJxCFs2QfogeNTjMhmg+wdvkcNEAl5JAQoXqj2kUWY+2JfX\n5r9X\r\n=tb4i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b704e4dfc.0","@material/rtl":"14.0.0-canary.b704e4dfc.0","@material/shape":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/ripple":"14.0.0-canary.b704e4dfc.0","@material/tokens":"14.0.0-canary.b704e4dfc.0","@material/animation":"14.0.0-canary.b704e4dfc.0","@material/elevation":"14.0.0-canary.b704e4dfc.0","@material/focus-ring":"14.0.0-canary.b704e4dfc.0","@material/typography":"14.0.0-canary.b704e4dfc.0","@material/touch-target":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.b704e4dfc.0_1641839643816_0.898997529015034","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/fab","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dac21622d06c842eb61c87bf45eabe2715baf30","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.c14e977ee.0.tgz","fileCount":23,"integrity":"sha512-9ThCxXwKFrQkfLoVw0TSwOKi+qWUbzu+acdY4hfXaz2QQXUIR/tT5DrpYqYnbe/qxlVbg2BaRYistCRjQrd0CQ==","signatures":[{"sig":"MEQCIG8SzfYfE84OpmABqvyb4nRqI7CGdnHeX7jsUvgGvFaUAiAib2oCDi/cspivfpAXT2y4HQXNRZnwNPoMrNiEiSNgYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3adTCRA9TVsSAnZWagAAglkP/jA5vnoAxM+owZpSLezW\n4EzJGXbxh5Fh1TndMzCTZB7OoUEEYFVLcTS4shQFRRl42AAk0eEAcOGnPITW\nt0NxUYQSbSFHmi+/rx11mh4A/GhonT/PA/a1qb0JL94KtTqd1lT5Kz8jE89K\nhyP5zCAJ6xHMHYNkhuZJ8pfcD5iPpVkeqDylTbg9IusJNC0jMk3yM0S4b5C7\nbeL70hoppTr/yocB5jTiTj0Z5xta5lqjAtdhpEmaqgJ6NCz6j2ImMUKf2Yqd\nJ9BuIXL4JWIZ1nQYMbaCIKoGJlUwIPizx95RnoSHGNIeIEGyFcR1AqkI4iH4\nLlnq23oYhJEhbhZsZ7+x4U52QwPKe1s1d9eRDdEU4+LptlxUi7c8Pv9IFaEu\n9xEgPonW+VnxTNeadvKOMUu8B/6liKy0z/YOJc98t/Z+Vhj+m4xroUgGOB2g\nnNL97tr3dI4P8JLepje+v02hLqDc/JTbG7eK6ZoGgPaOcCAd9m5VKFbjhoBg\njzxMGafnkDewju+mYlfqQjzz9W0nqu5zyx0UjKaZPhAjF9nEGyR6hEtfSCKQ\naaM2NmebtFsKGr6JaCtjtgDpYqUaDCmsCMk305ZpPDcP99Enx6Cs+ECvOWN7\n0FDfDB8XqR2JPLfaqlhfXEPnjmAZv3/sEqqqVjq3MbGFXslhddncX84gWdo3\nMuIS\r\n=oRYT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.c14e977ee.0","@material/tokens":"14.0.0-canary.c14e977ee.0","@material/animation":"14.0.0-canary.c14e977ee.0","@material/elevation":"14.0.0-canary.c14e977ee.0","@material/focus-ring":"14.0.0-canary.c14e977ee.0","@material/typography":"14.0.0-canary.c14e977ee.0","@material/touch-target":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.c14e977ee.0_1641916242860_0.7394237841211679","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/fab","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9c299f0a718aecd3af42f49fb67a0585d5ffb39","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.b094eaa4e.0.tgz","fileCount":23,"integrity":"sha512-EVmb8g3T+8IFC69RG0TccTpGYoNW3rcjIZiHJmJf9wUchdwkFIXwdNmHI+P6SIHE5iZulzdpcFF2/DzmaA4Puw==","signatures":[{"sig":"MEYCIQCAE7ee7UAOWEnzqIV8ERYx31LUEq/cUFQDTpCiiVd15QIhAODF4uff4lnJ2rOXtJHGyXEE4RereinztYxTO6ZeYFQf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cRPCRA9TVsSAnZWagAA+pQQAJ9G6PuPCP4kTsOUVJd0\ncNNYipDmtbkSlBiFSigv47cY7P8aVHh7iEG8OeiGwrNVNrLREd0vGNp7Fwcr\nRuEjYyfGcmkQdU+6cMAvGeoOoBptVoNE9LIH/NuE5+f6xEchuscPjmFDvfbh\nyWptKBUc1Sq5Sl9D4gq7mocOMSvGh1UZR0nlEtcOC+8IDGKDNGTIZ3w5fhEe\nVfrOHU68yJnoCClCJXSsfLbLJAEFTOd533cwg0wl+MBrAtDfPW/i/60uzGpX\nuM1K1RvpvWR/0XiQpsD1gaOyiXSa8GJ6WtDg5xC1uJ/seyKwSJfEcB4vLzHV\nh0LG4XNn4K3oxMNWVlYQ81FLnAx3i9ra7KyRunKxNPxLU5hueMSTVJWs6qCw\nv4E2c2VElAKXJ5/JKmKu04SdgFRBXSltW1J+pnm2+9KDdqQGM+14u+DpIW7M\nVNuZkrTuZz5Oq6xrln411ERH2HzO4zB+LhME84M2k9Fjj2wgPqNarlcuJCGl\nAtDUVkIi6PpgLyHTLHGznk6q0aOGxLU3bdR3hpbpoE2zF7+Hq+zOgmWDnjS+\nvC9o4RbpMPpTA3cvhKV7M+x2lxennrY9ViumtgcPMHXAVIj0dvxIBV5Gn6pY\nHuHgy5njO/QY3QyEnNfgmyG7xrLXcluDvmIUaM+VgL4UDiTFrDnHHT7f761l\nyti4\r\n=6hTd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b094eaa4e.0","@material/rtl":"14.0.0-canary.b094eaa4e.0","@material/shape":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/ripple":"14.0.0-canary.b094eaa4e.0","@material/tokens":"14.0.0-canary.b094eaa4e.0","@material/animation":"14.0.0-canary.b094eaa4e.0","@material/elevation":"14.0.0-canary.b094eaa4e.0","@material/focus-ring":"14.0.0-canary.b094eaa4e.0","@material/typography":"14.0.0-canary.b094eaa4e.0","@material/touch-target":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.b094eaa4e.0_1642185806727_0.9142160720111843","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/fab","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.390220e42.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9ed35a8e11f1b50407366e15608f2f924145513","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.390220e42.0.tgz","fileCount":23,"integrity":"sha512-vrNCpItoKmkT06jjNqr/FjH+V4yDrWfiQrEcWlWAo5oIXd7dh9BtFPW4/USazWdfj3jUUrLO8Dv4hSKfg4xznA==","signatures":[{"sig":"MEUCIQD8guMMMoR5J8TxUDAWtel/hQEQAcBxvepg4e1xZQGW0gIgKTO7NmK4aUY1rkBh3imEelJ3O01KBNl7XP5X1mnhjrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z2TCRA9TVsSAnZWagAAyaEP/1EWogwlocnsU8Mk9eVe\npU3vQACojkAAjoE9lMq2CkIXEMJrbiAKIdG/6RtQ1IcZJFXkfFD9GpegLpZ4\nDlyTFw6OUNJwG0DUk1foNSSbd6yN1FlD0rqFTyDwVWDDCihEYMFEK/SEyd9f\nMkU3zEaVmONX/EabmiPKnvyLmCVJu43pYPU/TtThUGyrFfnvmfIqZs+3pT54\nqkDwDmqtasIp7GdJhOEYru7Stx259waa/z475zOGDNbatOqCeaVVKPhD/Q08\nZ1yMK9R8SEdls6zU499z8w24Jux/+7wYv69jUbiFrswbUeFltJKzCuumePTR\nK4Z10mU4YdF1uPih9Rrum4GDB8C9rNgRshGZNt2Bgfg3PbZ6ZUDAfGzKn1E/\ncnZTnRk5dRiXZrdblBkPAPArmrOaTR9ExyW5PSGwpDNNVf57ODEec2/r+RDl\nUGEj5GHcKWEAxi5CXPX46DIXznHqDIV2CHsUnFROSXEBDsmDyDqcXngLRiNw\ndUxean1zC/oILZ6Aq2Bz3QNp1RiwKVEIT6a1VQ0tYN019UjLqtnhpogn0CRh\nzGe40JmAlQEhmUV9k2RZvxq3nMo5lAEkFJpB/eHiLm03Jq5R3ZMa8rI4hCco\njyHAlkYg4Tw3hhOP5nn8/jhfq5ajFUUoeO6Qdo36Car8bWA75vDR1UtdrWNZ\ncwu2\r\n=a3Kt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.390220e42.0","@material/rtl":"14.0.0-canary.390220e42.0","@material/shape":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/ripple":"14.0.0-canary.390220e42.0","@material/tokens":"14.0.0-canary.390220e42.0","@material/animation":"14.0.0-canary.390220e42.0","@material/elevation":"14.0.0-canary.390220e42.0","@material/focus-ring":"14.0.0-canary.390220e42.0","@material/typography":"14.0.0-canary.390220e42.0","@material/touch-target":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.390220e42.0_1642438034826_0.7024251971268114","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/fab","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebe800e6a2d1b8eab45e5aa45270d1a355e63ef7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.4b5391f8b.0.tgz","fileCount":23,"integrity":"sha512-BOfZfImmzBoa7KOa8QeluqddoNEqD4TeheJKP6o0K1co7b46GGJzlnQBH1LC/rFZOudG/V2onPNgOvbbLfYW6g==","signatures":[{"sig":"MEYCIQDyfqG789nXHWILye54eXETh68ZxyA9WLL5crUROMU0uQIhALhOkUOnerub3Mly+Wmb6WGzz1obdisP1GWRg7hxqtz7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KSKCRA9TVsSAnZWagAAnrcP/iMD+NW+VoFw1xOm9AMr\nEDPuKWeTXxtAVApgVxdSvk/by7ftZWGT+CcffyK5KziIJJJ12e3G7L12L84E\nlZToj6ueejbOzj1kKYU5qiXjLQ6MPslRj+kyLIra/cIF5wKQHDOspSW31tAK\n4hrXtaSD59YPFeneglDkKgJg2sBj1iZEQfTBiffZfNDMx6kmNv8flfHQTwKT\n+IyGhmAefFxAEx8tfiWNi+oQayLYsPPay//y++7QL6gkp+K6etRpiWzSv2ZL\nwRXo5XHaKLF32ZJFAP41aA+XUTj+aKeLSFVf25NrWs6qGcah9w3KStZ5fOQn\ndqw7SNBSAOvel8rP1QYn7GYM0URd3CvviBK09fdETi3RHy4gUzCf3/P0md9F\nFqxZrwH1ud5HhVnnaRkIcKjhfrFtM+rfjYAEJkRN15YYsrJHvnaEjZ1UvYJ1\npCjzTZsktxf11MDh+JCMUXQZN0dPo2AwcVOL21DuXRMhXjGPqcXoyLHnOSfl\nPYJAzvmGpP2hJqOjhLSZ6PrH/zng+KXD4ZvZJcd8OvzyiOGQdrfzkqlQFCep\nOstY/lf7HjVpU3/Kc0h6S9KiNnTOuH6YvOBT+rPbKkX5RQXqGsXD3ra0SAOw\nG6Fs7PMkQ8mE09YIJvczfKhgKCibeWTe1ZB61NeDGJvPGgwtauAb/Ik1E0Gf\nZ0wd\r\n=Tc4f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b5391f8b.0","@material/rtl":"14.0.0-canary.4b5391f8b.0","@material/shape":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/ripple":"14.0.0-canary.4b5391f8b.0","@material/tokens":"14.0.0-canary.4b5391f8b.0","@material/animation":"14.0.0-canary.4b5391f8b.0","@material/elevation":"14.0.0-canary.4b5391f8b.0","@material/focus-ring":"14.0.0-canary.4b5391f8b.0","@material/typography":"14.0.0-canary.4b5391f8b.0","@material/touch-target":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.4b5391f8b.0_1642636426144_0.08911625946188928","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/fab","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7afe68d636966049996bae9d74298fbb41b7e86e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.cef6bc623.0.tgz","fileCount":23,"integrity":"sha512-hfIk2RvgjwWUTnQYTAnQkd91l41S85wmZaQZ6/jzKszTyOKWH+wdcsVuBPOpVBBQD3+ESq9mFlNX+AfN5zwfLQ==","signatures":[{"sig":"MEYCIQDIZaAKGkaOOYvJrhaOYoeseOurZnkt4r+jb6HQdI1iEwIhAM/BQHTDNIkGqbVXmWaFRRZpl0UZkxxiaMfgH2njKOlT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KpZCRA9TVsSAnZWagAAvK4P/R9euMKsd9j3ddGX9ZKA\nDnzWGxHE33hIOh50M3y7CqEHmqf6OZRTWkNhx7jHDIG/8+FFucqRKBoOTtEN\nNJBHfslRATMQ8GfL3fhUGH6tSq+H5nftmp8e1tcur2M6CJhx+lzAuJi4I4OD\nsQE96HzaNLlvdYt7kNY5xnKWn2RU969BBp3dfdOPFioINXeufpGcoY6eRsU0\nyonfTvAIHhgRgoj6HBFmBuANlbcR0B+cXQOG0z+wiBhDdmdNvqUbfdKJYl4q\n30s8k4cJG0PGuR50IDO/T6ss/pxePJIZCVdal4EZrWBlLndmGmtCr1mhoIMd\nDmK6R+s3uW+DKsm5nkA9Z+Vi5mSWEZ7uWUBalgU1eVPEjdNwD8uU3o6dfRhM\nrFRuPUT5mMPlQhV4UAx/eLVDaGaulkKc9rB/Ef7X54QjlwDDMGmnEVW8a/Ol\nPFEDHyA/srdTNxZRCNF+m3ipGFIJTJToYmWhbbIJSYyAGvZ2vpQELSkdM8ev\nxKSGSdS/g6c6UH3i+4ZQSTVeBrEwqd0u8ujHbi1wsbFtsBX2DGR6IALkecKi\n0uoE6xMz8FZ32KbszoJR3SCPjTvmStmx3l5GRZMOIQL7tjNkTEn3vI3M6Btg\nhe4CZxh28QDNWMxvFM9+Dp1uwO+lS/XlUrS02WqZJZhscxsynDLF2VYE4j8I\nCP+F\r\n=LoEs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cef6bc623.0","@material/rtl":"14.0.0-canary.cef6bc623.0","@material/shape":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/ripple":"14.0.0-canary.cef6bc623.0","@material/tokens":"14.0.0-canary.cef6bc623.0","@material/animation":"14.0.0-canary.cef6bc623.0","@material/elevation":"14.0.0-canary.cef6bc623.0","@material/focus-ring":"14.0.0-canary.cef6bc623.0","@material/typography":"14.0.0-canary.cef6bc623.0","@material/touch-target":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.cef6bc623.0_1642637912833_0.21360412359049796","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/fab","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.0379179c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0f4bde5077d4d1e3c6cb7734d114ce7097e407d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.0379179c4.0.tgz","fileCount":23,"integrity":"sha512-4UtnbK1U6JPRJU4/QpcT/0WJ6Oh0aGtMPQ4/MNxCP1PvZFNWZyiZqKh6Pcgc/vFj0o+bIXMOrmrtpzk0gRVVug==","signatures":[{"sig":"MEYCIQCP7vTaChSKuVquonWIqHgpwN9AdBcZlWuGcAHZ7hhV5QIhAMtIIBN5tke1wrEKQmiVFv4TfcCU1lcJeOMkkSvhMPFK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bAdCRA9TVsSAnZWagAA1M0P/Rob5oFj9f3lWhW0bSKL\nbUlX/R9AtBTHRdtFLOIzEk2L6TYCs5Sp25m06eJnIO8lJ+sBXfly6PbBN/kG\nGnfHX38Qf3il2k2kGTglnDrfXJOPpd87lpnZW55j2F/EupTJYKV+P5vmMUwy\nHvgWEqiJm1Y72d+Vh+5ntiUIGTjAj7ywIwFTKnqoSeFdFHH7BCrnuf3P22eW\npHrCw8Wd83vX9mKAjF232N/IwAZISFDbEvASjvb5eYugawXt8S1ZC7yFkqYx\nVo3y8r6vNIkpav80LeIBNwkh7xpls9Jlhfs4I84ULSct2cGXksZKD6rvOVxu\nKYOAk+fzE5Zjl9juVygJvXCe/emlKJKzOmPM4E3I9VXInwHoa0twWswwEwyz\nvM7YWnt61Z1xLA84+tUEKzZqftHG9HIyuAXjy8O/H7y5i85r0eRuG4DPRV/O\nwah+oHAeiLgffHa+JE1L412OQn8heNBziGcjgBoJVM+D+LhG5B47RFb9Odhz\nAS9WNQMyjFGQQXl1EYQ6OZfhuDhJb9Q2RMZge2IGGoYfBff2bgMLV6IStXDl\n3D4ZjAzkjVhu6WKU3mavHgKs2iFSKKu2WbSkm7O1PqTtwUSPOsHSVp/uxglf\njmLO6gnIGw04CbUSYwwVtCN9V5ZzXe9+wEVy15YNMx/7vyAkQuRWVBV87Cxa\nvQ6H\r\n=trDY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.0379179c4.0","@material/rtl":"14.0.0-canary.0379179c4.0","@material/shape":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/ripple":"14.0.0-canary.0379179c4.0","@material/tokens":"14.0.0-canary.0379179c4.0","@material/animation":"14.0.0-canary.0379179c4.0","@material/elevation":"14.0.0-canary.0379179c4.0","@material/focus-ring":"14.0.0-canary.0379179c4.0","@material/typography":"14.0.0-canary.0379179c4.0","@material/touch-target":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.0379179c4.0_1642704925265_0.7943177173553011","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/fab","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e044d506f521c76ff95aa614dbf10ccd7f4fed6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.e62f3dabf.0.tgz","fileCount":23,"integrity":"sha512-LZehpOfNyzoBhE1237lfkXvb0gt6TIvG5UIlyJOqJ1RoKTlBy+hlyrQBrBGe0C/9hY9jY4LMdL9FiTaxYUYSpA==","signatures":[{"sig":"MEYCIQDAfOv3QBgvun6JP5MNLYSClD+BVEzMae0hhaF9aO+TNwIhAOPOR+y4ogScvSFbC0dfz+OO5NmkqQU52dHnjpXCaDil","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zv4CRA9TVsSAnZWagAAgM8P/iIs2KdWd2Tp3Rt9MOMk\n3PGo7g1Of3sxhZoFtmLqxGJq5Smt2fc8ldm70DT2Di1WEtPH/rQHmFrM8uIn\nV028FR5Wn/psMnqFGYiDXQwX6D2MO8pAvi222uCRqvvJn0UWqoehGb80Kgxv\n22b63aFu4mFiauK/ByhfVu4FR/mKYfuyWMWduxz1yU4m98qGmS1O8Hse62XV\nKbLT+FN7eVlYrB75RteckfaD01Xs0gGw8ZYU9wUgQ+BJLkRoHFH8/iIiyFqM\nkl1fCtIzsW3T8/iig3E7k15GXLAz/nZvRIgmKWEpJxWJwS+sW1gBL976QHz4\nxRrGuP3etiofZ01lyVc0bFFdj3rnawZd+jCRoKoX2l7lfZQuugi3UWbSPIlG\nOlYl6ixoemeo+kV46S4e/cSUHMarGP2s5t1GBkSg01S06/MqNagp4GhE/SLT\nT6Q77nXkP7krTVcpZpRrhnzJGwSSHy9ZqVCbvXQwzbQcBMEjXBFnZJEzf649\nTCsiGTKS+D2HcDO2M/YYc0bOU9GN8088aUZRCT/QslkjUTa/VtOMoAuTsAAv\nVp6LFbBXEPubHV2dZW0LSsmUuvqvo3V5AbNgMz69ig0oSMI8mxOAH9j1oJAI\n/zdobSAyS7LE19QoiZGrMRMUFom1aUxBfrPYDTSixsD2RBv/zU/u0WDSIyDP\n4gwb\r\n=1qOB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e62f3dabf.0","@material/rtl":"14.0.0-canary.e62f3dabf.0","@material/shape":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/ripple":"14.0.0-canary.e62f3dabf.0","@material/tokens":"14.0.0-canary.e62f3dabf.0","@material/animation":"14.0.0-canary.e62f3dabf.0","@material/elevation":"14.0.0-canary.e62f3dabf.0","@material/focus-ring":"14.0.0-canary.e62f3dabf.0","@material/typography":"14.0.0-canary.e62f3dabf.0","@material/touch-target":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.e62f3dabf.0_1642806264686_0.6399592169283499","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/fab","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0385403a6c5ecb2f132dc6a4dc503525ed9b2674","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.3e20c1de8.0.tgz","fileCount":23,"integrity":"sha512-MWRV43HJU60mpZLRqrBJZC6vYNV48p4Mqx5J2s2Wm5Mo2L3vB9Cz1c6plfRPrvBneZSTdmqQiwOeCqpFix1zaw==","signatures":[{"sig":"MEQCIEmEUZpxy5RTPwZpGKeeqVEzQLNGT0bNvqguzKA7sflRAiBMEk1ycpIAVFJ7FD7sxBh+gM0RpDoQRdSwpzqm+FVe6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BgrCRA9TVsSAnZWagAAOUIP/0c+Aghtf4MuG4e3IV2l\nPTJhux1Qb9a1N+kAZDBD5Mj3jOEuoq7rd7zsijEewfN0cMAgS+4UHO6dyrfP\n+nTz0vR8E0gaItn8wz1LHOoAO62W044XnfSPugO4+hfhcJ/HfIkSMOPzMZaf\nFdf7oGKthyeapVEU/dXTAxT3f+cCKu6V/YP/hUgU55KUMZK3UhzJZXtaWOGa\nMjQCjxvd1fLvNPM8jHXkmEOg5wBSa8Fa2R/o0y1Z7qAskzwjT3RE8VIywgcD\np/ZZiOPGXi4Y8pLdu0f+oRPI3Djxgg1QlijwACZBNH/QeHR3PhuDSq10uGLi\nfuW4B/ikWcuqb0WX9ut3AdG9Gye1+ptXFB3derw2OW9pqlYP4iWSWPP1P306\nNs47SjhHZpkI90fgjdqMv/l1rVQBOjnGWgDwYXFCzerWRwYO4kCswqx7jfwO\nVxOB3IhUgDd5Af3yBUpPTdYO29nQPe/aV1dsgniob9jgzfxHlfEou6znMlqv\nS59EKLgOQi0CRAEhkTlKV2WQc4vDsMtVM0zWV0lY5XIG20aIOTylZ/3GaWNv\nwU1mVdr5XL1hmTatPmzM8JTHj9HW5ibFzTwgWGuUuOiPf+hjyZu9Og2hv+KX\nShQX0uDYAuMmajO+Ubut+pLRA5FjlDwPhwHQoUuiyFuYl7Uw//df1/abNN5X\nNAVR\r\n=Klro\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e20c1de8.0","@material/rtl":"14.0.0-canary.3e20c1de8.0","@material/shape":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/ripple":"14.0.0-canary.3e20c1de8.0","@material/tokens":"14.0.0-canary.3e20c1de8.0","@material/animation":"14.0.0-canary.3e20c1de8.0","@material/elevation":"14.0.0-canary.3e20c1de8.0","@material/focus-ring":"14.0.0-canary.3e20c1de8.0","@material/typography":"14.0.0-canary.3e20c1de8.0","@material/touch-target":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.3e20c1de8.0_1643124779190_0.7390147945515495","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/fab","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ef4c66583b40eee4fcba06c6eb5e40f97d4beb8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.9f9d928b2.0.tgz","fileCount":23,"integrity":"sha512-bkrSPoC/HXv3N+4LoYk0hkqEjEe6bW/Q5igy9o8XLE2Edj2xnNHdjTuNBgd/+99TaZ70LEzY/X/91kHQvXO9Pw==","signatures":[{"sig":"MEYCIQCnZ7T1sOmZ2Tdd7PJvlpQj0ISDF625P+qcuacxSi/QkQIhAP2woEr9qFjCYFuiuAtGf14yIjC2gpewMpiJGzM1Tsbn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uDzCRA9TVsSAnZWagAAkqYQAJeNI4/VVLAHyKzlw+SG\n5izQZKRFVj8YB61OTDdo94vafIbrT4/cD8pj6W6sVtSAjcZSJtsyDqENsyj2\nheAeUjIvXIM90RlGt07aOp+S5923rBpruJ7d5P+UAyBNiNYP1a0klE5jzKJs\nki+Oz0dqR7ZuNM3mlFhc2YC5ekZw1g39nRgzWYPjZzHBf0sq/BufZlHCXz/p\nh4Y6nEdeZi3cxo/PBOM+WFEyqjgc+W90mko/tgWmxOeX3hKvixA25sn+TvXY\nWmTKWgfbfumoKPBirGt95Krw2XqaDlawtvnVoxj3BVOl4qIgkqf8WeRrQj6k\nXJQrbnI1hg9JZiu8/sQRGXRwv3mMQ5yvZ/GexvGgfn2t7WrMAzw9C1Y0VUDs\na3iosT62gga7FvSc6ynq0IEnaG1Zxv50SBZmkDZnM8TZVGyC4YT9+VlHznkz\npuBFCn8fzRoj6D6w5SX9XC6/MjfT9Ji/p4haOyhfWUqKvxmiTZ+TGacdLWra\nYzgwZxzYdDHrjYfD/U6Gr6DU1IlZdHwEJgw8CmkwuRyR9dPBrRlm5SXVuzm2\n2TQZR9q/tU04k3NL0l4w+oLL9RL8C93xjGhULeM2IO+vOsKoG5SFQZeXlW6o\nd+TTL7KBsLlOY2Yw+14ulZtn3TpHHuIMjtlkJlkYPU7qoPIFW6ObvqHXSIn1\nVftq\r\n=+imH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9f9d928b2.0","@material/rtl":"14.0.0-canary.9f9d928b2.0","@material/shape":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/ripple":"14.0.0-canary.9f9d928b2.0","@material/tokens":"14.0.0-canary.9f9d928b2.0","@material/animation":"14.0.0-canary.9f9d928b2.0","@material/elevation":"14.0.0-canary.9f9d928b2.0","@material/focus-ring":"14.0.0-canary.9f9d928b2.0","@material/typography":"14.0.0-canary.9f9d928b2.0","@material/touch-target":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.9f9d928b2.0_1643307251656_0.18514030329649844","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/fab","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88d68339b9b49a7e840118b367e6c3ee9e92da95","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.a2bcb065c.0.tgz","fileCount":23,"integrity":"sha512-iFSgYed7tU7898y8GBKoSRX0kKlNl0M05bTs4zFubik5K665DtlgRt3B9ZKgvw0CGXeMIjewxRjuDhUFoUM2jA==","signatures":[{"sig":"MEUCIQDzy/W0fZ0W6S4om/72CquiFPBvEcORFaV7+/WxN1JCmgIgV+xonWebcDGoyTpQuJKUAhidQ6XGfzMSC3rwLAGRukQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EYkCRA9TVsSAnZWagAApJgP+wXuI3YTxWbzfrp1I1CJ\nRD01joVqfcYYtHV9IoC9G+d7cSH8YoSO6HH5AyWsjGwNYrwpy9FRCCi2MRaM\nrTtzDJgoWB8aqdFdnMXmJ6PQSPfzeD7zDpy94wzWCjpLTJgJy8L6fJoK1Xkm\n85+QXIjegYSCo6jE8XhohZuwM9iZmWjpKK75q1c++3yGmv7VroVt3UTEeKiz\nfRteZxNJP4047wQZ8jck35tJF3aSHL80aifM4u0qlFffrIO9r7HI7HFcRZlK\nNvNbKph9czrzR64yWuhOcpyLt9fBycaTPfARp9n1spfT4C2RbA1R9S+oJnRH\nRhME5mDqfOnUC4J530IFu2TdTdW3iFqEsUVh3Gk5w6GExRXurt6rlRjijBq9\n1HVibA0m9UoLY41vnAD12HrMBKIVuXdZbfeZhfpAVuPwtSOBBWAC2b2JZuKD\n+Kc4latxtQHJImLSknF32m+Hrl08gJIPtVZLwzuzk6CwHGqzarsZV9OeBQOl\nAdpHHPuIOZfExRHRcNTqsCDwOQPi6P3I9Z/fTbNpa3TPgbeY/AbeLtAviAyg\nhCU1fIgxXJ7qCYRvGWL30e9WcXMSQxJA9FhVRYOSkVJOfzguSU5L30e3G6Ku\nCdv5UQln1LIfAITMGuE7l1kiuRDPzkKvlpgeQxdzGJrPLV9zG77iUpx0mhu1\nL25z\r\n=gFae\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a2bcb065c.0","@material/rtl":"14.0.0-canary.a2bcb065c.0","@material/shape":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/ripple":"14.0.0-canary.a2bcb065c.0","@material/tokens":"14.0.0-canary.a2bcb065c.0","@material/animation":"14.0.0-canary.a2bcb065c.0","@material/elevation":"14.0.0-canary.a2bcb065c.0","@material/focus-ring":"14.0.0-canary.a2bcb065c.0","@material/typography":"14.0.0-canary.a2bcb065c.0","@material/touch-target":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.a2bcb065c.0_1643398692542_0.4524399645718047","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/fab","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58cea4cc663305f36a8572cd562a40665b43bc1c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":23,"integrity":"sha512-ojyI2sooHLqtcxg0iFvxlDlFDtjDhdHNftG/wV4PQpjQQL8UEOUq1NUY0qt6JHQoLMbewc3GcTSh6VRlhfF/ww==","signatures":[{"sig":"MEQCIA+BQ3ps9DOG26OxSJGxpR8Z89a2TG4LA72nruD68007AiB+JmI27IEmEB/sxrzIrC6HhkchOJo0ivPqsqgerst/3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EchCRA9TVsSAnZWagAAfmAP/jdcnE2Xi7WzOQ5erMDI\nuzM6HN0d5CJ/HvGfPrrpEyOgL+tjy0pkqZMQevjwjkuvEMqH5NQi6JPPr0lj\nHh/4Q4ApZ0KvSWaSPi5zJtW4El42xmUngy5dHFC74ntKXKVlV37Ty8T4aAek\noXgmwm7HCrIyh0Yjl54wfl5wg7QcgDAXBvGaKfQRjkOMMrjliy4ECC+RVbXN\nfQFj9u/lCV+kYkwFwQcRMzvnPlEfY5Vyl6sel/NR3hD4MXJXMFNz1FpTX8Ps\nwsscT+qbyVVNSIAwKfR1H/jnsoHzu3TTDMaEikQXOfMMPGuEqRsnXrPeGWw0\nAJQs8BaH37M60rl6jjtWv7zBDyUj1f8WqJ2UKbZfwqaFFajrNT07zNLJe6ET\n2EDJPPy51/5nOTWBiz5/k3T+LAwym7wp0Dw/u/3VYPPqQEByVpq725rWWGmG\nhPJiao26b21kv39lbi4GtM7wRcG0VFOZsVJxTJxQ++233uKgMUQZXMBqp11V\nDp8CZRBOKJMZPo+C93AAvYHNqCg4hyhRxJULAakFNd3O0kFP6wJEnc0/fA7H\n08TfaEusaNfarrOn4uBBdQ4utr8nJ4/riUD7wKUFUKaftd4IwkSLaS7FhJqr\nNhyhdLS+b7tMo0vBBAT/aR7HIpn8MDNS4RC15w0/mqVbpqXXoCywKXRVOYS4\nPxHv\r\n=q72N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e66fb2e1.0","@material/rtl":"14.0.0-canary.4e66fb2e1.0","@material/shape":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/ripple":"14.0.0-canary.4e66fb2e1.0","@material/tokens":"14.0.0-canary.4e66fb2e1.0","@material/animation":"14.0.0-canary.4e66fb2e1.0","@material/elevation":"14.0.0-canary.4e66fb2e1.0","@material/focus-ring":"14.0.0-canary.4e66fb2e1.0","@material/typography":"14.0.0-canary.4e66fb2e1.0","@material/touch-target":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.4e66fb2e1.0_1643398945241_0.2728494858264776","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/fab","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7938561263505fb3a50707f292111f925c1e511d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.9736ddce9.0.tgz","fileCount":23,"integrity":"sha512-vI+vSS5HEUakOGus3lTvZUcsfXJNSsqWxCPVWc6OJ9I/7FiTsf+3O9wvPZDF+mAN7qMsSOM+yYdIWnZUyF6Z0w==","signatures":[{"sig":"MEQCICTkHBq7pXwfB11znyVa1kho9MEFhVgFIe0jL9iENyeDAiAqST47eJmLXAB5k3J8JlkPkHGg8EyVkb6wiePtaqW39g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q3+CRA9TVsSAnZWagAA474P/iC2eFWbklM6NPb9B6Pw\nVcarbrJs3YH4ktdRECKYSN0pxIiT+4TBIPx2gj07eNdvPhpHIiX1b9cGLBMB\nUuitDIYCgOb0zf6khZaFXXmdd1fvGKWRADxTzvXX6f5jJ8yiapzTjZu8SFTP\njICrkfrfkYboPqYhXNGa31i3kzoUWK+nO+ihQw/4iKX643TNh1npaeC9Ehcs\nYNOl73kcym3n5NrtYS4KEes5LTVo9Z3FI4YIhYTxXTtla3QCrnlQUpFdHJZU\nDvdloKZN75P0cxio/qpvbDK3zlq1TrXpoHIoihE3WIQVX1rUiYlyTN0BslLF\nXQZes3P99xxFFN3UFz74eX/g2qtezEvP3MF1pqZiRsJtlkliF11aFzxxbnEN\nn/Fxf1N3LQuRC/nPb4s3JtvMPwZ+PVmh45NffoufKDPfTiPvO45SjMmIsTRT\nMMVhdGpvkCGTpUnxhbdO11aqp6VEdqbVppk9kF4RIOpDt9GwLeZOA4+rS1nT\nnn0BvWzJ/eMo6Ov0rfAVAgKPN5BH4DL75FI3aopfRn3zT7nKMirV1fBwVPZi\n1wFv1sfFZ93Fzt1xnaycoxejnhVaJj/wB41BCcUhRiF0Th2aBAHMDhIRVMqb\nrxJe46DWH8JzWgD9T+umM2LNTVUznycvbp0Nz2r/lVPjvkbgIDOu8EXjU0Sw\nt7kh\r\n=95MR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9736ddce9.0","@material/rtl":"14.0.0-canary.9736ddce9.0","@material/shape":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/ripple":"14.0.0-canary.9736ddce9.0","@material/tokens":"14.0.0-canary.9736ddce9.0","@material/animation":"14.0.0-canary.9736ddce9.0","@material/elevation":"14.0.0-canary.9736ddce9.0","@material/focus-ring":"14.0.0-canary.9736ddce9.0","@material/typography":"14.0.0-canary.9736ddce9.0","@material/touch-target":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.9736ddce9.0_1643449853896_0.3124703880732391","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/fab","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15e3c37dbb3dce82311a0d66f7325a6af660c97f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":23,"integrity":"sha512-RKGgeznwII+gmG96EiZqIQI+aom3TGhhWkHCa+DesjFmd3fqjBcpe8mkdBSqnmjbSPpg/iptiX595W1q++dS4A==","signatures":[{"sig":"MEUCIHhPplYnoU+9e1DXVFoJKE4cQ9M/BTvp8RKyegMPariTAiEA+Sb/NzcmLDVk195XffA4smyh6RUfOG7wfaOwPvtLyXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W83CRA9TVsSAnZWagAA9ZoP/0reggZb2MpE9RcW7ZZW\nDEd0VFXnebAL2emDp9zLMUNIxnwVYTz07+ZgOSdNIj5PpRpUOWlXEc06aNVG\nsG6u5oGNrRWnVEGMReqEt5C9FU9DpPmyFYk44O5Y4mA/mS4mLnADBbYVp2rd\nbNrT6Eo9FL2MrgkJpR8hwj1KJ0SWflZ4hKT18uhuOhzBr3j9thuUQaTW67d3\nap5c7YhvFCWNQ7Wlr6JdP6D42Pkw80fJVFTCCpKkANo+mPaAE7ERCpzXubAa\nLKsfyCh7AGKE6+8HYanKsVNF5mkkgaBloPZ22XzGrPpAIZwckih4/j5W9U8X\nFBaJJyTp1T07yBK/9/rrreQFr+nzio7NrfF76eVW1w7Um68G7aQBZ64njRiu\nCclJ/90SXIUE1/obwFuiV4goSKaZvMPkNCeQY30LLuX2afB1eH1qaYyv+Jf7\nBxXOaHRSnRAsO4WhTx+2TOKraaS5KvPS8aC6hydvJu8ATzjvkzm4qWNw30vq\nIaHaer25OpHrVctMDxSF38fUcBA/TzUC8EZTvWfMTBkR2iBOEoprmFTl/HIu\n0v9qR3NGBBrhMMAGtHIOUQcsmF8aXpHep9fhSRSIrWFuGgeFCaXVqUyZsX1x\nJnUz+TEUnX5R1dWmfFm9984IMPpNaQn7FnlLkoAsNnMsxsFEstmkdc45MWnM\nQrx/\r\n=xlIH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cc4ed13cc.0","@material/rtl":"14.0.0-canary.cc4ed13cc.0","@material/shape":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/ripple":"14.0.0-canary.cc4ed13cc.0","@material/tokens":"14.0.0-canary.cc4ed13cc.0","@material/animation":"14.0.0-canary.cc4ed13cc.0","@material/elevation":"14.0.0-canary.cc4ed13cc.0","@material/focus-ring":"14.0.0-canary.cc4ed13cc.0","@material/typography":"14.0.0-canary.cc4ed13cc.0","@material/touch-target":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.cc4ed13cc.0_1643999031375_0.7693335389146656","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/fab","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfc1d31b49352b2e707004b90c4cae0480f7b95f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.dcba26fe1.0.tgz","fileCount":23,"integrity":"sha512-dgtxVtxM8ZTbTnkfvgwiuvbxGQmlx/q+Jvy98Jh03xsW2z6h4c5l/7QFNerJxNBPsGo7MPXnHtVC6VukKCqB4g==","signatures":[{"sig":"MEUCIQD4ugtmY9QvualfQWB93fhX43EjlwQDEwpmsJ0G/3SN9AIgJx2IiHhiX//63SvPvf+Bt3ws3khSqMgVNxvgg8TgiGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aF0CRA9TVsSAnZWagAA1P0P/1xfnEZrA8jr9KIVxubu\n54DPZMypvK+QzLFvt9IzOvE1ghMQyawIxamt/N+n5bAQY9KX60T0EnS8Ftmc\na8iDh1/+LWg1Fsnyujjsnz00BemxuHZ3/HX7AW4yhx+9NuT9DxVL+8gHiRRU\nNeQDTOIPWx/uEEimoP6Nzg/3ZsDuIMg4+fCfN9L7WRvT+1WaDflX/Dyt1cJY\ntmso0lv2HAkNZjwSHVVknTQ7bU/03A5J/ht6Kg5a3ZW/PDVZRVTMJVax8h+6\njKsREkJbIK/ycOwgh9xvv7Wqqh9z4yGzdz1gxHrhZEAylINNUK1DuBkCSsWc\ns9sIE7/xsaCOfsJPvYN4uNht+QX+oTNzaoI+SNXHmY45gs18UcNeAhRpstfI\nA2xm0Z5SV+XFcrTV9eZhKaW5/2ZL8ReKjGSfTFYdaExIQVfSUTbNC4ee1J/M\nEtCdF7cthOacKkBymChIRvs0mee5/4bLNpw81c6HmMZA4EL8aP1RmWdGKLcx\nleVY40RMOOjfQ8OER2ydy4wnpTEPR4vukzfkhrAFmxLnZRD0dtNL8tb0o3so\nQ1D/za7oQGWxFWtQczWvlEKvquyu244C1qj92Hk34n3bGlENTMEoiC9B1v8p\nTS6tfs3HN/UAHueawenp6Fd2SwLqWW3ATwRb2enyysoofpwu2jjbHpmWHLIM\nz1p7\r\n=xIO5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcba26fe1.0","@material/rtl":"14.0.0-canary.dcba26fe1.0","@material/shape":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/ripple":"14.0.0-canary.dcba26fe1.0","@material/tokens":"14.0.0-canary.dcba26fe1.0","@material/animation":"14.0.0-canary.dcba26fe1.0","@material/elevation":"14.0.0-canary.dcba26fe1.0","@material/focus-ring":"14.0.0-canary.dcba26fe1.0","@material/typography":"14.0.0-canary.dcba26fe1.0","@material/touch-target":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.dcba26fe1.0_1644011892135_0.7811798626585833","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/fab","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9024d5ee566d225848c858aa30aba0e444e433f1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.ec54d9046.0.tgz","fileCount":23,"integrity":"sha512-+0Mn/uosSCATsnfKKvGUe1PKgD1C6f3rV8yfRuXaWDfKKgT8c3f6CwuUZ5abdSATFAgLItewu+HbJs9x3IEACg==","signatures":[{"sig":"MEQCICBpWNpPfdtZ3XzjQBlJIwY+cr1fsMSE3UfaLBPwRN99AiB5D7u85tLGHkjKMyaNi5GSeF7lGGmOpnmH9PGcQBVEWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT8kCRA9TVsSAnZWagAAw1gQAKM8AQjX0ARe5qk9z6oD\nD5bSOG0LzxyUtyoqffkPMQKQYnVSeS6AJEob59WOZKVeaG2bhYn61sgp3p/U\n4Iep6xmkURgQ/CIVp50xfdyRh6W45Nb5sdkkWP2BeLJS6MtJGHr217Sbec5q\n2l6L6NVGeuwXRVv8QXgcEdfn/Qb3kSYYG+mE63qJOxWtuqTktN9q/wU/ddOK\nNt5fjOKopaNvKq5h5eaOctpMsqYUUev9lokXWtcnxUHCyAjmSIyGBTUzSvzW\n7EtxSQIx+zI+BrcjUhKixgxrHjNEnFyCQzdiiYFO10FjPTHgbduamMRMRtSG\nlwTmsT5Z73M784MJ0u3d6op6ydftXAGG6/hG19WnSUeMoo6Neuw+o20iTtr4\nzeh8h67dPD/rStsKEK6tiLUw4k67GexSWs0w7Uasoc+/3LyCBsv4CRu/mJoX\n4MiXuncv2WtJiiCyU2n4NJwYVLCbQxaACtulb5w3AEiEz7McObphDImwXh/M\nVIjwzrctkCBkEw+y3s3nZ/eGPfD4K0osa8KbhKsVj9f187EsS/VgyQX4obfO\nJ3O4SghGbasEp1Eg3ZnzsjM+6fnzvChF5t0b6P7OfEEvdm2KopGQOr6GfE9D\nGT7jqpFni9hy5oxTkL9EuJxELjeJHwMDR/4CayFu7dQdVWpIevP4qJfD8Nrm\nCzET\r\n=vlPk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ec54d9046.0","@material/rtl":"14.0.0-canary.ec54d9046.0","@material/shape":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/ripple":"14.0.0-canary.ec54d9046.0","@material/tokens":"14.0.0-canary.ec54d9046.0","@material/animation":"14.0.0-canary.ec54d9046.0","@material/elevation":"14.0.0-canary.ec54d9046.0","@material/focus-ring":"14.0.0-canary.ec54d9046.0","@material/typography":"14.0.0-canary.ec54d9046.0","@material/touch-target":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.ec54d9046.0_1644248868468_0.29950815852148005","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/fab","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19601afe4f81b1b75bce98b9914c9ae15112a348","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.ea9b5b463.0.tgz","fileCount":23,"integrity":"sha512-G38VG4hB/aowGRI8MzrBdzH77hgtcou0QSSD9jg/8XT4MEUGCOxkLKtBXaQ6bzutGWUS20K+YoFis7P8vfgNww==","signatures":[{"sig":"MEQCIGCIftCs+kyewc8VlxvVKm4/tGDzHLVr4pk2BuhwZ2yMAiB2tInHN8iL8fBOtpFoq+hi+gVNX75n6faLfZatjVOi9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA//kCRA9TVsSAnZWagAAbeYP/22dsco90nmVVKtGtBue\n7GyFr6XZwTp27gds2ajT9lt+gN1S7nyY1dKIcvhqzDvedbpBrYpXuNfMGIrq\n2FdKQyFvPxqp/0ektNcE+SQ8Pu9SNTHnDVwFlLep4K6OJPS9aivSpLsTX03f\nTXicumuHpv0q882NoFmi783BbjzqzwUazNUHEjm4V/rsZzjLjO03fyu0BXK7\nhHzPtzhM0TeaSoQ3KhC5zNfJH+YgkT7IJse3JhU2xFW9XgBs6fEwvxQ1cPmn\nuYJO9hPHIcBWbUs5orPpe1/Bivsbd+lHc+lSC+VnIuCoNzV4nZoCbr70zJU9\nPwP3nITFhG5VVKYKQ8fUmpiHCc/HbVT+qntm8x6elZZOkTSTnAZGhogdgHyA\n64cR8U6Hrd4iY1kmuXi0lZR/fBPcTlR2e+PCLSIU3VKzIUj7rv0vwhs+yr6w\nNu2k1iju18bJ8u9kZmcNbJUXKYOjKJquKekMyed3Qk8qivjgtFmGU6P5m0X9\nUogrGQsvma/U70tfYeZnhAJc04rB7mgcW2gBy95ijM8xG3od8YFbOTaQaTpN\nJXwd5zwpOjt+pTJIGousv6D52MqX4Z4Kqib6Elea6NEHHC8s2DdRZpY4RE3d\nRZS965Lg2gzYiLfjfu1HovWKFnsZMDyVJIQkkzVjd6sgXCeLtRllQ+NbYiFa\nx97O\r\n=Xcov\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ea9b5b463.0","@material/rtl":"14.0.0-canary.ea9b5b463.0","@material/shape":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/ripple":"14.0.0-canary.ea9b5b463.0","@material/tokens":"14.0.0-canary.ea9b5b463.0","@material/animation":"14.0.0-canary.ea9b5b463.0","@material/elevation":"14.0.0-canary.ea9b5b463.0","@material/focus-ring":"14.0.0-canary.ea9b5b463.0","@material/typography":"14.0.0-canary.ea9b5b463.0","@material/touch-target":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.ea9b5b463.0_1644429284602_0.630573760940468","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/fab","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8572989a62b2c9b63e049e24a37ef6f145ed195d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.96ea061c1.0.tgz","fileCount":23,"integrity":"sha512-y0Xb8sSlj1XbaG2cShE5eGT/Hho/r+H+7bUffcFVT6QFxggWarO/l4p72GefvOVW6jXSDk2iwBDsORSbWMl7Ow==","signatures":[{"sig":"MEYCIQD6Ye0FIaXwtxkD6+fGtRZthjQQrwbUuPQizy1eHKloNQIhAOmYSVgpoD3SZoUU/Go+9J4q7I+EmHe13BI0H84G6xoa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA9ICRA9TVsSAnZWagAATa8P/0FUo6KnjIho3HyfT5b0\nbr7+RCuBsLuVJnc67hVvCbJ6L3v134e0tKB2YFbwNgFQSivqABJLbGDdaW3y\n80A7G/5Tehzpf98vCfa2WnjmO4+GZtq1hnZeN7zBr25pz3NXfov0xjWplXFv\n34JtbQSPrp5Bqj3X/LnSRlJMou+VtRdCxzT4hTOU0L2YUeJRAFDyM6aDRmpO\nQgZKTDaTOzTIL9alNYSKxJPMnaG8ghqvlGNGOlhYNVZCVsm41Cj0TzZhnUFn\nO1c9uNlSnrQO5bH0MOhDWzFOZzD8LayMW+FFScRg0MHZ0aFhSHDj79IM2Gxh\n7HhzdsbaUnctL9doEYMkDkIENzFExx97+oHepmwZGA+uojJ63CHn1ZhQH9vI\nJFmnOmncb3LCKdl+X3CnSi8LXVWBsCn0ZHFM2glFdaS2fAktACSb+Ixoj4Vz\nm6sRj5eCH4voT3eZNL/Kxvl/SHKbeeXVDJkM+090dD1nW2KjuRTD11deJoT3\n6APJ+C7R7ABA01VeCJKrExa4zV4AsllsdmM3QozkoSklsWOddh/yeny2rrIU\nLgVRJIQa3YrNbt64HMSOPUMvyD6QejtzzBlpEfR6t6tUvPJN9oGQ8UC5AGgF\nxowTzZGMR7wohMyOa5AEqtN3s8zDTAQO/hoWHdMuGwVlxLtxKmw/wxSXjIGM\nzM64\r\n=F20O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.96ea061c1.0","@material/rtl":"14.0.0-canary.96ea061c1.0","@material/shape":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/ripple":"14.0.0-canary.96ea061c1.0","@material/tokens":"14.0.0-canary.96ea061c1.0","@material/animation":"14.0.0-canary.96ea061c1.0","@material/elevation":"14.0.0-canary.96ea061c1.0","@material/focus-ring":"14.0.0-canary.96ea061c1.0","@material/typography":"14.0.0-canary.96ea061c1.0","@material/touch-target":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.96ea061c1.0_1644433223991_0.27792462581636035","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/fab","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.e00181e59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a5115768fd5d2183d70cfeb6f72f2807a7576e5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.e00181e59.0.tgz","fileCount":23,"integrity":"sha512-iUATGwG/Zj14l4f84f1Jab212QPEvvfdR/7LYLH/YNkDhLIh4LuwwcxpHKM9G4QLustSQwQwMYEUuMJbLbEjkg==","signatures":[{"sig":"MEUCIQCHehPj4doPm0t79+mkOjeKLEICsShYt2D7AGx3m7huLgIgXwbjUdH3Q91zIexsp+Pn8FUMg11JP9mcgyNftklaOX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXCJCRA9TVsSAnZWagAAId0P/RToD0iSD8gTchpuw5ht\nBWNFZkZHvASAV5hPBcdGpTtFG8PvYM9CMfl79sCGMlfQyYO4Lk6a/3gpXADW\nmhCfSXkLxIKw3lfICQlz2Oy6npVIHhnRXfn+9CHwYsPslgGwwqQFWoeTrESt\n3yiVoGBreiKBj26shyiJYtU31+ONe/+ubbrqk8XtQMDrCmUxOjVPEkQt5mk4\n+9Dmz5alH/MT6x44bwCaCkPiOoULT6Ezv9E50AXSy3ks66CdAgRzih6S+xoW\nnogT0+bE6A/7Dlqo8oIW6UmmL09Qw6gG2tHfxqx3MMvVrV/Y1mDqYsrQZNtF\nVamopTkQLk4wJyz30VH6FPrGXPkI7xvZHwseg2G4VKow7hirwdZwa896jCPy\n/kiUVntdpD8YeSRkb/BhFQkfuigrKnYQyIiTbu9PUNBT1sia7p5qUNDYI7MK\nRjBOBJx2UI9FT/paj2YinVA7LMHfT6ycWa6noxQflDTmjRjcpmNjQiGLN6yq\n+ta0IdcfKo7L90iGi9ayKXkd1S1kLdw8Vo7wGIsiydbtzurFmAtmPHTblAOj\nCh71xDjlz0SGHbNSGisuCSss/aiDZeE6mK8Kqo7WHDvzYy7irmH0CogxG2on\nJlu+cyT3v89o9ILx5NO/mGP22yo5Rw4S+/pl7RC0cYyv6DQKA3n72L2i5x/+\nNLQg\r\n=M6zS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e00181e59.0","@material/rtl":"14.0.0-canary.e00181e59.0","@material/shape":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/ripple":"14.0.0-canary.e00181e59.0","@material/tokens":"14.0.0-canary.e00181e59.0","@material/animation":"14.0.0-canary.e00181e59.0","@material/elevation":"14.0.0-canary.e00181e59.0","@material/focus-ring":"14.0.0-canary.e00181e59.0","@material/typography":"14.0.0-canary.e00181e59.0","@material/touch-target":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.e00181e59.0_1644523657359_0.7660623910752569","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/fab","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.037285f9b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e32a9c63786af426b31f2a8450ccc660e5fdc63","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.037285f9b.0.tgz","fileCount":23,"integrity":"sha512-6ckhVw6/eTdXxaHB+wAcX15uotEuJdjS8yU8f/I6bXgTvohtNyGYX5wUKdoEg+9JBIHS/aqeAYwQk9+Yp/Ad8w==","signatures":[{"sig":"MEUCIFk7F1Ifbi92opqbCGQZb1pFanLdFkh9MM+xVyZ++NtqAiEA3rTxj1+DWZ3b8tdQSRYMZzWmz6Z4PtPx6pfZRDmO7vw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqtICRA9TVsSAnZWagAAaDAQAIEl6UWAf64rpWX/3+Yf\nYvC2BA1T9Uc9i5QgkEpZG94xk5WKyWyGtT4ws419ktfk7yQwDLTrf8Pczf1R\nl0+S5pMlY1pCUq1Al73ew6Dcp39XMi7EQ1PrkeBHTXx5/G9Iw5nm818tgyEz\n5MGCoaDQFIZy6uda2k3yTUM4+cNmKQG754MBk71UsK1UB/H+/Pd5TFIo4H8Y\nDWhmUMeOTMbVShr+d9imG40k7jjQxHvjqz+7st15H8ZxyjP/woPKQDEa8r44\n/KsY8iDeiYqaQT2VW1hABV0u2HgxTLeNOcrJzvRkPfC1kLRz8nVMPHaYD0N5\n94/n9SJSWha9YezzpxL+3iMm4v6b6nf1/IT+3Jmtr8P7xZA61GeApfc9+/rD\nedEAxtnAVYtez4BJGDjfWtoctrfTxig+S9GwAOvLkC1YIOflilnt0G+QPVS3\na5YqlTIAKyLHLmZmK+OiqAMX24PVGvFIa3R9CgrpGdPjNMLHLktpg5dt2LUn\nLzvLZYzHy268p+U7lGnO+wABSPmA5CstaR2praf1Nlq97B/db6Aoi8lqhvMi\nkS9ZEkiiUT1jptZbnAirxFXZ/qaw7uxEv38n4BFjNwvRXuNtQ6fysPYEVt7I\nUjVbRO0nycoBh4CZW2jXUBCj6DHHIP9kWYYjw+kir6waw3wi6SZgKyZVVs9j\n+4aZ\r\n=G3nV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.037285f9b.0","@material/rtl":"14.0.0-canary.037285f9b.0","@material/shape":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/ripple":"14.0.0-canary.037285f9b.0","@material/tokens":"14.0.0-canary.037285f9b.0","@material/animation":"14.0.0-canary.037285f9b.0","@material/elevation":"14.0.0-canary.037285f9b.0","@material/focus-ring":"14.0.0-canary.037285f9b.0","@material/typography":"14.0.0-canary.037285f9b.0","@material/touch-target":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.037285f9b.0_1644604231870_0.476839965159078","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/fab","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9afeda0996819f2b82b5fd4c02c4811a00db3202","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.1aaa68dda.0.tgz","fileCount":23,"integrity":"sha512-2pQm1dIVXaK/9Oyo9Ys/ml1/aaIEhqwsyfWdFp46+1aIIrlvwiUrK2Eh1A/niHENKBa78fvWiR4WtipiKda/sA==","signatures":[{"sig":"MEYCIQDq5DlmxnRjvy38QYcZ4dRJo3GugZuJ2Fk/tG7Y6VIaFgIhAPFGEJ7rohgKEgUVjbVxHvAKVVWK5nc93bT18xNMiR2V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVVrCRA9TVsSAnZWagAA9UwQAJeJVel5TO6M272iSRJ5\nn6/M6VWTYXdzJCMA61cz0onx4KfUZw4fWrJ2nqtqbtlnsKAHEOWYYjuoPBA1\n2zHWiAaP41aX43SKDMlUQjray8QQoMPjO++WaIy7cdvZF8+tS85uH1MCS1zF\nsOEOY1jHrvfTKe3+J+t5b46PrIJrACek0sQT75x77jrvk8rqqN/9XG34f3eZ\nMA/C6mapqY9NAZoNmdyF17T+G30W91wEpG39gEr5c8l3b67EmNNw1/58Y3JG\nyASp7x4hOzpoS/Blw0i9O9Ad0aim0swINeEdDtOuPMe+e+8Npnf0lgdP+cH4\nBpEndch1WKNt+QlxTL6JZB5Fn24cZdYFOUojuZvUP788zogWZJiI6YbEAXnb\n5UJosaSqDiTn9bAJeAELvtR/QULDa1eZ+cGZgcVY6OYG/fPcsfe85waLJjX0\n6mAYvKNB/mEj0V9iro1IRqzU3K3dGeui6UAYx1Uc4hEAyp6MhPA4zpLLqkyy\n1OlX+WpoUs0WWLYc+2dykvMubCSotYrMTlqktzVRBvU75rrzt0V+XLwO+Sfe\nD5oii+7SzM25WZFBGiN2F8bd1u72ArqDiGllWriN2PNuRY8j/lzsT7fY+1GI\nNaQuYvNUtJ5yLxm1K9LgLJUS8N282E83Y9kjmYQ/4J6ZI2uB4vbV1LUfLC8/\nGBFd\r\n=AJgn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1aaa68dda.0","@material/rtl":"14.0.0-canary.1aaa68dda.0","@material/shape":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/ripple":"14.0.0-canary.1aaa68dda.0","@material/tokens":"14.0.0-canary.1aaa68dda.0","@material/animation":"14.0.0-canary.1aaa68dda.0","@material/elevation":"14.0.0-canary.1aaa68dda.0","@material/focus-ring":"14.0.0-canary.1aaa68dda.0","@material/typography":"14.0.0-canary.1aaa68dda.0","@material/touch-target":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.1aaa68dda.0_1645041002880_0.3875063548669262","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/fab","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7926b80609c20bf7b363f586caf14504faf51733","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.ab4aba1af.0.tgz","fileCount":23,"integrity":"sha512-SI+OVPSlZrSHt9DfgR3o+kPo/QjRy1tTNaCiSNhsUyN+q1zoKCJ1G2KpwG1h52eFZ5B66/MvyGzj46dqvVdMvA==","signatures":[{"sig":"MEQCIFERRLX0C9/v4XFZuw7PfO/gBabmxOeiuHS+qCfLMNOLAiBmXA0mbXI+rXHSm3073QvfnWoKSpHBzvS1FQ3Ekbbghg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpEnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+zg//enMGBwDLQD+GzlPKqLSyMNcXLoGHX9wfmSnR0Psf0WtEd0uZ\r\n7r/10swM9HCtPVh4x6fSqh0j+XX2+VRhmqRmPraw1DvnyMjDB/f66jUKgkwb\r\nusx55gxYuJBTmQuD1wBiWJ0++xTBdNoL6pK0P7FobiGXK76EDmGwNu2ehVon\r\nhCWeERzigtq+b2EKMf98KRjoBF+yUK7l3gmF180q4UhQhZ5qU4bupiiMwFvP\r\n+l80TtU5ZXN0j0DULBkcjTLhft0qaOJPBazINMO12T/p9P7URukRPpCB5c45\r\neMdojGEmFFNumXn+OKGiRaOOb+kF3qXDH7D3fxxD8l769iQbjZBqldKaz/Jt\r\nt9ko+F04BWdpyZkerZ/F4DrDTQF9a+UpIUU06TZOJ6RzBE+L3Yt5MJxacHWA\r\n5/i7owfUHrmkfMdRqyNGJAanWjRYF6lxd6cUp0jtls6AE878vneyoWMZ+9m3\r\nqf/WzZz4jzLw4Bts5v+dT7gWYsCQBN/2tffwcExXaiLhWMRFTjhbkuFECPi/\r\neY71b9Ooe+DnKEDDKHjNrlUWxOJHu2GKE4kMR7lWf+AShqffGjUMPZ5Tc23S\r\nSkkuK/+NGkmomUmwv/8qFdkGVSMUS/sbZ/i/o6BEI+Zp8zz+xysEyYC1sVBA\r\nMXDiFTgWJ94yx2bL+65ai5lb18jZMy+JY+o=\r\n=iXPM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ab4aba1af.0","@material/rtl":"14.0.0-canary.ab4aba1af.0","@material/shape":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/ripple":"14.0.0-canary.ab4aba1af.0","@material/tokens":"14.0.0-canary.ab4aba1af.0","@material/animation":"14.0.0-canary.ab4aba1af.0","@material/elevation":"14.0.0-canary.ab4aba1af.0","@material/focus-ring":"14.0.0-canary.ab4aba1af.0","@material/typography":"14.0.0-canary.ab4aba1af.0","@material/touch-target":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.ab4aba1af.0_1645121830990_0.13714084938959514","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/fab","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0460eae071cd39b3912c0ed785652e06a6dd9b7e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.e58552c6e.0.tgz","fileCount":23,"integrity":"sha512-K0iA9ynNeVY13kh7FXwh/U+sGeEqx4+xItfin3gtPXTwEN9e2IhTN3QgEOU9JG641wozxmd1+sk6vyb4QAncww==","signatures":[{"sig":"MEYCIQCs31wL31pwyqQnn5Q/lwtCQJaOdXrKgoOL5QmMR0LWogIhAKzrYlTslFwG1X6+CwCkZYTqOZfE5m2wAk9aCEWFqjus","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9/JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpyeg//elshn/28Hj3m0ulI2LAhBRspqW3YVNVfMrpymMGu8kCVtHY+\r\nB4cEqdUXCHeES3v9ywE7VVWoMlR8uBSRCx15NxZkqG1cdJkeADJvbw4/diVe\r\nGgDTV7hBCyz39WDtXisU9vj0qC33aW1WeKVqFBYkvK3wI6FpDeBT1IoA+VxX\r\nVXK+fDAU3Ul9YSoymvrg8zLQ4xR4AbINhee1vI6hCEorfl+JN4og9wCR6ngi\r\nhE98gXcwzI3zq4sLDV+EeiDW1pJe4Mxh0+/sAa8BuM/c5TsO9jgi7vVIbPnn\r\nUsfiXd7i/yDup+paJXF7H2QGKYcgGW7nld9Hl5VYmz8U2WGAUXY6jnbOMCk2\r\npUFX0IF+EsWXfKhSTokNolABqHazTiALHp2gkEYRJdlf49QM18e4o4yxPILw\r\nNHmJldQDj0+iJptCpHDaPRSx/WKYMn1eQEN+sa4xJ3dcdWCfzBmTWXjPSme/\r\ndjrxngxyx9vAv4/AJIA0LVUmqBifjarIU39Hnznz5SGoq7f1hpGzSzm0mgxz\r\n/jIk6sxdI6aqVlr5uVM4sW1UqNWc2zwNgTRLuMm4werccu5Bw5KQquBQoe/j\r\n45my963/GPbN050i37+iZ0c8XOlmxDXqHXCEeSPQ6QEwQPOSMv6E+q9rwOKG\r\niqPti5z5Qy2adrNi3oDu57gaXH8SdJZPLoE=\r\n=aIcM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e58552c6e.0","@material/rtl":"14.0.0-canary.e58552c6e.0","@material/shape":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/ripple":"14.0.0-canary.e58552c6e.0","@material/tokens":"14.0.0-canary.e58552c6e.0","@material/animation":"14.0.0-canary.e58552c6e.0","@material/elevation":"14.0.0-canary.e58552c6e.0","@material/focus-ring":"14.0.0-canary.e58552c6e.0","@material/typography":"14.0.0-canary.e58552c6e.0","@material/touch-target":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.e58552c6e.0_1645207497181_0.7825351297141452","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/fab","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.868793776.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bad49b91d885c07e24c33924b0aacd8d6c0260c9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.868793776.0.tgz","fileCount":23,"integrity":"sha512-9TJaGhJCo+mo28eYCAYJYodwj9cvh2ihUnjZ7jLfctmQUgBCRUxDpYX9bj4GVl11UGwlQeepsiXOgRgxzI1wmA==","signatures":[{"sig":"MEUCIQDSE4tYmcXYg4MLmmoySvnxEZ+I6/AFcbfdDbekTFBMCQIgasYi6tQ2iBEo7pWDdRVKDtoskKyxomLCqL/Q7uSQPBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTtVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjqxAAiE/jtO0NcE8Sknhz8osYfRsgsR83xx5rbNxxPqYf8CV8eUR/\r\nuHmB9fQoCR+1R3vSn6xTJWdkrzBKWL6xLv0HmIESmsJHqYtiBUlVisTwKw02\r\nboRbjUOj6yZ1fLlrNEtdpRm32pLcf5wcG3oDPkUThFpGAud2GkAimOAEgdtV\r\nrVrBxB9ms+rnfwntfppujMMPL6qxb63oG0j3bAdXm2AJHe/Wl8JkH3oShbSs\r\ntiGMXDdNUZWOFdTT12MoEWW3otoWeNTtqD6zo0y4+JsDQxeiNOTPGtRqVRYS\r\nIhPbW2iFoCogiYsZID6utE2+WpZ32mVzoaqDGX775tZZFIMsnCwrhlorB/rP\r\nKLG5GXHVyZWzCRIrOfP4LQeINMT/wb3hQXXYP1FOJxSxDZxGgr9qaKznGOE4\r\nvzOIDNOZs92aR+cc6KqtLzM64m31bNsZO/McIBQDWQlJW6oc/HIPe20Qe/k+\r\n1uDBRYaZ0PwqjW+NYL2JLhhA2bxIv9zwNp+2j5NWYlw1FNXf7xZQG18bXIZ3\r\nZ0XGlySIh08zRyGC0VX3sdSTY9yEsyzRYNK8VFsK/QwflrZ0aRpZgOu0qGls\r\nJNmrg4HgsxShsgppAMHqdEHXiZuxgnSq4DR6EdGcUR1A6+SkWcKuzCbqRax1\r\niaFjKHE/DLvy/PfkVi2TbJw7JVKKXWDTBUQ=\r\n=7tGa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.868793776.0","@material/rtl":"14.0.0-canary.868793776.0","@material/shape":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/ripple":"14.0.0-canary.868793776.0","@material/tokens":"14.0.0-canary.868793776.0","@material/animation":"14.0.0-canary.868793776.0","@material/elevation":"14.0.0-canary.868793776.0","@material/focus-ring":"14.0.0-canary.868793776.0","@material/typography":"14.0.0-canary.868793776.0","@material/touch-target":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.868793776.0_1645558612824_0.9355451060762194","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/fab","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9942fbfb4048b3595fddc2469d0d31fa7c6c9b7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.fdc37a445.0.tgz","fileCount":23,"integrity":"sha512-lDLa8AsC1jWQFI4beuDs3eV7WBdIN8vgMWl6yWgfSWvhNZoA+sRBFUvZdRVRSPaILllUxgAIUk1BlIl2PQctnQ==","signatures":[{"sig":"MEUCIAhC1/XC4lPPIf9RTmj99GimRVzpow2m2t/Y4qNaWRY7AiEAxFvxWit3D44Oii9zrYpAHSOXpX6JBhye10KP5vJyD/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRifACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUyw//StSaU7Es9VeYsgPPG8Do1rTwW+ap8cJSGJPu6d0aOnQRPZO4\r\nEWFlaTTedNh4F1g0a+UivBEby8ns+Dq37cBOKkNGQ79hHZVwyVtL7z1YtMqH\r\nqfQyoUL16wtGUIhqLttbE84VE6sr7uYQD99FObBBXu1lyK3QyykD41M8poWt\r\nz+tjdAjlZmzvOl1NCsZ9ONxytpYuqbmS1EYeg3Y8Si63oduztG5iuB0pv8vl\r\nj+PsDGCq2Qq5YZm2W35gQtlNAiEYhAwgzwi5jCs1iJKrzSe1+Vc7kEEF1p5M\r\nFZXate2tqQngqFW3k1RvCfvMZnux6Rs65/MrBZOdz4FPL4irB9OokN8tMs2r\r\ndeaUE/UiH4gleh1R0M3K1kpUsWkBD2jKmHadEVskQPpWiS39hbJtoZhGJ6B6\r\nNSBCoX8bNvElKaDCyLbN/LTdbBCnZw3JL5fLeghHCJXZTODgMMNgPWztBlCv\r\nXej1PDH6Ki3tFGQ9muic2wzPcq9xuzEQHkFOi+KjIH1mso538RhLJNsKsd5r\r\nFtf64rpKKOIFj947FeG0O4ziSewRx4pFL5mpZfAemPXAAXNxiWSgSfbC1eWH\r\norJf1J2uPxlqFJTfSdSWzieAJduWYyyLqDJubYh6pg8q7ALuUA4iKsTPGfZ2\r\nfp14UzcOledjYW6EbA4HQv1d/kIuv5MSoZ0=\r\n=AgLz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fdc37a445.0","@material/rtl":"14.0.0-canary.fdc37a445.0","@material/shape":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/ripple":"14.0.0-canary.fdc37a445.0","@material/tokens":"14.0.0-canary.fdc37a445.0","@material/animation":"14.0.0-canary.fdc37a445.0","@material/elevation":"14.0.0-canary.fdc37a445.0","@material/focus-ring":"14.0.0-canary.fdc37a445.0","@material/typography":"14.0.0-canary.fdc37a445.0","@material/touch-target":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.fdc37a445.0_1646074015458_0.730804407618173","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/fab","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99b99534b7c13b3966350a58b84fe24822465564","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.43c7d87dc.0.tgz","fileCount":23,"integrity":"sha512-b1VrvyTO8LM5jM6v99VYEmYP5K+Squ1jsAPq5LTsGfespVJ+8gAJCBe3EYeC9LQMfVYcQRK/dagdULi2m5myGA==","signatures":[{"sig":"MEUCIQC6WQ+SkmOBMJtZ8YwKReMG8rn8XbvyGqe9ubyAislHRQIgUYIsUqalTRPIolwMd93Y5Ovy6pLUXBuTCUSF6q8nYZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjzmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrr4g/9G2cRbspR7uhgcttBmyV6spkZqd0OWtIVSTtjjnltclYCXGn6\r\n+uv2FaDZU6eqifPyt4eEOJHrYcClW4Rbpiw93trnRSZQJ8nalDdzOuVc2p3V\r\n5vl7vn7qoeEj8kAzjXjwyujvs3OGNCpwpLLTSJ1KDiRwlkesahAMG/AGJoEP\r\n3eG6QpcZrylCErWRInTeWqrt0keMNvMtcYD+fkPeYF6FkoFoZ0yFatY/mP1I\r\nRuM1/jYvTjRi55XhhU3N2meGDnf5FW2L6tK9CAGnVHExU/jxu3Y1EXcfEUnO\r\n21UV2n97Nxy+6Rqoogr4HV5M/xj7DiUs8CUtAHrtBTdcF+0U3lqO2+C9Vr8p\r\nxIlv9r90vS91JdFz8xhkIVfMkSN1u0yx4DsSfxChu27dL5XmYnPuKJHMw31f\r\nnXk/XxJiuEN0uCp+pPsWueIqXxX0WxmqDiPooX0xu9FUAGiBMk0A1hyRiLfW\r\nCJJ9b3w9Jsj2zAvm+9/moK+YTjbdAJJMFOpZwFjaVNlNUpEgmlnihmV2etym\r\n57xyTbutqAAzj4HnoDA15v9WRNTqOcyPT1YyTGpV5u4Uosg5oOq1676eN0T0\r\nTBuUJ79b1Mft3ydp8umuX4SCNw4/3fpesODM/vMnd89qmi15KsL9ulQnbxgf\r\nMzuLOnbNk6lz7cuaeyyjKcLxe8dxeLBCdA8=\r\n=eLan\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43c7d87dc.0","@material/rtl":"14.0.0-canary.43c7d87dc.0","@material/shape":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/ripple":"14.0.0-canary.43c7d87dc.0","@material/tokens":"14.0.0-canary.43c7d87dc.0","@material/animation":"14.0.0-canary.43c7d87dc.0","@material/elevation":"14.0.0-canary.43c7d87dc.0","@material/focus-ring":"14.0.0-canary.43c7d87dc.0","@material/typography":"14.0.0-canary.43c7d87dc.0","@material/touch-target":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.43c7d87dc.0_1646148838195_0.03421177748985005","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/fab","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.23043acd0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63be286b355e90a8aa0478c9d05f0c678d7f0b8e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.23043acd0.0.tgz","fileCount":23,"integrity":"sha512-2k0OG5hM5GUxhbW+frxNsGwaoyxnREgP1q7wy0j9k9f8vdg2gufiEXUn0KpcIqFaVa+TryhNPJ8m4V6wPuzxgg==","signatures":[{"sig":"MEYCIQDH6qMUBU3l8MwI8Tn+/L/2iNOOEQ/HqQ+rwyP82A/D6QIhAMwU94NYSdfHZraOj8mN+ZNa/Hkku97kjv9/np32OEOM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9NZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYiQ//bR4snb42aOOS64QUy7ulFkfFYtFcYUGmp2JTTk9mxGp0c8vj\r\nfCO+f6nZaX52QCxaNdR1QkkkYRUDMKpGLmsTbuzJpWJJm5hKTCEaBhpv4js+\r\nt6UD+rFmd7X7Algd23EqA4rkLaFOWNy3q3erCERmhHIf7auj4rhUuIpuTgt9\r\nUAu1KrmECX9DUlAOBTD1Cwf8c2dU5yr9msVlAxTlzm+QO7SRm4TiICFgDWK5\r\n5Cmq0x0W6gKpkIvK4N3290XpG+VNRR3uEljJVyC28scvwnzWvMspObdFAlcT\r\nHOm/BtAIZ6ID8QthMgmRZYSUknx9jYjWGFN15iAIMd2tWB6HbhENhdYhpapV\r\ns2WAIjfDQtgQW7Mb0bLC7CG3jy5uuhu6TxEDi3hEBrTcsdcDA9htAh/Sauzc\r\nMgiADe6Jzx6RKk9WxqGLELj35QSR+/Z5BT3v57SUTexte1L7Jxg5PghTlmeU\r\nts8W48Gx4yucvCvHFUX6b8TOzJwkCz4p7wqMPbIcXG4GT7GkNgpvP+Wrli6+\r\nLi0LmxJYksEzswdxeVmVI5LkeqBEw+ouyTkXCt7vCOXbNCxqIf36XmS8y9Uq\r\nFGYvshyRwOGeYFjDVJEpqaTvfsz0qXwWZORW09ayxl4FPAlnH63A1RKyNZ2w\r\ncFYDjYAi8kV1CnjLjWfXex0+sY7J81Gcogc=\r\n=32eq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.23043acd0.0","@material/rtl":"14.0.0-canary.23043acd0.0","@material/shape":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/ripple":"14.0.0-canary.23043acd0.0","@material/tokens":"14.0.0-canary.23043acd0.0","@material/animation":"14.0.0-canary.23043acd0.0","@material/elevation":"14.0.0-canary.23043acd0.0","@material/focus-ring":"14.0.0-canary.23043acd0.0","@material/typography":"14.0.0-canary.23043acd0.0","@material/touch-target":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.23043acd0.0_1646252889822_0.1649046014108526","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/fab","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50e108f58a0e067565498c730d2b2a2cc6fddbcd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.6505e61c5.0.tgz","fileCount":23,"integrity":"sha512-BfC8F8nXvcakiw1pPveEvcpNes6A7k6C6ELdBrOl0sykCqkJV0FlCkWn6NUMu+sJ/psMxwRDhOxhUDoDvPNuJg==","signatures":[{"sig":"MEYCIQDepWKYCXyW90ZSUvtQf0fWa34VnFBuF5YNB3KE9EPJIgIhAMTPQBlD3fY7ufX/ZR2u4M66lA44rxW6zjQuJgVdOhxH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR6dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0Aw/+LXx14OGKj1ogPb7qGQImwYhPmbvzv3l2/Q2CJoTRyHTYV0yU\r\n8HhGExKaF4IwntYg1Me67YRPOY0OyRGgCIbaFjXGN4NNThvSWnf9EhStY0w4\r\noarW+H9KA5Y648iN3LjL6J0yBOfeQBTjWZdfLZ1B+/z25zS0do25nXtuJ94V\r\nnQUrZddDObKECsH9fR08K4sOz8R6AKy1w/92nv0wXZNfqwjOcclJDJuMYv1K\r\neWyTrAz+FWk2zfApO9/UYi6vkF72ZlVVLxEWs7wKMuVmZZ+YccUAJ4m1Bk8C\r\nqZdww0nzvdUeGT9dpnYGqY0ghqc23KwqxLkFKBmcwMAfbxnG5AOHP2/N20Tp\r\nkUJFpzxbeT7nalJ5VpXVd6TPwUZ5ZL3n8xj6aGmJgN+2CQAHI4cEr343+wKE\r\ndrk1YJGhxuVW+MSBAPqR67LWtzhT3qCFwb/pE69BKju3jiqEiqHoKJtEBy67\r\n694UGUoT85MIdpaw57e4qatJQ8EiedyRJFN38zJtbiR1Mr/QFlfL+cjV7y0M\r\nYSRN8JuUvYM4GPxehIboVmY1JbX1NQeyApKsABia6zvp9s+zgtZewjoNdywR\r\nelbAjX7m5CCe6yrR7l6epqkgArpXLErsSWE1n0fq+W75xyzaxo6PekFr2i4G\r\n8YBksPkNvBT7lynWtCkl5NPEo1bEDTdFHx4=\r\n=RMSw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6505e61c5.0","@material/rtl":"14.0.0-canary.6505e61c5.0","@material/shape":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/ripple":"14.0.0-canary.6505e61c5.0","@material/tokens":"14.0.0-canary.6505e61c5.0","@material/animation":"14.0.0-canary.6505e61c5.0","@material/elevation":"14.0.0-canary.6505e61c5.0","@material/focus-ring":"14.0.0-canary.6505e61c5.0","@material/typography":"14.0.0-canary.6505e61c5.0","@material/touch-target":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.6505e61c5.0_1646337693749_0.429804225330469","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/fab","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.16c166154.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c282bdcfe8d72952b3b4d0cf3565ec1d491fbe18","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.16c166154.0.tgz","fileCount":23,"integrity":"sha512-X9pnSgtFtouCJ8pupbxaFRoWcmnsTMhJzK2HnDN6KItVFnNkw5SqOszsNiXSK1bH4u1CkvutCQSsTO/8nvoKWA==","signatures":[{"sig":"MEQCIFqDLw72zv0qqo3FRx/IWTXnznSUqQiVayVrm4f20b8/AiAQbpARyUUf4JEaNESJMrNQUamzH/LFyzQzJWcWJ0Fx5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+VcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1lQ/7BwswSBXk2X/bpFMM6yTXQveM7jDtQgp+VERzJFRYLAH99kDq\r\ng2NtyQ5UvoOTpFl1eQMS9OYoKsMAR+QfZiVCTI9fmS7XDJNHcs1NozTx1gzC\r\nSu7H/aeRJlBcEFAJW49VlIqMRcmoPs2E5fYV/rz/gQGaiUNFQT2/pGhBdsEz\r\nSIGsiilqi9I1btAjbBASi3wITbccd+NT4v3apuJsft8v8raBqJ3uCpEWLYpJ\r\niKA6CEk2EFFGxWVmevIcz2h0mTrskkeRtH72XNASQXfvuIa7ddGHXhN7zL8X\r\nLxptSA5FYk18JYPyxjPnk7A36uSXTdioDunzJaXcwubKpkfSeaGhlqRe5FVM\r\ntfnTXS7nLk9tJSU8eKMIC1zZW7EhPsxrbujuvtILgcdjyvn+/JQhjtbf9Fik\r\nnOj4PBhEzM/0fxfkp/wmrwKCupTYZucm2Gc7KDMTPrwd9esIq6PRFODGVLAv\r\nZ2PLgleVpjZ2FYeunSUO8c1j103sQn7bzszaRTGn58qqsj4yH9xp2YsDH1rh\r\nHeoadxkhugUOJv1JKuBlUFWLYPsn3g+RaLEP59KaXrkAtArvFPCeC6RZ5Q1R\r\nBV61cm8IG4Z5UCJ131+y4pZNAMwxpX1gsSIyYo5lRAcCFh8fsQ0DYz4vqdpj\r\nTFsdPdM18dhJoyJVXRDvRBjj2hfnF1eUzF8=\r\n=hrTl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.16c166154.0","@material/rtl":"14.0.0-canary.16c166154.0","@material/shape":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/ripple":"14.0.0-canary.16c166154.0","@material/tokens":"14.0.0-canary.16c166154.0","@material/animation":"14.0.0-canary.16c166154.0","@material/elevation":"14.0.0-canary.16c166154.0","@material/focus-ring":"14.0.0-canary.16c166154.0","@material/typography":"14.0.0-canary.16c166154.0","@material/touch-target":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.16c166154.0_1646781788404_0.050794112452388296","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/fab","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0707908f5407f96327b2b3b1d330439f98ba7e0d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.bdf1d3771.0.tgz","fileCount":23,"integrity":"sha512-C5UdDxZoVa5ogvn8Kg9KsYMTA8HRyyF3aBaYKQ6y2gH3EmG7UYsFKJKyXm5kpxDI7j+/5nJWJhQ001mD1SzHSw==","signatures":[{"sig":"MEYCIQDxuUS8lx69abe5ijyi3GInV4I6xNsAQ/d+zlB9q5ZrEQIhAPKCm3OAKvHlJtnLkEEOZKCl0f9mD9XWJW9tJ2v6Xj2V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1FDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzAQ/6AyY3w4v3tnJa//a6iItNDUHHz2GYpnFOxQaVBx4gNlJ9MVjN\r\nTxQqPMDTR95DrdSyUAEPTGbQBlhk6JlAprZR0XIzlzH8KhAM5FSpqRMrptIR\r\nLRVBl7mzvivOQoupXGM8xwcFoeJw/FOmsU0jntEQcLXrbe+4cXAzYfJeRSJ2\r\nQKTOIjQSvA92YyQ649mD6/0+iLkrpdxTLxM6NsqW1n821UmMtehChmpfPe9J\r\nfAY9vJAL48Rd9jE9eX+CEFkqopRbaHThSD3lcoeLIjFsJxH5z1FKLw3mO1UG\r\nHpeSssPYxkTDtSfXxidk7vn0sAseF+ZPgbv786M2KxBfwNLyD8PKz1vtJba2\r\nTwFDCJ8Zoe2xO6QY6Hbno7BiB2kqkBCdIk44hJ/FgM2Hpfy2muuOGTTbNzx3\r\nXcqhVF3ynrgNd68RqLS7PTsWD4SELAmjiD8lcs8EJvj11IqB6c7NWBs+Gee0\r\ntEWFWf5//0Z/VmAwye7TRusoMwZ/b+Rvb+q6dYkvf4BvmF04jX2p3BP0Q4ie\r\nFWH4BYKmkxCErfwRm8xF3I+SMgeweuae1HJzCs/jp2XtAMvQpGu4kdMX23Fu\r\nQ10rcKhjypmVYbkyB/1Yui3XPQshxPM1/E73w3x+6EoR7n97dM5RclavXv9D\r\nvizxFou2ynRg+zK2pY1MqWpdAAz6p602+q8=\r\n=hx+b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf1d3771.0","@material/rtl":"14.0.0-canary.bdf1d3771.0","@material/shape":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/ripple":"14.0.0-canary.bdf1d3771.0","@material/tokens":"14.0.0-canary.bdf1d3771.0","@material/animation":"14.0.0-canary.bdf1d3771.0","@material/elevation":"14.0.0-canary.bdf1d3771.0","@material/focus-ring":"14.0.0-canary.bdf1d3771.0","@material/typography":"14.0.0-canary.bdf1d3771.0","@material/touch-target":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.bdf1d3771.0_1647268163449_0.6969629354436679","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/fab","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.cf4292778.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"352059f843f160f2185ae3273543f221c75b5d3f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.cf4292778.0.tgz","fileCount":23,"integrity":"sha512-Wb0FzxMcNGUPe0LxmkdOhwwZ6KzbU1hGbptKnWrgtKTF3CpyhRykyVBdo+VRrFUQBppJq+EI2eHxKG2t4lFbUw==","signatures":[{"sig":"MEYCIQDC6DROWlTx5SxB+g1kJiILfM62zb1DfvVwv9lkwjliRQIhAPM1IFhg3jkkRoyW/1ZuyryH/XEBIH4ZUQY9wdP9AgS3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL94fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohYw/+Kxq3dKAwSkC0y/222Bom/QxqSQ9Yl7y9jKVFZQ92mEDQiu3P\r\n0R3cOeINAFiarTpIlYHbEqhEVZrMO+RGs5VBi97+92Cn72zCK9bnsD+vTrzD\r\nIT4DaLZrlEqiRpKK75GRT7PEslHngeuaa4yUtVElK3BYQh81ng3j1hWpilqD\r\n2jMvFWNrYrsZHE5hqwUb96uOK3iV4kj0o8nZdT/e6Hfr7z8Oa4kVXviawJTL\r\nqoyAOtD95iWNUn5j+NQhW6KoF5fDW+8e0v6xwaJ4m8ADHTrcruZLfwoqMu+L\r\nab60+MbBWZtiJYy7qfeN4naxin1p36NM4OCBwzPGdCoApseF4A42KsvuYSbc\r\n6g5QOMsydFWi9eKGWrf19qBTXipBtuPATtlb5mBLsaHGn2+H6tF07HB7Li25\r\nLY4t/El4tuNtzRCvHVYX4sD1ouK+7ENeI7FKveUtZ6JhDeVBL8UDiNWeNQRj\r\nBU0mFjnfqq56knv85sw5k2Q6e3hkOJNV2oCCdO/eUASTxVngTBxfnAE5izA7\r\nQe/EY3ytrNP1HYQQWX0xmA6RjfyJQZv9AofyORbn0ECRIoBEtnkF1//AIpda\r\n3/xANTwwp+OcAcQYN+mWO+gyDJIrTGKPcH+jiEz59mFIW9LqFioZmU7CHGBJ\r\n6wrpbfzWbcxPr2YFG+PjmlHeB/1t3wlELyk=\r\n=I+j3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cf4292778.0","@material/rtl":"14.0.0-canary.cf4292778.0","@material/shape":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/ripple":"14.0.0-canary.cf4292778.0","@material/tokens":"14.0.0-canary.cf4292778.0","@material/animation":"14.0.0-canary.cf4292778.0","@material/elevation":"14.0.0-canary.cf4292778.0","@material/focus-ring":"14.0.0-canary.cf4292778.0","@material/typography":"14.0.0-canary.cf4292778.0","@material/touch-target":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.cf4292778.0_1647304223684_0.292796640796954","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/fab","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3103434aabbff42645901a0d4f576bd028fc89f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":23,"integrity":"sha512-BIPAWWI6assZNh7xDmOqPKaNLVbEtC+xmXZ3e8gVtfa9JK+GWpL+uKO7KHmR3FUL1AwyctE7nLpIKY/NtaekBw==","signatures":[{"sig":"MEQCIF1916WuMevN3egnzsGH79u63nyyglK2nC2MCp+ulDxuAiBxVkTfclswYuWMpA9t84/mKb8WAtE6DKH7eBWl3QF4NQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk2oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrI/hAAjPD/msSBu+tYpRZHyzQPjCRJRWxXymrwDjoIeM2Yre/R7DcO\r\nljCr5Ktuh6b4PvvKE1sI700dCTL9KZb4jYxOBk9XoH+DmAlmwLwFJ3C5nrka\r\n6jPKq0lvfH5dqMwPkesIBcbvri7sbwzMRFXMD2wsA8hCz3tjjANwoj92uqaU\r\nG3v0a3hOUUYmNq/tz4fxwy86KeZZj8o8Ppv0zU0DoGftk5zuLcpNVaE4iVqz\r\npWYWneOCLvBBZexJHqvsW5SEtvQ8pVka92ocLicmLJ9oiI+LRY/lpANeywmi\r\nwAwl+n2Hcehma/bYBm3k5yYeOM/XJsquDi7S5WnjPe8m6YBi6z8+zdqSInJx\r\n4yF9KDyXwkxzkrjqun3q7KUyyOcwClSOz1Zyp4iEXf3ZAd4UUGOpU5CeU4i1\r\nFpWenJOXJcmLmj4Y/AeNen6Fc3uYL3RMti4lBiWHJkY0+XJXnuMb6YxNns2c\r\nr4fsUkFaRdLL/TrhXfyKf5dEyB7Q1jO0V3ffjxu7tFns+leiHmSL/pPs/DEB\r\n9LpiIOWmvhgVqckvCh//Nhmst5FSChexBb/6MzlwSmO3PoHx5UBlwVK5E0uY\r\nRA8mvXxLrgt+JdmVKBMyqHc+degQN1Ux5VuOrhk023ZdHcbCG4u1rp/4wEMe\r\nBuAT4DRW4dIpY/uCGBpotFUNBnyY9pYZPRI=\r\n=5a4c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd43e0e0.0","@material/rtl":"14.0.0-canary.bbd43e0e0.0","@material/shape":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/ripple":"14.0.0-canary.bbd43e0e0.0","@material/tokens":"14.0.0-canary.bbd43e0e0.0","@material/animation":"14.0.0-canary.bbd43e0e0.0","@material/elevation":"14.0.0-canary.bbd43e0e0.0","@material/focus-ring":"14.0.0-canary.bbd43e0e0.0","@material/typography":"14.0.0-canary.bbd43e0e0.0","@material/touch-target":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.bbd43e0e0.0_1647463848758_0.0019559138752665017","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/fab","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86143c05802ea09e3e2022ce6acc978b75aabc66","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.1b6afad86.0.tgz","fileCount":23,"integrity":"sha512-oUOG7W1n4jSfHj6AmOLoqc+XkhByTnjIWeZhlz1s8k+JS4ESdaO0ZnkWLaSEnTztV7OFTDJbD+TDd5GUmq0FUg==","signatures":[{"sig":"MEYCIQDP4aEiELA/NjRj2fQ2v8Do8YLPp2/HkUZLvnDj0eJbqQIhAITS0cIFCQnbhLbaJogjPdjk8cT48D/9ppsaAHpmqXIY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlDVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosyA//adRm8Aw2DIXyV5FoEzY3sFBYntvZqnjlLhpwtCsHzsnXZW5L\r\n5X8uxJ0NYHYRaR0HbJD3mSUhUGQBoBmT5KruOwRjPcd+QK1LlZxbJPKuyYQa\r\nZFZoL8yiXaDbmMzYwbJamqOzIrZzxdQL7ZTvTCCUg4o5ODCYeI2wlUGp+XSo\r\nB7HfnA2yxlxIiwV7nntilUEuENZ3nRA2WxEnnAo86LBBo/LbQ/jOpbqRyeZd\r\nX0UXQ4bTqkgUqg1cVojfh8paRjVzLoCeymGgTqA1w5jHqk+vQu3P+p9/tNA4\r\nQ4p6qqaUSXbM5smjaajpYXAXkYiVP0/3K3G4hI1hF776LLDMA4FcJ63aHne0\r\nvdjbJ6ICOiceL3FmGhXUJaaXmO/Cq1yNGUQPh49LjCVPT57/RuaVehswZu8E\r\nC6NYMBwaK3eH4CbGdsmMhXdQGnQ+rylisL/Emx2RMqFD4V9UvApcvMoAY2c4\r\nQxwaxVxGoDzW+VuOBE6Jtjap01vhcm75bsh0rgOLzTp7fr1g8pKKuhW7qRoL\r\nWxhOjV3ZrkWEbhOs3u0/Rpnnz/ulSEJr2ZNmhc4lCqQk/sQUvIWNeH+LmWve\r\nxGwAp9LrCZ46aj94o0GjRjP/Ppk8qVt3GGmBNLRh4Pb76fOfHpnMehikYhGD\r\nqYBx0GL9URtQgEtB0aYge9csgWhFWd1fk04=\r\n=K2hk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1b6afad86.0","@material/rtl":"14.0.0-canary.1b6afad86.0","@material/shape":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/ripple":"14.0.0-canary.1b6afad86.0","@material/tokens":"14.0.0-canary.1b6afad86.0","@material/animation":"14.0.0-canary.1b6afad86.0","@material/elevation":"14.0.0-canary.1b6afad86.0","@material/focus-ring":"14.0.0-canary.1b6afad86.0","@material/typography":"14.0.0-canary.1b6afad86.0","@material/touch-target":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.1b6afad86.0_1647464661460_0.011378317723509612","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/fab","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be44ee5c012ca73932e403615c56c3137f7d3be5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":23,"integrity":"sha512-ncoHAbzUu2FPye/44AAsGpTD3SR+68X3vqEtlwv5txc7KMp/u4TTP4vmj3CU3BoWpD1UaMwRUBQl0oaG80CoXA==","signatures":[{"sig":"MEUCIAZ2Thd+ghkr6HeoNE4VNcMywADUEXUKMKIsApx8OWywAiEAz+uuOzROqRIs0Y28sCuHfL73QQPXri+TybBcxZGQY/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlQtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptTg/+KFm/68bAWVJMusc3H0MMUbFE7HWW4E10mjKc/5QPx33TDCNB\r\nR+bU8vKiN1Y4YDWdcstcanKWv8oKfO4Qe22w3xxLR1dof5/T4TPDoWdxLW5Y\r\nqjtxGatyeNoN27IVvKLz+RhRHfpEMKkeP5NJIT1Y3Kp9Eeaioxycex1d2KQV\r\nYpqxhJSHS/YPXWmh34R8qNeIcnUFIpWAT/ptvaNaEJnug3Mcr7t8/tAUs2ey\r\nX1wQsTcO/qf8wwkDN3Sj0EC/Df0jN8Sg8wwQTef5WYyRjuKL8G15ZUKKACU6\r\nTz/eTswq6v0xmsqZNJ1syJpRWLhHDxZcOMZGECtGYWhqva+lCmbNCrdQfUlK\r\nWGew8q879USZdvjJ9ts44yZGV5MIRO0V74TKA/+aQhuE/kXQk4QNXIM9ABWT\r\nsKrS+6lGvuivX0T7/mZ6ZPf+442mdHbrRvUxGT/vUB+mZCIacOwG5/LTckoT\r\nSt6vzdl/svE0Ngbx+0v0sNZ9K4ntybG/n8OmnFMK1NDuYcRjocRAabue6khg\r\n8mIErEdMggPDAcqmkT5SxxZVRfFhManASga4v+g9JT8ANmi+nOWEbAVOGZAz\r\nBV8l48MirRFKa0mokQ0sMSbjYrubTJxlXnmfYG3xlxmCwHW/13b7pEfWBI++\r\nf+S3Cf9S6QTP2F2MErLI7MWF0EAOrB+0lIM=\r\n=0Egu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf9d4af9.0","@material/rtl":"14.0.0-canary.bdf9d4af9.0","@material/shape":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/ripple":"14.0.0-canary.bdf9d4af9.0","@material/tokens":"14.0.0-canary.bdf9d4af9.0","@material/animation":"14.0.0-canary.bdf9d4af9.0","@material/elevation":"14.0.0-canary.bdf9d4af9.0","@material/focus-ring":"14.0.0-canary.bdf9d4af9.0","@material/typography":"14.0.0-canary.bdf9d4af9.0","@material/touch-target":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.bdf9d4af9.0_1647465517544_0.8779758972475344","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/fab","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.32b391398.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"130653f09e2e594dd56563cf3e2f6fa7a141d41e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.32b391398.0.tgz","fileCount":23,"integrity":"sha512-XUyNPw/ArfYmJJM7BOGGycfi49GK60ALx2d4NaKP/xt9TZO4rs8sfzXUzYZs3cClVDRwklqdssyPOzJ3yQJ01Q==","signatures":[{"sig":"MEUCIF8gBbKHoXlz2JYZCIvdrD5z/i4hkCHGiwRhaf5bBaorAiEA6L1EPYfG5cQzIlyE4TZ0co763eVLIF3F/TlmFQNBBHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3cjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq34w//QwDfcDmsPDOgZUN8Em6u0G0EVw23UT2MMqv6N7LLEc5ZzdYh\r\np2MAc6zSJidSpKyoFeoEdPvf46jIyvpubC1D8c31LZckftIbHfJrT5uivf5q\r\nDgxTSm037j8Kz6J/Zop+k5o9gFm4MD44GyMC2Z3VxwY1BBep1T4ZqTURuBW6\r\n1ZmJUPFteX6AA2lODRBZsY3NSO5igQOUM6JGwtmMo1MhcA0+8lZdbrTVOWy1\r\nursfT345cUuPw6fvJjiXxhhX9LYIYR4xINHbEUqx6ljZmN5VKvJXAGfDXs8v\r\nxJ9SfwvBASo5iFFFkFxc4NUxsJsjlfTYBhXZdRZmQNbTMn6+yk2k2N4V15Xo\r\ndVpCQBLQryUpSntO6VdQ77bUpiukJcItmeouslCukCQyBZyS/gV2CcQIiA2G\r\nV1CcuIqx+W83o9XnBdsu5geMd3uX05McX39RLtomlNlua4T8ngFStamGMsW5\r\n8dWIXoO3jha/9lX9eFocOzrtnW41Z0aRcJkbEIRHranuvOC91yxB/8xGw6fB\r\nA+IK3M9+wefErgrux+Tpf9pTOeIiYAw9fjj2qW7Npb4NpnbkwEhm3c1likFA\r\nsNbtKEZZ3lyctb3aulPQbzH7YA1qEtmYdKH5ImCUwvmcl0y1GK3doWKAjPPY\r\nPT8+0hRe+X2er9Lu9vFqbR1+SjPOgXCXbpg=\r\n=RxYg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.32b391398.0","@material/rtl":"14.0.0-canary.32b391398.0","@material/shape":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/ripple":"14.0.0-canary.32b391398.0","@material/tokens":"14.0.0-canary.32b391398.0","@material/animation":"14.0.0-canary.32b391398.0","@material/elevation":"14.0.0-canary.32b391398.0","@material/focus-ring":"14.0.0-canary.32b391398.0","@material/typography":"14.0.0-canary.32b391398.0","@material/touch-target":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.32b391398.0_1647540003357_0.7203221731034724","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/fab","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49905f1c2651fd3b91e83daa6699df5e1d5fa4a7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":23,"integrity":"sha512-B1hpdkHLX3F8HRfTKpnSvmeG2bis27d4rnOlgEWQvmseDEeTeu6K3t0VrqMv1CSbmg7IpA5DKs5E25rU0huNVQ==","signatures":[{"sig":"MEUCIQDUVP6TmmASz2G5lGCSuXeD0kvXPay9aFUZjn8+D0SkqgIgWxFw5YpoWyei/eTHARjtVTVTNSK5ps+2d3ZaRz0Y/6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLXfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppsBAAmEKWIrIy5irwYogN0elSmaeVONbWiETppLycjkCxYa3SqbSE\r\nf2DNSpPPOEmAPbwVmVIvCHI0cW4KL2wekrWx4SdmDg59k/esOxntB9B8TFc1\r\nK3cLYFXQoa7RSdlX9TZDOJpB7g1wlhF7doLcXNCm/QYH0NyJw4UIg7oHs6L+\r\nPPzPwS4PGCtU46SGQhVJon4NhLdN9h0617SG3lqWTHhl5z59uzp09ND4KckO\r\nPgA3dOCPpe3VdmFf+1RB1OSjHaUGpsmGd3QLTbePNUOwR7NP8vf2qVmwaNeS\r\nvgXyD6hZMksHRkIdO3G1KJ+5L4tJOcuqY+5r8k2ybNyOmNFpDCJIPUPJIqKo\r\n7v/NEO42FOZzEyoKciNaXWeSZjTSqqL22ynueBzVUKieX7yRJYhzRxTzjqTU\r\n5PKzxUgHg1RQSwOXMfeZWJ29HDgYUrLz55MzRyoOUixVnVVEgMP5zf4Lq4D4\r\nUvZlLsE5QTpt66iLepXx+aL6M5beJYEOZSTCC6x5i75hdj/Ex/HgNHcrT09T\r\ne6lugouLP2ZNaYsTjFeXdIppP/d4R3qBe6pj6qKq33PddAVRQZoodCVVVOl1\r\ndu9JoNjb1SLY7aFvw/PLnbTkja8zb3tMw6PvlRt7IFT+oo9Jd0x4ye7qtdz1\r\nSHfASnwzulsMXJNXvtcWlMoE8DlWO6dQQdQ=\r\n=5+BD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ae8a6a3a3.0","@material/rtl":"14.0.0-canary.ae8a6a3a3.0","@material/shape":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/ripple":"14.0.0-canary.ae8a6a3a3.0","@material/tokens":"14.0.0-canary.ae8a6a3a3.0","@material/animation":"14.0.0-canary.ae8a6a3a3.0","@material/elevation":"14.0.0-canary.ae8a6a3a3.0","@material/focus-ring":"14.0.0-canary.ae8a6a3a3.0","@material/typography":"14.0.0-canary.ae8a6a3a3.0","@material/touch-target":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.ae8a6a3a3.0_1647621599437_0.28655305289547317","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/fab","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3440461b3dc6cf98ebf0fc310bec48b871ff9994","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.cbd9358a6.0.tgz","fileCount":23,"integrity":"sha512-ny/nDBmwJMMwgP8HYq7rrWXmmC23v3jpI3MkSSAsdz3aN6SvCFbPFcxrp+7I1qF9WCe2r9NUW8E4Qh6yCvta9g==","signatures":[{"sig":"MEUCIQDICGD5CpHOn8bBcwb+IQigcm0wx3Z4L8i4qXJ4vdel8gIgZdkNjV1kEAJHFd5fWhb/cn6JvIKKplCPE/dUqxGhCNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ1CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoERRAAlMpU+oqdIIdmDKf7DRwkGTsFerAMTHg0rNF+NRXD0fZSlx73\r\nwZ1PdarMdcR4Pgsn7V6rY1zGGJEZr13DUa1WylsBtmlBXhxKPzS8HxouMsVE\r\nqlGLbzi65uaf1OZ9zmVCKIMc/BqM0c05ijNzayZhkub4/tEriFvo7auhAabl\r\nSlEdivYtjj5OZZOIek76Hatkey9dSRTb4ixc5duurSk6CXY0FkfYRA4LBRbX\r\nnGt8ao3wvAzRNNndPlEqymyQWV/4AzRynnAy2nbzZ3MpG1Jz7GqgFqsNIQS0\r\nTVnRJ1pzqYx2HgMZkp+F5tXA9YyxQNptbrBLugvAtefitB1SZmqiSOsWAMS7\r\nPxngrt3CW76zHE+nFisL+N4wJ5/aiQEpg0vOt4bUoQlUOFj7RfQQy177vNHK\r\nlceVmZZs5QwZl7GcceVdtiwvFXYcj1Cz3UMtLXF+4OJDRp/Op0LlA0tOC6yL\r\nU/leYvFzi5/FaHrVwUJYPfT0muBIxZJwjs0kkruFnEVUZgQpBwj/5kRGjlBl\r\neGv7iLJ7BM/8ix4Z7fB4ll8K86a0SbmHhHsdZ51MU1GJyka3YTYagAXnYSmu\r\nwBrqZLaCCx1LSiNCrMNIIcWlx/dW1mluCta0S6XhZ1WYip5EApffl9rzpWNx\r\nMvv5Lz0PBE/H/OkEciMH9csEbfXWd+UMPEo=\r\n=gRWg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cbd9358a6.0","@material/rtl":"14.0.0-canary.cbd9358a6.0","@material/shape":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/ripple":"14.0.0-canary.cbd9358a6.0","@material/tokens":"14.0.0-canary.cbd9358a6.0","@material/animation":"14.0.0-canary.cbd9358a6.0","@material/elevation":"14.0.0-canary.cbd9358a6.0","@material/focus-ring":"14.0.0-canary.cbd9358a6.0","@material/typography":"14.0.0-canary.cbd9358a6.0","@material/touch-target":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.cbd9358a6.0_1647643970152_0.014560217911911089","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/fab","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2064964189d8853906b72d3c210c57ace76956b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.dcfe49c98.0.tgz","fileCount":23,"integrity":"sha512-2+WYtH8ZPJG04NaPQeYSyocBCEMxL/T3bQbFlw+X+cFAnH8JZxiQOn27jR5P9tc7ORnAOGw4t/luU3dkmHdIUw==","signatures":[{"sig":"MEUCIQCyzcf0vxkXbJJuxPkNUgOw7kHP2yNjNT7pE/a9i16hVwIgZquyJkk/0CClTt1wca7i9DaB2vpw9oyyCg9UpSRke+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMejACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCchAAj3YEZaNwEHP994rqPqcTCCkenGpAG8L3AQgLQm4uftA5jKY9\r\nkPdlQysS4fE3lJ63uiVMqD9Cg4cc6PAKt8Q9wIfRaEPSUXWOW/XyV6YPkYDR\r\nmyyNhYjvfmZ9rY0+9pXbXxgQf0epI0Zvga1EizwNxb7egwoktyKN5H+bE5N7\r\n6NR4Rop09o8DW4V9g47SoleDx1k+ELKzkCbKHEF1C592Lg1S5vfiNhYlWf3r\r\nD1zFyb4mr5ej/U3kQ5Dh0L4CQeULgH2MoYjPj74Xl1xAdgccJzaqvoCtDgEt\r\n7Hb1kHZ+xc/02oIzVeLxOz1ofbDANPun1/hRbaB3bb7gLmCxCJdj8MEs3/22\r\ntk59GwOrxiOJBafj3xZJLLM3hjtpUoA29u1NXRWUuRCtcF/Cnia2YlTQKMus\r\n/YD2vlIgS4xUWrBuTwmLTIhUgr56ZLddA95Got4GT4fvVqdyDbmmUjUEN4AS\r\nyBKgxhOgd540+0BL30BGVzRhhpz5PuIwkIcnkHeooYxHryHqdvcPI40f7LqD\r\nauJeImL1L9GCV6BAdbbEHI2476VXRdA0GEoF5O4t/XNYZG2f0oXcSfhI2L6Z\r\n2DVLQ/SQyoitoF4+RHj6brQnmg5aKkBH8Fb2LAB4/kP6hdP6h3Rkm3Xt5AIZ\r\nGc+PeDuODGL4xCiFgz1OaAwtNj+/1bETFqU=\r\n=tqST\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcfe49c98.0","@material/rtl":"14.0.0-canary.dcfe49c98.0","@material/shape":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/ripple":"14.0.0-canary.dcfe49c98.0","@material/tokens":"14.0.0-canary.dcfe49c98.0","@material/animation":"14.0.0-canary.dcfe49c98.0","@material/elevation":"14.0.0-canary.dcfe49c98.0","@material/focus-ring":"14.0.0-canary.dcfe49c98.0","@material/typography":"14.0.0-canary.dcfe49c98.0","@material/touch-target":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.dcfe49c98.0_1647888290832_0.6948074300891343","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/fab","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a4e6cc8ef7372a5da4708797a61e4a58198e9b3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.f31a833fa.0.tgz","fileCount":23,"integrity":"sha512-XsHjkmDXw2S8r7tXHyeP3ZpPRcAgwWe1h1j6/BANAfNqLKQDer++9VK94CrChAziOTS9jlcCl2x14KUwsIcDBw==","signatures":[{"sig":"MEUCIHqpLdSVgTAGO4tsQJIWyAArPa8Hx0IvdfGk7MUyf6v7AiEAzYbZl/Bzsa89Gi2E80xUHLREVRtlVz65EoLlqGuDg90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm8VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwSg//fNBd1JO3Z5mQ3G5ua3uWm2wIRoyuepCdVnR7vAUnmDXZjHmv\r\nFo73g9Ha2S7CZvHf6cOsfumCZi/sZmAsddv6ZJ9/7KsAZKodq4wMxdgbyzw0\r\n4cjxXlyS7IptrnaCAs3FvrczO6gnofkQjBUnl3CAdf+MGelw6nsI82Cno+4w\r\naaI0P6cuxMrnhBORsoF5nRG014VolWgX/La0+Blo9NZSGXEMtnhq9hh3/jMq\r\nHS984IPBG57NkPfvrrXaEVLp3N69Jdj1yo8bHTpjfGI9lbZK8TULwduRnIZU\r\nQlL8TI37F1q1jNCn8cksfLHqTXQQRLAx3wc7BDod8bqei/BH4pFsqMQDO0AQ\r\nDzFImS4SV75gJKjm18F81SLe4gA4T0VZx9nkqJIKpjYwgycF2cNU01784KNd\r\ncAoVLsjd9b5WPlPrK2h3Ybibm0MpaiydGHL8IRsqcgn+06/whzQ3MGOkDea4\r\nWcKRvjqjhNX5l+S+9gFpqLFNCz4NFhvx4uJ66OH44V8crUgeuZlJAJOMbaT4\r\nSrSdRZEFRiIv4l2fqeBmOheSf4hHgSz3N55qpIhCfvLNJzZ34thkoQb6UUGZ\r\nZsAzEwUuoHR2/ttknOCoFAnEEboTnU0V+ARnEzMBauWnHjRZx2KJAnvs0a3Z\r\nFygL2ySAyO2UnYwCb79pyc5x/CNlB6Yw1Ng=\r\n=DTTQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f31a833fa.0","@material/rtl":"14.0.0-canary.f31a833fa.0","@material/shape":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/ripple":"14.0.0-canary.f31a833fa.0","@material/tokens":"14.0.0-canary.f31a833fa.0","@material/animation":"14.0.0-canary.f31a833fa.0","@material/elevation":"14.0.0-canary.f31a833fa.0","@material/focus-ring":"14.0.0-canary.f31a833fa.0","@material/typography":"14.0.0-canary.f31a833fa.0","@material/touch-target":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.f31a833fa.0_1647996692827_0.28464784669817766","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/fab","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9626f7cc0b8dcbe7f57ac9abcb67c4a04c7e3117","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.4b92e210a.0.tgz","fileCount":23,"integrity":"sha512-b9EpDb67qmkc0IsozL/gJMUb1fs2Qi7lvSPFujr18lodUSwUL7amLmKMy2LhU9Xk3yM/SLepwimAYSsc22HIRA==","signatures":[{"sig":"MEUCIQDHK3nwKKuvTCZviHEW2GRbSfyBeuzGkjXZ80dmmdkXWAIgHVNntIi5JXcfy4rYvdJMXIomGv7MgcVm06IbJmv/Igc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNJHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXeA//aqMoo00gUte3ukFUyNMnuqiXwKmz2V1mCs6fIV6rm3niEBwX\r\nnSguFb+JlzAhtoAaeUajqw3Q9Y0hmao4HpaBbeJxCD9j01O66L3xx5cMQy6V\r\n7FjxbjIgsw9P23hEcYwUvQNd2NWOCk7b9HNmOKkKjUX+M4r0HhJpAk+69TVQ\r\nskBOVf4Y0yHUFL48uaDteiPzKiXVxpA7JvxtlvxlGbZiQ0bWkblBrkWvymx4\r\nHl70kVHUIWXOI06nL5/vIFW7DRCX16DJ7ech8VLIkQ6OGS4h0WyYt0hC0Q2M\r\nnPoUxRKmEHVJJfN/u/7D/DaOPUi5B17ZfcztloBmLmw1Q3FahFSyxTd7YBcw\r\nM7SfOl3I/MoOAf1IKD8rYI+KeZUCq0BumSF8ycrvxpxV4TCLkyS8m0e22wFP\r\n+MVWjotnrNjoIPVoCOo5tbkTB7gw3aY8Upb2T2wNwgYGvVvIXOpYm8CybUwM\r\nsKoNoErQEX8FC1BOJwtysx2zyJjXdlrjc/bi2sXFKLCvQES24HFXhiMRORZx\r\nQ+QzrYEVarILS2dEE4yvDWiOJCNUEXV+D4K8NuOLMLwjHdn5rlZkZ2P6z4vQ\r\n8tXsmIUSw2QYbg1RdAL2724a4UwY2hgJBijINdoA+GJzsMw3MR3vRHpvZXXz\r\ncXW7vg3dQTaOjC90u5GT6VPTYAt6p+MfwDk=\r\n=j6Mk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b92e210a.0","@material/rtl":"14.0.0-canary.4b92e210a.0","@material/shape":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/ripple":"14.0.0-canary.4b92e210a.0","@material/tokens":"14.0.0-canary.4b92e210a.0","@material/animation":"14.0.0-canary.4b92e210a.0","@material/elevation":"14.0.0-canary.4b92e210a.0","@material/focus-ring":"14.0.0-canary.4b92e210a.0","@material/typography":"14.0.0-canary.4b92e210a.0","@material/touch-target":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.4b92e210a.0_1648153159434_0.1769580089252718","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/fab","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.a657abb61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56b47e1e0cc69256e54c0d1c6b9542bf4421335b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.a657abb61.0.tgz","fileCount":23,"integrity":"sha512-NuMuJon7+QC4nEpLNRk3JYEbyNDqBS9f+RVuSHksTpEfNV5M49gEEZOFiT4SsAXlg7reWJI+0RPPTjNJf7F2XA==","signatures":[{"sig":"MEUCICzYS6DT6BT2etQT+FnMXF0NwN/5i2MmfuN2vFhPYHENAiEAjG90yI9jEWlfanG/3CBD4RcbknpZm1FyQoVDx9Dd814=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNdJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrX3g//SyZXu1PeK9T+orV6f4CbXUuRokrMsGbFa2Ng808uPpzVILsF\r\neNIRhnnk+MSQRtC4C3IRpZbDmtNW9D/YJSGOgAgvNY3FrVXREkqJttCJmlmb\r\nMSj2i4DP/HRi9QEPXCafoa0ZZHD+pi/qRDT4yNyUel6lpSoU6LwKRGrDehrx\r\nve87PbWF9V7zyWOd/E2xj20RAOj0Py1NSh/n2uB+t3m3/+PxjyjXloci5lFr\r\nRpXOOvRZSUEWiJm9yfxPoyFem5RTCBw+/Dc/c4guXanDeYaBv0+zQ/72a2S7\r\nYEeNIcztkFI9sNSGLfZPRAMfqxKPenvFEMHg3AVVpz7MBIOqaRoYEethmwDv\r\nLTy5l96bkgzQbX+tEAyq0/+7YhyZ/ptUd2wY0ECDwDh+ybajcd2mbrsDgTzr\r\nA6p9ovA+KvhCgLTJBq4fumysck5GbEPMpFtZc0TouffW+JGOCWIwm7LwIWw9\r\nWZl8QHfFaP5RIBE/4BTl1vn/StocA75Of9hVguzESkdrEAkM+arrjIzeWS06\r\nhrZvmHGKyymMhp1qZg1gfGwEXXQqF16J6083RnO+u+TqTfN16sp6r9rHnMf3\r\nxrT7rc0ZhygfW9KyTcm3i0kcr8JIbTT7Uh0/OKBNVVZyr+f9PLYEYq8QX2Yd\r\ny+BDtF9p7uFMXHBmirFi6SvqtifGocz0gfU=\r\n=4ggW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a657abb61.0","@material/rtl":"14.0.0-canary.a657abb61.0","@material/shape":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/ripple":"14.0.0-canary.a657abb61.0","@material/tokens":"14.0.0-canary.a657abb61.0","@material/animation":"14.0.0-canary.a657abb61.0","@material/elevation":"14.0.0-canary.a657abb61.0","@material/focus-ring":"14.0.0-canary.a657abb61.0","@material/typography":"14.0.0-canary.a657abb61.0","@material/touch-target":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.a657abb61.0_1648154441170_0.9443936229519787","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/fab","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.443f63f50.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8733b12445acaeee4d3e833d7a73562e04088b5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.443f63f50.0.tgz","fileCount":23,"integrity":"sha512-UM6QIgiIch/K+lTS/qZsqNoSosdKt1B3aYewTCGlm8k1vQ2AUC3bYTW/VlKpYnjEnOiMTEYGT4S19QwchCPGXQ==","signatures":[{"sig":"MEUCIQDqmiwfDGb08NYZ3Dohrc4F+zxgji+695izSNROAa4YBQIgaGtdvJ6jt5W2GGhyHy/9UDr3Q6ZtlzCNVbpXPH+6YjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkqwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIJw/+JpfXISkQPkts/ofZrZijZvxb1KHaZ4mfWo77jWx/nxBTvPjz\r\n/EdN74+HD6tXwwR/SN8RDJaX0awAM6M4m4ux3IB5EUPw8q9jjZo/9iU62F1e\r\nmfusU+YrrMkh9saLKF3ELtMD7N/EzCNdVYt0TF2dWwq9C+9Z2oJ+IBQ+McM4\r\n8nTs4eVRooHofUwAKLjfvK/UyKA6OXRs40yNMEhDBKTNpb8xoi+F97BklEdJ\r\nfWFICZ3SKX/iBu1BiYINIQgaFwfzt1fbha8Ra9ZUp+CQ2lKK8G9kec3ZeeRl\r\nQ8p5sxRR0ODXUPgfWPTSc8GnGA7gYDw/2C6VeZI43SBrNFxEsrnrzCL6+Vtz\r\nJSgJCdTj16k5ynlS/XW0t3mu6Ls7E+1DEtTD4mMZ7n9iyYqhNejp7gVCHkzv\r\nfFvLVpi9kSTJCRmL+ylX0UH5/wtpIHLwiIgKZhJ8710NsIR34LAv2LnFUTzg\r\nDQ7WE9H3QHuCF/fKifZx01K1wt/Q3v34U7r5G+6E2gyK0IbDwlkki8b95zNu\r\nFDGSPRRL3hfswk+vDK9Lf5EvhOCoKwzlQl18iSUwlinXW/TIbQQLAhdD99IR\r\nbrgPPgVmrGFHqkRuvuGLM6g6/pnrFvmMi8lirWxIbnolhcpz3tBVIraas3By\r\n/y90tNvM1KukKu8c6fqBfS+mNrb8v47VfOc=\r\n=Dzgg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.443f63f50.0","@material/rtl":"14.0.0-canary.443f63f50.0","@material/shape":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/ripple":"14.0.0-canary.443f63f50.0","@material/tokens":"14.0.0-canary.443f63f50.0","@material/animation":"14.0.0-canary.443f63f50.0","@material/elevation":"14.0.0-canary.443f63f50.0","@material/focus-ring":"14.0.0-canary.443f63f50.0","@material/typography":"14.0.0-canary.443f63f50.0","@material/touch-target":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.443f63f50.0_1648249520459_0.9223458296492066","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/fab","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.eb382f318.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ac639cb4bcfa34393c0a1c28d83ddefe36dea1d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.eb382f318.0.tgz","fileCount":23,"integrity":"sha512-4v1ZFFFUn8el4oTVm/gTpRNoZ3XPe68duGPotcCTVQ5OPV5S0M6ikC9pkIILsV/QBzEf4JPclnwYKUZx91uvVA==","signatures":[{"sig":"MEQCIG6EOYgwZOQu1q/fR20bI0qClbr7K/TXzbFxq6lJ1NjNAiBmx5equB0E/eiBt79ccjMHFDuWAJWAlkR41Qy1/ra59Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0NvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4Ig/6AvbIrlHdWG7XA1fHb8BqgcZa+rk/KEfoA4rnUIT2FP94qbQY\r\nzAqutFDreJn4s6yto/wrLsuTEy1NlZLqovY/HfJt5jCgwpCvpFfOSSF9XqfF\r\nJbFdd1l8lSCDtyfNe9Mr1fd7O2kvitQBZb+Fml9rOQwWU2EpkEhK0xbiLmmW\r\newx6aNSbIuHEzycKtAPL3CnX1mxKTCD4eolutlVhNECx5wWsLAngKJC2ImeB\r\nwWKPvG1J2HSwrjyJrGX/rxZSAPVCdnBrVku3fr8IKwJgJZ4Ywp0keJjanR3X\r\n5YyX7J7aZc/SZ0jc2EiC9H5RKw7gHdTn1ESJAbWEOq5whtPkaKkeuCuax+T3\r\nI6oerZrk2Y5IQSNxhL2+Meh4/NyTfupFlQ7YTsf7ba1yt9NByTZLzQeOhL4g\r\npUJV4JW1FrPUtvp0TfmvXQR9CrRbsz/X0rZNExnS+t1KK9Vaz4qnDGAF3tJD\r\nKwJoJS2N4g7v9U/Oao0gRL9vZkMg5jMXkAGXzjZ+DtvSCXoROxg5C7j3O9Kp\r\ntFO22TIbraK50ZqY1OJCmRS4GAysnHddH6DOjrvVuxYChpXys9eYcbx4X1GE\r\nY7kjoOUcoui3oAysyzvyD1tJPHz5I+cha+BmwyGfz252dwv7RuWClXs5S97K\r\nD5tRrS3A6uXegGte5WjxtYbcYTgfA+DbQfc=\r\n=aQGW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.eb382f318.0","@material/rtl":"14.0.0-canary.eb382f318.0","@material/shape":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/ripple":"14.0.0-canary.eb382f318.0","@material/tokens":"14.0.0-canary.eb382f318.0","@material/animation":"14.0.0-canary.eb382f318.0","@material/elevation":"14.0.0-canary.eb382f318.0","@material/focus-ring":"14.0.0-canary.eb382f318.0","@material/typography":"14.0.0-canary.eb382f318.0","@material/touch-target":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.eb382f318.0_1648575343291_0.6345743304076947","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/fab","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.344d52823.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45461f13eb4df57a51d61064e80ffbaf3e76a605","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.344d52823.0.tgz","fileCount":23,"integrity":"sha512-PK5WM1ayLu5GmIVy+5QY//GSEOZ/V+sn3Gysgja59RgDcGaOzDQ/jlok2nUdXyqZcEPGtkoU2k+Nk+xSxeCmtw==","signatures":[{"sig":"MEUCIQC+2VH+0OaBftyOB+KP5B+kDv0HLLxf8ML1msZeP2Z3tgIgf0aCWywNLptiRKSyQYuYHdUxC0paNbxBW0PJpssEp8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1N0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBpg//VR8qQUTFTEx5K5vz3poTPWfLu1voD39ccfOih6Ys4oadAgog\r\nkuP3c1olC+jVO4Um2gNBUY3c0RW681kyJYviRhMPg32K3EWAjEopIGukxDoe\r\nz0TSibTOzD9Ri9y2RqtE6WBYvsrJ2+1fUK3GTpwVOlZ+bqKq1HGMlS75wB54\r\nA4CLYShMm7k6jT7W0MeW03cxzUa9juMOWQ+hdb+sVdC+EpR4bHY2VBIhMKTs\r\nUfdBLFZziSf8AhuLB83kJAWIu6bzQNeXLBzNPd9x9TFUUxqyMSjP6YRHFoFX\r\n87eIrnsrwFoCBgZcLer04e8v9Jth264IsEE946I5aAxhXtPRsZMpB1k3MWpR\r\n08gJLV7heW6d0vDMIAjofcu538AxMj4UB8WXelqrBCu1Rd6gW3Ep/hVsiW+8\r\nbLJVs+sG05xpm3Zo/QoXaHOKSc1TQiR4K9AbUoc248JFENAcm5PmajzEyLqf\r\nXq50KOLrn51pTcX9rS9W2zCkLOPnc/KwC8VN5+lEsMY966JUJIRTVbm3NCPz\r\n2r5wO1pHcjfwKMF9uOs9tL8QVAPEJmwzo9J+4jGoCPs/pblgznUugmY0RRi7\r\n/ijkT0RU2OJG13aJE0eNFkNWyTUumqUrs7JhEvlWPDMiUL1AqHHa0sUlD9DW\r\n3XWBb1TzxEFlfjfIedGQU9yQBMjhpSeN9iU=\r\n=Bz4A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.344d52823.0","@material/rtl":"14.0.0-canary.344d52823.0","@material/shape":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/ripple":"14.0.0-canary.344d52823.0","@material/tokens":"14.0.0-canary.344d52823.0","@material/animation":"14.0.0-canary.344d52823.0","@material/elevation":"14.0.0-canary.344d52823.0","@material/focus-ring":"14.0.0-canary.344d52823.0","@material/typography":"14.0.0-canary.344d52823.0","@material/touch-target":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.344d52823.0_1648579443785_0.9457758604267699","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/fab","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"958f29bb8f817338906e24ef7467c4cc16eca0b2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.4e372fb49.0.tgz","fileCount":23,"integrity":"sha512-4cmoXOQviYHYqIA3P849oiwR+hDCSSR4C5MgWfU1KFdjwKJXtF8w1sUSCcKHXXokUkyXgRPNzghK7aHuYr5DGw==","signatures":[{"sig":"MEUCIQCQ0giihVKCT7/3IVnRN8MuMxYChbD+rxExp2ixho6OTQIgOALbArxabNrLzV3JMHjeqpl6VJjyRRIo62EGkKuM+Ws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0qnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfZg//bXMc8PWeI3oDKSZcMiRPOo34j6lT3Z2dEIzeLpbrz+9+xCxL\r\nN08MwHMBa7XOpQGNYaprIHLck4txOPBoDIOejek8NRGPAB+b1vWXJxfTXKkX\r\n9v7pCHkLbX908L3OifF7Xjsw6t/Sa/KipCiglPL48m6yEF3CWWM6AwNHi2WY\r\nTwHYAfK6qNqRkE2vTYMJzhOlKEIy9jdxew7hz+d0HaXmNcwcZhR4Cg4vr6NA\r\nnEv1nXCSKII2iSgClgWJEkhTDqgAtKH9otRD6qAg4GZl3G4qg3hb98MfhfFK\r\nuTXaaV5/jj/MyHel3Heckf829RfbZienA1eP/noIYuvjFjWnsK7YiDXrsUOI\r\nINj98geGmZEBDMO6JKHXq42iwmNBGhXRg7qlZzevRpw9CFcumKGEzKupWoS5\r\nwj7qOeM88sGTUzkE0p/dTkPYYK1NO798V0XuzGIg0y7fkYznwbpzE4Sw5SzN\r\nc5szoH5aXRMGW6smDLoPg1kmMCR9OrxTabkP7Vt7zrZAxgOBbPUEQ/+fTYTv\r\nR6ZJUs7ROP5osoGKDUTg6xtPkAArmdsuw73JroXxnhFUn8PIYY6NQHq/D/V+\r\n1mxntDTj3hmNuyvplPpDARm+m+6mnOfw/dwB23wBzsTCk10M4tmGFvuxe/+9\r\nuLfxWZxjxNLf+G2/jZ0C0KqoQc8NqagBgrs=\r\n=zPBd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e372fb49.0","@material/rtl":"14.0.0-canary.4e372fb49.0","@material/shape":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/ripple":"14.0.0-canary.4e372fb49.0","@material/tokens":"14.0.0-canary.4e372fb49.0","@material/animation":"14.0.0-canary.4e372fb49.0","@material/elevation":"14.0.0-canary.4e372fb49.0","@material/focus-ring":"14.0.0-canary.4e372fb49.0","@material/typography":"14.0.0-canary.4e372fb49.0","@material/touch-target":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.4e372fb49.0_1649363623298_0.21790952320228607","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/fab","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46d674510ae7a45a2c08a701ddbfe35e6e9bce02","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.3e30054fb.0.tgz","fileCount":23,"integrity":"sha512-4ReDcw8gvvTrircOQFuyIxVKH33+48RFX/EueC9rn5QJeK4jwp0iwwwAtmuSpXWSn5+AGdUT8lSJUfCKC0uiNQ==","signatures":[{"sig":"MEUCIQCjyMCeRsqqc08vy1+hsh4Nef3y1TO1gMxjw7UsTEfu4QIgYYEO9m/EIaA7+ahSghZmYakmmmM5hP0ML7xmQ66x4sI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0tmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjwg/6A2sUjhSeHiWtk4nJNL+9MrUJnpJ9Ods39hF++u0uPIF4dm/W\r\nq88Flkjwi2Xbis4RqVRkXFjleotE9TRIwRMXChxbKaynZD1NZof37ENV1SE2\r\nn+BIX/crp4CPatLf0LPPgHA9LGYvUx80buhNDLnbyYpSlL7uMsgQWLndTj86\r\nyMmieSvBwfwaHat1GqGMLvcSxA3NtKSJQ40hNFxUcDr+8SmBgLDLOyUvLu0A\r\nXDB9ys6NzNZbbIDr6Cpd3aMRi4tUhkQAeH/2HwmiSQJ0eGJL8Wc7N7dUdtwd\r\nA+5WcaAq5rQwNbUl9JfudGwERbHxwaZMzbReYAEJSLQhOeefktDu/zlx0926\r\nToYuV7DURvROAMIGnw43YrJQQKb7AwDVFZgd+umg6IoIUXYIOIYUXqldBzUm\r\nd/1K4t5IRPPacgg7d6yvASZclP6GLZjFtsWItd1Nyf0QBNc3dujZ1vRWSDIO\r\nnAtL+SBDJTLa6zp1JsOY/MyyJnCDnURGCdoV4VHtgjniaARQzXx1ty2xlPzE\r\nfJ4/NS23bu8E5vBAmKiuB1SH+TuWjrFREqEHOaEiRXq+rbBecx+/5w+ftizg\r\nYMSde5kIi7gaTQe43jNOnLf8YuU7hZI4de0wx+16xtbERUTG+Jea6XT0QKS5\r\nrTwIvuZao+oaXN/OvzZYh/ydEKT69/pcmbY=\r\n=Wz2J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e30054fb.0","@material/rtl":"14.0.0-canary.3e30054fb.0","@material/shape":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/ripple":"14.0.0-canary.3e30054fb.0","@material/tokens":"14.0.0-canary.3e30054fb.0","@material/animation":"14.0.0-canary.3e30054fb.0","@material/elevation":"14.0.0-canary.3e30054fb.0","@material/focus-ring":"14.0.0-canary.3e30054fb.0","@material/typography":"14.0.0-canary.3e30054fb.0","@material/touch-target":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.3e30054fb.0_1649888102117_0.8471174442264757","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/fab","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b997fbb8ef8376760b7781ba2a86472df39bb1cf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.8c4da223a.0.tgz","fileCount":23,"integrity":"sha512-wEZfDqqLu7gAAoyv3GY6sxCWSdXUevY023S+Ex/Gm6zM1WVMF09Xo7xhS6y1V5J3SnjP/Ozf/tTTuE3TJZVI4g==","signatures":[{"sig":"MEYCIQDvnpxRyZdg5PkMj3qJehs1f57qs0kqmnvn3bk2mtSzyAIhAMMT2N8OaB2JQvsnyDcVtkqryo2zO4H7RziXh04oSUhH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtRLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaJxAAmW5c517LdAslPGEdamIrX9ONMzRK7b459MkOTqSIIHCZKL93\r\nDF4kQf8jPw99UzpCQyuZ4G4pOZ+I49dnMiK5L/GEx7EUQGWKGCSZPLvz7kJE\r\nnUDtqua4/zZ9Vtbs8fHSm6B4Ov4S5jWeJosrXAOJD/Pbvzo9eiQEMKBumVD1\r\nz2/MTWLRizteeUPmAAFuIQsp15doUTCmO/PxOI/WFNLe6H342JS1jg0MJK2m\r\nFhUFX5N9jzxT/pzYYv4g2IAWhIJDnqy3eYrv03c4L4u+9chSbWrNmvVoUpU+\r\nqcRcMeWl9fgmsBDFIT0WLRwTg1YUUt8hg6aTyozKzRISn5trXxrsWe3TB6bD\r\nGU0Lw8d326Ep0ckfaLooEIJSRuZ3mHyLRopSaJaqWHP6nYF0in3dKVVaWarD\r\n+v4kTVqtl6F2sIhg1d2jAfjC4K4FGrcEGWDwypGhYQ7RyG+IOoxtAOvNaCUw\r\nVwUQvhQT6J/bby1QtFdR5iBOutQzI/UMqgvTgTmfugbUBAHRKYkvcZnZd7vc\r\nT4QaUl/isQoAHDL5wq2HxDfgXTm1g59WvQuqPXbmu7Wo65AzixJMsW/dyPia\r\nsZ+DuiCCdJdNIMNpD8vimMFXH1w4AtSKHyPc3ycY1VLx9pncKTOfh5+1zSkZ\r\nG1LyrO6Fmz8pUaxx8cDPPq/ixk9dk/hSAaY=\r\n=K4mY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8c4da223a.0","@material/rtl":"14.0.0-canary.8c4da223a.0","@material/shape":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/ripple":"14.0.0-canary.8c4da223a.0","@material/tokens":"14.0.0-canary.8c4da223a.0","@material/animation":"14.0.0-canary.8c4da223a.0","@material/elevation":"14.0.0-canary.8c4da223a.0","@material/focus-ring":"14.0.0-canary.8c4da223a.0","@material/typography":"14.0.0-canary.8c4da223a.0","@material/touch-target":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.8c4da223a.0_1650381899301_0.6913309930922593","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/fab","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9a011e8d7b86ce47d5e1022b5f5d00bf86e2f8c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.7de8965cc.0.tgz","fileCount":23,"integrity":"sha512-UnMNS77AY0H0WzQPvQkw50opXLwMJB0wj11hkih2M2HsQfY3vp5l1ecShwMRwX7vjvx8DEE3ZSeNABaXy8gNUA==","signatures":[{"sig":"MEYCIQCTI+7UP2BQZTg2BpeKzOv7BMi08RbxnhkJy8jdIpRhrwIhAPEmAqmMkkrsnISinFpnU27gikh2i7Z1MvDBgIf6jPPt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxpqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaqQ/+I1gQ+x4SbAUMBUg1yh0vZhRmo6l5U0xXJ4WZ7skZY0b7HY1i\r\nE3PIoieK57DRhXb2x5mwrseIaAQ0ksFFG9mhjVv4ODO4cYPjrT8JXYt1LgeT\r\nFHI0aVmpNJOZC4uUd/WurJEKwyKa8NfG1PO/tWAJLupe1jQNu3kx8/qevyoI\r\nYmjvKLZSg78KR9YQAmIJy/ooN/Vte/L1Av7MH5ZsAJNbZo7sMbcKO1WZk3Vs\r\nYepsncs0MagzJjzgwPc6R4ecnidQIx9PjxtVhqvDcE5apHqBd6QbtK3t9dVz\r\nDbBeyKbZ8pEKIrOysnow7NLC0Qq0SWYNR/WatOmVVQXPS1iY4DWfwJn3Jr8M\r\nvNO+FJ+95a9fyT4IknAYwxhJakL8/ksewgvp570bouT6G6lzTcj0+XjkN7cV\r\nrXZJrT4lmvl19L5j94eVcxuT1oDQ+oGCCXLOR7Z1/hrbGdrsME01lu0jYWGb\r\nXgF+YAhHHY508QshKHh4E9DRYnJepiJ78Ce6nKUkQ2KtcS11v6RfGA3EgAGv\r\n4tHVbhQDwqMfD4hxMnSsVqsTrdaKkBx36A8cbqJ64HGsYRyXtKx8nc3AIjnF\r\nMd7oxXKlC9jNjSUd+AqRzXMLr8YQn48U+hYbxpGuQ0PzKPy1K18Yq8+ExxDY\r\nN7hfP2crx0qfAwRPMJOJRyvNUIyMIo2S8as=\r\n=NXiS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7de8965cc.0","@material/rtl":"14.0.0-canary.7de8965cc.0","@material/shape":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/ripple":"14.0.0-canary.7de8965cc.0","@material/tokens":"14.0.0-canary.7de8965cc.0","@material/animation":"14.0.0-canary.7de8965cc.0","@material/elevation":"14.0.0-canary.7de8965cc.0","@material/focus-ring":"14.0.0-canary.7de8965cc.0","@material/typography":"14.0.0-canary.7de8965cc.0","@material/touch-target":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.7de8965cc.0_1650399850538_0.9245283357358154","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/fab","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.641ed0851.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b01f16132907d70acb92624f09b7cc5634a7b883","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.641ed0851.0.tgz","fileCount":23,"integrity":"sha512-SVb7HExrMFzO+LdIwcD6Cq3QoiYN6giuo8Gt+/c2sytsH0WYnzVgFEsZhKEHYTz1mJDwiqFU8HEWfQKDQxBDiA==","signatures":[{"sig":"MEYCIQCW8M3t+9BJUdS3MyyVQvlqN9GyYM2Hw3Y25xqwsbglxAIhALtq9SBaJujjWpVyHqlDbU5/XdJqwVvKjOvFWHap/xpB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC+GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxfQ//Y95GxheRrSVS1Xt8obhP8KJE90JD/jf+WqlVUNJbNwlHc9wc\r\nlwxKGM27rbg7GL8HRSQ8dl5M/aGUEp5/ADid1Z/E6Iofz67wJrZz/+o8m+hl\r\nOz+nrN3bdMsdtFujOu6nGCZ/UsnqpNQEqWCSwznm/xmQKGqgOKSForwxvKL4\r\nZqacYiFCn0WO60eAQujz5KMvy5cgq4bFWfHPDCz/gn3Q9yzkCU51DG3MdMZ/\r\n57xqpb32flWl0pg9TVsLWCHA+swbPVlUIa75adhC1yP6GLdKscjLltB9hF+2\r\nmkTT5Xdfzk55b12qtWlbyq1O/+O9tkooY6+8aHp9KOYCflh7NHW/u2bgah1/\r\nRDV36dcJRWcF5n8n+RhyV9SxIR25rvjooqSIIHmEhMnHfTfIIo0B0yqCY9vB\r\nZpJkmMv0TS1+PQ/G8sso1xc2mYUrUGPgvpnWrBZNOl46D701R3HBv11ztM54\r\nojyyAg5VMtozHaLF9jdoxPAeW0ijYzluSb08Ym/jZs71t/dT3LGUz1r3W2T4\r\nuilg0k/zsgY9r/UIAfh/Itd9xit07wGwBxHsJyWcc9eShvVXHH/L4Gx+VJfJ\r\nFCvaOr9jC6UogngcxB16+qGWJYCfmqVdmq3UYLXY4T1jPlT7Go0NppcXE8Wh\r\nmqzltLX66PN9UleKe55XvjDRs4ATpq7xPK4=\r\n=gY4r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.641ed0851.0","@material/rtl":"14.0.0-canary.641ed0851.0","@material/shape":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/ripple":"14.0.0-canary.641ed0851.0","@material/tokens":"14.0.0-canary.641ed0851.0","@material/animation":"14.0.0-canary.641ed0851.0","@material/elevation":"14.0.0-canary.641ed0851.0","@material/focus-ring":"14.0.0-canary.641ed0851.0","@material/typography":"14.0.0-canary.641ed0851.0","@material/touch-target":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.641ed0851.0_1650470790608_0.054091672677601954","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/fab","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.e88f83024.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef45e6ade976dcf4e51dc8324273ec24913cc061","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.e88f83024.0.tgz","fileCount":23,"integrity":"sha512-JhwI0uM3CiLTF0+jUxDe+9hCVToCKAY7qmakolO00H7x+obXhZQSWJfuKfd9t6nEsH7zEe2zCMN/DKTq7gqrjw==","signatures":[{"sig":"MEUCIQC6pO4vpTUoRGZEdTZloJC/TjWnkkKR2gT2UMEEJ8djsQIgJunShslg+PTDUHW2BauFdzmbGaSyDLt6bvl7ZJA4ryU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEduACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGQg//b6vTPsXR+iYm7X4oQUCKCPdkRZH/okuS2JnLQAMvYP1+velm\r\nAIeZhAm721HFqBMCae7XThfXYzJiPPC57cxG2p47E/2deiMG57JBllK6QFVg\r\nmhYDLNqzdGSxhUuksD19xuMN8WaAI31WdNPjUsl2mNP1+HpkNCDT8KWPVJwO\r\n5MW3a1Bf4TDB7YIPlRILaFQpkv9MQxaLM1wnb50bJBMcY1+/UjHpf1tAOs78\r\n/J430Eqz+haA1/unxrQZl6yA3pT1vCiXpdjjRG+V4o+ThzPg2te6UJ0hYSIG\r\nPaj8u900qjd2cRpOk2R1mJX1pupMxMQAEWVY5XQI8nPpCqBdH083ci869PCg\r\n3rdvBMfSp2OjcJljAYObN2H7MjvYO8TY6EufkIVGhe32CQ3Qkl5ljqAwdfNo\r\nJk15WfcTcZ0pkfiAMhb3WMMUTXmuhi8BANtu5vQGSaClJf1SD5auz3GjRHwE\r\n5T8rPyAJ0rBoBou3U08ACj1vWQcf9X8AF8iGo6CdFCRTnQUve6/iAu+5HMMy\r\nBElfrkrpjQryMKPDPXIxeFV3+nler/ibTIrHxWSRTd4w4qgyPMmLlquai5oO\r\nLOL9Bp+mQL7qpN6gnENG9zhpTPUSvwfkyJcCnZNSv2GmyH6hj0S6de3ZEKkW\r\n5sbJKu+nlwlTdeefkPI7IrbVTu+X/hFxSko=\r\n=mgy2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e88f83024.0","@material/rtl":"14.0.0-canary.e88f83024.0","@material/shape":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/ripple":"14.0.0-canary.e88f83024.0","@material/tokens":"14.0.0-canary.e88f83024.0","@material/animation":"14.0.0-canary.e88f83024.0","@material/elevation":"14.0.0-canary.e88f83024.0","@material/focus-ring":"14.0.0-canary.e88f83024.0","@material/typography":"14.0.0-canary.e88f83024.0","@material/touch-target":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.e88f83024.0_1650476910295_0.4692722823034996","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/fab","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.7321d6254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ada02d5a6247ee3a57ee526ee21c5eaac244cd23","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.7321d6254.0.tgz","fileCount":23,"integrity":"sha512-/QHLufk5ZOWMuDMjwoq0MQsjksMCrdwIo8opHkDGrKW81gn9dztD9Vmtq9Elee0mboIB26OpZkeWFrNTlS5GUw==","signatures":[{"sig":"MEYCIQCD/Xb7ZPwf3k7aCCXt6eD3iuugA+Tj1ynhMpECTwLWhAIhAPjUAYSwq5DQdZF7SJkcjQWXf0Pbh4QKqh5MEXWicrOk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGkWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpE+BAAotxMHNmlUfp2V7oxQ5HA1Y31+hsEovoOea61tOxdtDPzcYmG\r\nILlvkZ1Hb5WcObCSowzFhDzowmLHKnjs2kumhc1e86bfcPj+tLo573TK0HHb\r\nlypI0CClg/OYfRfomtGd9UCGX5ezwv8E4nNHYPHNUR6BKjFNM641TWIrn8BL\r\nOb35quqz2Jvf29IlndwYVZHb4gaa7QI6KQNTwqJn9G4wS1Wpl9CZPd8DuGLk\r\noZDA6e5LY6HDlHl0BVBG1AAJawM+8VT4HRiLZdgRCUy5kL1oLXw1kl11J0B2\r\nGB0D1LfuA5+xw1Z/15gc4vYclX9JgV7UnfbBbUhx+zg7PpvmH5RP27/WFQJs\r\n4DqbW57erQ+hNrEkkq6BJhy8IzpiOWUyJ32nTrkcmIeCP3p1H4RmEBQZzqIw\r\np6hT1IfXxY+AXKJ2393fwrewf/wLti2sQdzcQED/iMNhwF6D8Ai3kanFhRge\r\njcfZ82tMueDAIeMWB4uLXQqoiBMjbJaCM5Bkyl9zzGE7jggdggyoqzBZu9gH\r\naXq8NysFtjgibWKLOfJgr5OMpcoSns0uDkz1e2jBmjUpyp7lFHZRJrovI04k\r\nVTZ/FVW4QuA7sAOy4HgY2RX5WUTmIfhAXl1elxJg0l7jQjoNVCppnU2/ugI/\r\nCtHbVncqxS+OapGFkag92nyimVbF8C88awA=\r\n=3+zm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7321d6254.0","@material/rtl":"14.0.0-canary.7321d6254.0","@material/shape":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/ripple":"14.0.0-canary.7321d6254.0","@material/tokens":"14.0.0-canary.7321d6254.0","@material/animation":"14.0.0-canary.7321d6254.0","@material/elevation":"14.0.0-canary.7321d6254.0","@material/focus-ring":"14.0.0-canary.7321d6254.0","@material/typography":"14.0.0-canary.7321d6254.0","@material/touch-target":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.7321d6254.0_1650485525872_0.5599729038870449","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/fab","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.3ab956515.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8077576d2b65e0b1ba3e139ab208d187cc17f4a4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.3ab956515.0.tgz","fileCount":23,"integrity":"sha512-aaupWQwprA4m5u7Nj70RIJDDlfxgv7jFzC6fTi9qiNbIvfJ7bNNX54hUW7rNFiRefMQZydjrXyWVdpNKMs+cPg==","signatures":[{"sig":"MEUCIQDvQJ6ky2HjBzCjwuj5TXfsGWxjF3VD2ZlwdDDrSEZpcAIgTg66T4R6T05CW/OensxTdHSkp+AHbvWP0dos2qPdbkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrgRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDPBAAn+G0yjCVZQyh+/0PF3Tut6gkjgmYO6y2SA6qJNXIRlx0S6TO\r\nE5UeNiNhRQf54uxTY2Rb2Z+1iXbKmmUx5/GBEvrRDxuWjyvUQ3sGsLRsazC1\r\n0ixmZsT/oP2QgY6yLwsJzqDTV8p5mauAmEk4S/1rxA1VJT72D87cFWDoHCZT\r\nugGW7GpCd9FkBn8yFfWWjSctWBA2YVthRqnMqA2Px6Dl4dcL+upub7T8fRsN\r\navRJKee4NbFqDiK3z8zG6h4nlXkKzJqTMkjkz+SE1Zo2+EUsxQ951Mo1ZFvF\r\nwAKEJIZmpOZOihfnQG4bfHtsg3lZUnkpcK899jb4GhsI+4X3zI21o809UEbA\r\ndRZ8E+6DG/RHdcgK9fAP6ovoTIM7//cCRB05z0/QRue7Fev2GCDNX5VUPMJT\r\nm4MpadzJgHgntiWiB76mpDUMNRUlt8DVsFcX8wo+2XK3zGNBDaeqMReFtI+4\r\npNKhvqyxUm7ILy3kgW/q01VSmpzVSCJerdINqu48Plofms2i00PAjmdlqYhk\r\naEvl/WH67QUpChBvvQpD9/LNHgax4w2ongrGzvDgYwXx8J2SP6BeDCH687go\r\nMDolk90fEzRqlJ2l1/7/JptlDZDwjHNmtO8g2C91oh0m5HHbiidsJpT5m7j1\r\nVar8cYarhMTbm0+zcWN2hAJ/95R1CL/WSC8=\r\n=frYa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ab956515.0","@material/rtl":"14.0.0-canary.3ab956515.0","@material/shape":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/ripple":"14.0.0-canary.3ab956515.0","@material/tokens":"14.0.0-canary.3ab956515.0","@material/animation":"14.0.0-canary.3ab956515.0","@material/elevation":"14.0.0-canary.3ab956515.0","@material/focus-ring":"14.0.0-canary.3ab956515.0","@material/typography":"14.0.0-canary.3ab956515.0","@material/touch-target":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.3ab956515.0_1650898961122_0.6966312519484745","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/fab","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3eb34274e1115d1c234ba90978bf315b8f100a4b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0-canary.53b3cad2f.0.tgz","fileCount":23,"integrity":"sha512-01efXtiBfMd7gRNMJtF2zxsNIsS/haCJVBcP7L1tCL7n/KNpEgxVhTMyyj24+WHmayGjyL6gVgg/L8HZKRN5gA==","signatures":[{"sig":"MEYCIQCt8PLbLnKvmn3bas4dBNB8zEz5ubW2qW54rVu1JeBEiQIhAITBPWEbB/C15aLlUVV1H3gUMplf8gkcKr79HGNTFQi0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTsTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEJg/+LSAk0FmConcVYEvniHTefPdtJwhn5xHxpIGS0VEznkyZYJEd\r\nO8omLXidVOjfbbmyZCKxeSpdR3nkMvX+fqPXW/qjTWEMCr3Gb97E/HCEoVSr\r\n2plEBXY/b+BrXGUQfA1ExOz66nsELFQcpSyqvzWqlO96tFWVtaIvOla5fl3g\r\nYXTeEWzIIpVpCERQsbfYEQ6VK50tJowPkAI2nXV2wmGmMP1Vdx34OOlwypzx\r\niE05VLz+VFDn6/LsDlhR99NixxhR/w0J2xoLkQZW4DkZLu7IEx9DsyfspnwB\r\nvbYPrBCXnaR7JQHA9A2nGIpxLyU4M6FNL4nuTyF+ePUvFWJs2ygrB9TMP641\r\np3boprceOrqpbjznuDwgKzDNp3h1IuKgnf4sujjnDn2x6xN6hqdjlsAOboF0\r\nnpWy2YPYvQVJU1LsPV6nX7Egx66S+XDj7ZSybYieweOXM4yk0mECJnxMNjRP\r\nDx4Uh4cepxZ5pLVHh/UbIoQ24XErcmOXACbchhsCxvl+Gwt5MWtrLs8KPwEK\r\n9+jqnc6XEpr8KCUpd2vwGfxJEAr+hk1r4b1agyoGWM6B6SkcLiV1fVSIs1UF\r\nJ37l3BiI8mAqIl4H1A+rzqrLo8eTZdA9hEFs6+5OWcVxEgOxDDLUURBtGGqm\r\nYnMj8RdqBoaewqnAN5liFi0Pp4N3UPEnKrU=\r\n=mDfv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/ripple":"14.0.0-canary.53b3cad2f.0","@material/tokens":"14.0.0-canary.53b3cad2f.0","@material/animation":"14.0.0-canary.53b3cad2f.0","@material/elevation":"14.0.0-canary.53b3cad2f.0","@material/focus-ring":"14.0.0-canary.53b3cad2f.0","@material/typography":"14.0.0-canary.53b3cad2f.0","@material/touch-target":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0-canary.53b3cad2f.0_1651063571004_0.04339377220497065","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/fab","version":"14.0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@14.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9561178ff593157ad07a0841c6e213a06d6fe6ce","tarball":"https://registry.npmjs.org/@material/fab/-/fab-14.0.0.tgz","fileCount":22,"integrity":"sha512-s4rrw2TLU8ITKopHSTEHuJEFsGEZsb+ijwW16pQt0h9GArxPGaALT+CCJIPjf75D3wPEEMW0vnLj7oMoII2VFg==","signatures":[{"sig":"MEUCIHhRL55ZU+1bb4UeXRFT5yozFBLVTRS5zhG/Uvzk8puAAiEAx1iCIpdOgDB9BXbVJwGc2lGydFs3g9z1MIaWUlZ2J6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoy2hAAlsvQscMUA9t+mpPyHuer53rOZFzdI6hhZG7J8nwfMw4fpQQP\r\n3U7T4mUyLxz8GmaB8HFJaCN+XEpPJPxFYo1A8yfLioPi7mhmtnjKAFIruZmN\r\nOQrof68p3GQa6+1YQPiylx+QGuwxQ7L7DrwgiE6qLYWO65C/mzXz/NzWF8N/\r\nubuMSEBFX2uvd6NH0PnGzTBRyQkGO+U49F1gyfzpGhCZ7MxuNSIJ66ihb9Kw\r\nkQgfSNmdeltXYN3QziO6Bo6KtFDqvP/su71Fw9SwU2jMk/TqaBwhfH8bEOb9\r\nuYdgmu/WSItsnqArt0voWaBgKrY8gDHscJdtN3ZukPUWJQS0YkENJhletaKE\r\nZKcbPljinMkD3Rhlpzbo5tyPRWKEoXUSK6cFgTdvnRT8v8BzIk8LQaBHxBGd\r\nASeMVNtWWkvxHHqbhwTJQJoeptC5BHoTKZIqM0nJl6TSGfdxmk3VMpSUJnz9\r\nFZ3jlrL7GDgQHBB9lvUGbBBhmawzSbhlFvM8xO+gF2Pm1iV7XG0ud5bF5+T4\r\nw5uRDwaFlmnGBlypvCHUjOwbSdQa67CJ98e+lYJvN/bP2rA3pKpKfjbujdsJ\r\nxn0cdM10rIhAgCkOp6/yOBwwPv8QivVmUpTgPTnhnXrsgv8WnGgX8OcdFEdD\r\n4fhW3cHxjOeLU5A5QJrUrKpLvbUoau/8sLI=\r\n=es+A\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^14.0.0","@material/rtl":"^14.0.0","@material/shape":"^14.0.0","@material/theme":"^14.0.0","@material/ripple":"^14.0.0","@material/tokens":"^14.0.0","@material/animation":"^14.0.0","@material/elevation":"^14.0.0","@material/focus-ring":"^14.0.0","@material/typography":"^14.0.0","@material/touch-target":"^14.0.0","@material/feature-targeting":"^14.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fab_14.0.0_1651165008227_0.28016480800850885","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/fab","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.432c815e5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71184b0be488f0b6004eb207175e21f98c4cf825","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.432c815e5.0.tgz","fileCount":23,"integrity":"sha512-UWfrMPEvnZc30ZxluIcoA+WmcRR1Zuj/iyIkyCYMNL1KJV83NwNh6qCn0Rww2q3Rm0RgZ5bbhTJzcunAWe3W6Q==","signatures":[{"sig":"MEUCIAbKMgpuashrZONYfyjSlnB8XX+/hk8cEriga+qiy+iHAiEA/LqQPiinm2YZmYrTWJoY40E6TzlNE9TNQSva8QTgWx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaseNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMYg//QxCh2ek0WI7VUJGnD2If+imSF3/CvcFieFhlaStBstO3k9gO\r\n/Jo2ilf/C9AlMPNzj90vmPIi9NTs9dZ9tHBkXGzrSoHZ6zUc2zRAlAZbTdYi\r\nG2jnmA4HwpN9MQonEsE+jnnNZDjvtpkORTi62yr3si2xYkLeBU7z47M5SbMr\r\n3fJhXE80E31oDaZcjz1NHbaalyhn7adh0qWqW9Bp2D8c5/FBSeTdnnBPPRVC\r\na/TMKSfKkroUvfmXKCfi/6h115pzsT22G5/WJz4LBIqek3g1t0m6V1SwjU8h\r\nWefJnByWLGkJ67R/6khL0eeFJHuSU7zN6bbUYWmQl9iAcoZPXMSBTI/hDrJi\r\nt02EJd9wkZzyycGolRP7V/dqmHZvzFbjfFJeLFubwBzakXfvb7xo3MI8X3eJ\r\nCijcLipcMtizKqkofqjz3jX1D0jb3S/HjnPkP/vbX0S3RSx7lbmjE/M9WDYz\r\nWTBwqAuFvgaxbJv5PU5+zCODMMgqRsGPfjMonFHGGLukX9pSlMNYlJqwVyn8\r\nPDVsE8YAEJfCrRpL3JyMpIKlYLaf/zDvDBMP2U7dqrc/8375Q+3twjiinA9z\r\nZn/xMbOZ2WLzwR/c1Ssj7o27IHChh60EM5Qxx8EVFOCfbYhu6/2FaNV0Sr95\r\nVoDlXLF2ejp11j6TXvg91rUApt9IIRxNar0=\r\n=Iuyh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.432c815e5.0","@material/rtl":"15.0.0-canary.432c815e5.0","@material/shape":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/ripple":"15.0.0-canary.432c815e5.0","@material/tokens":"15.0.0-canary.432c815e5.0","@material/animation":"15.0.0-canary.432c815e5.0","@material/elevation":"15.0.0-canary.432c815e5.0","@material/focus-ring":"15.0.0-canary.432c815e5.0","@material/typography":"15.0.0-canary.432c815e5.0","@material/touch-target":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.432c815e5.0_1651165068999_0.4906835683855757","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/fab","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3471932a6f700b322cab3fc4f3121af1055e2bc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a0f01f669.0.tgz","fileCount":23,"integrity":"sha512-epC1+BNQBCA67wLa267k7yOV1Gl4j1VgO7F7TPdJpCZ9qudLxFJi0ttra0mLDKWnZYa7KLY/Ev4tNQ/AmggV5g==","signatures":[{"sig":"MEQCIAP6grap8A+cS+miExSGKmEk93oW7K6c5j6HkUawX/NlAiB/ubWJ3xYODEkT74gV/BDE3GpFruou6PmHw6jlQFOGlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYHgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWCQ//efFnMtPIhrnUdYMPIbedLJZMBW8jRuq0vwu9E/nRnk49iBVr\r\nNrW5IOXd2SVK60Pr3U+S1+fd8KywmtB45//+UxQ9Gf9vqoNTN2yAAMK3u3t/\r\nbR19mkD1XVqeMint73GF002mIbWr74oRSZWgS+unQ2yBJn6ZAhVmlilW+F7u\r\nxkZmdUtLUnc3q9Ig4byEkjFlesvn8cbtsvTYK23fQMvq8lo8U2K629Vkit1k\r\nulpjqKsetPGKLlWSjTG7tZs/yLZfrA+wzE9J1JrkKgZCpSlq3VaLL1V3DLih\r\nqvoEU0VemkG5P8mPmrf4qeKTxP857FtzVJKBX3bf6CyiHsY8nrgb8hqs3I5Q\r\n4i0XFHzz9BBtFRwFiGa1KWAtJa4lbfomZxyYw3jWlFBmlN8rO4hHAwDmnyuP\r\nyOGHShscsm/ovmGANujvUrFwdBQL2M5EQ2euwvUW0YPjfgpkJD/8cUtP6bhD\r\nXh4yLfWGkSi5rKGLayE4YJsUgdl0pumhx1wvn280ypHnuvCA0b+wIiVA6GKQ\r\nZwoxPCQrRJ0vb4P7cAWYTDg/PI8JqWS3U5EF60w9/cJkIopVW831plZWWtsm\r\nIOlDsz6oUxaaVtgQsVSeRubIuaFKQHrj2VAtccfadk7zjTCuHpgfbeXcSKj0\r\n5wLe4VF1f5E1zJnPKVdlA7K+jRRzjFjaXNQ=\r\n=c69w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0f01f669.0","@material/rtl":"15.0.0-canary.a0f01f669.0","@material/shape":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/ripple":"15.0.0-canary.a0f01f669.0","@material/tokens":"15.0.0-canary.a0f01f669.0","@material/animation":"15.0.0-canary.a0f01f669.0","@material/elevation":"15.0.0-canary.a0f01f669.0","@material/focus-ring":"15.0.0-canary.a0f01f669.0","@material/typography":"15.0.0-canary.a0f01f669.0","@material/touch-target":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a0f01f669.0_1651868128729_0.16372310129377343","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/fab","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8335d04dfdc5edcf89802faa5edba4077658d100","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.276cb39a4.0.tgz","fileCount":23,"integrity":"sha512-huXjy1caP8gfunbN1gUQ16KB/QgLal3c5gKDVC4vD9bqyaWerdtRISEFGOvCRUkeXrb5w90r+EUGQq0Gc+OBHA==","signatures":[{"sig":"MEQCIBbt7WPbQbyRg6yHFV6NcHE4bhZJEOzobWZNnJadWC6IAiAaY1Rh2N6bbud8PFOFXcIZBuKzjZz9AdUHCmQjrJjXtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZPjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqnpw/+OcUVltHm0n2FtBfTm3xKK0204nySHyfX19Ts9baxyISAa50Q\r\nITNdQ/5KLMbFR5LexI/WgOTGRUFi7WjFtNNjTMVAXeLDuzXdtMb9wUwaIe/u\r\nOCwfUseD2kjJQ0cdoWmaKfC6ILD4GjtP1K/zCUW2ic8m8pmUToqhTuG/LRC2\r\nI+oAQ732DWc9GXaIgV5wZwdL4S5qxiCWS+Mx3pCLGcBTZxZDRxDU/a9nUI5u\r\nZotwvXLbJQeKnsi1TqeuElvJTlwb7zJnbG7WjrNNBxjNmV7Q1QaWDl2WrsVi\r\n2i56nJjASizYDzSrb4OnPdX2Y/GR3rIU7Ac7VSIqInobrFnxPVcFyQ+QfLIG\r\n+GRWT77Rcpp8FyYL1Nmw4xIs4w9CPq6HLKqeksjo2QapaXc+q5DEyI5hnIkp\r\n8PfscK8275Kre5LjZYfNv9UrCqI0y1D6lOwG+qidmNAWXpB8wrnDPh1HbXPD\r\n7vr+fSdvt+2rtnPOZEHBhwyPSzP5NwltOTaWhGCqU3kTAsiPWreCJZEoCJOq\r\n+ZnIwOMhK4xBuYnB6v2Cyff1xwf8fVJb5zS+93pAUvNk9I88deKMpopZq40s\r\n7MM58iIdJyBcjo2fzfGIR3cXHJ8nL7nFrMPQiykoKLRfPThwTDo0rZYpoggN\r\nlSsRVm2gANBVd/zlsEzdwBo+sGfiyXdSkKc=\r\n=gs7x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.276cb39a4.0","@material/rtl":"15.0.0-canary.276cb39a4.0","@material/shape":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/ripple":"15.0.0-canary.276cb39a4.0","@material/tokens":"15.0.0-canary.276cb39a4.0","@material/animation":"15.0.0-canary.276cb39a4.0","@material/elevation":"15.0.0-canary.276cb39a4.0","@material/focus-ring":"15.0.0-canary.276cb39a4.0","@material/typography":"15.0.0-canary.276cb39a4.0","@material/touch-target":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.276cb39a4.0_1651872739749_0.6504473989956827","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/fab","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5da0cbc0ece4a74ac6409de81a8537cbdbedc495","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.4fe98ed70.0.tgz","fileCount":23,"integrity":"sha512-XGRhMvlJFwE5qEcYPvisFnNBJvSjOcoNQLO+yuZnj5GQItmF/ntUUFZ3Dl1QOpNnejN3xOxqGua6btqLmECSOA==","signatures":[{"sig":"MEYCIQCg5qx5jXSQJfrlPbVv8iG5+2f+kppA5ltk0Z8hheL7ZgIhAJOgaoold5KRkfhHlnBOoOSk3UMgXt8BN59FuHryMfuV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZmiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmps7A/+IZqq8qXX1PB8dd8nx4I1XWEWoG9gVnGs9x+bM12J5ja+RFpm\r\niF6YgRx4OwIq8+LF83UnaqvL5OysnSIQ2lvRZwxgKlIrhX7mV50bAT3cxr9U\r\neZgP6GjAryOVyDblqMGpWHV5Nj2yK3g+HSc62ZWyJ5RQwaMWAMRToWo3y/of\r\n4/RX65tmh5UuYHRnsPP/iWs9CKdfYdY/oeDOWDH0j0WetkRp5QOjCPJqCQHN\r\njutZwpGCL+3W0Ln77vTvl4EICknYB5GObYhkdmG/NTTPeIpb6AaO6JZNzNp2\r\njlOll9XDajvqzw69VWSWLwyCmTwikzV3LxdXJTCoEwCm5NbIjP0anMMD4UFO\r\ni27xpkvTnDYM7cnO5enDf0A2Z+4li3ckEJOBUkdvY77WhBK5QmY6JlE1MHvD\r\nDCN9emr7TCDMxXeUE+8jvRZyme7/DP93RnwEtVOI3Sz+Rua9hVq98I7WrrkY\r\njLcTTqDq/Ire8g40J2u5M8OrxDdc9Np8hBnc9nbftqiICQkVC7/L2wm40cs7\r\nRUWaQa+kcFsTPfGvlob+ERlDfV5P6geSBMPhhYdLfdp+0Hv/4U+kD6C4WS6l\r\nFLNCNxyF6xy0DNkogmQ5L1hOvnLaGZIY1JTfuCIYXk8WkBKlQ7Ha0t0s/Fm+\r\neYL1pVFUag3eL5uIDHwRnFGrI6zjPIhGDC0=\r\n=aBpz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe98ed70.0","@material/rtl":"15.0.0-canary.4fe98ed70.0","@material/shape":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/ripple":"15.0.0-canary.4fe98ed70.0","@material/tokens":"15.0.0-canary.4fe98ed70.0","@material/animation":"15.0.0-canary.4fe98ed70.0","@material/elevation":"15.0.0-canary.4fe98ed70.0","@material/focus-ring":"15.0.0-canary.4fe98ed70.0","@material/typography":"15.0.0-canary.4fe98ed70.0","@material/touch-target":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.4fe98ed70.0_1651874209981_0.7705751268608454","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/fab","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4bfbb17e42a604aacaf2ecbb0c06d9b00c5b76e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.58b130a3d.0.tgz","fileCount":23,"integrity":"sha512-vEWL3Wxbvie1Q94u7E4BUO9OTXwHw53yXUypfINV2j/6cfhsMSHOsv99jC4GMgK0SNCmp8istK16iaWHbXQHzQ==","signatures":[{"sig":"MEYCIQDFCSORtM6nb4HoMhrgufF65wca0tY3IOmQmRBA9t8SpAIhAK4SOfq0rZ0l7qb/rlspADrPU/WPcm+xBOF00RtgmHBz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZosACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJDRAAouAsBuSxqyGqShm0vxHUUvDuvHDLFrur6lZ3YWnmPerkR9fr\r\n5NbGKFCrYjwCiC4WsfqYrn7cCfue6G5g9BVfVW4doig8boGo/mrDww75dBp1\r\n1I9FWkfjlyH7EMXbRJty7CEyMmy+7XQ2pWRUs6K6fUYSSqdvnDrkj0rNXPY5\r\nMU+aN51Wc5qVFTUQm9r+RLqeiR1E/tiy7DSw8lZQ/7NFK8lxrwWr40+G51t5\r\nv3Et2RQCUjWHiyJczVfLoU7fkSeM2io8FGPOKd7lZwDfVfYaRnmV2NMH7pvB\r\neTjwwYNtuUXhDwrrbG0xOvOwZhjYxQp6nbHF6JHWcWgVFH/L0JZ7ADPqWvJq\r\nXpvp6MdlTHWodQbjC3NZBG3RfFTEK4THitR4kWHLoxJOstKsEa4i6hTquOCl\r\ngQyDYr0buARk5QYu3ZPrw89ckv4RLzv17QzDrjDs0v++QyB/NdxxOCg8+ivr\r\nvWKDwzWqwjAhjitimpnmiiupM0lOd7YCkEc3VtjnIKLKA8NY67SW3UaJIzFW\r\nRlYyuC+Cp7jfvxliRp53AstrqZ2V+E+t6L5hpYyW4Bobz+oiak5w1VkAWJgr\r\n0qdc7U2d0t3ciuVBCX57co8AFaKb5TfhyMjdUuoM2dgSJSyitlWR8Zt9fMWX\r\nbUxJMMFNeqxZQl4+P8P9vaBvdXTkdA44O58=\r\n=Quka\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58b130a3d.0","@material/rtl":"15.0.0-canary.58b130a3d.0","@material/shape":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/ripple":"15.0.0-canary.58b130a3d.0","@material/tokens":"15.0.0-canary.58b130a3d.0","@material/animation":"15.0.0-canary.58b130a3d.0","@material/elevation":"15.0.0-canary.58b130a3d.0","@material/focus-ring":"15.0.0-canary.58b130a3d.0","@material/typography":"15.0.0-canary.58b130a3d.0","@material/touch-target":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.58b130a3d.0_1651874348271_0.1948599332112586","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/fab","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53c1f59d84e3e74e37698c80118e50b60c813571","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ae278a2fe.0.tgz","fileCount":23,"integrity":"sha512-srNM0SVQvELhpSSBGME3jD1ryKDzpWH7QtpyBzKyTbJszC6JgC/ZpWOPAVpvjUpBRiz9sgk6FLylNCkdhJYOpQ==","signatures":[{"sig":"MEYCIQDoFCMbhLKy73ep6zvQciNgT47Jscm1SN+HQp9w/ZUjuQIhAOXtUME/NMkkyoQtOPOrb1NbN2Gyg9K3fsyRks2+7FVk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTJ0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKXg/+LCRwJXSVAYhgqjssmiQZma+caftsMljaNru4PAdTvr8N5Wfx\r\npPwTgOse5XFziGPECOvqBGuzTJxXAasY0fiwVoAvSOCJoiWiEdoEMJWUSDYd\r\nRCALAeY4HR2iJVk+JHJyZdQm0+IJm0b8DuKJsutXiMn1Y+nGMbC/vfIz4hIJ\r\nBiid5SSurhz9sSZotwA/5XBCrWj+2UWt5YDJDZFvES13ac/UdNaRlzUXz0EU\r\nZWB+oQx9wCml0Z92dlSg48x6RgnmloNUl9m6H0/CzLCuMerKp/+8SP1UMA1b\r\njbaA5QTdL+z5ii8HADgpHGQ2/fzR6OCPfibOrUG+lcrAdKRLUcULNiqFACLc\r\nWnVhk0N3MzXWTeG5ui00r3q6IhRnBG9zBcJCJ11FFlG1l77FoAcE7lGTyrIo\r\ntzQAUYqihRoV7lD/dnyAYRIWQoix6O1NWAEAVsbqudYrdnupYZjOLijRmi0J\r\n0XXpF7LwRKF/BUYNPzeoxHTFqElDAz0xNIDrlDWfbdsQyVjG5hkdTerL5OU5\r\n7cxMJ4pTX6iYxJpXc3HEdjLhgKEyO3y5Pp5kiF09o/8Xz9gt0xyo0b3BE4GU\r\nQnPSqJ2T8R+KD4RmyMg5Ol1KfbfwI3rp6M1k7Wz6GiaMCSBK8FQnitsCbn4B\r\nz+e3hU0rSrZtlRqCSjwLcT2galb+s08B95s=\r\n=jzJN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae278a2fe.0","@material/rtl":"15.0.0-canary.ae278a2fe.0","@material/shape":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/ripple":"15.0.0-canary.ae278a2fe.0","@material/tokens":"15.0.0-canary.ae278a2fe.0","@material/animation":"15.0.0-canary.ae278a2fe.0","@material/elevation":"15.0.0-canary.ae278a2fe.0","@material/focus-ring":"15.0.0-canary.ae278a2fe.0","@material/typography":"15.0.0-canary.ae278a2fe.0","@material/touch-target":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ae278a2fe.0_1652109940508_0.0873099605841785","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/fab","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb91fa746a746682a79eeba1025fec208d737f90","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":23,"integrity":"sha512-Qj7tyipyhtNMfp8P4Gnx86F6p9LoaS0zyxLiJJmxF/J74dYH7B3ZxjJorODA9soC83Qtbm5ugZqQORgxExoJ9Q==","signatures":[{"sig":"MEYCIQD2oc2oTbzvTiTV4feetk/dG6SqNdM+4s7XmLvrAwNZYAIhAMbBQVW0hLqUahTb8E8WPWJ7w8V8v9AMXQZPNxLArn/F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyJFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwNg/+JBTSz96ZLlw5SBUK89emKCk2mwPskkzVJQtDFJJhcRXoHUMf\r\nsM+7/1GLBpxRdqj2Gi1CrD5UVlghkKP9Yb2Y63GrdSf64Dw/Yl9j1hRWu/2r\r\nJD0ZEkJUNTy/RuVAFbEA6CAWX3tp2QCbsrNuInIz1xmy/ELCcd8Qpy2BMkjj\r\nG2DQ3XVoLVWhthtUpQXsy4m52gFLwtcJIvQGTiH0oc73NG/qUYUqJZsBHyU9\r\nEZb3NxqGvtucosph/B1SAsim05J8tf3alXyUObaf0yLW8oUngvKFUKn7IIvv\r\nzxTD/WEjtip3KP6fFL4wKBGAxDOH96wwE3corj1HLFxPbG1ocVS3MXADNdcy\r\ncChjUEDjLIeX1JyYqv9ZTm0cJa9UHQ/SWyfe49II+PMbids1t8hpoYgpWcs0\r\nFmPMcYxQe8tZNyhZYFkbrQBKDssj6Bo9utwhVNaLw7mNFIN5z1gtMYr0eSX8\r\nBC2YSYucig1dCqT4Zi3HfTC86qlldNvRvxz9kO8x8ekXqO4TDh66gXNsZOqF\r\nPNBB97oAD/+hi0UagIOPGY0N+inDKwPZWCKylHBgtcXBPeUmq8k6m9YeDazu\r\nVWpZEx4gK/7y6QUxnDWF65nOTM/QgVRjHd82wZNgp5uWTujaXhfpFDoKZFU/\r\nbwwp6jcYhnlX17pjTnxHl+vCvj9AzlOzY+g=\r\n=vchS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bebf5bfdf.0","@material/rtl":"15.0.0-canary.bebf5bfdf.0","@material/shape":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/ripple":"15.0.0-canary.bebf5bfdf.0","@material/tokens":"15.0.0-canary.bebf5bfdf.0","@material/animation":"15.0.0-canary.bebf5bfdf.0","@material/elevation":"15.0.0-canary.bebf5bfdf.0","@material/focus-ring":"15.0.0-canary.bebf5bfdf.0","@material/typography":"15.0.0-canary.bebf5bfdf.0","@material/touch-target":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.bebf5bfdf.0_1652236869047_0.766516717425233","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/fab","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7619849af59822bc64414fa8a89ec9812b2c96d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.e6072cd6a.0.tgz","fileCount":23,"integrity":"sha512-lG0RTb+Lo8/59UCRsc7ogoRiQcLthmRYhZD6d8YjHnTtzyEZZGSIG2Hw4cfvUBk9yq6ItLsd/tChlzUp7mY3UQ==","signatures":[{"sig":"MEYCIQCifrcZ0AxSCsdPjg/cuBluxnsTxka7DcOWIlhoIqGLmgIhALX6GmQ+svvKAy/h6GJJaxgigo2XtwGy11HfJ0cuveQc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBpFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxZw//SHDfbFK54ANDsBJeoOJ88YbuVEAjVo04FFtnY1FuYTJnUJn3\r\n3zE6PjMXwIMtjmamXcrCQl66E+ioh/cydbgHjx0eEJkVu0l7HgWwTWTeLUez\r\nlp5DEDZ7Xb6R5o9BRDW21AzkYkHFB165kaHLo8kaXZJWkmL64+DrekTKrOcK\r\nb6kDATJ25RYZvDrq1RR3kXFeK78caXLmKwwacfiE4h/vzLxIxvZdIT3hYvN+\r\n8dPpT3gwKlGA4Gv5+4IQfzhR7qmnoQq31rZmbIN0x7Cf/rwLP6X/T+RiqGPb\r\nLVG4wQIZ2xWAguBtfQbEWBkEElXrxcw4CgrxYgclQkE5lbYZyxZPUW9e4AKS\r\nVC8jBb7KKcFS/rDaLBqUjRdv/qKRSQrDy7rb4RfG5qAyZz/jYadN3Vam0R3U\r\nURfV599FAlcrC9c3SMEQ9eALsdqDwOaAErMARcvg+tNdVZw8aFs66RDQlvJl\r\nxuLVgDonP2JUILSxyFjWe8qTGqe3HHxj++ouWtmtcwEfFOBPPIEqmKAEzEBf\r\ngCmeWaQomCVSpyAzv6R2XdIKpXmDHKdQQbDq0uy2jXsE5zO5ymKwRyUsmlv2\r\nauNXQT9UA27ewNBtLNFqn0bXoYOoChob+Qr+ghWukltsKzhMNgbqQhj1R94D\r\nwtRhs3tRx0V8FRtSWX7ZfKkkC8SOvSoBP+M=\r\n=r1Q5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e6072cd6a.0","@material/rtl":"15.0.0-canary.e6072cd6a.0","@material/shape":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/ripple":"15.0.0-canary.e6072cd6a.0","@material/tokens":"15.0.0-canary.e6072cd6a.0","@material/animation":"15.0.0-canary.e6072cd6a.0","@material/elevation":"15.0.0-canary.e6072cd6a.0","@material/focus-ring":"15.0.0-canary.e6072cd6a.0","@material/typography":"15.0.0-canary.e6072cd6a.0","@material/touch-target":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.e6072cd6a.0_1652300357254_0.12888116148967232","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/fab","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a815190e6f639be2e5d632dd4a1e05b54fc32c4f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.5b40eb988.0.tgz","fileCount":23,"integrity":"sha512-xSkcENmkT0t41lUtjzCxAxcLZDlRCyPeyp8SN87vcn5FoXbbHRQBY2MLhL9xjUw9pgTzx6mPauG4DNNxjOe6qQ==","signatures":[{"sig":"MEUCIGGBBTzoZiS47hvpnr2vnlr5F1/I1b/OivfKVSjxfmTYAiEAtPNg0aDEMA1rmJixpwUTw0U/50xqrGECd/nVCQRY8QU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHSvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpobhAAmzAq0GGERxfqyc7IsX+o8bPC5Rdpan/tO0u+IL/qcOYJZSuP\r\nrlw0qFvGCGl50VmrvwhnmU+RgqiW94TTow3VnLk8xOUZ4ydZgzmQ4NvgWSve\r\n2A6243BBiz/rngUIWagJ6xlTBPeYuFLQ/N8D+U4Vv0guoQtZaD7GEoYITny1\r\ndFCTTddwLoypg5PUXWCr3uxI7uDQfOwXdDVy6J1uFTerlpvUB6uQ7kBOHUKo\r\nRkTD6KF/iaIKcZiFNg3P8c4kTjv6lvEnAfpFIzwiJQTpPPoe6vopMVFBmRsS\r\n+wsQAqMcDBAY9CXmUILdlShJD6r4oI0wjqyLsWMw0fvr7rCl9GxbmmzheUg9\r\n6J1TFmDALc8kd1guX4SqruEaWvvsqvhSSIYNoi27ZbpkXj8OJIRGtnW1VtAR\r\nuCQt/ir9eCD5HznYAxAAr3vLTaDPRiaFWDUpdjzxAspp9FX3daWPMlvkaoq8\r\nYCAU2UShOL/8WzdKtn64fyf/rA8G6I20o8KyUoYk36rlpuGB5c0dwuxZYFLG\r\ntyXzM4TGLk95ZfBFnSYv5wLY5MVBxPGbfPjOV445w9HJ0sXqIsyTsmrANHGz\r\nBSr+AquM+2Z9As0rA0ztDSJDJgFa4onEL3VWojYmX9gh8MkDtHsjKN4serQv\r\nj3T11SB6GNN39TU53R0tNFU44/HtgN/tiMg=\r\n=cGt0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5b40eb988.0","@material/rtl":"15.0.0-canary.5b40eb988.0","@material/shape":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/ripple":"15.0.0-canary.5b40eb988.0","@material/tokens":"15.0.0-canary.5b40eb988.0","@material/animation":"15.0.0-canary.5b40eb988.0","@material/elevation":"15.0.0-canary.5b40eb988.0","@material/focus-ring":"15.0.0-canary.5b40eb988.0","@material/typography":"15.0.0-canary.5b40eb988.0","@material/touch-target":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.5b40eb988.0_1652323502771_0.6209988332966452","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/fab","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a1d674cac6ecb6d6231496287b0d2eda5d2f303","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.6a61d62f6.0.tgz","fileCount":23,"integrity":"sha512-tehB/vCd81EDimhDADox0HGWi3coS33chiy7QPHD2OKdmT5iHrdJ0AKElnZpytgRjVKUhRkXfB8Yt+qJCJttdQ==","signatures":[{"sig":"MEUCIQCFOLKN+Rs2qNbl0EauaPBCEtaNDhg4O5rbeXEG1hU27gIgPLSEJ9XSCv6ujLqogHDopLYLsbJKukinthfLIxJ0gwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW3AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8hg//ZFfWCikWh9nBRBllgeJGPGJkynYnJYqiVewB4PdIS5MkKJUE\r\ndoiT279u1YUmSrF37JtuPyjADV5o8zfW0zA3/Gf4SSiLkh1yYRqZ6mN8AD0K\r\ngckr/EmHcHS69supCKLMBYjI1tBCoXEAzSAKH1TmOJ3UHQNpz20YKc0f4Jap\r\nBkxoEuah8g4ZNa3hFgVbgQzL78dMu3yW7N0/l7HzZWi6EO2G3qmEUeD0fYNm\r\nz/NKdVnPzI2itSoTZHyJbUaF3EpV4uQPs4zyGZ3ImykEreFupGcBwH7C+n9/\r\nkMByo5is2XmR+y3B/pUnmc1uhnbpeXogKp7dILIzxTCThkmVOCDiQQX3orVS\r\nuh4r9m6D9V5zdSJ9tSsGj4NubznCclnOfO0loSx8lFR31cfsaKymOpTCwIYp\r\nTL3XCnRta9aURyVM7xDX6/w76ty9n2XvK9QnmNiW+9X9ZfEZxgVFBivtEIaT\r\nhvSCzUs7A4donMN7oW9s2WHAETLVMBfzjI/eVfXY29trYLuNXwCNOoLhx1qm\r\nbnxCYuYmf3uS6duKi+X1qwKBuoR82bovy2J7mwxa1QUREKQCK6BrMjvDB5uM\r\n9VPRGm7j3yqjFk6LK/cX9CxftDInJxdrg+UOkagtamn2jrmOU3kiBSK+09kC\r\nDmL6T1kXZxfNLTvuLEPkOFrtG7vAo6bL720=\r\n=pNi8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a61d62f6.0","@material/rtl":"15.0.0-canary.6a61d62f6.0","@material/shape":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/ripple":"15.0.0-canary.6a61d62f6.0","@material/tokens":"15.0.0-canary.6a61d62f6.0","@material/animation":"15.0.0-canary.6a61d62f6.0","@material/elevation":"15.0.0-canary.6a61d62f6.0","@material/focus-ring":"15.0.0-canary.6a61d62f6.0","@material/typography":"15.0.0-canary.6a61d62f6.0","@material/touch-target":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.6a61d62f6.0_1652387264126_0.16894378212357752","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/fab","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.05930a453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65a87335e43d8efec6bd2de7cb621943b09eb05f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.05930a453.0.tgz","fileCount":23,"integrity":"sha512-hbDoigkUs4wMFd5cZK0nqnTGylDaurb6JKCrewDMCZ6m9kHO8icx89vIT3r6LYGtOgRBL5EvOhs0+qZFgX+mEg==","signatures":[{"sig":"MEYCIQDIdj+Hi637HyRaMIH32ddFZ2r6nyflYRwuGe1J9GE3hAIhAPmBTL7KLmutGn2HQVBWXKl/bQgPOMtXZymifSx1a5ap","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqfxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUdQ//UkeOx0bcPnnaY+HeuBwxkaIkG8KMScYH8fyNkAFOtF0GroOk\r\nupTESVHyLXSHeGMzHxOKArz3MT2sxli+rrwX2L5/iIobz+zBkz7d9Bevbp4p\r\n/Mg6OGKt+iKA76+t8rpYc5uVP6qoWS4GkqgXY/1JlQWvQRo9YcogA2tQi6jq\r\nyihh/6SZ+cuPM1pUMI3nM5WiswUn3FychuVjRaz24xLp3GqetwkZ37soGIyr\r\nYMgy+n1wJdGkr3LUIb7BX9U24NfQEt5Uhs5DJtDMW33hFDm/i+Lt0d52cpmW\r\ncQfNBefcXqmWce9pNE11Lp4dKBopsL5LVUpJ9GATeEiTlLifeFH3uhZEUyC1\r\nxYiDFhSrizAHpCqxX4+7um2M8b60Kaxs4wZZNZ2SHKJZ3MiarU10CAZiShBb\r\n4ge0qX/Sic/DfA4rYdcLUuNpcZx4/RH3KP7yxD9A1gO+MjHry0P4GlBYxvQM\r\nSIboL8v9G3jMfr1JteAcRX+ZapnfbwPQvszAIO4S/Nh36IZ/YsCaMCqzcgRo\r\naXuoRGNLUCbIYS18T4ka2bOsnKNztN54YGg2THIBDcKgjGNglplQ/7ain9Mn\r\n4ehX2KvOERN/ODGRTHsrs3PLoQlJ6SJjNNxv/+w8kajSKqL5tC9hf7o5LBsS\r\nrXLNJxnA5yw/Td/zjgfX9Uxi7wfObOV16+c=\r\n=S1Bl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05930a453.0","@material/rtl":"15.0.0-canary.05930a453.0","@material/shape":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/ripple":"15.0.0-canary.05930a453.0","@material/tokens":"15.0.0-canary.05930a453.0","@material/animation":"15.0.0-canary.05930a453.0","@material/elevation":"15.0.0-canary.05930a453.0","@material/focus-ring":"15.0.0-canary.05930a453.0","@material/typography":"15.0.0-canary.05930a453.0","@material/touch-target":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.05930a453.0_1652467697052_0.8561313908957442","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/fab","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69d4a97d1fc0f9d603a9e5a5ea0662126d34beb9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":23,"integrity":"sha512-HsfdDtA3Webi4mmq6n/bvk9bY8IHt294/HZu/ENTrEHi+Z13ng3CANHfouv+tFi/FP/3R0p98+wWRInIHeKdFw==","signatures":[{"sig":"MEQCIBRmI9JdJVS531lS2NqIP1fXgSkt3fmvOomvEpXSJ74CAiAAye3wg0iMVHLi0FfRc1XE0HCU8m791He2621QN2DnFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWzNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraqxAAnRa0HqQW1RPo0M0W4ZMUwoZBmN28ji1Vuv/5tkjhm+PI3XBS\r\nBTe/JubO1XSs35nqsy0hFrgwXA+PtUawZ7DTNkIDXH1hbXVQzLh5zl2n4X2q\r\nmBmftLVnCeb1AKI2vRTlSuRKKeWQNumzVNFnajIki8mXhQjoqiOWO5Y+tq0n\r\na5Mdxt5IKvj+42HTZ2KAt+8Jt2y6N0cpnI+hi6wXroVb98LUOqHbyf3gYZw7\r\nvU/oZ70x6DIyKCbayNa59semlVg0vwSMUDluAm4hOsIRk+dV61X9UfDHcwAD\r\n9YB7GUnk3safX64uLgtV0+4B5dqCYJdl4nY6Ur9rMRR8WMWDHOMo8vOeAkLm\r\nBoLwN5RORkwjTawrAISvBVBiVMaevYaIrrlurITOp8/Wh/4n87p7X2sBcAwD\r\n3mLh5cVZT6p2cQASXkIppvpw5oXZcWmHoa6UCt0QZ/bWOmB86PQphhrfkr7J\r\nl8nlY9uIZBnw86YQt2VZDedbpAjsnbusoebB+9/5yfxAQASTakZTEH0Vf/O3\r\nhVvWqkeiiCJI6fXtzXA9cGkPSsydNanfBX7w+BM+VDAHtT0tdfsAr7GaAuS6\r\ncHMhGYiU0KSDjQNyi6eQnUY1vjh7CZsw7A06RWyBcX9YcKjgK1LB0rR/AKeU\r\nUATWRqNOHzC57UB/EhLRnRVTgiS8R1lrBBo=\r\n=ZfA6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0a11ef0d.0","@material/rtl":"15.0.0-canary.c0a11ef0d.0","@material/shape":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/ripple":"15.0.0-canary.c0a11ef0d.0","@material/tokens":"15.0.0-canary.c0a11ef0d.0","@material/animation":"15.0.0-canary.c0a11ef0d.0","@material/elevation":"15.0.0-canary.c0a11ef0d.0","@material/focus-ring":"15.0.0-canary.c0a11ef0d.0","@material/typography":"15.0.0-canary.c0a11ef0d.0","@material/touch-target":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.c0a11ef0d.0_1652911309337_0.5575246586988274","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/fab","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3552568298a371b657e887bd68a7d285460c2fbb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.2f9b268c0.0.tgz","fileCount":23,"integrity":"sha512-fs+lFklnpZGh7cMR7CrVBJbxdy+Ql1/cM6sLdCv2pQxIhsi2Gm0rMD5kR3AKx1AmXCWlC9j1gyQh28rEDNxg1A==","signatures":[{"sig":"MEYCIQDzzI7Y3CvJzBvfhkxIUpI5kgWOT3c0GEDakQz7enpqbAIhANH3nmRtxCNhiFTHHpSfqNgG2JjGBPoJ7gKmoSwa2JQ1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+0KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBAQ/+MlY3nlDv9UyIc12wGejXsE7uZOs7c7XLL+FkhVMNu80G0OGG\r\nRuwbqxPfBqIrk154GEWE9r3KsABYWxC5J6/knMe7RHDxqUSmg/seyfOYwz/M\r\nXhhmUwEMbRvtQFk+OGjM3x6Wk0FMsImNRLHaYypaYMbfzVYSXbxdPkxZWhRh\r\nLIuiwSN3ODH7Bhc9WdCY8VXMyEJ5jIg8tZV5ndlMGYDiwFTMNR5EOb5W0yEx\r\n1dKJLfbCu4Ff+GFv+MwixZxH8H9p7888MPCOgktqnCP/ZjQnwzRXaBgCQBLX\r\ncBgXxYZnjMAP5xWJERqsJvNYMS4C8uv9ZO4dYpEOwTSUVWbBmEeEHbowaY+E\r\nc8Xg7CoU3MMZkAhliq5PYiyDCC/E4/1mwMAojFnEH1blKQ9lgIokx+cGYczS\r\n07ym7KZA6Gm2T6fFK7wq9URflHxgFzvBcy5IPzJZQ5pqirMnMl+wSjivHNyP\r\nMMs/AUIJqzS379zY1quqpBTfAty7SF4YLwu5Jeu4A0xNDwa0/eB1nTejflBV\r\nxvyyhMpYAGLCDQgRvk5vGZwjCKdrw4SYthcBxGynH6Qlp8VdCTLh3VcJuKmd\r\neQFsjJ4ZSG/r0DeTweOj4ohRbE8O/+WEi4tScHgXtpwvqpOSuHo+uQIOT/T6\r\nV48GFLMJOk28p4ObaCyyzlUDK2h3otv2yCM=\r\n=ffCx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f9b268c0.0","@material/rtl":"15.0.0-canary.2f9b268c0.0","@material/shape":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/ripple":"15.0.0-canary.2f9b268c0.0","@material/tokens":"15.0.0-canary.2f9b268c0.0","@material/animation":"15.0.0-canary.2f9b268c0.0","@material/elevation":"15.0.0-canary.2f9b268c0.0","@material/focus-ring":"15.0.0-canary.2f9b268c0.0","@material/typography":"15.0.0-canary.2f9b268c0.0","@material/touch-target":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.2f9b268c0.0_1653075210163_0.45085697968301064","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/fab","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.7741345b8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7287be41062302a7183afbcc8b29924f67e97c3f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7741345b8.0.tgz","fileCount":23,"integrity":"sha512-F8KjDhERvYxy8vQYJ+O8OFwtOa2Pish6cEdFWQO9jTBsC2tHnZcozd5kTg69jOqkTKFKuZTKFbIKRolSuAc1pg==","signatures":[{"sig":"MEUCIHjtTEtgmXc6IEkSigTYI9mY2MVzddurMqw4SflWgeJFAiEAhpKvSS7yryENzOGvjFBBtCopVmn0assfoQ+rofEYTG4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/QWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoskw//VCZuFg03UmpzsH4mAq2nREVgrLCVymQ/HYQ7HF89TUMP71sr\r\nmkl7oP0w0IY8nQHvCZGOvet31YQv2a6QOm8HEqwvB+SYV7GMfW5vIf1JVwdp\r\nyCR3lPw5fk8o+XM/nYGEI6NDUZZbwNDiN2qzwFe/5q0UnHdL8ezIG66ZkMzD\r\nFMh30f0NRJZZ6CPoCfXpEn6QLxrUB8Xoto/zoEZnVRpKQi96dwGrR5MBJhXd\r\n3RqyaEwQ19aGS+gBsP4uM0CWFa609DDuiGAL58K1Sor8cUInM128FbyrCspC\r\nFgQD6cJUORw9+YJAuvlBLcrDeMkCQSEjVUjn8w8rwj6tlAi/r0xu1a76PcPR\r\nYaqC/1UAjtivSyEE5TYJ6So0BPNrcZPXS5hHTGc9DUeL94helJ39YNsfdu6T\r\nTd1+9sAsmzPGWz24BAOHA6knlPfmLSU1TmjRSw9RB8a8guFiP9E7bec6EnxA\r\ntz71t1zR76Y/qb7rFjgkcZf6sbYBTM7sleePrXRiqGq2RACEEiZq5xah/Fmw\r\nqEKFtEpYA+FO64VMM75yeYgYFFs/O7wglsrN8VC5ziQQbhvMC5psRgq4w2ao\r\nS0XAi6+Gl91GMhL7pzOvCIHJkkcJHMNiCReqMMKHC1fo1S2GG6G2HUrc5t9N\r\nwhmH2azGFVmcq7p/YaypSDQpr0PadCuFOuc=\r\n=rAU5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7741345b8.0","@material/rtl":"15.0.0-canary.7741345b8.0","@material/shape":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/ripple":"15.0.0-canary.7741345b8.0","@material/tokens":"15.0.0-canary.7741345b8.0","@material/animation":"15.0.0-canary.7741345b8.0","@material/elevation":"15.0.0-canary.7741345b8.0","@material/focus-ring":"15.0.0-canary.7741345b8.0","@material/typography":"15.0.0-canary.7741345b8.0","@material/touch-target":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.7741345b8.0_1653077014094_0.719742804802346","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/fab","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.f807e793f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99f79c6fbc14997fd5216bf6c86ee7bacc4b68b9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.f807e793f.0.tgz","fileCount":23,"integrity":"sha512-DDI8JZ7Vr+1SHkk+YzyoYQVHwJBkW/4TgG7UZjSr0PphpDGWqj0A12Oi0q0fQaKxLGpGd3LY/rTmavwoZ3fJxg==","signatures":[{"sig":"MEUCIQDdnlwu4qQP3AOKPI+kWqcr4+yatSFtARDGKHurjdX8TAIgML1rs3tjYdJ/sDiKUqHDY/aV6Ln/bX1O16ECgJOuAzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBSvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNhRAAnYP88Rj+puNBMNCV20g9GJ6cysg+sq7pSz5sfuZkkEwO7Tg/\r\ngNyl1MURRlPlm7OvOIrfhhdSoj4JW70+yuIDoGRDf8IYzanJreQD/hcAhP3g\r\nlVH7LIrJtyCNg97XjRh3+qT6FTRp/9Dw92ppWHP7w1HzFGRywdv82umXiJeQ\r\nr/w4T5vKFqEBHtRCwMzgRsdhiIBeCSRnA0WNUPbABUpowN6udQ6uLCV2Y2nR\r\nbuEgtFE8/8qj0snneXGenGODCNLi9eH9dK98mxzAhw9GAklRunkXgB70S+MF\r\n7yqmC22rBUtxQSV1/nNDSWmqz/ZthbT8Q5nLsFjla795PthvML3z+F/TWaie\r\nJ8EF4g7DgQy6kJgUDfWPa4795qXGADlopZmOn1NKcCKApHD1k+WD6lv0sJQe\r\nGQmmWUocs+jfjVGyweMvvySUW2DGbx/ifngGzPys20Cnlg0jUVQNOci0xhbW\r\npIAsbZQSCAkiw5K2trIHw61n910v69M6Ah9/JvqlkI65tJD7odbC+i7Lcl3F\r\naEtS/94qXQyXGMw5I9A8QM/QZ15Jcuraat9nJ4yaBOM9WRT+rTsjjiP8G73Y\r\nUO0BmA3TK7tL/Jzx6jR9+PYRsrJfeZtDMI4rA0geGQH/ESQJwxCuVtgj7gxI\r\n1j19mymyVjOSY9hDkekUihrkunAKOVxZVxk=\r\n=JsdI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f807e793f.0","@material/rtl":"15.0.0-canary.f807e793f.0","@material/shape":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/ripple":"15.0.0-canary.f807e793f.0","@material/tokens":"15.0.0-canary.f807e793f.0","@material/animation":"15.0.0-canary.f807e793f.0","@material/elevation":"15.0.0-canary.f807e793f.0","@material/focus-ring":"15.0.0-canary.f807e793f.0","@material/typography":"15.0.0-canary.f807e793f.0","@material/touch-target":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.f807e793f.0_1653085358754_0.14806301241848585","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/fab","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"815f5e84b826cc3966839cfa551041c36b8beeac","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":23,"integrity":"sha512-KAk1DT4GUDxhVRWaSEzzcxxgV93Y8wWX6kipY25JHNKN5W9zhtrjFUO+eKZoK1ZuPSRF1IgFH0BMS/SlGEsWbw==","signatures":[{"sig":"MEYCIQCRJAO2UOawRvd9+y06vZ4XY5GFgzt6n41kq5DJI3zYNgIhAMThnFESwBbkVA9HQyH3uOHmgk/gNM8UmfVmW9++lPg9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6EdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqtmg//bM1CDJebR+IH6xgYIl9wbhAfbpNc2lJ074Ogu2jjP0pArOQf\r\n9WZcLPzMAKBG8HUY09SOzySqJT/JbiedZYoi7lxIEd9xoRBlPj01Al/jmqT8\r\nJhmbAMlFw8wq8iXgQXdkHKZzjkh6B7edpA/rhmo7VpdyC2rRxnS6u8vsLitU\r\nXJCoUJYsubkoavfuUqdp3IZZBJOu0alZRh8p4phufuEuTebM6Rgg24+3zZnG\r\nmSGkZwQAtkLpaKnDMMeiOOd+gJjGPoPnosa/jcvT9AcCAw0ghHljDKyF56MR\r\nC7K9INZD38k6WjF+skekiw9okC0PEd+tfxyMA2BT1QZtN5lLI+xtPqEwCBYD\r\nxr8r5DEOaL2fbqc0QXsfWMlJ8VD1bXPTNqbq5yvh+PP4k/XWZDoxgwrpeKqP\r\noBZMVltYCQ5QNcI9k/sVvh9vpATNvmu9EYN3l1ECVNohQ580yviD8TEtLUPW\r\n+QaioCDYPSlNcAk8Lsoyytn6nPQxrudhElYs002XK3RIUnQe/IDUpQbGCaGs\r\nTf9/AHDbKWwdSIiEvW6DgSD7kqP3bJECpyy6HEb7hadb2JxaZiJePLdJogGV\r\n+6Iv9waKI0NG4PGHakY/mBOnU9bkLZMzNWkxBZGHala4PMoYP0Pg8rKEu16q\r\nsJ6+OXQvSURVrqEGj+lNLbg+aG9CtKVggl8=\r\n=uHOR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9f53d4a8a.0","@material/rtl":"15.0.0-canary.9f53d4a8a.0","@material/shape":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/ripple":"15.0.0-canary.9f53d4a8a.0","@material/tokens":"15.0.0-canary.9f53d4a8a.0","@material/animation":"15.0.0-canary.9f53d4a8a.0","@material/elevation":"15.0.0-canary.9f53d4a8a.0","@material/focus-ring":"15.0.0-canary.9f53d4a8a.0","@material/typography":"15.0.0-canary.9f53d4a8a.0","@material/touch-target":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.9f53d4a8a.0_1653317917092_0.7567064527474141","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/fab","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f2ce23819f2603aab6a22f1f7ce6289c09cf1c1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.77cf00e37.0.tgz","fileCount":23,"integrity":"sha512-8yMMgPIPyb9xZMROU0uOy8CN+0iwnbcJRICS3JSMy8lHlLBLGKv5OvfiACAFFBMMCFlGgZW0co/KcbtBPvJRJA==","signatures":[{"sig":"MEYCIQDR5IScz5TZtoRh+NVDqJBmlP+agW8kdXlFBClFGXXrpAIhALW0QOscMzPV3YrmCLvOtchm7PLSvQNmLvrdqzSmldD9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillMrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi0g/+O/jkyGCJd4fMo4DdlJdPy2yzDoB+5LWJVmUGdJQqPOnL7Zi2\r\nZzEjTw1jEplR2zqdetry6GYW/F70FBzDdHMNF3vo2P2uFHaE6yZXDjGSPf60\r\nEa+CEH5dIcsGpSWEF5VwDQWPOlGN4PKyXS2dC6eYdApiS8CKRNUvaVvX9iC9\r\njOcSCxcZoAuPANXhvPcUjUHWplpP2kDZM/5KFagurOF00qqGBAM1BZM8rYYo\r\nHH/nwGeMx9sdh43t1TmFr9yx3WLAzDVXZIf07ypZlIByZPmb/mRcC7E0RL47\r\nYKjuRwYC7DxLNE6zPIa9vLKfa5WsXQTf9TXWjRh1JNbtDJoBIMoQ/KkkDfny\r\nk3hp3Roh2p0pTuJ2pLM8V6gI4UNNOrdHnkB+0wwKrtgGILoaDeL6kzLqh7T3\r\ntpksj8NRNRisLv0ctHItFD2vyH/3oBwq5UWAhQMMJobG55QnvVg6ymKG/DnF\r\n3Qezrn3Wny5C30B/tshm5dFIWvQvbgwYcUI9NhVbvfUZdV7yAWTRz8Jw7QQy\r\nNKF/hO/WlQSGAF1u+ZPMyHJWs6QnreUIPnCC2z6pv3PsWQ68091j8RH7JSB0\r\n/KPABvlrehX78m8Admz4zmjs+4r0TAW/Ab/CJsIX+5/72Xs50Oluxs6dsrNe\r\nUfRyD3zEOc/hqzWtnQDGHHgLZZuq8h/iJ8A=\r\n=BVZq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.77cf00e37.0","@material/rtl":"15.0.0-canary.77cf00e37.0","@material/shape":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/ripple":"15.0.0-canary.77cf00e37.0","@material/tokens":"15.0.0-canary.77cf00e37.0","@material/animation":"15.0.0-canary.77cf00e37.0","@material/elevation":"15.0.0-canary.77cf00e37.0","@material/focus-ring":"15.0.0-canary.77cf00e37.0","@material/typography":"15.0.0-canary.77cf00e37.0","@material/touch-target":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.77cf00e37.0_1654018859544_0.8794871146417098","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/fab","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6fdcdb229c437e4022b23b967caeba7d17b7bea","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.3c7b844c2.0.tgz","fileCount":23,"integrity":"sha512-F5hcLqH+a2GTwoZNecpGDQ3DKO6icFc8Zfs0QiyaPwGyuH8wHPcizkwxoGtsNkFQ3y2O8Jsa3eRWbPvsfdtXww==","signatures":[{"sig":"MEQCICaIgalpawgoyLrYeEUEZRof1rap820KUKV/bC+PFUBvAiAFL7ahq636xp9YYn04qN4urNj4kxQw8MG64LXEP56SGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin8+FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqofxAAjTzlC9NGwSZzIFqNwz5KqpQxPI+kMnNu46UXe0Gv51EakRKm\r\nB7zQJr+IRjlnZ9uwg8xz4LPbGmABH7+28zpmhH2NDSkv1+6R7KwdI7NHZuh9\r\nSm4HUsWiNAywVROlKlVYDveKH5vSSQJdQJg9F1ItxQ8Lha0nDutt40uDhYwu\r\nt5ewkwvD0twoeQSMYl5YrjEGWzmpC4Cdr4yGdoxul7PlCGS1x9IhtfHxwMxZ\r\n3KRxLFq7txF1dHuNhxLKNyPE+9EoHtWQB9tZICD7QOBHGX8c6d+LHvAd5Uup\r\nH+c++uDXlTQlu/AD0edc+Pv4ERtS1/Ypo2WOcwp1tSAL4dVu0VSVUDwAG1uq\r\nwyI/oLO2htji4fZt39/EGlc6PPDXXw72nknuaFzCe4E4KmNNk4jUBjJzvoH2\r\nQF2b47/pvG84lj3OV2kT4cSecgR226GjHJsGHi9Ew2EeWKsfSDcWrs3CweJy\r\nR2EkpiwESWWElb3N/rWIJ6O/B/D5MaQtOp3VCDAODlNZaGT87UERT1zG9TGO\r\nbgtwFXUkDHJOYfNAGSJdvvWYfls4OmsNwZZrWARLoshGBBqpejwLoDPyamlT\r\n5Ufh1pgwol8XHpAWDB/lyaBNQhIS9Uu8g8xtAWdmAGF5bVTNng+6S0J8U9uu\r\nOaedBYscnzP7OKTS197/qZZ5vi3SFw1Ptng=\r\n=4OU0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c7b844c2.0","@material/rtl":"15.0.0-canary.3c7b844c2.0","@material/shape":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/ripple":"15.0.0-canary.3c7b844c2.0","@material/tokens":"15.0.0-canary.3c7b844c2.0","@material/animation":"15.0.0-canary.3c7b844c2.0","@material/elevation":"15.0.0-canary.3c7b844c2.0","@material/focus-ring":"15.0.0-canary.3c7b844c2.0","@material/typography":"15.0.0-canary.3c7b844c2.0","@material/touch-target":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.3c7b844c2.0_1654640517719_0.20545762559259217","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/fab","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.df47894db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae7cdde3185c10615a497ec144ee0f4cf9f2e126","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.df47894db.0.tgz","fileCount":23,"integrity":"sha512-PZL/19VQk91PIZtNFQG2O5RcF36ImjK/+Aec7MtCqouodjjxfAn7IV7rq/mzbulOPeUDQpIX0u28G79leROdKg==","signatures":[{"sig":"MEQCIG6p9lckE1iC6+bJPI8RMGbKGduzT0S80zEP5814M7/CAiAWNeRWVP+vp5jQo3m/pBFYi29dlNyS8iHsHANz6IfUMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip29FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfjxAApALMcF5L4Zl4D5mICAVJklyj/HW3vteSd56WdMTrwR6hruNG\r\nSE5/6AhYgfMjRLh7+6hhjDCDBO+5Uu4I2I+/2FUVABS2JKQ9urBl6BHoBgHX\r\nvbJM6XCU+WdjNw9MUxZpfnC+Dm7sdBs4BEmCIHtodC03MyOAX5UcOWQRzght\r\nBzQPVbyI0yIRiVc5AU3Zu8FTv/Z2hY/rHzf0ECDprPpKUgFjAB5yzq6OFa14\r\nWcLe/4W+5LJk2ipMeq6hgVvEvo7WLYSwlNyXGQyJe19NZx/5v64CzYraXy4A\r\n6OLrCA1fLEmX2J9Pjh6yFo/AAsNd2qA/K5RZKRzBp+1voiS2H2CXrEE0qCDA\r\noBj1d3s7Puc4xnn823VoLnQpmNGH88HaLZahaCeeF7UJZJ73LLsuLZbXpvQW\r\nbK1JNT6XlK0pczBq+l6G77Kspq+oe21iClLgrIZVOMYv1l3m8ZRtk7nfB/4F\r\nzLfSL+V4p87cgD45WXeKXA9KlNyb52caFdweNSD8SgOtE7xGcsf0bmpJQpoF\r\nEkDJyGOnzVh0IKip24qjtdzXbZoNDsc4gInv2hp0QveqzS3x/xuIUclYF/fj\r\nCahjifyTP8aElKzM2r7GX2U3WCNB3sj4kjIwUW5s23sGhFRj9sGktat5+4e7\r\nDWNAn9GVc2ylL2YBWq2iXSGjvF/1j5ATRqo=\r\n=dlcg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.df47894db.0","@material/rtl":"15.0.0-canary.df47894db.0","@material/shape":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/ripple":"15.0.0-canary.df47894db.0","@material/tokens":"15.0.0-canary.df47894db.0","@material/animation":"15.0.0-canary.df47894db.0","@material/elevation":"15.0.0-canary.df47894db.0","@material/focus-ring":"15.0.0-canary.df47894db.0","@material/typography":"15.0.0-canary.df47894db.0","@material/touch-target":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.df47894db.0_1655140165676_0.13058494955194333","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/fab","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9128cce17068697026692c605dd8ef9d83ad94ee","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b18a873dc.0.tgz","fileCount":23,"integrity":"sha512-s9mO+WrkQWe4Pi0oVmdBzwyxUstvn3v+jHZkmE1thxjF4HEX4dZtqiMZyhksHp27Y2hgeYiCq7oCYhGjABV3uQ==","signatures":[{"sig":"MEUCIFdh3lzcSfxp6i9q8puj7ZGDf7mTjMrGXCQ8abYDYK33AiEA8ujr4suzqJdDXVMeJQqFH3wSMYBidwpHHqzcgm9cdrQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCsKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF0w/5ANKvLL1kjxgorRpO5Y+FYzFdMPRXqSd/n2xufrfhIpy3uiKO\r\nkfvY9sGRHVTE9Jvv9p/PnAdGvzlvHaMK2s8HW2nTlKSBoDKmZz61BX3lUdcH\r\nA73Jy8CkNF/TSQ1cTYXk8nLjx/HTo3dxYkIQQYgsQxUBAuYzfZPpo3pknPdH\r\nUZyi8EBYfrkbqjSvs+3vQ3RoQBydzMucmwtKtM8JYvzNT+U/2FoYnDK4lkUF\r\norcgr8y1RCCn7T8Tpm804qDkKOeSzx+7eN9X4vuWRYjXTbRjOz3geP7gjwU/\r\nPSB+AJtdJSikekAEukTwHvwpd7wMHMUomCFroxpatoLM8f/BM9twtyoltSWl\r\nKWGk7dWh0/AHMa6boyClogQSvQ4irPbBwWmJ5GZQUl/gghqS1Vqss3VXddNA\r\nZkaoRFwYzttIPG8QqLmOAztaaV+/GPB45FB4uRF4uQjAFcTPdZR62SAT/gQC\r\n9uydfsFoepIWVQwNL08zgNbSoj41pvb9LZRg5mjXLDxt059aG9rgkVX2dFIc\r\nU9heCAAyea8VE8hL02NhkuwIsCJwWXff9clauAjwP1TUcL8/Ozb4IBk1vrfd\r\n8FSpF9mZOM48gXVyqlvti8RHx7gahetFsk17straIZZnomxoxZLqx9XB/0M8\r\nAnHU3ZlTknxyfle6mKKnJm6sCzqWdXTVYlI=\r\n=9r4/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b18a873dc.0","@material/rtl":"15.0.0-canary.b18a873dc.0","@material/shape":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/ripple":"15.0.0-canary.b18a873dc.0","@material/tokens":"15.0.0-canary.b18a873dc.0","@material/animation":"15.0.0-canary.b18a873dc.0","@material/elevation":"15.0.0-canary.b18a873dc.0","@material/focus-ring":"15.0.0-canary.b18a873dc.0","@material/typography":"15.0.0-canary.b18a873dc.0","@material/touch-target":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b18a873dc.0_1655188233893_0.3255109819820161","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/fab","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c607fe4d8c501c49d132acba8c930ef1631a7a0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ba9c29637.0.tgz","fileCount":23,"integrity":"sha512-OWuB4SJJbABoSKIOA2hDoNrq5+sPJdxiH5lnmrzrhifMSRZ/lk1/XgViZjM103WhWAAgDj6g1bbSBhsvKtpSqw==","signatures":[{"sig":"MEUCICkgzxPiy44Jg+/OcpOOuRqxcPz6gl48kHBbUL6b1k8+AiEAgVXMTajs8hw4gFZxwU29ibOtPU6xDdn8aj5OjMooUr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNpDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoW1g/8DhchCNT9r/3v7123F+RAcaOHduttcSW/Een2dbZwZwbaMXgW\r\nrFA1uSIzjJOYNV0xZp5UwZM9BmBPQ7sxrg6mw39urHDrvDetqCQjuli0iCv2\r\neUUgJV0GWDrdZuy+GDakhZv006+W+H5O6jBZ+7O+vXzXOSSETmen6EabELZV\r\nAuOfgAMU04VsgWSK8AzWcp7CSVRHWci4CVpY1jxSTGwPNC3iv3Qt/qEfaA62\r\nW/Xz3BK4A+6Nw3HrKgljJ2+5xqBd9y2d8ohY4IV19yfhAySTsWw3gok+RDzR\r\nLcVSUjpnaq4C5em7vSJso0dFsquiihFfBzNwK12eDgVkK11RCo3EhcP3nBkZ\r\nMGsF1yob1E6G0qAt3LrMeL3mn1NL597fw10nzFvK6E3gvNrTCrQSHRJAI+bW\r\n+OOA4oGkrsT2jbZbg8FFs5Y7ssD0Y2piS073Z1TaFYd4U8m8/JQcaEo3Zloj\r\ncxJH/H18UPHdketCAqF994e2AxcM9EWHKTCM2aL3J5c7/cHDIv8t3jnBJ+Gi\r\nnh6PBzkA4B2T5k/Ouw7jZbcokVLJwr7atNej/ZDf94fYhwk6h1iN3E8JLGIn\r\nt88GEZQGy1pesRnI6eYu3DBfZxp4rdArS4yvVDZNyTDxpCOArGtRjCWmZvkH\r\nU8zeLiuuWERxZk1zt0YMFYRFBQezkGTsNKg=\r\n=U5Gt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ba9c29637.0","@material/rtl":"15.0.0-canary.ba9c29637.0","@material/shape":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/ripple":"15.0.0-canary.ba9c29637.0","@material/tokens":"15.0.0-canary.ba9c29637.0","@material/animation":"15.0.0-canary.ba9c29637.0","@material/elevation":"15.0.0-canary.ba9c29637.0","@material/focus-ring":"15.0.0-canary.ba9c29637.0","@material/typography":"15.0.0-canary.ba9c29637.0","@material/touch-target":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ba9c29637.0_1655233091580_0.24955421365545805","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/fab","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1680427b1a1f46da76bec6bfd3b235401424ad85","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.9bfd12f01.0.tgz","fileCount":23,"integrity":"sha512-iX/yKKm9z5fSGr+UZNYrKXTVqR0SA6G46wQFNq6vqBpZDFITcQsDD5eXfzpb98bp0JtUUOXhMrhfWWuOrBoh3A==","signatures":[{"sig":"MEQCIE/eUoYkutb3j+/b58tMITYdaPHhyJ40+yiFeuYJHvd1AiBq5u5QfjHeed6SNbY9OvIGJOOtYAaCo+qmmjUOKF+1jA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2woACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKohAAoo750jSUJqfMRIScLuWIxBrrddE4DRkKfDB9FDGCgGUdk1O9\r\nzHaYpsdXWbDex5alEo0ehCplFJy7A41EuL5VIGpDfNH9BfkGzJGNvAQmLzUn\r\nG1z+Uag4WME7/1xghJn72OOTdfnNvXOzEQxc11w3qsyyHdSC4lgTILbX5JRG\r\nh/bxmlcnrZ/IaxebLj9eLOT4uSfM/3TTJHI+OkmxcG3Xk234FjzuXYD0DhQ3\r\nCqS00BA7X+n3vaM2Dwj47gn3sIqPhxvkeIunS0wjsPd1Fr/A8OHvdgKzfpPn\r\ngihFWdKGDnBRHOZmrlNlcHX5noBXM62HxgZB5gSHZ+TVx2r4U3GiYzrb6AtF\r\nyvC30IvQOW+fLn4sy8jQCeT5GnDBFX4RHb8IRQeTvqXEiEJd00+AdarqkQjn\r\nQpMi1oZPUYaOqjQ6ugYKSBiYZxHa+ASf+WGlWofiQyBZNxmD82Yr7AhKlCw3\r\nmY26s0stDTTfo5qDBH+fDUdC3EKISnjwAP12x6meDV+yRMaL/JDcD4+gI91/\r\nFNiEaB4CWrY4EUBpCqy5M8MenbIhxh3HwtMFQUQA5StgMj4Rhfp042OT9VhI\r\nWN1/4ICugfF7ip/b3L30wg0yVm0hSZj0z5K3ymwdu47Ao3+KtuZCaW//KypT\r\n0yb3I0LNh8RqDv0a7H/WbDHWf3S/EcerNlk=\r\n=PnkM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9bfd12f01.0","@material/rtl":"15.0.0-canary.9bfd12f01.0","@material/shape":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/ripple":"15.0.0-canary.9bfd12f01.0","@material/tokens":"15.0.0-canary.9bfd12f01.0","@material/animation":"15.0.0-canary.9bfd12f01.0","@material/elevation":"15.0.0-canary.9bfd12f01.0","@material/focus-ring":"15.0.0-canary.9bfd12f01.0","@material/typography":"15.0.0-canary.9bfd12f01.0","@material/touch-target":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.9bfd12f01.0_1655925799947_0.03591632321158733","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/fab","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.764de225d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f1521b771db9b27d9146f453708221ac69a8f7d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.764de225d.0.tgz","fileCount":23,"integrity":"sha512-lXXW4hmZpU9iIJaDHSzA2FKBwMLQarHZ6/cfoEniNKUGhVGNxTu3ev97TxLqTkgTrtCJsuYXHU+gkEo+I74OIA==","signatures":[{"sig":"MEYCIQDh1G9Vy/PRoFdxyHrKYgMeKhvwyBDRBVg28prafkn+RgIhAKVLVIZPAcL0WMTwioQR+yGalS1nVGWXy1gIl3iwX37F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH2HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6ehAAmFqJyegj03i5zFst+tj3DUIKkyI+l/EwWkuikzNSImgkNCUp\r\nOiKfGlsqU++klXaxT+soRZCefKI0zczXKbMQfBIyJ+pjVf1SIdQkCrxkJWLU\r\nnn8kJLOHAHa0g3NVddX9Jr57+aGvPblbMrpH8agxXaJnHLkBXx+bXyppluFA\r\nMSmXHRqexQxJX3JbYII9/nbvE6bcTPNk8plKZuhhxSoAXIR16jyVRz+t3Vlx\r\nXYSrQuZcr7XEyiHcafOZ4qMLfZhhwrsm9yOsxutxdvUkcyEr947wmopa82Zt\r\nU5BhMiolDBt8QHWcKyKwHRoOZfLhml0jmbAKrTM11L80Qx23CfpiyYu6DiXf\r\nb3T3WGMtXvT5qJrD5y8BbgRE/vw2GcWOqZIXtp4NO9goI+fUhum4tJXJl3wd\r\nltN3DIQQqFPtUAfjO8Z4JG3k6kKKxSWC6HmTZzApdz3+yDfJ6VB/uOmBfsE3\r\nN2bka4E9fVJH0wHjatO97DPzw7O+Cldk/u3LXy80bH1Aymnfzy6ibG3Yay5F\r\nKgCM4KB/IChWgTR4ct4wXbI8OSSpUV2c3ItuNceA3dCxXzuQwCVU+DER47Ed\r\nCbhWkiHEPVRP9+A4aRvXHjtFcI8wmE1NKyozBI0X2OTyvY00V/sV7dakvqrq\r\n0F3OYBabo4GG1QBIZ4e0yKOpTC0hHzCrIqQ=\r\n=dTTT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.764de225d.0","@material/rtl":"15.0.0-canary.764de225d.0","@material/shape":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/ripple":"15.0.0-canary.764de225d.0","@material/tokens":"15.0.0-canary.764de225d.0","@material/animation":"15.0.0-canary.764de225d.0","@material/elevation":"15.0.0-canary.764de225d.0","@material/focus-ring":"15.0.0-canary.764de225d.0","@material/typography":"15.0.0-canary.764de225d.0","@material/touch-target":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.764de225d.0_1656520071446_0.5968787943377307","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/fab","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.31e517cea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6957794dc3c63bd2bf852451ef120ae555c3fa2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.31e517cea.0.tgz","fileCount":23,"integrity":"sha512-LSBgS/NbAUjE4CDFRJSc7r334BGVNcGwJkraMBPzZDOFccH2PrIAW0B1ir3JozTUbyzQWwdMWTx5xBp700nImA==","signatures":[{"sig":"MEQCIGfuW92nfrTLoIuFflQPsaDsDlSF6Io6akmOvzoAHRXzAiAjGEIoOQO70cEejnGLQ1XbIK4NJkYjmTVn9Onoo4rX6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzz4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqw7Q//ZWw7tSQhAoKTUVW1/fiRDaCwEqSVl3l3CQ6UQKVpzn6ZGY7G\r\nfIbdDsj5nJUTVTqjmFTRXX2Z0RGd3Oa0rsiJq0eBK7gqX3Pifj4JoTfizVyY\r\nWSDJdK5A3/hqgqfA6OuR+kh8CMnX8GN3BsYArNe+ghiAfVcz22TkPQhs7D21\r\n6Se74wBwyjezaCLMJsJtqgroDWdfahgup5pKBQAmqbWpIr414uy0/wTwphaq\r\nUBxpfrThaGmmfDHcupU2kliW1b+jYg2KmoDZtiiUMUMXwJDvB7RVA0lNLGkf\r\nCEFYmAtOQ+zyt7qLCZm5Pui33RrKcvwQzOwmx14dMuW7Cisa+H+k/kxITOkb\r\nsyc7UAC6JHc7dSMUIBrua6hXVH90fZUKjjDv30Ae9S+pWtNHbOnN3oxul6Ye\r\nGnCiRfaeO3HbB5w4XUFDeWNPRs6M5PwDQMbZWaFp3F/MNrpIvA4YOFSlWlp7\r\nh/pc9JX0acLLSj/tyoyLo0XukQ5SwENuijr+4i9ZuMsl0faR9zrqSRbWUaV9\r\nEct2fdVGuJ9twFKgKGIrPS20edmfeuw5w9A6Y4dDm5cVimCN3HHr3hEP5Fuf\r\nxcwE9MhKFshH6Y2PkG3XqZfawbvVB4d8TXvekYf9NHq3npfWqCzGtAJvErcx\r\n/fXDX9qLCYmn97vCWMOQVrn+fiSdz0V/Guw=\r\n=C4tc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.31e517cea.0","@material/rtl":"15.0.0-canary.31e517cea.0","@material/shape":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/ripple":"15.0.0-canary.31e517cea.0","@material/tokens":"15.0.0-canary.31e517cea.0","@material/animation":"15.0.0-canary.31e517cea.0","@material/elevation":"15.0.0-canary.31e517cea.0","@material/focus-ring":"15.0.0-canary.31e517cea.0","@material/typography":"15.0.0-canary.31e517cea.0","@material/touch-target":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.31e517cea.0_1656700152189_0.9631939585445204","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/fab","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31ddfb193ecb7785a68e358ba4735168f80039e5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":23,"integrity":"sha512-6RSHTps6itFzPfU9WVNBLqa01xzR7MLYxsfoUn3MQn3FYb+IXv29qPXK7QmDfn8x29Ea6kt/OUu0pEazXw6n4w==","signatures":[{"sig":"MEUCIFVehKMQFPZOCrMgkaaCbcmezx2OopaenjbjQ1GEI0Z8AiEA2gDWguaC81UtblWMFa6ol2yDUg2WY8vHcbchrAL+2ts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3tyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMVQ//TTV2T0dBSv4ieRTQOAsAfy9x/RJrT+nMqUCTWLrzzJimb1xF\r\nggNy5mEgXoiUlVxr8wR2S/vA+VitWZzzP6VwkXkrcmsGuPxy0tUiZBP3uImK\r\n3kY7xiAFt7QxrOVT1DLAo9WgaFubwZY3rttCQ6nOx81lfKsTq5G6LgcefyNj\r\nFnMQCNcLTYMtIisImZl082HBNWIjVQi9EM0LWBFfflaaXcI8tnUX2x0RaqI7\r\np0OSv0hgztOo7FB4Q2MSqn5Q3TK6Io+isgNfqrGRzFwUkf3vGSDcuFEVwPoM\r\nwkshy7d57CIv28gAAKT80ghaYJkH1xoFhOVl+kA+mszWmsxAsoRrIda9rL9f\r\n/HvsD7PKHv4So5m07E4yHO0XUTa7UG74M2dq7Nh6ZsGtqVAfxb7MOCiT5nBM\r\nvsHAH+jTCBAgW5TMhHjTGxqqhAaQ/EAWSkN/ky3QyPPMWOeKDdbONSsI760g\r\nvGSUo6UmT8BqQEFQ8NONiFJwhnnf5BxikFDl4Zo7CVP8nUeqz3TuLB7AOcVc\r\nKt4ojfuF/obau7P9+a+j9OXw8NHN/fOZmDiVDBGZ8v6GMKJP7oEL6y66QF0a\r\njMkMAluZUMJh32LGQQ4qVJt+ss/rbAsGNbWmEyYXFR0436PH3U7GGs/o+kLl\r\nIJagAUWpFC3/sO2/J8gNCmHEojZdAPfXia4=\r\n=xrb6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9ea4e8e9c.0","@material/rtl":"15.0.0-canary.9ea4e8e9c.0","@material/shape":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/ripple":"15.0.0-canary.9ea4e8e9c.0","@material/tokens":"15.0.0-canary.9ea4e8e9c.0","@material/animation":"15.0.0-canary.9ea4e8e9c.0","@material/elevation":"15.0.0-canary.9ea4e8e9c.0","@material/focus-ring":"15.0.0-canary.9ea4e8e9c.0","@material/typography":"15.0.0-canary.9ea4e8e9c.0","@material/touch-target":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.9ea4e8e9c.0_1656716146631_0.05464282242965779","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/fab","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"229b9972678a1c03a5e03715e9e32ada61d3ff23","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.cd5bafabb.0.tgz","fileCount":23,"integrity":"sha512-3FjO9uKL5qzvthTQRXjZY7c08W8tyYvC6Y53vj765XhKekRIaDF4mOe9a23Qqd3zh5Q8+2btFDNcLoqbIx4Jfg==","signatures":[{"sig":"MEUCIHUr48BlmpXxQDdM0aXzaYAGOTxvv+fk+8FSenztfW19AiEAzK0qyEhN0K2yd/Fb6/lNAhLjwQg5NeM0PM1AvA2qwkc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcyEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdfw//bVKAL28h4ItyaEWVhFGO2lqGtXjLBcOZj3pQEa+nG4AdtoNC\r\neGnz/w7JURKzh8vBESWTlf5xqeASVo2Qm/+yNes12GVpEPx5tWs9JhwdNr5y\r\n1jR45ceRa6Yksg3PKFnaOga9JU2c/VbAYx7SjgwwpwmUqhHMvejLJCF8bg/Z\r\n38z34ochv4LG95UJdSXvlji5AGxN8DSHEihULQHyuVHaLWKCP1D1AgwZemOY\r\nKO4eOCf1cWNPmhxqH2bQ4CFDfQNL29sSpvT/lANsGpTKTGRzFof+0WwAUfyt\r\nzb1cMhJ3YKlWvLtoCiKytbT0bz+fK/2/bmp054SALsQxxedFtG5aWCx10cui\r\n+igIhQyVFj5mAYRNZaeEtlVezYyFtlaB7gvBqHD/5UERFSuEXofXyRchmCiS\r\nqLoJSKRWn52C1sNh0JqBYvLF37lnk6EgDG1rswQwVtXbCAQ0kOOYSuQh2B7W\r\nKx3/YVWCovTVv+FKtOjjAPeLVTIEF7FxhcD6CJ4QcCFMSvm8LwU5iiSOPv1N\r\nbGLZ3Ks+C8U3ZDv6tnQb6Hqnh907VwA9kGUAcKxsoIs3owWsPCYEFmvYUhtF\r\n9/j7g+BbWRnrr/UxxSMQNbzePzQ+zTFa1sYpvY0Ra4eYLRiD1jdhR2wGY4cB\r\nxkMqp5Z0Ir+GpusY0QmTGmG4zlrXpS0fRQs=\r\n=l21/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cd5bafabb.0","@material/rtl":"15.0.0-canary.cd5bafabb.0","@material/shape":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/ripple":"15.0.0-canary.cd5bafabb.0","@material/tokens":"15.0.0-canary.cd5bafabb.0","@material/animation":"15.0.0-canary.cd5bafabb.0","@material/elevation":"15.0.0-canary.cd5bafabb.0","@material/focus-ring":"15.0.0-canary.cd5bafabb.0","@material/typography":"15.0.0-canary.cd5bafabb.0","@material/touch-target":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.cd5bafabb.0_1657130116593_0.6403796978341207","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/fab","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8daad5c3b723c392dd93651631a5842d4bd2c395","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a02fe49d3.0.tgz","fileCount":23,"integrity":"sha512-qdXjQbAFbiqI6Vve1ov88kl4noJyEQxWsnG6zWe7ciAgM9IpUVG/wDm6xJez9jzrcu8oAP7dPOUE4lKLIbQ0wA==","signatures":[{"sig":"MEUCIQCWZfnT5yQCLZyCPzf9DIYZJmubn4+kZgT5KEp/aQ4E9wIgSmgNvmY4/pQIw+lgEjXlTiMnYs20hDQH/h5O6ZFRtEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdnHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfMg/8DAanQ6W9Z3Xy1nlbLPoRolf5WgYQaoIZIV089QN/vidTWVeD\r\nxLV02Nvtv2S7d2PATDFtrAU+Qw7hA3TJXK0qeXRUcXvoimyENqt/eh/Au6n4\r\ngvr7j2OLqcfpZelxITHyEByg52duZ4V2q4HxqYFIIj8uRqNb/zpaGjBiE63M\r\nKdK+Wcp12NKA4j4Qz6ns3re4sJDY3xLOwfN7Rv43ysXa8v445LdHKoeSNSSF\r\n2Eg4ko7mg0S7Z7NWKvqKjIG/T2aifBXbPr/6fJjsfeHRKNF09YTJPYYJaP8j\r\n8+gbhZ+SUlkerFFeSkx3JFRu7laCH2hHpYmvJc9bzup0s26RpD0W0Eqcg/Hg\r\nsmyPDGhGuzw35s4/IdrGChc/yxLQaltaYxKGSV83etBI2WlRIyNjLKaqID1T\r\nlbE1vUhX8EGK9PjdMMzL5vJZbSL4Wap/646+vQpXZWBWymYO4nIyj+e4Z4Na\r\nxdFoRX0wwvgHUTtCfGv0Q2wT0NysaLcPacaBGhGyz32dhle/X3g4SuE7Hc63\r\nRhF0gpKvtu5mNAUWaoTEGFgQk/TI5gtLbrqsZvYPmBi8rLo9yRD064tR7nL6\r\n+gHSJUlp/KkAhKWJtRpu/MTbz72X9xPbwNmB5FwmckyM3Mgzo3y/AmD8oZ3n\r\n0fg2S27f3cHRHH7CPLrC9/3gpNJM+QnPOTE=\r\n=XjhX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a02fe49d3.0","@material/rtl":"15.0.0-canary.a02fe49d3.0","@material/shape":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/ripple":"15.0.0-canary.a02fe49d3.0","@material/tokens":"15.0.0-canary.a02fe49d3.0","@material/animation":"15.0.0-canary.a02fe49d3.0","@material/elevation":"15.0.0-canary.a02fe49d3.0","@material/focus-ring":"15.0.0-canary.a02fe49d3.0","@material/typography":"15.0.0-canary.a02fe49d3.0","@material/touch-target":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a02fe49d3.0_1657133510870_0.346080503213549","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/fab","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4333c2665e67367f2f19c310712a0c6702504a5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.826a3d8be.0.tgz","fileCount":23,"integrity":"sha512-Pg9Rq33DxYklbungvCuq/QYKjZqVxK8Bk3w8gy0QCvsgQ9oydJbYCryUZKTit4LHma6WdyDwPQLLMSBNn0THbQ==","signatures":[{"sig":"MEUCIEAnlPkAvB7IXOaaDX69P7CCt4RdDBYr4QJmTJVaTSrkAiEAzMmobVxqG2vw854g1EuMrFCVUSn3WGa2xdsn4WMmVzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeMlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAMg//XXg5uxZYHWadhnbTKv9SdAKGQIMgucWbsE82LnZXEki0TFq/\r\n8YOPPLHFa4awrbl5736DxasM+LdGTNTEEKY9nJCM6Qxm5pnG3rrgU4XRz11i\r\nYeC4C9lOHEA2BvMEk7iqsjngl6ERy7xFNqwQ9rclVSFAX/KYFHcyiguzKO6F\r\nhhQxK9HKfFBpuRD3Bc09tLVChpxg2/LIQkzvtCw1PxozERyESjV0pYCU//du\r\n0W9YLUri6fZHyDpmmkGu54M6EgdKE6nFOdblRcTM+kNFFWsHINX6Udhuruo7\r\nqcXDxchw7jbXwvKj8lUVkRVqTP9jPGN+dmmp2lL5NPrbYOryjVzu6RHLt+jo\r\nnnr5K0SwBYTuVxcQy4TvnH/B3RvQSiNDQGoFwVPkum+Ez3iDRNavM/lomJKP\r\nxHcNHAFXa4Z6M7gJA0eOiOOPZHrOeNUIkftGa77d4uQVfbpSP4MbNwuWsB+F\r\nKiCzzorZ/z2qiFCcMc0gFWKf6jfUiA850YPC0Lvn5AyATeoF6LkUWFOOW3qq\r\njI1wio9jUBInnQ/DLLmQptVHtaVZBCqPkg5JfQgjDTDZ5mwHBnWpIDmSikw3\r\nZ6ojmPwzw70HWXMwqWSSBrD5WYpZgxywUlMLYDWYFP70pCff3YeslFYUIV08\r\n4lNw7MZn6x6tgX3VdU9CMMoehzPdEHERvjY=\r\n=Fybm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.826a3d8be.0","@material/rtl":"15.0.0-canary.826a3d8be.0","@material/shape":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/ripple":"15.0.0-canary.826a3d8be.0","@material/tokens":"15.0.0-canary.826a3d8be.0","@material/animation":"15.0.0-canary.826a3d8be.0","@material/elevation":"15.0.0-canary.826a3d8be.0","@material/focus-ring":"15.0.0-canary.826a3d8be.0","@material/typography":"15.0.0-canary.826a3d8be.0","@material/touch-target":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.826a3d8be.0_1657135909627_0.3914214866714958","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/fab","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96278b74a0d0f5a43be8e3f77c6c4568432281a0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ef276aa93.0.tgz","fileCount":23,"integrity":"sha512-Csjhc+TyMc/fnp5Sstm3wUusWQ2kjljuog6/uifOskSl+G0iyspu46dTecjZeWcHXtoGl0E60RBsVG63jw3vmg==","signatures":[{"sig":"MEYCIQD+qBVziIQKA19kwCMbS9Spfpc2l1j/cL56Pc3X8f1gVQIhAK/H3Tx1uSv1sj9EwjQRF0yyFWWWA2OC0sv70bC4OHJp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxHgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqnig/+P1Qdu0gWxV07iBwyIocWQ3cBLHL5IHUVbetqkCenw/28flls\r\nFidV+ICTOh1VBcCFDhYtbS4TETiFHFr3w3LEgtnwOxsls9UUGC1M5UmAZlyx\r\nT+JtU7XRKc6q3OZ6sKI1GUrbtNO7umy0PT1bx7Eh58dhghhNBHsexSSysLH5\r\nW8cmy+Wc6AkXZJohR6IyQCYaQHD0sej8qwc+3qDj/jqp+zzcYAxuELtgMeGi\r\nEujyF8oyixx/zZytu70CJGtXlJUpYSpmO3EacyKLpupwxEFAX+OOfdQLXerD\r\ns9NNEEQb4D9ouNZoUDXxJzZwLOz9oaP1NstaFx67Qm0cerf3D2yPBQltsZlF\r\nuiFE6w98jrQMPQKcNbG4lXYklvwLBywIXVdm1Vm150qflW7g+yA9sDbFUFM6\r\nCc/KdhJYSSYGcCJZ5tLT1TikOYQDtk4VfBL9bTmg6F93RZEldNKLLMrEgv3e\r\nzwguZvPmBY1hFAJP/x7VNBQ8jBJ4MYNg1FRaJaiudJmUQ+P1YpCpWpu2whzz\r\nCTHHEWYN/DPRMWZNEtEAbyNkk5D5gj6uTVh8EatUd60Pq1p65X43AczSPwSg\r\nOtvTrMfP0OkRR9vZUsyIBERhf6LHGuamOL8ug593U9fxyazoyFjDpTB+xy+I\r\ngRfpYChu9qJ4Paqxct2RfnIp7JLPQ9DJDZ4=\r\n=s9aG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef276aa93.0","@material/rtl":"15.0.0-canary.ef276aa93.0","@material/shape":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/ripple":"15.0.0-canary.ef276aa93.0","@material/tokens":"15.0.0-canary.ef276aa93.0","@material/animation":"15.0.0-canary.ef276aa93.0","@material/elevation":"15.0.0-canary.ef276aa93.0","@material/focus-ring":"15.0.0-canary.ef276aa93.0","@material/typography":"15.0.0-canary.ef276aa93.0","@material/touch-target":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ef276aa93.0_1657213408492_0.1704844253761324","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/fab","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d3e8616c4669529e6b9bb16dfb3f1f134f0f062","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.59cf61d6b.0.tgz","fileCount":23,"integrity":"sha512-0tf6DyWgJyQpyQW38x6w9oYjplBInBSLR/WTXVnNFfwrmE+8UPlem3pq+13S/m5pOr9r1jQB66xbNEnto+MFuw==","signatures":[{"sig":"MEYCIQC84+udV3Bb+IkFbF+JbyrTzUSPDqX2gjkpLMNiNKssZQIhANbTTOQVhiVbkQmWxIp1DyiiRSaI6Y/1tMubBpi/5v9h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxifACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSxg//aOvyPWXE6hX/VnqoXdASDip4oeJ4MQsr31dVG3PYCjPyiIVa\r\nFGOr0atFblX+mg2QnWBXnaR/28tBupzbvI/YMzMq4vofdwKbky1WuK01kxy1\r\niYJ8BHZDYMLsDTy20plt4q6xooeXoXEw/bQTcWHBOfLxqTeU9EPPH6qWjfsg\r\nnvgTBqZlvdUttbRZivAGIsjXRtxJbke5O4ZDH9CE49207Ba2GrAmZFfTo71z\r\nJZyc3+UZJgofT9jcjTy9dVPAoI5uUmAANQc0qyHu/zyC4f8WWoEM1hArvDk1\r\n+sZLkOwEgY0EqzJfAynVHBYuCYYqfSPYLcPj2Br95aNiKsP5Cl3F0qzw55h1\r\nYlm4LYvg7kzFjkE6o3ZR0pO+PcxM3vPHvikkyFzMImqh5zFP/FoFRCPshho4\r\nzMV9q4s9rPx5NAjUrvxpVPwFnT/EGE8La1SDThN7irGWUJLKE5F4xbIfNq6z\r\nHzkHFzbQttWykaQW03uZsxOnXm7JXNOtJbHb25DPt5iQFFSmgbYtTDMmvc3O\r\ny5eXcgkg0AdvLZApcAHwIIo6Oyl6cRyexGy4fYl4FH4hqefvpzOmPddlgCyP\r\nDP8CsTVn7G5xMI/7lq92Twtn+r80duQx5CEoJxjAPBR9zVjhVUT1ANYF2yAk\r\nz9QLPH5tcMeKm79HrVdblNF3iH2PuuWnNAI=\r\n=2O+9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.59cf61d6b.0","@material/rtl":"15.0.0-canary.59cf61d6b.0","@material/shape":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/ripple":"15.0.0-canary.59cf61d6b.0","@material/tokens":"15.0.0-canary.59cf61d6b.0","@material/animation":"15.0.0-canary.59cf61d6b.0","@material/elevation":"15.0.0-canary.59cf61d6b.0","@material/focus-ring":"15.0.0-canary.59cf61d6b.0","@material/typography":"15.0.0-canary.59cf61d6b.0","@material/touch-target":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.59cf61d6b.0_1657215135612_0.7661737593182947","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/fab","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.8647092f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef1ca2684c9481289961b6e82d0a7219f61284ae","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.8647092f7.0.tgz","fileCount":23,"integrity":"sha512-BNCQvthqV2/yvxOWl5HO51YUVBZY4EUBI4G9/JSog26QjoLjZKjfV8R/cAO18wWgN0qif5ieuTX33EGGsxFZ1Q==","signatures":[{"sig":"MEUCIQDUP3zpInYvB1ug/pmuYOlebj6jIkT3svXL7j2CTbbTowIgS2NMz0Sah2UccIN45koQHnyK5VqcAq0UpGNd9pLwCnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0SAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJ6xAAmqJIaBh5DroTCP4B9VB8V7i80CWab/I1Q9KvJKKkO5J/qPOa\r\n5q/iE/81vI1jH5LqQ5wbwX5YJhfaN+PIdtl4ipvUNorqZGXvK19WYkVZ0plm\r\nbXc7Hx2EjWfXbfCrWuAp64x+ABnQ5QZvvzx1UbAr1usx809EehEzUqQpHy4f\r\njtIh19qnqmu9jjrTpPS4bgoeqauM6ShpbJGI/oUtDs2cKjRKGfle+c9Z8ysc\r\nek+hReA3CldJLLocaNe2FiYXMR1NPwM1iY0RAUWXCgpgWyfDCZ9v7aB2g9vj\r\nzKCc8yJ6IvKw4YTQE/L0NKnQnYDpPsb6Rd10pZZFMlwLR9k/FhMyZAZIXuT0\r\nXYfne06cIXWL6K4Z7H7M3JthrsWakYCFtFRvvDvs8lkRMo3yBzrQfZ5NZ0dS\r\nw8wallU9DuXAVQdp9bABQmON8uqCZN36DeysXSYCWItQobwurRRkfUe6H2xs\r\n6HeKWWq+1EKHKD5+bsIidd8MLiqX8OJ76t8Fg3vkO1uWtFtgQoeqsmbnazlD\r\nzlcQSU7w2ptnpuMJ5ESMRgDm1IuAlubhCXE+4WLxwuVoiY4iHbrg3CDZd6H9\r\n3E6/zItn3VS9YkrIPhbSdIvJD/QhqS2tFDcElwhxrUN1Hc8Q9PIctovr2fRb\r\nMK6Jaa8uJBkW8owliUn7hLITGCmjuynFeFU=\r\n=hTcd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8647092f7.0","@material/rtl":"15.0.0-canary.8647092f7.0","@material/shape":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/ripple":"15.0.0-canary.8647092f7.0","@material/tokens":"15.0.0-canary.8647092f7.0","@material/animation":"15.0.0-canary.8647092f7.0","@material/elevation":"15.0.0-canary.8647092f7.0","@material/focus-ring":"15.0.0-canary.8647092f7.0","@material/typography":"15.0.0-canary.8647092f7.0","@material/touch-target":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.8647092f7.0_1657226368016_0.3083245423771588","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/fab","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55c2bec008cd34439e001cdc0e25c20c2e12853a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.02ecd4d85.0.tgz","fileCount":23,"integrity":"sha512-g+tzUR/A4L68z6rPoP7gP3Eya2tAYYOYMcBUCyhCgrMvRYcJJ6gQn0/Xp3m8DHsZa7sAMZ7drq0hESozpivtug==","signatures":[{"sig":"MEYCIQCJkw2Y/CKAGQNmv2fPjiZB0e81I+H/yLjOfS7b5pxXLAIhAOmh+bOj0SYXieYwW41k+7bXB7JYeLsVDKZ81v9LvBVT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFJlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrh8A//dNO6x2Y78LRqg7GQRg93Oq5tSZHlG1yyr09NbOVReunCH9/f\r\nBKEJuykawJ0Sdq4IQpWD3ozDCzvxUwB9hpppVSrtaugQt3BQfj+3thmCVLFD\r\nfGIL00iq/JK0B1ZT8YBtHTzWkjHcfOKVZRxJ+pSZhzkvb+4NHusU6AcEd0td\r\nEu9Ixy975b6TXJWSbYIRm/J7O+MoHorsKXrQlBlkXfXgUULXbSuSWtKsSAMb\r\nIsq8K6qaawgZqOWQ+e7+3SWhqr9js2NKFVSv5YoTrL8LGYrpEvuF16O1BW7X\r\nOvyFKY+U2Vm9/cOJ00RUSY3LOfQFDd748w7h5ML9iZU4/7ebGNxF8brOZk7D\r\nOtrh48w8HJu8I2+ixwG4pHEwqt9xm/Avy2w76Y9szuFXobvygyGMjHROG/gM\r\nqUqCTanpt6aOzMOEXyLqe4ZBYEJZuHbK0zU0LDxpL9t4jj8LNltIkemVc5mr\r\nsTjn5eNhAg7zbdG24PqCD0aH05qkkCd36XanX5qOXTPRIwYZICHI7bHlNTW+\r\nso5UK8U0NJe9GYITcYB4JE13FudGJQZe/4/HQf/70T9Wbyp4mjxmS41NPU7p\r\ntidGJDFuVumqz12XxJy2wDcYFtNufCoHm4J0kbwdGHSDutFqeb2jfwfaRT+2\r\nYtr7BVztq4Nf74fH5mqLnLrZU2lEGWnVPSI=\r\n=bd2U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02ecd4d85.0","@material/rtl":"15.0.0-canary.02ecd4d85.0","@material/shape":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/ripple":"15.0.0-canary.02ecd4d85.0","@material/tokens":"15.0.0-canary.02ecd4d85.0","@material/animation":"15.0.0-canary.02ecd4d85.0","@material/elevation":"15.0.0-canary.02ecd4d85.0","@material/focus-ring":"15.0.0-canary.02ecd4d85.0","@material/typography":"15.0.0-canary.02ecd4d85.0","@material/touch-target":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.02ecd4d85.0_1657557604845_0.6267852189245051","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/fab","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"728c8b0e3afbdf998a659a56bb9d4c6f968af385","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.63d3a146e.0.tgz","fileCount":23,"integrity":"sha512-WmvnRRoJX2qgw01kn/o60JYG9zF2KQ7ecBR3q4MaKwmzQuox8VQT6Wdt5Ic/MfvOLejbZSanMeeKkGmG+qaksQ==","signatures":[{"sig":"MEQCIH0muZ/R2oI7oOG7WJxDyg2ql+JozADKM4vq0B+FjoJEAiAF2/IAvtBAfGaSXqtLH+SBymmNbX7BzjvbyNxoaN/XAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV0RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKKA//eUJlMctUouhs8TNBMEX2pNZ9MLlKjRMRwUdH3nAFCXpIlOQj\r\ncVnD1X9M9SGiwRM6fEd24nstfv/M8lXRVwRo7c70dnRQ6567LGwShIHaKuiU\r\n8NSiTclxegXvJ4lp09Edo5rhvEhQyste1tHgvBpEXIv1jY8ajyjVEy5W1vZb\r\nnI2s/PIyNWmdTkTahiGui/5R5HeNsEjeo8ZJC2KcMzPLKSlIZTA8cvyXQ1MQ\r\noYsNb/Zm77zQO2qUP808IqqZKnCWdkBUWuDzjRu0HFBttswt3jYeUi51HgVT\r\nrpZwN0v/oeOFtE+FQtYzraOGK8GHCeHLcTnEYxKGYeILZMEh/RO9+LOtmxMF\r\n7ZLWh8PvL+rG5dhbyNRPFlPMS3NJ3kKvhyhSVyBK5bO3KHOhuL8ZwNvrfN96\r\nivcaVY/ffLY1poFkRJlcqSiHlAmfCBQ4Y880/Xe6zW5PWJ1K5lCpcsHTRS38\r\nP28jXgvqUTFadEK+ZNaDx35iEYjjkogm1oTdgKQIlrVb7B7ERfOinMuzd94M\r\nMSk4lqb+nrn/VOw5BnoEuK9Ci99h/1ZLl+zijwn++v1quNEoIJQZV1VAIXDo\r\nP4jsmDt0xqwsI8b2OACchBld4AsKnS1LgfTwBzfDauXIPaMy18EVGhiY4m1J\r\nwz/lkoDEVWyxyZ4Q4F4E3XvO8QYoVU8++tU=\r\n=n7hl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63d3a146e.0","@material/rtl":"15.0.0-canary.63d3a146e.0","@material/shape":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/ripple":"15.0.0-canary.63d3a146e.0","@material/tokens":"15.0.0-canary.63d3a146e.0","@material/animation":"15.0.0-canary.63d3a146e.0","@material/elevation":"15.0.0-canary.63d3a146e.0","@material/focus-ring":"15.0.0-canary.63d3a146e.0","@material/typography":"15.0.0-canary.63d3a146e.0","@material/touch-target":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.63d3a146e.0_1657625872911_0.6542999589747276","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/fab","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.88db01990.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cd3f399bb873c06396b96c2a187a82b87b5d7f6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.88db01990.0.tgz","fileCount":23,"integrity":"sha512-BaJiSzNvRy92crBxGHI+CtaDy5U9793QynjAcUaN3mOQsa6vgd7q3vuo7loHNtPBnsXNiiWXKei0tHVa/vzU2Q==","signatures":[{"sig":"MEQCIHZCB8S32qND/V/NTkv7rntHVyGcrKQxutLNRDXipLWnAiBXEF8HlIOBdPY+4vZ61ANDX0SuiC1WzTPBep7jpr+H7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV3JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpveBAApQL+6nT/e5dLewd8jvpp+mg41iDJj9VwcoTFlY0ftYqSTR1/\r\nz6ExsKPA0kEUOwDIoONz1KtciwI9gEA99nwcQzB4W0N2NFFjsP4ZcaIbs0i+\r\nEBrkslaK2KAiCpwbCLqgdevPLS6xxpljzh1RVXLAMxOLjgOxljuMLELLGNRm\r\nM0eGFF4rs3HhihOoHSxCmTD/cgtogIKC0sfwlLOFnLV1X0l6RKr6WOLHnjyI\r\noymeg+4AIkCxHVNo1aOSsVE6BwkahNYmaTudu837REJjP8K8pn79NZn7DUgY\r\nWjmrKvd+pj1UVzXb+LLlGSlLfM3RxlJcJqtXPCTz4qUC3Bms93pWJrcVseoJ\r\n5782WHdWGcF3m4awAQiKi7Kva7CO9s+ATPbw0KMrIoF63Y6WgZzHyI+4RKbT\r\nh/w4CpohOet+C6bLNYMWdi1vHHhV0+SJaA6RQk/jE4RK2eMvXZjsDYB+wd/u\r\nHu/2E9zFXWNj59KnrRgxffBH7jMrS/0mKGLKBBwyI136DLhhpOMhZDCY1ZO6\r\nrvMR+C84aUJfmcLo0pZZ6810uTmjV4cJ98vqybsEA8rvhxwf6LYvOtxdBAVu\r\nXdFeSZhd9V/cXfxJjENKUxP2Xh+W9KSOOxaitJSXBrhFeGq6mq1ZQz+i/5MT\r\nXPKo2zRWCQu/o3aM7wZh6aeAQpZ4UVWAmBs=\r\n=JQih\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.88db01990.0","@material/rtl":"15.0.0-canary.88db01990.0","@material/shape":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/ripple":"15.0.0-canary.88db01990.0","@material/tokens":"15.0.0-canary.88db01990.0","@material/animation":"15.0.0-canary.88db01990.0","@material/elevation":"15.0.0-canary.88db01990.0","@material/focus-ring":"15.0.0-canary.88db01990.0","@material/typography":"15.0.0-canary.88db01990.0","@material/touch-target":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.88db01990.0_1657626056887_0.968458367375185","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/fab","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19a7bf26a6c87772c372c0893fb80a0eb2632970","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.6432d8fd7.0.tgz","fileCount":23,"integrity":"sha512-aQIu7429RHryf7JVthynrW4qNuYRD2UcYFATPoPeUFu4DqIoQioBnLnrBEDL01saSJE+tDt2rhvXWoQlGWIKaw==","signatures":[{"sig":"MEQCID274p6yKijG/s5N85Ipf5WU2i0EcMuS9IM4204U2J8EAiBcX4pi/fZskBU3M7qFGhYlLUJVh+ghBg1RP3VwgUJ/mA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8XpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTqxAAml58MTc3j5L/y6bgDilzXvIa4UfTwBvvLS69qWm3WE4WP1q9\r\nT0R1Ugoc2xFI/rTBX6tgRXQH0/MsoSnAZh54onuWnFysXy8xSR/QyT4ek+Xq\r\noGSgPGJsirffQZwbioBsz4f2BanXipDVordjGQYVsPxtlRAIkBZvpvoa0IVw\r\nRSII05ziCm3bTSVuI8W2yMCqYC1qUUEFO+Ez/iTYm4rzTlI+MqAdR7iBqFKs\r\ni7kKbKuX0PSrlLvDkaotzNRNWcc+KGXnLe+4gHGcKrVUneRfvkmEtDxCdwj9\r\nl0vWQd0z5PnmPBkRubnheTrmdvX9ldCLoZrkiV/a2GXfVdlo5l9vR1VdW0w+\r\n2INKzuX+MX3sh/SoJWy5e6MxHAtiXgJwlPW9zY2QE5MVdE8Fss0kmvwGdMwN\r\n4AhPyPHKktrQGFr/9lshI8HOIC0lMEeNlFsS+NDno+rmdNj9A+HisXgSLwMR\r\nHE6AGJiepFsAzzdKNlxZyZI3AyE/mMMMxrPSY2JzbKvjwCGYMzw4mlhluZJb\r\nimRBLpE6C/2Ho11Ggq1wuie4PpjTkr2K7IAWHjYmYoHWKp9ylKMchhZRybNV\r\n0Bf24fVBVOR71leuZFi52MLHVSAEHU9tItTLE2lzll/F/p69P0LDWaXSo8Q8\r\n2KtVucZ0rBIRm0MyI8TJSFrXbZf1bXZquVc=\r\n=6W13\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6432d8fd7.0","@material/rtl":"15.0.0-canary.6432d8fd7.0","@material/shape":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/ripple":"15.0.0-canary.6432d8fd7.0","@material/tokens":"15.0.0-canary.6432d8fd7.0","@material/animation":"15.0.0-canary.6432d8fd7.0","@material/elevation":"15.0.0-canary.6432d8fd7.0","@material/focus-ring":"15.0.0-canary.6432d8fd7.0","@material/typography":"15.0.0-canary.6432d8fd7.0","@material/touch-target":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.6432d8fd7.0_1657783784923_0.38020017206240997","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/fab","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"489464202fbe99177ae321f1bba4e42c68a7d8b7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.085f9b25c.0.tgz","fileCount":23,"integrity":"sha512-OozAkUZasDvdydLExMrL7c+S9efWW2BjzKu5gvxODwzoLT6t+RHAuNWSzy0sPrSPuX8kqCd5C/+polDf9rYCDA==","signatures":[{"sig":"MEQCIFExRs+6FmZg2+HdLAtDVH0F+SlgqD0BAsdISAUH2DIJAiBJ6of8N/WWzHharwYh/eYBv+7pGwzpMrGu5pRCsXt6mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EXjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7QhAApHOUCD7GdQwkS+9p2E8iekhnvlylXEOLM8GnMftZKLe+D04a\r\nhJAq8WlPatcbhQUau4VuYVn0iKmgSVyH+pNhCIJT05nEC4c/4xPNfBjWv3yF\r\nNoc6bbzGVefSIsASPyVkHPcAqqZy03o2bzNvD6JtNEhkDxm0CMxV1z+eUsCO\r\nu8XDpeqiRoX0KTWmPoWMA28EYZPJE6ITcsiXyG+9fsAdaCDhCGc0/IEA8Z+g\r\n57n1DZIJHqhlnGGYCfJ/aqBZ3muGX77Mk6b6sjWRSTV7oN0ittVVdjKbAaN7\r\nBCrrEp7XwZIXEktAtLR8Wk8/+bG0aAEI6EQTrfoIQZ3iA17XcV0l3qmc8A5f\r\n2ZChC0xmLTAI7oV8zMkL2sjsbO9tPN+wr9DavfFsrz3kpTPaGLM7c5f4CkcC\r\nYiOOAASZ+T8++m5+nm9/YiHSbQNxOQMZnnIGu+gqzTH7VM0xKuny6+uRtr2+\r\nqRlFJWtjJm4xXUGvxw+wW257FMBk+9wTr9HlOmfSSq+DglqlF0rk0s1xOpnE\r\nJFN6/yGED16MXRtCmP0KercRx79n/UDRqqqJUPwzB9nq195PUaz0gZk8rMHs\r\nqpMnNtSYDWAmJ15rqdpl8m0JPHCjxFsyvGdzug5bwSn3RqOIjxRZJfi5L+Oh\r\nN4lPZ/KefWT2LgXGwnAogl3QoM6bJQzp44U=\r\n=oTox\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.085f9b25c.0","@material/rtl":"15.0.0-canary.085f9b25c.0","@material/shape":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/ripple":"15.0.0-canary.085f9b25c.0","@material/tokens":"15.0.0-canary.085f9b25c.0","@material/animation":"15.0.0-canary.085f9b25c.0","@material/elevation":"15.0.0-canary.085f9b25c.0","@material/focus-ring":"15.0.0-canary.085f9b25c.0","@material/typography":"15.0.0-canary.085f9b25c.0","@material/touch-target":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.085f9b25c.0_1657816547049_0.7577715590258471","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/fab","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8880e09500afac67db4ea1973798908f2a73e576","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.39f9424b3.0.tgz","fileCount":23,"integrity":"sha512-nUeU2/tvdVOeYlVG4dE9ujwcngLKrUbWI9xvpwH9JIv2ygVDT4avVslSfTZi6IMgjpMozCyzUlIYx05NgCU0Kw==","signatures":[{"sig":"MEQCIF5aLx1csxAp5PI7ySTIHV0uOzLbAEimEWCVplG4WPGvAiBEHkQ163OowGty4EIgO95dkr5Xkh6nXkL0CS9Zd5d/cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Ez8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppkQ//fAUkwPYskYkLfgy4pPXFDW7c9AdsM2Pf2udIPPvWPEgI+MYo\r\nDt1YRjGuPEzF57D0DEV9EWbcaFwN4y9mJrYC2TudfHazdr3nyXUiMltjiaZb\r\nM/R4fRAF5gX0C33APEv7QbbD1Vu1Gvt6bUMyUmyeYp4wuZ45FRV23ayIYsyJ\r\n4jbkQV08dEQgcHHHsLTXsGQ7UEMzhvLDYQahnzKaQgqgMY4to73fdWdKWzlk\r\nXs6lfSJd3uhc+5F7yg2ZpYfm+4oQADQvueSLpcXRr/ZM9ZvMPhZRkwdbpoPF\r\n3NrGoxKGaZh0R+eIMrxysbdMx8AI9t95s3l+a/OyaJ8Vz+qhfzqK4r3mS2dU\r\nTRhtNc/W9LKe+6AkYdn8CpvVIn0tB+PLpV/9buDAZiyaUlSPc2/3fRQPUjDQ\r\n+kc5tJkK0JECoIoRzSbCGjfqjRDRFnJ3xNj9hJUIZndT2By2csViYi/XKqpz\r\nfwBkDIbMqS0yARClrqUkmIjYWSQVNJmmbS+wRvYHNbb9RHrqpq29AICtT59S\r\nfvHySvvah4ekgvswsy/MTa2leM/1JUKgfD7p/8fr0sdlQz+GZVLCN5s0Om3E\r\nNGDBJw6y80ghwVN7Ef2tB7QU9PdEIq5wQG7rpZ0Pj7fMNzTDzmf+jCNjQYrS\r\nrEONIlXkiJ+WweB6AzVP9EFFyAURKHfi5gE=\r\n=BxLf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39f9424b3.0","@material/rtl":"15.0.0-canary.39f9424b3.0","@material/shape":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/ripple":"15.0.0-canary.39f9424b3.0","@material/tokens":"15.0.0-canary.39f9424b3.0","@material/animation":"15.0.0-canary.39f9424b3.0","@material/elevation":"15.0.0-canary.39f9424b3.0","@material/focus-ring":"15.0.0-canary.39f9424b3.0","@material/typography":"15.0.0-canary.39f9424b3.0","@material/touch-target":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.39f9424b3.0_1657818364385_0.5123339826951496","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/fab","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c6f77a44dc62cd7e0bd3b333a3b8c0e501e2966","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ae9fce587.0.tgz","fileCount":23,"integrity":"sha512-2lE7AHLeZkmragumzQvz3GrZnjUVkMVaKKSeGUiu5oTUf3Yl3Eh5YHxM17NrwI446G2RbooB7rLDHNNoKivpgw==","signatures":[{"sig":"MEUCIQCbxPaUKuSAT02Vt/Ol7ARsAXBN/eKHkGsTgquo+6Zv6QIgNnNV/oRTCYWxLN0XKNfaKv30+ystzk2pD7xgwG31qYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Fu7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrizg/+OI10qE3jI0kHSut5/1TRAmKtGV4yc1y8Wt2MFeUAIBNYSCqU\r\nGxn6RxH7iKHOxNH6U5LfZfo7JgWMiwLWMmMYrXc3eXHGK4HIpIkB0ncBO0r8\r\ng1RTygMI9Kqz7AGWo+vNi8MD9Bpifg0noo6u9ju2P1h5BqetMcXdJI+ZH2wq\r\n4P69aC3lu4gCBndEhMPwdYeefOOB/1l8k8WauBymoz80FV7GsKQgKEWnvcdF\r\nxXcA9nlWQZmnxuZrRtwm3oV7+y0fHcjVphFlWuKlS8ttEcIoSoZWlU1u0Zyt\r\nAwQZisMI+tGvEfznorqgQY0DHPWh6uKUux/IwhjD2YsDY3HUvDrVYWKGLF8y\r\nGXUkH12dYsFqvM/CQ1FyEn6tIUKXhF8CzRTgi+8TWXF2RTHrhcVIlsSF2XXB\r\nbHhOMDR7FUowfXP+pqw9eYScfph4UPniisNDHrPIFMOGBNOlqn72hepAd49T\r\n6RQTiyXVsb8grcTgnus85tT8N3rJ4s29nc/IKmz2ecro7gs6fukLXLU+M0LH\r\njgjuyyPUEimEl5dgER6KNbxw5LnYOoR1/0kkSd9Axhornv0wS0eS0l9Gy2dV\r\nL2e45yxqIon6cwj/NEm0eq6OXjIBJqyhB4uB72ledHyR4ywDDn/nXwIY2McI\r\nSouUJTXOozxR6W5TLd+iJbY4NESy4So9Yzc=\r\n=I/up\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae9fce587.0","@material/rtl":"15.0.0-canary.ae9fce587.0","@material/shape":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/ripple":"15.0.0-canary.ae9fce587.0","@material/tokens":"15.0.0-canary.ae9fce587.0","@material/animation":"15.0.0-canary.ae9fce587.0","@material/elevation":"15.0.0-canary.ae9fce587.0","@material/focus-ring":"15.0.0-canary.ae9fce587.0","@material/typography":"15.0.0-canary.ae9fce587.0","@material/touch-target":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ae9fce587.0_1657822139216_0.48182908539218716","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/fab","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f72d48d4f3e8a40760373e7991299b621b95f499","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.1ebddc343.0.tgz","fileCount":23,"integrity":"sha512-jDRmKJqhqE8nBMzcMLkE2x9VEXxe97QpD4mWe+IRHrBA6Iz1U8e8lx+LhcMbntuQO9TSfpIoyRxh6CRDBVOTRQ==","signatures":[{"sig":"MEUCIQCVP53gJaVnH0ePNCSX1I2gnWoddOp3nlDWHT/aUX24eAIgR56RFAp9m6sqAeF5wu08ReRImGRRyWdxJmlQLBApszw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SpFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvTg/+OSANDOxwVl0ixdoN2zNY+IRO8EO0QLTjuqppl/+fWstTmvs9\r\nT4ps8lVtK3FS22Pm/7Kn7XkCoCDgbcxXIXu3M9neHB/Ho41xc/0DMX8qDuyD\r\nX6I3QHSaI30nvWyukT0xld6Bn3LwG04Gd8pmpotlCEkeGgg5DcLr4GiSY/xz\r\nqdaeZBwsm/SSatYXOpduVA9fhxp5WHZAa2LqOEQDn6UNJrEZCFytTN4fQZkl\r\nDtoYBSgeT7/4I6s7TaN9B6aEgNZzPrmOn6DEYl72+d70ox7ESbxIu0FopiAp\r\nAP8P+02dxbTnqJBHOKCEabXg5YBUyBNVItT1BQhUwXoiVRkObcgZQUPosr/8\r\n7sowQzhUpYBNd9ucvK3qhh9J3sML2kB+2pGRyWDlMuLcEzjg+QZuajD/Xp2r\r\nIkM5UedAIvSRn2bXECp12CxUp7t5ofm0TqCngjAT4mEinN2a2pGc1tJgwdgK\r\n6FSGJrO9S3ryn6VKFvZs59NnFUj853NPqSNmL0OvhSL6z0uurnvP0cJrk1Lx\r\nVFUYroIJYY49YPGmrg+5LqIo3pk9h9EOhQzXDNjZB5/GFF5b/NXRAQw8pRUH\r\nspvKqfyrlIL/sP4vM+rwpCeb1pLSP4Z8YwPacLyTSWMuHgQ9xjItVJCVnxQU\r\n+jdAsB+tJRBfsX24y4kMF14GR/WL1vzXQfk=\r\n=3Czo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1ebddc343.0","@material/rtl":"15.0.0-canary.1ebddc343.0","@material/shape":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/ripple":"15.0.0-canary.1ebddc343.0","@material/tokens":"15.0.0-canary.1ebddc343.0","@material/animation":"15.0.0-canary.1ebddc343.0","@material/elevation":"15.0.0-canary.1ebddc343.0","@material/focus-ring":"15.0.0-canary.1ebddc343.0","@material/typography":"15.0.0-canary.1ebddc343.0","@material/touch-target":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.1ebddc343.0_1657875013106_0.7098853606935092","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/fab","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.c5018840c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f2d6762b66ed6e5f64552074c4ca729fff63c43","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.c5018840c.0.tgz","fileCount":23,"integrity":"sha512-ajE7VHM2z1wZVSVtjGwG1e3+ew0R28k/wzfvVLlT5hm0dG0l/b/fTrUUUc+MhIhfc1aKBygC83rfSwDpCcCLWg==","signatures":[{"sig":"MEYCIQDbOM1xC2P3w1jkkJ+kUTNgT5CiRaD4uPBKY+YSqQwyJgIhAIHaKeBD5p4x3bDweyylavkrcoPB7ahE/qdijrfHJJ6Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1StjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqw2g/+P/ihLl38mIPvEi0eQ7mlAM9Qj2MVlqbDwfY9agJhXLIMGTG7\r\n6mQ4ciBOuUkh/UhbURXvIo2GlNP8F7T0HVpkpzUSbhaN4sAUpyoy967oLh7p\r\nH3dW61IGpBrpnjAtj4tX8Cd3a+nWTatDf0vG5mNQieNHrwi6V08bmZO33FEi\r\n2rXqf7F2kusViSI2EJSa64rKNdxySdMFrgG7Ozl9QMVr4eFqs2ZxY71TXIxE\r\ndEIBo4M6zHzQNwS7hDU9jNZ1jaCQa94LDhRqXUXE4Juv3edfKqdGy33abaHB\r\nncSnSIGoLv6B4T6uUPy3GAFFA1XeY3R61V1HYu1OFJkMCVptoa+qRCh2U5e+\r\nXazDhA/1xV5n4tIOcQQCeawHU3dZ9s4Y1sWPEtlXr3V4QxmbTZYdwsvYWLly\r\n7Z3h/Z7B/QZOAKZbHVogzf3+k+nLkHqBEa2R9nvPodnIDypzmoRfhYNPijkY\r\nIHduOH33BXfSplzCvF2Tx/koV3EnuiYuE6xKsstOMzQ4BXDa3coMGs/spxiY\r\n6G7gWaqLp+K3AInKS52rTFzEgXTqAM99fK2acMwF5808ujgz5pZXf83dzrd3\r\nVNS/RxPTzL3n6sYPaLFL5YtD8Den18Mdu4L99JSVehV6FGmsJW/2I8R7JYMj\r\nZpFUG1u/9VU8JDJom9V3yCc5QOVIA2ha924=\r\n=auZI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c5018840c.0","@material/rtl":"15.0.0-canary.c5018840c.0","@material/shape":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/ripple":"15.0.0-canary.c5018840c.0","@material/tokens":"15.0.0-canary.c5018840c.0","@material/animation":"15.0.0-canary.c5018840c.0","@material/elevation":"15.0.0-canary.c5018840c.0","@material/focus-ring":"15.0.0-canary.c5018840c.0","@material/typography":"15.0.0-canary.c5018840c.0","@material/touch-target":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.c5018840c.0_1658137443058_0.261874900330322","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/fab","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.551b40d18.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bde21a66f58557dcafb350219662755d1b6dc818","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.551b40d18.0.tgz","fileCount":23,"integrity":"sha512-qNa0DQBH+v8SLCVpniciYYrHRIl6oqAR89WABMTC/XoUEL8jF7NuFyFrdh16wEWkt/x2h/wIJlTcmxS+J3apxg==","signatures":[{"sig":"MEYCIQDrw/w7wDNNBBkEK9hV8VJZyFi67dx7dPJ4iosy2dLtQAIhAJ9yfP0XX31tkJF4MMaEgEc7BXCsfcJmH3XedvqHFrTY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S+XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPbA/+J49+Nryd64iclewDmp9v2QiFf4kdaqobmpUSC0g78CquMpIy\r\nMVl8hfMjDse+js755os9bFgSthXpqKMd1Nc2YWIhfNPZRORRgOAb2gdVjRDU\r\nQFjiIsyREgIaP4a6wdaguCnM4/IsOZq1CauMWNnhwdsavuPvVvlUBCu0ZUtp\r\nvA0isLKInkVQ9m+HbV9FKRa13PxWCI7UZPcYtz6+skaTtS9h78Jv5h1I1MLK\r\nKXtatGORNH6+iaN+aln4TBGbW6jw36eFaJEsXUCqRKnJlg2OqDufRMQZKanj\r\nLylyD0WCjpPsjIG3vqcXiyAPc6JvrCV/2CwCMByVywfnp0RO+iPwzLPrF3X7\r\n1rL3aN9GmOpToD5EnMyCoF1CjezkcEIStSsiqFRi73elY/EqpTUJM3tU4FEo\r\nFyf6+2HLW/Ndv366sMF6WPdnk9nKVrIcDbMzRLlPFziCfYcXH1FV4oC4+x4C\r\nVOFD8Csp/0Ot+zMwfn1Kvrm6sOL9s0kY4uHj8Wr5LDzg0/FbUXg/psfOc6S1\r\nbWUUH0ZWJEW9odqAQRDxorekT+g2LL2//Wl450Dz0CjCh0tr6ZFdYt1lohwn\r\nYVyID+G3P0CAwb8K7AP0waAD4NInBKH7L25rDS57OePIm1m6eq+jGD7irKQ4\r\nK3RTzadMXhjwkjNTu5ji/8GIZkE7HFy6t/k=\r\n=TnOt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.551b40d18.0","@material/rtl":"15.0.0-canary.551b40d18.0","@material/shape":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/ripple":"15.0.0-canary.551b40d18.0","@material/tokens":"15.0.0-canary.551b40d18.0","@material/animation":"15.0.0-canary.551b40d18.0","@material/elevation":"15.0.0-canary.551b40d18.0","@material/focus-ring":"15.0.0-canary.551b40d18.0","@material/typography":"15.0.0-canary.551b40d18.0","@material/touch-target":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.551b40d18.0_1658138519056_0.033563056177497774","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/fab","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dba8759948fdb78ebb232e1cefefb385cfa35f7e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.cf9f12371.0.tgz","fileCount":23,"integrity":"sha512-lS3Y90QJdWrIRWCBqT+yfQ3HjLQYlto2yD6A34fdWfZtAnIduXSe329WNFqSWQnljS8m5ZOivPy0LScofWgk4Q==","signatures":[{"sig":"MEQCICfI8cJd5J2T5VyhT0UbSX0Yw5mQzsUcrLWNo//x+MTaAiA+EXQ+E/2B1ctVSY4oVRsWUS7U9FFOQv3goCA9XyWyXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TCHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOdw//f5i8GxRx8fk+sqC2MVpVQn5TG3QarzsbcLc8RCHWrNV8fPJd\r\n1t52HubmBZtl+z895WlI6c6Xf0SjhF6BXqksfLNtddnQzoMyTgpW3nLtb2N3\r\ngHBSbGWONmZfoW7w+yZDqCfvq0MAQyas86ylFUyaPPsRL6iWolcJBxF/9qfa\r\ngAuurBb8v2eENfKNCx+hRCSeIRFR8TWahQifhsBniwdyfS4UdaeoGQrNNSYa\r\nImvQSgWynEOYVSke96GIfA+J7sHPNSVo206MX7thiI5gAXZ4mb90UK2in6jT\r\n24UQWr5V0ddfyI/yXeTJ1W+m0c1uley/xUF4U0QxkepUS67qx+1mJT8Z9bV+\r\nbb+JJLAB/t/YWOUEoPBP0Bw5kxvv5sIEAxpHE1QCOfZiNClEZCHyO/MXggQl\r\n0YrVTy3Knl6muYRe/oTkt1b/tK+JAVck3gsOeKwzZdnN6awTyROnuGJDkDKM\r\nR10Uiysu4Gn4RGuCV3onKuaz1aFkEeYSw9eEnHkNlaG1tW3V0Wi4dByV3in+\r\nghtGUmKJ37uTZjWPtmV2m5nrA/EjaIlnBxtck5J70iiTXFFebE0/4y8+4pkn\r\nqYtLunLiK1CEMBNWE+vNsrD51THqZ5NjQJdcMAnlQJwtHwMhOsasnX8Wwwgd\r\nkEqCDoZpcd/l+eFclU4jDHmDH1/ECi46tqI=\r\n=hHKC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf9f12371.0","@material/rtl":"15.0.0-canary.cf9f12371.0","@material/shape":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/ripple":"15.0.0-canary.cf9f12371.0","@material/tokens":"15.0.0-canary.cf9f12371.0","@material/animation":"15.0.0-canary.cf9f12371.0","@material/elevation":"15.0.0-canary.cf9f12371.0","@material/focus-ring":"15.0.0-canary.cf9f12371.0","@material/typography":"15.0.0-canary.cf9f12371.0","@material/touch-target":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.cf9f12371.0_1658138759478_0.25730447238042586","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/fab","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"671f3d74c55c2d4054f9a6fc81059dde95979074","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.2797ff8b6.0.tgz","fileCount":23,"integrity":"sha512-oUFuKgA8gqB+u0L6nwb71js6Gat0tt3aeVYaNevlILrtVZRl9Y3wDYEUQIXa4JEsSdAc3qf+ga1RUVS7TxUYXA==","signatures":[{"sig":"MEUCIHyUFcwZhevWQ2GmC/3+8/ljcaitO4Y3ignzGDNIgQjmAiEArziffD53kT2dDVaDahT02D8zpTAe/6RMrTfWvBELSLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fnfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHEQ//QVZjvSS+p8NZdNA6SIksboUdChGyM+UxPLIeY80OBWcdhfJ6\r\nuOY7U/AhaXW4spy4AbX3L6zT1FA98N9CfeKZ64V45ejMwj2u5nEVzwunkalV\r\nQSzwPrjlHTkr+9RbFSk+OuvCdRdgdCk3nrZvRVBUr5eeBBGHRIAFr+rVCQdE\r\nrWUiU77M7dmxxCnLGg5SxTSdjKHhEzdPt/Sob9UHqlYIH3r50At3bFZOvoAi\r\nVqiPr3ftjkVm5wug8VNDO6ivgXdWyvA+waP9ev3GuGjufrRubqYRD+qto43+\r\nu8vkJGnvXyAwamJmbantHuH3yYC5tKeWl6swodBk5TzzkTScV0kBmwNdmTUx\r\nQKcZNAenm6JSR/PR9jZkBWx7rOAez+i19mLsYNU2AjCaoMMxKs25E1Gl33Qo\r\nH+VCLiNMTlMUDhp+RNbHSY0KsV0cf5rU5Bh1UUKiRJttTJ4JiTrHX8TV8isj\r\nw7C8GjM+SJTEt/AHMWLqM2I5JzUh9on4nZyBzErXwLbWh4x+EHWTpKmmaysi\r\n6jh2t1QRbUfGv4/a7wtW0FbyLeNoehFm+qDxvco+sb4DWzdlK1BMWRoIM0j/\r\nZFMJ4QuwwxLYnu13Pc2O5H2vGWKuLQcESQYd6DKhjUWNtZj4V1mnT8gtrYfX\r\nZVhqAYKM9O/wiWtCgJyMzDWrb7sTE0VJ4W0=\r\n=xhUX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2797ff8b6.0","@material/rtl":"15.0.0-canary.2797ff8b6.0","@material/shape":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/ripple":"15.0.0-canary.2797ff8b6.0","@material/tokens":"15.0.0-canary.2797ff8b6.0","@material/animation":"15.0.0-canary.2797ff8b6.0","@material/elevation":"15.0.0-canary.2797ff8b6.0","@material/focus-ring":"15.0.0-canary.2797ff8b6.0","@material/typography":"15.0.0-canary.2797ff8b6.0","@material/touch-target":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.2797ff8b6.0_1658190302584_0.314909997160159","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/fab","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.110fafa17.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"241341b4d98ca366bf3754fa2b0f50ff8d6ce40d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.110fafa17.0.tgz","fileCount":23,"integrity":"sha512-2VILu1m+WGReh3drTWc8VBvDCb/s6IW/3+eCvF5tQAM93ovEcgfaxhh/6h6oZLyA9Dr4IeIZQFVwzcGdN5UBHw==","signatures":[{"sig":"MEYCIQCZgrcR92RjaS6AkO+8YgZTMVL5+9uoS5hjKwbcZ04/YwIhAI5hqstZyQcWFxqF8kEHzDQ0RMyzUv8SUwp6ExVwccxi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17MaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVdg//V/FBkccOvmu7AU0bv6jObzOFU7Xvy7K/SWiRhHO1C21eqzej\r\ncUFWSUFwqhxXMjEQKsTqJMPWln0icIhRb7vwEemJRsHMGKQUG5qpA8BE8b4e\r\nppgsPh+1a4wrtdR0KnrPBxon3sYfMxoH7BMnRAe0hdiYlihKhUADGMIJtr9B\r\n18FjpkHNUCRe04TkRQqmHQtF/Fjd5ghcaSXHAeHSjwoHrU0UxapduryuYjdv\r\nJQug0ZsqiBLGfwu3ut/6H3iAN/GGBGEn/V036exibRu9WMutkYMBZB7bjQUq\r\ntqKLHNBpmSVyRU6ozFlKq+GsNJ7PcXgezuNoJPWb0aI/gGgz6ve+rAuuuN4R\r\n6VdsdlGrTGlxygKbhvF5gZ64POm80mdwG8x98z3e7LyNiscw8rf8u6V3Kzs6\r\n1UcwT5Fe4aWhRljpnb2XPtfEHVeL6uhzxGBtkAalFhkeOJTL5z8icMYXn0TQ\r\nYKx/zWd4WZKdiPN/6njY5VdmEvqTQ7msc695/Myc27i8hGd6GwKJWV+iKstJ\r\nLwUPgb8lyNjn5YAyDcuX2ijBsP20CuwJGAt0aIGdXR9bEYZasqTP/bjG9pZ0\r\nwB4SMTL7mAF7dRwqnPO91r2vxnFHypeFztkajB4G5pQ1faMrRZw2As0jKvX6\r\nlySjQ7nrRpRBMk39HLvX0XRDUwkJ0iQlxk0=\r\n=qs6C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.110fafa17.0","@material/rtl":"15.0.0-canary.110fafa17.0","@material/shape":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/ripple":"15.0.0-canary.110fafa17.0","@material/tokens":"15.0.0-canary.110fafa17.0","@material/animation":"15.0.0-canary.110fafa17.0","@material/elevation":"15.0.0-canary.110fafa17.0","@material/focus-ring":"15.0.0-canary.110fafa17.0","@material/typography":"15.0.0-canary.110fafa17.0","@material/touch-target":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.110fafa17.0_1658303258285_0.31794182248393055","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/fab","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d668a60560d0a294fac11f1a801668c657dc2b5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.386ef1d2f.0.tgz","fileCount":23,"integrity":"sha512-EK6IXQ8T/gTBStN4aR5JEvZZwP/IkdAQMJVr1bK1fUmyjdwtBT2YYKWaGPX8elenILSjtzDgplrpGmbRVS6Y6Q==","signatures":[{"sig":"MEYCIQD7hnlfVeLkLZTBOgRwb6YAhqX8fSVEnPv9El3b2OTGHgIhANN+tRIQy3yX2H5IAIFR43AW0vN7jAk4jvEphmN+qS+m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EeEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV3RAAlKXbFGBmi4PvbIqzMeilHB382sUPJ0EErTddmR8Iifxx/sb4\r\nnxZhNPW4Rs4EGv1Xc//Jj6XeMNLiEOJKW7D4l6nJuVvFbdrhMlGcmRASzGYl\r\npI49QoSebF3lM4RzCWWLZG8k0LLEfNyCMmR20ykiOcIS478laaJyZiA6rUMP\r\njyWxbahMdNGaFk7BUikY+qqvPYzgErvMA5dnojBfdy+je53mQ2Yqvx1Vc1Q8\r\nx0DTm8+iafHyCSCPx2BO7Tqi6I/i7DHsIygMIQDu2fuCMosBkgrqaO55Jsp0\r\n118FklqB/Rclpoxxypi9Q3yb9EBZbnf93sngadSg0NkYH221S8YKFOD4Oobc\r\n8zKwbkJrP07iwmRYknudqheiauG0waDPxC2UKC2DtEA6p2P4UGVACOzbhUX4\r\nNsTY6pZjoWt6pSieuOei7FnaL4ulo+WrX2Z59tMb/KHGcNiqTkrK9riJN4Cx\r\nsHwnRtQ3k9cAO2Rq+/c5SQ1hFg5tFU01aOZauW9XxUhpYE4J7fJkVbL8lJIi\r\npXp5wOpE+deSpvDFbN38mbQATNACpYgxuyY84UrD55yIM3cLiYYXqMC1E4sV\r\ntqm+LiecPbe4ugCl1if2Be/3J3AN3RcPCVJ2pBlxgPiwrc6AbVZNVLcod0Mu\r\n3L3WT96Utwv24aylsrTwu1RoFwDo5GKCy5g=\r\n=EcQ6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.386ef1d2f.0","@material/rtl":"15.0.0-canary.386ef1d2f.0","@material/shape":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/ripple":"15.0.0-canary.386ef1d2f.0","@material/tokens":"15.0.0-canary.386ef1d2f.0","@material/animation":"15.0.0-canary.386ef1d2f.0","@material/elevation":"15.0.0-canary.386ef1d2f.0","@material/focus-ring":"15.0.0-canary.386ef1d2f.0","@material/typography":"15.0.0-canary.386ef1d2f.0","@material/touch-target":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.386ef1d2f.0_1658341252052_0.22221850589893277","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/fab","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.c3924efef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad72655eff36591dcc92dd00e693aa2baa875481","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.c3924efef.0.tgz","fileCount":23,"integrity":"sha512-DeqU7s/JdakfPqbrfhrhGVZDycVI5TNj4fVARgSYPoiIIOie3BO6qf2FNDnVobMOW9v49j8CaMDFaA+pRVBstA==","signatures":[{"sig":"MEYCIQD7sMVJ4fhQVLIEKp4F6n4EwEFdo4/PmSvX4880hBcCRQIhAPa4rwIwK5a5tvgekxEc9K2VvN8By/RTN97CWj6P0x7a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EnMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSXxAAihd6W4/5k4QRCX02wLEk5J3sjagGsvbPRduINQ4BilV93hix\r\n1t0oZSTXS6pYh5uqr4wBAYi9ggFD1p/okZN874yFn1c6ynEcRpAaqDvrhyQ6\r\nBhgUNJ/Eayq/I7EsZm6S50iXJ9p6Kc825QrqkbkP5PUAgEr7uNaBu5mISs/U\r\npAaLjRQkrxFspluKv9WlXWqfVBMWPuXJhiiXUYVxjQtmone+VnLTZZsZcidQ\r\nItMtiMvrNj1PUTMYu6OOFeRQPTdbYN0ZKtpFCfsqcMw92s+CBk4GV6Bdfd2P\r\nj6VuLmOF/2MuQGEiQg7xYfi78UWLotJyaGXyRvvPfCiu3yomEDbUEY3Bk2wR\r\nL2S5jvoKvPiOrqLQ3hDsmXRSY3U9F+879Gra/Kv4hNeU/KezQVmY0C9IgiZJ\r\neJ5gj/pijISiDvW8T7LnclZGfLL+0ap8SMrdjU1thNOdXc3LPPoBMLA8W2VF\r\nRKlvABmSycWrCwlgp7ZE8UFbXUeAlmEqejBqsLVTweUnHGsKnuRHqr+G87tI\r\nrxK33wUmj4J1NXYjJSaL3s6p7JmD1CiadYsb+mhzQSPzZ6TsbO+vOSfBuWFc\r\nYgXV15t1E+GcsJ2O0s3+vqwdFIbLGD+HSldWEvThU5AAQgoFCUWVAn38slGB\r\nEsmZEG+jNLEuRKdeL2w9TsjkOcQc+PGSNNc=\r\n=3Yil\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c3924efef.0","@material/rtl":"15.0.0-canary.c3924efef.0","@material/shape":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/ripple":"15.0.0-canary.c3924efef.0","@material/tokens":"15.0.0-canary.c3924efef.0","@material/animation":"15.0.0-canary.c3924efef.0","@material/elevation":"15.0.0-canary.c3924efef.0","@material/focus-ring":"15.0.0-canary.c3924efef.0","@material/typography":"15.0.0-canary.c3924efef.0","@material/touch-target":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.c3924efef.0_1658341836482_0.05498186558368379","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/fab","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07e45370a77921b13b82ef5787afff8c9870965f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.cf5c5907c.0.tgz","fileCount":23,"integrity":"sha512-QfzxsJ5qr+BCagz9GwCa7FUKmwu+AbIva3I2obU74Ax4FhSQBYUaOJdWvRy2t9tQUv4CO9KQGdmRAm7aSd0+Sw==","signatures":[{"sig":"MEQCICmZ/W84+kl/RcCgYphxXqFNZ1oQydkrdT1Zr51Hlw1HAiAJErlHtTQkRMeVWfXjVcjfqrlithXJg6Spb5fMaCTVkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HIhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHcw/8C+WPSl0REQBj2pCtfvun2oawJNdEkCHkJ6EntsuEqQt+cP3X\r\nursMxRHwG2dj+dI1AU2EVbKQB21J9j7Rrs8r1yR9mT5RFfKh7AdjqhD+CMT2\r\nbWOSOZMXTqhm8EfiGLCR3f9SzR3qZoyKYMPgk756Sw5lwr2sV3wjGedKZxHx\r\nRtVjT6RO95yVRx72fwH+hIunEBV0857YSvzaKm9Dy0wQKuw6YL6NR3PEclLm\r\ntTxvXQjBdgickxxcSL3747mL7WClF4mXR+sMvfoKbnVoSlAl9BG3FhXp0yAy\r\nDVw3q1aHL230skjI8mZCvCVPdxEJg9Nou4gMavCsBJKnhTILOAvSNcK6F90b\r\n2nG4zyXKSYcgwRjOjfufvM7pNaOUHhabfi/wbZOSC2rCCb5WCkvG6kGGxz9n\r\nKHCPaLQXclClzcg3YT/K1lSAQdfdE/M4cmV4Mtro+ELbWjHYla4pADvoEHK8\r\nxqx3tw5SX92Aci2eGAq4lcev/Sza+wyJ3Ju/ONiV7E0WIS2RxZeIxwT4Zv87\r\nf6M/2MIs1yWwi1jo2YZL2orEyiotO5EFDYrs5GbMLxii6jCD7icjOSZ9+bn6\r\nr7i/3gWrVzPuwTcCXHTttX+BXP7nNPDHmovhqPyLyGS7V4kCpZVs1bdffF7n\r\nP0uVhGQvVef/atikRXVXPUjpPg26a44sCNI=\r\n=SU7M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf5c5907c.0","@material/rtl":"15.0.0-canary.cf5c5907c.0","@material/shape":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/ripple":"15.0.0-canary.cf5c5907c.0","@material/tokens":"15.0.0-canary.cf5c5907c.0","@material/animation":"15.0.0-canary.cf5c5907c.0","@material/elevation":"15.0.0-canary.cf5c5907c.0","@material/focus-ring":"15.0.0-canary.cf5c5907c.0","@material/typography":"15.0.0-canary.cf5c5907c.0","@material/touch-target":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.cf5c5907c.0_1658352161181_0.6929136405151222","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/fab","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.0617e2319.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24cb999c7f003019fd144c57ae89de7e0c614579","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.0617e2319.0.tgz","fileCount":23,"integrity":"sha512-d0ANpBXkuTbZ6R+qeG4d9lCnEhZ7wlyXFh7GX/SU0XbqO8IzK81nQr2dg/Vo1DGaT0a9HyU0c3fbh0MD3bgc1g==","signatures":[{"sig":"MEUCIQCYFrZBkfQVtQDBB71q+eNcJysZc4J3zHusUUAKacMR5wIgcNtNjsQQKdgajN26R2fPD+rI64/UKe20ooKMWdJdqdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HZtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQCQ/+JSypJn+2CwASCYNxr2RgyRg2VnDkLZkk+5vcoakTXPeLg/S6\r\nrBJgew/pVVTnjFAaa6p1skqmWMQEjEx215S9Vbd2eVXMMzXvfd5nDd2N3TJ3\r\njPeSEANm5Iu8Ftq+1lvOb3fBn24a8kzwxrcM4K635J2woVrd5oe6QQx9sz24\r\ndAOlXkxmohcAzHf0rf9fRM8GWprCdJku4xFw0i3l6QxvDGBnTv4oCVYnQmsZ\r\nJ8Jy/QESPOfNfslrc0G0BZNvlTzHNx2fMiF3tRWlDRtpxF8OjUars7kO5Sv4\r\nO5g3IksJgRN+6ZM0NnoMsM3ucIynmL8gExZX4h8+GxLtxNESaFnSuAlQ/wee\r\nW9jWh8S9mg5q2M9PC6+46Do1N8ju0rHksRxBOg1mG/F0buwyixzqUrOuko3Y\r\n7ewuMOclGDCgNRpms+nrKBWC8jrbBgYX0NsB0nqZYrOFPdL68pv9+w2VIAWT\r\nllUAxz3uTb9fqLtDk8Ga3/Pl+dG032HAP4KV/bwTNi9klOK/lV322uNdoUY0\r\nbhhl0pHbAqqjpIioIMu/9+hxOvAu59TtRmExUVnjRBKEgolqrBOIY1CoIM5W\r\nMeuuJXouAX9fsLD1CJl/dnHDzGT8kAeiGVL5qBpNnjkMg5qq78D5EOCdPjnJ\r\ndG1Y6xHGXpgRGqiEbxtERmtvrZnpnbM3Exs=\r\n=dH0G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0617e2319.0","@material/rtl":"15.0.0-canary.0617e2319.0","@material/shape":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/ripple":"15.0.0-canary.0617e2319.0","@material/tokens":"15.0.0-canary.0617e2319.0","@material/animation":"15.0.0-canary.0617e2319.0","@material/elevation":"15.0.0-canary.0617e2319.0","@material/focus-ring":"15.0.0-canary.0617e2319.0","@material/typography":"15.0.0-canary.0617e2319.0","@material/touch-target":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.0617e2319.0_1658353261619_0.31112002573117836","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/fab","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a743b7967.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"025fcafbdb84afa94a90b0dc22956ec60bc1d57b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a743b7967.0.tgz","fileCount":23,"integrity":"sha512-YeKZOX/9AIIw93Ur/csqPqeEPH+mqsbaPa4jdueDI/zxKshayP2/uL1Dlxv2rvfRcW5JoGJi7rcgN8GZBkcdCQ==","signatures":[{"sig":"MEYCIQC7CLoEWUZvWoHMtvUaEDiGLtrMy6cUEng0ls2II3+kUwIhAMPFm7IUzw/lp1jxjxGc5tjGK3NpEWrIHMpCQhDAcuwE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HplACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmryew//aM56jW/WvdD9VZVwPXTTMckhlNF0WAAxbTzQOmTawZf4Ggj2\r\nTpCW6o1uWO9LFKowvtYP+3nqmBfvOBtI1ZE3ePQ1zgbi89DH7AhXn+IrDpr5\r\npxqGdeljI3hvf1fjpl/OPKW90GkwX9lG5qrHAoyX5MAK9l/V6JvCARkZV6Dk\r\nnPAEaWDmkIa9iAdq/foCEJnHVOFrOr6YUAha3jz7fpu79HZO/4Fddr/ebAid\r\neSeT7yJsH22e8W5oRDnbfmGaK+shfaZ9PTZmUNBX3dVu0NnjIj7nZijfK41F\r\n60jA/1P4o6HxfLW+7WW7qaOqaXvWS+yzwa8T4AiHpRy20633YbkYKlQAH+QU\r\nYfhoNrwTcNtiK9nbK0lkD2OByl9vyagHHIj4FkTZEhfJvUf/cJZ7UOKLJI7i\r\n+gtxPnCEaxjkP/9ABBnHcQ+Ob405gvTJL7CJ/EBvijBnrYnNkE3V1fucC2X6\r\n7RJjUUCHkM1NaGxrTdXHhMpzCOknbQRWdEK2VZntZaD6JAbMba/eR47aVRQn\r\nU6FFF6zQeRrHJG1FgGLnUZ38d6YyodI5X7vWdnwS2lPhYi0eov8LlLMuHLAV\r\neWhHhfkolz3qJ951OdHxCocQgtgauqVh1VPYjwPkyV1263YPqaSa2Waz5UeD\r\nfIlPt/Hnc3BfUfhelU0imDKRUVnINKJA7aI=\r\n=tsso\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a743b7967.0","@material/rtl":"15.0.0-canary.a743b7967.0","@material/shape":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/ripple":"15.0.0-canary.a743b7967.0","@material/tokens":"15.0.0-canary.a743b7967.0","@material/animation":"15.0.0-canary.a743b7967.0","@material/elevation":"15.0.0-canary.a743b7967.0","@material/focus-ring":"15.0.0-canary.a743b7967.0","@material/typography":"15.0.0-canary.a743b7967.0","@material/touch-target":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a743b7967.0_1658354277724_0.8683395442249839","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/fab","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e16142c13e7229e68f8d8ccd81d7be5fb47b2cc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.69fd619d0.0.tgz","fileCount":23,"integrity":"sha512-tRzVqSlFCXY6BBab5F6gIqCmq79JewklCjuIXFKGu11NeCAizXD3C2+b1GZqeQ4LpumO1zffrDYW+SLlzOrZGg==","signatures":[{"sig":"MEUCIQCL+Y079+xViC5pPlFFMLFKIbkO9B7571Z/QssbpijnYQIgWKVxtZ4jFmZpX/7bBhcR9MsNnQ+/CMnWbl6/3IaOCFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H09ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp11w/8Cc0Q9lB1bH6PZMQVTF1Ml9ghxclKnJ73FEnMwshYh17Hfcof\r\nN31BqaQlwbU147xXjbbJnx831Rwo5j9LdqiSkGAX1KbsYwKKQ03TtKa/L5uy\r\nrZhNMjEupnAU8kcD3F7jcY2biU9+ref3bVgfKE/xurdIUdmzX8qe4bU9Y9dO\r\nT0eU8ThH5TpIUs9tVvaZ+NyBVGqAWat3hHN1+8vOYHyf3BUfyTHZ7GXAfxWI\r\n8gkym5507RK0mNRp3oPWf59ahJcNMx4cpmAo1IX8QsPaktEBFXINJClhSGgI\r\nlbqIIF9TRABaxI/FkN8LHK823u6EdQ9A1ah2/xO7bcarw3V+HqEdinCluIQe\r\nVVQLcs8m8WKrPntJF3/LipPnPo5FpOdKt0saT3PKxm3DF49Dk3M7wKSzFdCm\r\nbpOR607j3l0X5HimTY/OW2qoLqktSnl7KI3wqDv3ohTJlddIP3gB1UxinZ5k\r\nX40pJiG0m4EykLbHLrvF6K6AsW+t2wRv8s0J/Zu2q+LI7e4ntyh62A51P0vk\r\nFkCibU2jAY8YQ7aClCvbVqAYbpOugHp4xto387a1RnUSNeWbEbZUJXUDFNIW\r\ng0qwLo/1XM6b+zFPOl+IbcFFadJ/xgdyOCRzHUrNowHSP+hX2lClGOpoxPJn\r\nAat+Ft+dEPmjj6pU97kbGxzeZbfNo1KJ050=\r\n=Y40i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69fd619d0.0","@material/rtl":"15.0.0-canary.69fd619d0.0","@material/shape":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/ripple":"15.0.0-canary.69fd619d0.0","@material/tokens":"15.0.0-canary.69fd619d0.0","@material/animation":"15.0.0-canary.69fd619d0.0","@material/elevation":"15.0.0-canary.69fd619d0.0","@material/focus-ring":"15.0.0-canary.69fd619d0.0","@material/typography":"15.0.0-canary.69fd619d0.0","@material/touch-target":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.69fd619d0.0_1658355005569_0.848736662835976","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/fab","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"653f0045ccca6cedc3c5377a98d26ee8e7491037","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":23,"integrity":"sha512-0wzT+T68s+dnChDVCZFFKDTE43/eb7mdnXJCQQuou7m1vgzyQG4euzRH7A9PoRet5QWEO17Z9yklTJEjL+g2Fw==","signatures":[{"sig":"MEYCIQDrDGNRFMWGEUrMR+mfnfF0doXbjh5yEB42lVJa8/GyLAIhALjwZ3NHGFXN317zj+YKltDDHmJ2C2Qv7sYbaEFAMVN0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AVIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNwxAAlf+iXSaxhLC39pgQWJatWHBPXeA2AeC+VYlZ988rgh5eZxYE\r\nM3qEkWli3l8NldOfW25YlZBFYdLJIf1GlCltaj+up+8obUS4fH683Hl0otuI\r\nzYnNnjk/Twnq32/OCfmJlIY33+PL+6F++BuW+WkIzDeldd0llvjfTKRAiy0J\r\npnz+FVltiA45aAmTcUx5hMHzNnf5k4km8pRDeUfJ8x3Uqw30OcfImUHCI+KC\r\ngtoZOnwemqmUD5vWjL2WCGcbW+S6u3moBiL9w21VVRq8C4qe0d0wnL+pw5B6\r\nj3mBE7oGo4zdcR5Db5Z3P8+h/FpLcgYkC9KWnA7dSblMy7f72WVR6bmAYHJe\r\n8jSa01ddtq4RDBF5mhX04qjsEnYyyk++bndqLoHRWbkUbwjxQ/ekZZjleN9o\r\nQH/XXGBkPuoIsBuo5ScuKwejTmB0w2C6CthcVztBv1FuSu+6onqTTTwWxmUX\r\nbjVuF6W1HZ5kBhE4aCU7YKAdeSn2BoY4EDVvTQUKJK2UdgdphTWjMaizqUNW\r\nAY6rEGOUzhQbkemPw/fwTBbyFR2Kli1iyv1Gs+NeAO6c1isD9fTI+n144KPC\r\n1w6Yyr6yE8lvpyYgHU49EzxK7ZIIKat47RSgrulFx0NeXFQ6lmHIocz9PgAG\r\nFJKkOuDb4L8gAm5N+hf0lBWibaO2BgKQ2sU=\r\n=WMj0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a6ddc1cf.0","@material/rtl":"15.0.0-canary.2a6ddc1cf.0","@material/shape":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/ripple":"15.0.0-canary.2a6ddc1cf.0","@material/tokens":"15.0.0-canary.2a6ddc1cf.0","@material/animation":"15.0.0-canary.2a6ddc1cf.0","@material/elevation":"15.0.0-canary.2a6ddc1cf.0","@material/focus-ring":"15.0.0-canary.2a6ddc1cf.0","@material/typography":"15.0.0-canary.2a6ddc1cf.0","@material/touch-target":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.2a6ddc1cf.0_1659110728032_0.8537211893384127","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/fab","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91583f857b56f490f100fc983ecc70cf5fa62b01","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.86efd56f6.0.tgz","fileCount":23,"integrity":"sha512-4vR/Smb8Lqe5j4n3Y68LenM17t73FqUYbGkeogXTJJSYGVW3JS28trwcvtRodVH6sFDFv1FpJIuz/3xmRzbnTA==","signatures":[{"sig":"MEYCIQCzwUm+zJbDLRoY+1Qt4HPJD0whhsyJsIJyIf+LqyiInQIhAOB9dXm+OjZD0zpcgkQ6etrA+X9fobVPMYIuZpaIWv0i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6TjIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEcQ//XHMUY/+VWZ4tTbwGjdUHZrw0zr3xpy3nw5/n0SI9aaG85XT9\r\nmzaLeqVvmONGhYQiqQ1itw84uWqkdyfDomSu9sgEvWfg3oSl8bNk1DTQ6JJF\r\nJwa9V5RFFJA3CqUeUnwql6mz2mxE94f7/EWX94jE2wMR3lrwcpKyzwETwHBu\r\nh2UirbrjmSj5hjjWWyjw3ifklKPXjsItU/1p/50DgKPslqWBrfsXJVGOXTk/\r\nJC8mXmdy/gfYBU+Xu/Qb7cq6S7flkRNKd78sQe2WZyKlqfMZXWsyR3KRO6QV\r\nAw2boysHTdqgYA8gZwJbNqDaWK5uMKYRvlVXzAQdi8NIFsjijc/GMm37NoQ6\r\nheBGmRGnchsX3NHzy6iUYxcIYWGL8ubrs0eQs/NsvM6Gbrr5H8NPGfwDnIfj\r\nLfoOYOuqRoIXXJoMt27zh68B34WGAc7cnkITr0mCdUcWfcLK0+UPNEbZea4Q\r\nQ1V1hLNCxY6IRJEnkqG2ZevXjo6wBorEBphOHwXqhB/ekryYUvqm4JroGRyg\r\nQ7zEu9VmP6l3hKDoO3Qoe0+qYZ3ScrB8O7l5l/JAlPJPlKxdwd6UmA8kmxEZ\r\nQ4Ictin8NiByUtxRvpj2ijOqWRF4OnRg9Upy5NjUe3wvRDf9+9LLKgplhMN8\r\n6IhYJEuHWc4Uqjc8PkfaXQPSyEBnX3sCaVk=\r\n=X6AM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86efd56f6.0","@material/rtl":"15.0.0-canary.86efd56f6.0","@material/shape":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/ripple":"15.0.0-canary.86efd56f6.0","@material/tokens":"15.0.0-canary.86efd56f6.0","@material/animation":"15.0.0-canary.86efd56f6.0","@material/elevation":"15.0.0-canary.86efd56f6.0","@material/focus-ring":"15.0.0-canary.86efd56f6.0","@material/typography":"15.0.0-canary.86efd56f6.0","@material/touch-target":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.86efd56f6.0_1659451592243_0.6686235865572643","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/fab","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e18c470a63d607991bf2497529dd01a2726a4948","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ccfc24d19.0.tgz","fileCount":23,"integrity":"sha512-86EDJviFCnctMNiEBLB72rAQi69jNWRwpe5QZmRqA0R8VgEXseHATA/MkDTt7M89n9uLugIsHCukZ5h80eeeBA==","signatures":[{"sig":"MEYCIQC/nA8boDUr28A9EF9Mqfl7BXyxQDdGxOhW+BTace9gCwIhAMTktd5rajdyuUtqy0kIzZj42z9ZdPRfRxjgz2wtd68p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rsAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobGQ/5AfsUQ3rfLDk3oFFnWdXOgHQwjEEhE/wXzQ43/PkM+Wb0HzmX\r\nYoT7va5etqZFei58rZ3di0wA11EJqLv6IiR9TOG7Z27hAmKWsuy21tW6wNX5\r\n5wQsxIdSA1rlnRFu3I6i9pFyiuEzr15UuiWGN7QO9sZ9MwsPnDG/eaoC4RBD\r\nWIIu7sfO0wKEdJVC5k2b5i/u8eC65Ncx0xtCCo11H54/pcnmVRj/6DIpbywY\r\nY6Dcywh7RQq+hhVJ02zpaU0xD2GbK7oUXnx3ywaH4c5wJ2tzE1Fnicqcn43c\r\nmkmHE2RnqHpZjocOUzLW0KXiyyXL+b4FrbIOCqIu5ODKy43HdL66Wf0x4v6q\r\nu5wc/c/NMEkC+WHnGiTshDicHVP/5SKqjqH+A7e+LoFwqm7S9RIPSWVIs+cZ\r\n/AayuoCSeuEKGnxNMbvXy22Hlmx/2qR0n9YOSDJ4SUujJjoD05ZYNvRlHls1\r\nde4XLP9U7ngYiO34+R+3vLjjsuppmGbu0EUE0BEwOlRU5jiPbhCT0yV/nEWp\r\nIohcfDzHiBCQLpcJl11GsA1w4IfWaor1HItk8XyVymB44rL3sQPKzOkwIMTQ\r\naTVYFC7Ofr4DRW7y43vVL1dWjxKu8Xx5YIEuGOssc19uScLQsfL+qMDAWTCp\r\ndCOf2yxS9ouEiypepa2wUVO2dT9UF3QjonE=\r\n=4fj4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ccfc24d19.0","@material/rtl":"15.0.0-canary.ccfc24d19.0","@material/shape":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/ripple":"15.0.0-canary.ccfc24d19.0","@material/tokens":"15.0.0-canary.ccfc24d19.0","@material/animation":"15.0.0-canary.ccfc24d19.0","@material/elevation":"15.0.0-canary.ccfc24d19.0","@material/focus-ring":"15.0.0-canary.ccfc24d19.0","@material/typography":"15.0.0-canary.ccfc24d19.0","@material/touch-target":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ccfc24d19.0_1659550464398_0.25623838542814537","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/fab","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.e4570146f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c2c17e419a9723ef9238af6c042a32295ac8e89","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.e4570146f.0.tgz","fileCount":23,"integrity":"sha512-vw7g0x3b5HilrItWmz0nXkCd7Rzo8Bv1mvY+Zr0g81tss7dOWNl5DO+hLRvTa0BgNqWYiL5yZC3GGhzslRU1uA==","signatures":[{"sig":"MEQCIC9UA9PxyNVV/60nodmnY3dPH/5eCNWHHkE80JE6Mby3AiBUsleW4vZ5a9iv5iraPCYBuSUmfmrghtZvoHeEPH75vg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sFjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoing//UksIapdVl6AoaXdFevhE6Z6H4Vk+AfVxnRwtTYU+8FokGxK7\r\nuIoHV1IGWMpYKINBDlOHXtLVN8lplxumhssUOOokYacv7RToVBEANdPwqNiT\r\nbQ8IrkZNRatqK0tE98bEauq9DICcxaD243wN1NS67J+NDjNzd/uMV8XYy1DH\r\nBkpknHUoaJMhuYsnH7B6+kPBp1l9YHBKiyMNKxCwo/AWQNDURP8E/IXFQ4ZV\r\n3+OMoJYW5l7mVlLAPaqHmKGOtCMRViUR7WwI7qCbWUdktY9xJ4mEpO6rc+Tv\r\nve8CJcGvodkXzlXxouj/IQDrloFIV6MsJgzhY9lG5lZPQgCf2eOcfEPPABRR\r\npVlQYfigPcSgqAYcTU28FjrVu3bAydgxB1aRhciqoxxptdJ6m4fgZRgBS7VH\r\nPZj9pVDt2q78UAbD6cS2lAsPP8DHG3rEUgFBojhGMLec53Utvf7hwQ1nrppP\r\nFLgoyoWVfhbUAsRCYUO7Oig+v55rDi3/1hqmNZSXiVNVK6ZO4O6ELf/+XnRq\r\nJzQ0/cczQ/yolQVfJz7xpGKD97hq4R7wnqOtQAXQx6LZT7e022XZZ390uJNu\r\nuptN0kcd8RGuiLkwRAm1PG6/skbu5K8zdPUaGD4MVOD4HW1L3TSJXtO8FSKR\r\nrmdKLNjf3KiCPFxVSmdKQxH4ClyJgoBBbCE=\r\n=bZEh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4570146f.0","@material/rtl":"15.0.0-canary.e4570146f.0","@material/shape":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/ripple":"15.0.0-canary.e4570146f.0","@material/tokens":"15.0.0-canary.e4570146f.0","@material/animation":"15.0.0-canary.e4570146f.0","@material/elevation":"15.0.0-canary.e4570146f.0","@material/focus-ring":"15.0.0-canary.e4570146f.0","@material/typography":"15.0.0-canary.e4570146f.0","@material/touch-target":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.e4570146f.0_1659552099049_0.8476191393191772","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/fab","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"addbd4933f3cf0aeaf3525026663c4df89e218cc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.6683a36cb.0.tgz","fileCount":23,"integrity":"sha512-qGNy1y/xITQvxwfqNgSvoAzrjI1+w5I2kfOoxVm95UEyvsMvZzvo/XBW7qaKsNCGO4gW3UARnMh+eWjjlo8uSw==","signatures":[{"sig":"MEQCIEMgL4Tn9yCON+x5ELqN7Hq3+MMfClHeV9exdeCIvrFlAiAPQ6wqo3BWsEN768Kn0NLAZrdQFMuJQl/U+vjmFiYe+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6srHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGQw/7BYSOl8NFbMzRDWPrSbc1lZfXDEQ+LOcynG+FmMcx8zAhSKzP\r\nwWM4GxE+Dp6mN0AUk/zAhBYeJIZDlxVirm/mrdAa1Zm9fImbb1QGjT+uwO3Q\r\ni0Gi8f+htnsb75j2w1tpz/xzMXv3PA/x4CIwgKmCtxrukUd23VAOD3x5FcFS\r\n1Jg8/OjEMt2rPFRF5ZmP37W5u1We7CpoUuxBlJazWpKuYkRdwF5yuHf4i5A5\r\nYxqtlyIIwJcDdISA1N+Lg7yNGKHogixKlAKeDDf0U8Vls2LZkHdgTEO9CK0o\r\nqwlx8/CAYVIfo8IA2L0udFGE19V0SAH3tHqIp1rLZcqyW7M9pkNAHV4qNudR\r\n77Skm2fvoKJoBESbfFEugpw2MskQhygYokCVt13pDV4LCY1lbrqQ3QZjfwga\r\nWobwi+F4kjKoqw1L4kJd0Los9TbuvPo0ofJLMci2APqryCukr68V3fUPbva+\r\n35y567Pl9Hge02/axWdxtSPZa6Vbs3LOGIBvbkOxf0dw9FnSrFoG0kPdwG3M\r\nM2nRKn5YSF2mAysgkO++m3beLNsX/NsZNm8Pc+vhlaaBKF3hb5tCz34/E9JE\r\nBYJ/FMAu3b/1esVCj1HeMJ4wxbDycwzV3+UjbIor4IevpSEQdta6Y3bKcxkA\r\nEeeuU8RvCXv6r59axnGA+cvS5WLYqvCia7g=\r\n=hxa3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6683a36cb.0","@material/rtl":"15.0.0-canary.6683a36cb.0","@material/shape":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/ripple":"15.0.0-canary.6683a36cb.0","@material/tokens":"15.0.0-canary.6683a36cb.0","@material/animation":"15.0.0-canary.6683a36cb.0","@material/elevation":"15.0.0-canary.6683a36cb.0","@material/focus-ring":"15.0.0-canary.6683a36cb.0","@material/typography":"15.0.0-canary.6683a36cb.0","@material/touch-target":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.6683a36cb.0_1659554502479_0.015659232220004426","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/fab","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.10196647d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d26d0d29a79ac4bd973f54b4eb1d13013d72a086","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.10196647d.0.tgz","fileCount":23,"integrity":"sha512-cQmj5ThgDu1ZrJYqamYi0Z1fghxtjYBRFq2UyMgCdJnN4Il60R3CduSnF/ZOx9x2Sw8nypRSEkQGoJRvxnk2Mw==","signatures":[{"sig":"MEYCIQDpAC48GPHVhhyvkRZKx+tkJ0oCr5N64PinCGMuMSEcLgIhAIJQR+/yNWHxgDl3qdDoeUQVwITLpDqXm2YWgSOF1kdu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u6dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRJA//Y6qmkfEYBPyEblIbYaFOu1pjFlbkASh2Px2qaDo4d/AG4P7k\r\npVFMGbXfd+8s5GQYsM/McSidp8QijREj+Cp52C9A/PL5wRQgUFtI4luNaHCc\r\nqx7mbz1m4UcARHgwiLv86pW/TA45RQxgMR5fmT62ZbLD8QKq9LaUchKf4oS1\r\n4W5dSGmRZO+OrmPvDurJK+5xs+0PCA5Ua0m5GAUM3TZCMs6Y9VSc20Nhp5AR\r\nhbBwOhngKhVauMYfQTnCAeqIcJrzkRGshCcnRRBhpQSOC2rw0/UuthL0irhm\r\nfK1dPIDSuyyPG7+djpgYIJEC1v8lC0WF3/fiG6ThrfLytyv2Yeck/IEgRpMB\r\n23dbh8ksKfSX+hKVV6429IlHzhC+GDE6Sk+KRjgBnGje4KrNEPfp+qEvVUSE\r\n6HvsSdIcj94MlK4wEpdSG9nF5dAk+RBhesNL040ed7WRbufiDaooHSoQqVNC\r\nuEdDSUwDz3u1MyukSUQMtqvCakkeKsgPGi+8HoaWDQ++k8MxniLkyVeF3dkU\r\nDRT6I4DdPUbritrIYsYjLgbWvcP5dAgKsmCWWEmxe30/HELXu7WyYgEzvzVc\r\nLgQe8vuQKzTWpBYJ0OTRlCwK3p2QM1zuqkv9ZkWtycN4DDUVMQ7pVYFg+Qdi\r\nL9ah6j+lqcTe6vjIHuzaWiuEaAgNNMfgYEc=\r\n=RJWf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10196647d.0","@material/rtl":"15.0.0-canary.10196647d.0","@material/shape":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/ripple":"15.0.0-canary.10196647d.0","@material/tokens":"15.0.0-canary.10196647d.0","@material/animation":"15.0.0-canary.10196647d.0","@material/elevation":"15.0.0-canary.10196647d.0","@material/focus-ring":"15.0.0-canary.10196647d.0","@material/typography":"15.0.0-canary.10196647d.0","@material/touch-target":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.10196647d.0_1659563677476_0.6219265318174205","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/fab","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b49f931c518141407081cade2b524b5b9b6af66b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b20d3d73c.0.tgz","fileCount":23,"integrity":"sha512-efUoUsYJt9IpVl+FcnPvAXBWnrApeqfWfSy3znft+AtlQvC0zXqU7SUhDb85pM9JWsM07R3kCdm4rEAJcQoQqg==","signatures":[{"sig":"MEQCIB6PO7Y0hqtUsAJogWnrXhXWJ6OCLOrMCs7Ehsmorri9AiBKzv2UmbgM+gg83U2a/W4za73W7OMOYNCzR4q/nC6XZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EuiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKLg/8DLL5xtipgl+m6zJ3krI6g0WzrE/c4ob5PkoersYgUxrNowbc\r\nLZKn4fi3ED/MDPXxzpLQaXWBS7E37f6de6gxnS6dZbKTAReFXCDCgay/hBB/\r\nGInzIqpt3dio8gQ4PUKXKnbHh7NQ2hM3aizJtvJdhGGor2LQjXshuisV7PZO\r\nfGfS4t8DbCgsAxNqR18m+gR3rzTPDj9/vdCHmBZuvw6wArfV4hfrGmuHlnsy\r\nAZMOWmM5PR4KqaSsuxJEuHJRBKM8bucUH+1e+Kc+ZKt8kMoX9bUWnNePKjIL\r\n4xLEZf6gIyxBecNPSGTbcSyDXoCx+0b/lTwhMHL0UXrRm+IUb4XuiBH/cUz+\r\naOtFaBd/D2FUtRA41v2iAR0mAT5bCCWUWwro/TJZwQo1fs2DR+zv1SIntLBR\r\nAN8Bx/Us4uUSe3XXfsSAcP0N2fEwDfeBHuVtBkPbKRBMCNgWCVoCAPI9xVaK\r\n5/FYCVykhOG5/JcW3w6TlME/wGwfkrWMnVBFUwBzfeYsWI9kr6Y59jTuTivc\r\nIwHVHayMbmPP1MmPu4kOg8cC+rkbeyBSziANSlm6d4/m5c9ijDm260jutags\r\n2FNv95EX/TfIMO3d1ZFQ3NFxpYfKvCpB+aSf6zA7JyoOEgajsoMgsaavwPk/\r\nSn9sIwrq1CqVeFY4mHIOJFatavtlFNlzuGU=\r\n=/R7D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b20d3d73c.0","@material/rtl":"15.0.0-canary.b20d3d73c.0","@material/shape":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/ripple":"15.0.0-canary.b20d3d73c.0","@material/tokens":"15.0.0-canary.b20d3d73c.0","@material/animation":"15.0.0-canary.b20d3d73c.0","@material/elevation":"15.0.0-canary.b20d3d73c.0","@material/focus-ring":"15.0.0-canary.b20d3d73c.0","@material/typography":"15.0.0-canary.b20d3d73c.0","@material/touch-target":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b20d3d73c.0_1659653025879_0.6873891664138656","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/fab","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b9bebb52b96fca4fe13ff38944577dc04bf1c9e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":23,"integrity":"sha512-NAVsMzUj/RwX3ISpIwZhIHAbFormPpf8N5V7TVhZBnzKg+B3HGdz+sm197H5CZzJVn/c9uMBaD5zjIPIbABk3g==","signatures":[{"sig":"MEUCIF76oPexjL8NTuhFMjG3QxJO6lB1acI3Kl2Cf+94gaouAiEAnXditreEqo30D6bukuFsJhwTBOeQLwp2Qc6dKIz5xKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8nt8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmojew/9EwSpsjWTPjGOIL5a7g7gkh2ay7jKakrPPXOqpTcjlG2t6l0+\r\ni5u2YXgmxMK9B8xQ3nKtb+Ugioigp/ijiuTO2Cpt/LV1dOmVs2XRRX5eH1SM\r\nIVA8cDR4CKdlWO6JdINfoPsl8vKw4u+WbAoujGpovV/fHONgnDCl3CQpJccM\r\npqASe/Ro7dzGC88WlDn6qRGWlGGPZTOEhY0G1BSxlqHgJCuHGYZqCnfPsGii\r\nXx8rDozadWzSUTiIcpIQ9G713iFGvg64jCIGfGPIFtVfOSOLCGXqMAU6pU4C\r\nrxGe0vYSwxxlGzruin3SF7cLzKHPZW86T+nFGnNvZqO4iSHytlMRvBnv/+sX\r\nh5MTI+lQGm0S5PBC6yi3k4luIA7kOgJBH9g97iQx1Vq/4vYLKSzVXRgaDXRL\r\nNX7oW0GfZPu06p8dNzQrZMDBKx5GKjbHHOfGQl+/6gjByPbiwh9wBvMDSNZW\r\nL5ELhXZ6HudXtYR8Dm0GRcgW0eS60RSQyJpqO0yHPTfzmomMC2o+Ii9eExLZ\r\nCn1jw0A1b3ofLHkByZrPNF5R5KTifHrYry8ZIfkWed9gn6HR82KykIlWB5gD\r\n2Xu6orX0+hg6lL+8UFNfMNZlVBgFSBcIdP6R5QlKH+fPgUDfnVTfUtC7hKY+\r\n/Gy41egavYCf+XARNj/BS96He8OyXA5ughY=\r\n=pFTV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c0c6b1e.0","@material/rtl":"15.0.0-canary.47c0c6b1e.0","@material/shape":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/ripple":"15.0.0-canary.47c0c6b1e.0","@material/tokens":"15.0.0-canary.47c0c6b1e.0","@material/animation":"15.0.0-canary.47c0c6b1e.0","@material/elevation":"15.0.0-canary.47c0c6b1e.0","@material/focus-ring":"15.0.0-canary.47c0c6b1e.0","@material/typography":"15.0.0-canary.47c0c6b1e.0","@material/touch-target":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.47c0c6b1e.0_1660058492605_0.7399115108769476","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/fab","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0ea12267f603fb1f9cfb0dae0d3266acbac0bc7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":23,"integrity":"sha512-XAo7oUuSNTVIygxBmbAhxcqKG9mAzQbJkHMMEYJkHaEWaV27p0tLpY2kqomvzo2C/bFVbZ0GbYyO4i70j0BizA==","signatures":[{"sig":"MEUCIQCC+V6vW0wwHUWjFCfZ2E5MCoblnxaivYEQBNrad5kVSAIgVsqML111X1B7GsOJaq5jtwYMXcgHC0oyazGVEJZSQGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U6VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoB6xAAi0SDou/ZdfBzDFHdKCzrsZmaYookB04/dWRettIrGA/c/1OA\r\npKGfGe+V97+zUb1mZecKqXGs5Pn90/adb9mxroWlXzowbQUWWXDCkL/EBOCu\r\nIc7eYDXhOsWsHr8ieHFz/0sRZ8AsH9MbWtbPRXGZdJJkwwnojiAo6zCTaHlw\r\nj/Jc0ZS0HspDMzti8VX+SmRuZad3cYwimQN6hyjh3H/K+PzWXEAaVgLlLXzl\r\nIicuLer0NzmXUpQdJ+4uy8Ox01ofpJFs8rJzWk+csmjQM+1oI35fFYaC2vrU\r\nH5ZWvxyiLay5xpnCGbxBOvG9iimg5I/W0ruSalUZ1Ol22/TDdZroXjeT08Lx\r\nU4ruQNb7ItvMk3odXnrVzkZ0HcTSCYdrL/YM41V/8xiztAZb/YCnpEF8Jc5Q\r\nRL1coXAhfMjrB8+TtPsuH+piehy03v8q316/TddwtPjZ26TassqUsfvHOS13\r\ngSdRHUnUE43BFqUn28H6iVZv7Pq9NLfjBagoImjy9l0aoqdMESnO8CFv8bK6\r\nj+tDy06IhSOQc5fsrroSGkBpQAzKs0MVKlkeFrhBcIyGjnWbctPHU//MtSN5\r\nkhmCaCGM4Zf6kW3PydNWW+/ESFLqWb8XcR7dguRRBpwYiqcnwab7Y0Y68Zfg\r\nOd1MFy9l0TalISSxlDNIAOdGCck0l1YO7Jc=\r\n=Ko64\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e3dc8e38.0","@material/rtl":"15.0.0-canary.0e3dc8e38.0","@material/shape":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/ripple":"15.0.0-canary.0e3dc8e38.0","@material/tokens":"15.0.0-canary.0e3dc8e38.0","@material/animation":"15.0.0-canary.0e3dc8e38.0","@material/elevation":"15.0.0-canary.0e3dc8e38.0","@material/focus-ring":"15.0.0-canary.0e3dc8e38.0","@material/typography":"15.0.0-canary.0e3dc8e38.0","@material/touch-target":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.0e3dc8e38.0_1660243605379_0.8055932274877535","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/fab","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"312afdf627fc35728bf446b562ec16a67dcf57fc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":23,"integrity":"sha512-7/Jclp4aIBDRXdTWtDKQ1Hs69cyu7oUpkMOgzc9O865GK0w3Y3WvDK7M5zbdG9b6Kg0ttsWVDr9/lRTdDR6Efg==","signatures":[{"sig":"MEQCIEtaqhxKrijtx/bELqKFVUZyuZoIzR+VpNBYTKV3vlkeAiA8FcoV9cZeEMZN7ic6y4VRpmXW4J47LC6Ct329aXX7jA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpbwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRhA//fB1ddjkHt6hLDBhOBLZGbiOg2wTpjrYZrAQyFzT+NUBQSIVW\r\nyZ55Nz7vYJXZ4hA3teCDhgvyRBRgrkjihI9RwTkQ8LjSK9foI0z/NdDvsAye\r\nhp7uF6fbF+Rx2GOE/3Jq2/3IY9lNMFmZ0u5/ptMRXrXT+8nbmaZF/oy3JA2D\r\npO40blEQJLauAW1doLdIZSccwYKp8HkRs4pPciCF1sG9bk8cpHI83X/u8lNn\r\nL0fUC/cplH+ZjmWjMOvlvM8ibSEFp12/NO/BDaFf44pbZ1jpOyv9ybWCOPLT\r\nmX3Zuq55kFXzBiFs0hs0dDMvE8eBI6rI8lN+f+PFtnIZ0g3PUtMRKDOOcr1P\r\nYi77q5eHDIhEJY1/E+/S3QWWLNqHHRFyXlyelP8L1NXuU7rVqatYcoJXL7CU\r\nVob+Fpr2Kx0SbloRZGO6p88CHYUEPyKTY8VF81GyxqJTL0X4Sf5oTkE3qtTl\r\nodxp151bg/N1VeHg4bIG6yUZl6dQht9o/AE7gGOj3/KTKpV0uA7hDE8DfJIS\r\nVHiVhFBVSaF7S2FZvO1ht1Dl1+YxxonNhLer+GV8vhMmLnFx62Lz+JTZa4Vn\r\nv7l2oHuTHNHgsku1D+Zjj8aeBUOYxNcG7BuEqulqZ0qbXXhC6R+wZLmhP3un\r\n8VskzcnSWxT76PYtJ4AOl06JOirwLH0xCGI=\r\n=DrJP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d5a11f1c8.0","@material/rtl":"15.0.0-canary.d5a11f1c8.0","@material/shape":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/ripple":"15.0.0-canary.d5a11f1c8.0","@material/tokens":"15.0.0-canary.d5a11f1c8.0","@material/animation":"15.0.0-canary.d5a11f1c8.0","@material/elevation":"15.0.0-canary.d5a11f1c8.0","@material/focus-ring":"15.0.0-canary.d5a11f1c8.0","@material/typography":"15.0.0-canary.d5a11f1c8.0","@material/touch-target":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d5a11f1c8.0_1661900528534_0.1280029397680893","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/fab","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.bac992a95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b48f37216463521ae4e049076a6c842018bee8e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.bac992a95.0.tgz","fileCount":23,"integrity":"sha512-sBknAvc0IvQqMfEI80Dyc5rVLb6nUkOi9uoW1a7wNYNRKyaaihQNr2REpoYIa94ot5y5PPmHOp9UHYi6m/uC1A==","signatures":[{"sig":"MEUCIBYCRvCJgMNtAHXFJCppfp1e2XGZGQki+A2PmLXPebheAiEA5W+ki6TtMa7GWlF2ft6lQCXOVZhOljfP4sBW8D/jT50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFn8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrojw//R8Gxm8MSrpm0EQ2x/8s05a3XJBwsXsD8GNUfiy8WgUqVR8Yr\r\nmC9PaMmDd1KV7GLdmIyTxXbNBSO1HbzmUB1DdVaw+fJJ2TMqCLO4jpItjuFJ\r\nBa3A3S/7/mzjRM+N4R5QifqCmFzTH3q1UHr+ZzoL07P7UFggiGcWAftnOCXP\r\nLRw29TzF2n4wySy8yIqOvDwLbJ6gxxJ+fOklqQFqrpsfGqBiCDPDTbbNV9Kc\r\nwMFMvdvNkirLYxd6J2d3tF7uxsmbCM1TJ5Uj6CA7/2NeKLnj284X15HiFtxi\r\npA8L914VHyUMh/QGarO0IUBrmZhY4Oen0K7pI/P4UaC/HVPZY+VaGzmykS5r\r\nSB1LiMk1YNtb4WiyR87JAbbv1KdHhzoA+a3OPRpA18802+fcdpzcb723xR18\r\nfzQYADyJwFI4qJWZhgjVmBwWDF9zHfr9QVlEzBenMx4ZBh/n9c8roRDJULPY\r\n5xKmRLVIxdrpF9rYOVVU5nRi9T4k63s4KKB/7WPAd2eXTJQ6Y2PRFABVpglJ\r\n1y+Dy/FGiO0Hj0GnnB8u1+AK2wOE1BAIVJuX5dD5VfqHJ8GNOPlaQdLumGt0\r\nqRi/BIxsDWelsGFBOdOAV1WZRkOh16Paqwe9kk/SxeeF7Tl8Hz+Gru0n+j2x\r\nlbx2zf8lJM2v6d8gU8jAn5CBrp229AWbGB8=\r\n=Ew/P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bac992a95.0","@material/rtl":"15.0.0-canary.bac992a95.0","@material/shape":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/ripple":"15.0.0-canary.bac992a95.0","@material/tokens":"15.0.0-canary.bac992a95.0","@material/animation":"15.0.0-canary.bac992a95.0","@material/elevation":"15.0.0-canary.bac992a95.0","@material/focus-ring":"15.0.0-canary.bac992a95.0","@material/typography":"15.0.0-canary.bac992a95.0","@material/touch-target":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.bac992a95.0_1662015996584_0.70372179697175","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/fab","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"109edb4bc14e883b1840abe5de474132528d2144","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d25f3404c.0.tgz","fileCount":23,"integrity":"sha512-prnEbfH8EsjF5kYG5Eyf/rH/lS3o0q5XXDJebEGmkrJykwv/xctfqNArbg+pgKs4o5kM0K9Q7Rjcs4lUxSXP2A==","signatures":[{"sig":"MEQCIBn7to3STtl1GQ/nIeVktS9aepYpvPO4SbJrvaOjBIuXAiA0/5vZoS0R0/342f6Ekkce7fCr/gyMImtelYgowLgHVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH9MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzgA/+I0o/hLpOE6MH5Z0pI51BzgADnSAQsqfuGcGWn8sHBGf9dEzq\r\nCDmDOjEX7a3yym5o0+EIPJyeqwX1FETqemgKaBGwhZegipOQzUhAMgOmD+x3\r\nkvHMEc5BMLd9FjenV0fwGii0PDh51k0F4EEj1PeCee2lbjE5oLvfSJC/vH0N\r\n4x+AqRr8ap4qEjgTjzx2rleSvRvR3ackPZ9B6JlNxPd9sRLxuO2WaMWx7ntF\r\npqcVvJOa7EM+I5xEFn3PJPm65mMpCtxh32UuARaO3GiTEREAhcNo6Hrq/nnM\r\nRMVxX+eB8/tvPalT5TN3mVFoTx8l2jq4SHrlUCZ+GMvIlvLoldDaVUmgM4ad\r\n9fuD6H3Z652/Jjk7UNJS8sHhoBLJTZ93i15NGv5wHhLyKlZ0/KHWqfzCPhnZ\r\nkQ/uTgHxGJbPulx3arWQfToDGVa1VmGrBcO8drhznZD3Fi+rlWkxe3ytRuyv\r\nkIXlqISKaVoXLrJ8/MTzyzwFEfHw5RDJJ3TjWWZCIv6UW4isUSoKiXOfZ3su\r\nA3ivWRaw7kp5yg1BKcN6vfODAXWtad3EbCSyzWQXgghLsnNdYxAAb+P4gAxM\r\nt/0ZwZodCCoWLXASTALZ9L9oc92wnNU3VbuhFyUDM/udqnWZYuXI7nTHNKD8\r\nQY2/05lEoJ74c8zTYA9Spp4blJOchbRx02c=\r\n=BKZL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d25f3404c.0","@material/rtl":"15.0.0-canary.d25f3404c.0","@material/shape":"15.0.0-canary.d25f3404c.0","@material/theme":"15.0.0-canary.d25f3404c.0","@material/ripple":"15.0.0-canary.d25f3404c.0","@material/tokens":"15.0.0-canary.d25f3404c.0","@material/animation":"15.0.0-canary.d25f3404c.0","@material/elevation":"15.0.0-canary.d25f3404c.0","@material/focus-ring":"15.0.0-canary.d25f3404c.0","@material/typography":"15.0.0-canary.d25f3404c.0","@material/touch-target":"15.0.0-canary.d25f3404c.0","@material/feature-targeting":"15.0.0-canary.d25f3404c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d25f3404c.0_1662025548327_0.1492125375349893","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/fab","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17b35e4ea39242474cd9b90c54d1e850ae57b618","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.920d8a79e.0.tgz","fileCount":23,"integrity":"sha512-AoGfXpElShRRj/Uk4Mk1qig0s+N4jxzyGaLJ0PEwvfy767e9wdUP+oqKNwpErx0Q5XbzlJO/nTLjbzs1ayVE+w==","signatures":[{"sig":"MEQCIFSfwoXJLOYCWt4h92Ij+I5+i0d6LoJdTgZr8LIrKiVcAiBdo/zbfZH+PKLT1xAkjXNHpuLyZ46P+MRzNX8VQVzFZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERRfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqmlg//TVDgdX4UVuJGMl6oPDyH4hYOMtCvT4dRiK/Q3RXLW9uVfJOj\r\nJDgE0zjPIVERv4+SIpoIVaYqEyxLH1uhT8AoDNUs0Ht2SvtchgJLM1o006+1\r\ncLcCU7I+WpUx94X+m7evFJLp4BzCm7gsVAXF6yPKSTmg2PJvc4Yoa7KbFPfb\r\nH6mzANpXpIVbG0JwBW6NVa1SpMfMgemV7f+F0+ZE3qAxzyo4MJdyuQewhK1g\r\nJUDRaxjcKCk7c3PRosmpifrZBHByU05R63wDKUscIVk08pmHvzgIYlAJDYqZ\r\nxiEpkrv98jkibiv2Ea4LnpVMyD8s/x488pOkRZ3m0vgkYVr3wW2Gl6JlT0I1\r\n4NdTc2yEyaCFrCaQ+iwVbJOhHDow6eBun7STsra8VaPOVzQtvRGGls1zMDX4\r\nxoIlBIXKhXjiT5eaY4mlsOoxoNTj16VCxXqyO1De8t5XRKDyNvnQYH32dTHw\r\nC9U/Vkduj37IzjkGTLoAqZ7K/eDe6SOkHp7fO9GFsSHI3DLHx57z9f6+V1bY\r\ntlmBrrFwwMVR68oATJru493w9NGkDTMcYzM4sg7JCylBzEaivJK7MKLB1qyB\r\nsyKcDFTZQlCDuJiHrG1T3Rr07B35FGvMByA6env9XAT5pXouuxT2k9WJC18J\r\nZR0jgOPshuPLiiPoeAqoc1XfEn6KSPg1l3A=\r\n=W2AJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.920d8a79e.0","@material/rtl":"15.0.0-canary.920d8a79e.0","@material/shape":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/ripple":"15.0.0-canary.920d8a79e.0","@material/tokens":"15.0.0-canary.920d8a79e.0","@material/animation":"15.0.0-canary.920d8a79e.0","@material/elevation":"15.0.0-canary.920d8a79e.0","@material/focus-ring":"15.0.0-canary.920d8a79e.0","@material/typography":"15.0.0-canary.920d8a79e.0","@material/touch-target":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.920d8a79e.0_1662063711253_0.11735934049778973","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/fab","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.c363f267b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"460ce07f3a54d1f4dca5dc71ffa4594abe356b17","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.c363f267b.0.tgz","fileCount":23,"integrity":"sha512-lFB5AZ+seozYl+YEPQR+DL3YPqsHsUm8cSVvAhHbiiHFFhk0t1HksasN2HA5ruBxPuAcbrf+cS2x64pb8OIjrw==","signatures":[{"sig":"MEYCIQDSpxZZ/+nvOfmPYZI4N/9jSFFT0gcRXJ9NPy2XdUeJWQIhAP1Z8+saAkAzKKewjcpWNQbW5t0xpNurO+BT4qlSCR/0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESHKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVOA//f/rX7EcK1lEjps1BUOneQhhfD57YDzpRqMQ/vJK9J03vvNO4\r\nc0p/Q/fkWpnlhlr/gckV6QxIkwuA3Dg07E+6zx/Q9fnVUSgXz4v8O6sVrjR6\r\nRWgMNetKpApQeia0T8yQIOC6GNHo5iDkLg1RkZiJ+XFYsKLZAhllvXP7BuXn\r\nWVSpPRkMqF594j1UUdM0O/gX0SXB5FWmGZL0f33oWFLc6+2nJ0Og6CBEzSrf\r\nOeXChnwB7YCoiP0Fa/ltCcNtiY8YUL+n7904kayILJ54XzBZXWLj8iFX3l9z\r\nCQ048kCWvn8A/oJkc5IpVWfXQMShAxMo+yQUX7DHqFipBhTVb2DYRcieCGAK\r\ne3OXKwKt9QvOHk3zJ5JHvmaMP1VgexmcAdmRHC2jGJBwW2L6teuTMkFMqyHg\r\nx1Sqhzq+UW91tavk/iw3GdVy2+pATnxDoN1D9K0eoBl904WpyhyokgGEtkWk\r\nBGiQkAFO9aHV/f8yugQBvc6gzaT7/FlgcqwIsAXxTVsClsoxix6JIC2abT8Y\r\nw6Gz2yZag5U7TXLY97i1Encg8txbbKyLdIQ4ApiIsiL98e4wxnHAo9u0xaM9\r\nKamlx0CswyaeV6Mrb8Fxm8hqDEmBy82emCgCgkclYR0TtM8j4Ey7ajhUBshd\r\nUbCZnal750drJz+V5XEJiBOzdELL8Jkk1e8=\r\n=n2FM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c363f267b.0","@material/rtl":"15.0.0-canary.c363f267b.0","@material/shape":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/ripple":"15.0.0-canary.c363f267b.0","@material/tokens":"15.0.0-canary.c363f267b.0","@material/animation":"15.0.0-canary.c363f267b.0","@material/elevation":"15.0.0-canary.c363f267b.0","@material/focus-ring":"15.0.0-canary.c363f267b.0","@material/typography":"15.0.0-canary.c363f267b.0","@material/touch-target":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.c363f267b.0_1662067146659_0.6521749961684065","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/fab","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2da1d038772230e551a34146d870f9bae611ba77","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a4eb4937a.0.tgz","fileCount":23,"integrity":"sha512-MUWV5o87FA38HZdvKYhQm9i3jzTWOCSrBwh1MW2AbxuZSIXySRZ+//TFLkk6jvQefkbvaHPSN4eJSHz7B8VTZw==","signatures":[{"sig":"MEYCIQCOA2aWFhtCPDlgeEuFxRT2+areJr+WL+h6tca0r89N6QIhANujHdf+0Yq1GgPMljL5vZg2GcZ75zRYswwB8RWyZKS8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF493ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9mRAAkih6mheQxoB3DqQ7OXo753gnqH9/8IE6X8UvVY6emYG1fUtN\r\nAEV2fNQAlJ7ZHbHc3+QK9ZQEzeSIt2JrNeU1vHeJReaJnEomlTDdLysCvN1b\r\nDydUCM6iU3KJZsQI67McYgUTpRByasQ8a79VFADhy/RnC3bNTNf6OH6KOCxS\r\nxj9Iz+3oxsYV4iJFRFVKjmeTudvj0c1eTAwRgEXLbKDEyiZHvLNW9HMGKmCt\r\nLaeKrMmdwaZ0djmdA64hotevgCr0026fjgd8O4epYbOlOV7XdR3iOmaN1XUK\r\nqXDpzqW7xVQN7/sJ3qkeivleVtmlOBrumjJzqRgaPBjGZSdtVZqfdc4X1suy\r\ncOIaR6YVy+W5cvDukHTUgrAbPGdLOwbF5+5WTi00274X6X2bC4kwmhaMXVde\r\n0KynsAJuEiBaCo+PsS2TgRyoTe9WnDIRi5PqhvdCCJsGyxxPuN8LqVvXbIOk\r\n8oG2CQPpareQxYKouAIsG/T6OZpjbk2CKZ9D1MdSQIvx9EDdkj1eL4F7X9Ut\r\nF/PvUsIDkPTZf5OfaGxgYTOcxzvP6iJ9jJxCWbuXe6vYEKrDCM3ELvQInbBB\r\nnDFFx3x9m/H7eAT4q1vHYhNri7jDMmgZBqmt+Mw5H1YT5Q3yteI7HmkPgJdY\r\nlVGYiifeGqRRiT7W6Yrr2v6Fa+hWMyPwwdQ=\r\n=GpsB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a4eb4937a.0","@material/rtl":"15.0.0-canary.a4eb4937a.0","@material/shape":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/ripple":"15.0.0-canary.a4eb4937a.0","@material/tokens":"15.0.0-canary.a4eb4937a.0","@material/animation":"15.0.0-canary.a4eb4937a.0","@material/elevation":"15.0.0-canary.a4eb4937a.0","@material/focus-ring":"15.0.0-canary.a4eb4937a.0","@material/typography":"15.0.0-canary.a4eb4937a.0","@material/touch-target":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a4eb4937a.0_1662488439647_0.5180321796612541","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/fab","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.4299717da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b190a3eadf7ed7125147d107f63edc900cb4cd5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.4299717da.0.tgz","fileCount":23,"integrity":"sha512-nnnaGZjO8Rvv4ktU3XZqqK1rdOlnpW/75zwnJV1fwrvrRo3KXenKAIDWKocF5OHzC3CaXfwnediCedIzaM9lgQ==","signatures":[{"sig":"MEQCIGuvZYyDeiEzd/bzUp+oLEUwq8xpUYu2rKM3rQgV88gGAiA5CblWq1yV4FHVCwShQksowu+8OpAKfTDUQHkxdkGa6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMPkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq17xAAo5zSB3lc+YQDU70o9Y1nijUCHK9pg/T03Cvp6UQWbLb8NXwR\r\nPR86KJV/s9oyClPQckhRaLudqsi9ccu+qXqkUVIV7q16hDrq4wy8IIL54sK0\r\nW/XE74y0ft5u6Nz/cLrd+xeMtMTrxJbHxEJ52pSp4jZlQW73liR37jFZUfAV\r\nCTYjjfy+PxvP7QFvXJZDAIP+MPb2awUhq3pTi5Y2bhejYvPbmYbg4HjrwLqx\r\n3Q7bcGVZICa93020yi7cLnABy+Y4cGGUYIqX+NoPcTlElbOLFkQmdMdEuL6+\r\n4WwEZVMM/nvUv0tp68Aezw0UKiWHdmTksqpiJ9P5EEu+GOjCMAF7vccBP6Bf\r\n9AFXjaL8JmtVumvYG+60XFU5497lXoQIpFRaG0qP3MBD8rK0EKpAvLFfKtHO\r\neXj7C6vAxIKrelc8MdKHfn8zREhH/l5vTIIG/+XUfopXpMjHSlS5X3/4ofkK\r\nSQzlYPmrW3sVwprsBWqnrtFA+qSc0S2WuJnOjzki5ImUToEilhXHgP+4jLpQ\r\noLUWcmsn+4sGGz+rHshp6pIn4b4V+53jebEtpN2AYnmXZzjoTdjtoZaHE1UK\r\n+kyIIXo8t9/qClN1zOD5jymhRz28i8ZgXoX3x4vx1ivDXB62ooZHZcrK/O5K\r\nxeuMg/r9RFFNC/j+FNI94rU6azTPAts86yM=\r\n=ZboR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4299717da.0","@material/rtl":"15.0.0-canary.4299717da.0","@material/shape":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/ripple":"15.0.0-canary.4299717da.0","@material/tokens":"15.0.0-canary.4299717da.0","@material/animation":"15.0.0-canary.4299717da.0","@material/elevation":"15.0.0-canary.4299717da.0","@material/focus-ring":"15.0.0-canary.4299717da.0","@material/typography":"15.0.0-canary.4299717da.0","@material/touch-target":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.4299717da.0_1662567395851_0.5790768074643389","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/fab","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0c8a97f088126ac0396a0505d56e1a96e5fff2f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":23,"integrity":"sha512-NlBXNGTLb445TQ5Lat2QQokaDZCG1RDFwWttMY8hC4oWvRGq9KQ46jLQLQcUj/8UqIM1EltuTww4KTiYTTbvdw==","signatures":[{"sig":"MEUCIQDtdkM+1GvL8YJ/KnJmeojL3+UinzN6Eubwq6oWfBNOCAIgC6S+QbxlU5QRjzqvosgi9nsB1uhqGaFmBYNTsyyjrqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO7TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNpRAAlgNhOBtpaUNXppZJOFweb/sqDb8dxOg/Rv7WAGfqFtjSQweT\r\n+G3JqXkH4ma8vHsw/l1K6TAhNcAl3ShcgBKt5RYYbAak7ZwhBWR6Sy7qkezp\r\nj1yBa/VYIrbhJVAUZkXmyiFKraFmw93+xgivm10p3QT0iA7Gb4XNlojLRczC\r\nE1pmgDAArdIBoGCICG2qKTa0BRUex1VbhwYWXJ/p+nOc1L5WFUKiepK4PrSI\r\noFqn6Pce24MCMhRx71F+PYbzxajkb99eIxrzUbQg7JremASY7FV04OiSwgZ9\r\noDMbI2evf44iJNmBK78UP4HgWKEmm6GCAGaPDfArRl40wBroCBc4a6HA/rp8\r\nS6Hre3a8th6RwoXqCR3DavKQbbTY7hA5vg8J8SswcSwdIKX76zqS9J59z3yM\r\n95gagAVWvt5TF1MJVyLmOMrKKzB7YuvZr82PiS/vbZp1dntSRUii2BX7Oflc\r\nN+wwa8pnpNuXhDA2OomLr4kIx0qM2SSvLElIcM2MbI7TiAyxT41pkmNlgt7D\r\nZvidVbetkOuMFb6W1S5oxIjrsvscOPHS0L3czEJhPKlxJBuuwdTA5gk2ftS8\r\nOh/Qlukutkba8U3B1y/v/hWqxx6E8rkEWn2z6WpruS+0DHOqK5tvl/5qrVFj\r\nOjiUbN21z4UG/xOiaNRqFNowkqh7X2gyTA4=\r\n=uGiM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa7d8d44b.0","@material/rtl":"15.0.0-canary.fa7d8d44b.0","@material/shape":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/ripple":"15.0.0-canary.fa7d8d44b.0","@material/tokens":"15.0.0-canary.fa7d8d44b.0","@material/animation":"15.0.0-canary.fa7d8d44b.0","@material/elevation":"15.0.0-canary.fa7d8d44b.0","@material/focus-ring":"15.0.0-canary.fa7d8d44b.0","@material/typography":"15.0.0-canary.fa7d8d44b.0","@material/touch-target":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.fa7d8d44b.0_1662578387359_0.16716850797932126","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/fab","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c8430e61335cd475d44b992215baa5ae6d076bf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a40e3c768.0.tgz","fileCount":23,"integrity":"sha512-U3/ENDpL4laFVfPIx0ZjF1L4N0dTFRvoqplcDGyZoqvkJws0XSQGARc2K+mkMBVDDV1mgi7ga8VyV2qCo1qxBw==","signatures":[{"sig":"MEQCHx4/IdvdaJODLOXHNYK/ZCZN56jupPl9T3voCsvnPYcCIQCA2oZUuJir0K560E0d1zRkhujozM3LVpZnB8x+6k2iXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5xcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5gg//dPrFZgy6jgDsdxikbkwV3UnZ5tVgOIyF5nqdF1lJePqLy2Po\r\nwdNPZ7n5SsnqzUm7Dcl91jKtWH5D7nb7Qtxjb9EWgtUrG8HLYx1hdMFC/c35\r\n3qlavHn94NDF0FBP0vfiWlMFtLomwMiyPqeXZ3bnnD+N3D+hpron5sRLDPqM\r\n3TCUb/MnEobqgBtw2h+qxnsAH4QXwhQfUgLKw3f5Uf7m290p+Ev91R5FWSwJ\r\nGuHUcn1WJZcEZMmLwR2fuFYLrjQvejHGZNBaR5RmPiRSNPrBGK0pZRS22erA\r\nBuRaYKFtuyLqSL3f4526PHeK0iABbHIipYYYm+6Xcmpt2Z9nj6iQ+WyNaFL7\r\naP9TPRRLAg+UbPphrTcDrvck4wdBSSryXusmkbZfUU4Eni58UAEU+OiuYGhC\r\n1V5z6h3mC3YuiTx2/dVx/59PIXs712Oj8pS6taewcp97zbzR92XLxdT7UlYi\r\nFp96g5uL5cSuGj1ncRn29NRapXMij4XCgBrqJZg55VrRcSL6qgqFvPpG8sBS\r\n6vJMlIFkOnEopJxUbCrwDIDuIWUdf0d2llJwPi5M+dS9LQAxmXofxaIqgBgj\r\nIiqSquKdZTEGgBhr0OSohxI7qw+UiwZyFsLXYCMRP6qVSMCcWCYAE6XlJth+\r\nHm7Xeebjotxvs7bjxmFqfx2KLvqKcZjL0Sw=\r\n=u3A5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a40e3c768.0","@material/rtl":"15.0.0-canary.a40e3c768.0","@material/shape":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/ripple":"15.0.0-canary.a40e3c768.0","@material/tokens":"15.0.0-canary.a40e3c768.0","@material/animation":"15.0.0-canary.a40e3c768.0","@material/elevation":"15.0.0-canary.a40e3c768.0","@material/focus-ring":"15.0.0-canary.a40e3c768.0","@material/typography":"15.0.0-canary.a40e3c768.0","@material/touch-target":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a40e3c768.0_1662753884131_0.8798419371047743","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/fab","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f7647fde0292e2d1c884cb6ea053dfccdbc741d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.18cdc9a00.0.tgz","fileCount":23,"integrity":"sha512-+sB8ytSymP9pBbmD0Hl9DrAd44uJdeCGZsihn0GvnT71CbXwy48438DwkE1c4Wip8KuMY9QIZogmApZDCkDmXw==","signatures":[{"sig":"MEUCIGlW+V/W7q7qI19UVkRHiKtDqfTkr/65zf4Ib4uoutN4AiEAqhUd4TPX0pLcu4GBKpAVDy5TDj4vL7R6b+PpXQ22n4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH561ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLtg/+IETTbd7YFFMjcBQDiTyfOT6IXmD+X0cR7riaN+viKNB0krQz\r\nj/SgowiS5x/DnWhhn4o5DR6jNwNRDSwDT9up2Cru5n5Xcn5diFBIf1KlGni5\r\nnUDbnQTqxUZO8oQUlNCrnHnQ/LnYl948lNNkesIymvS6tbh0PP/vAlOZTB0f\r\nriQMcVsRwzu5+3BQr2rZIdrxdAgPRLGMqV2X2+QFh4OA/71ibl1/EBXb+q/N\r\nMrkunCZJ35JB8YjvfSii2vAnZ/G3L68vJX8h5WmWy1VbHUCcEOyZDh0+4ubc\r\n2YjaNTjTPZN4eLsadu+74y5xKvtWUEMDo2hZ5xNFW5JFTIilHTZi+tfPTtnB\r\n/ZSxcOS0FgSpjevyeHEzBpMp2WUWapPC/tw5GPyv6zAmfvzSn+vqLp54swuB\r\nFLVcknh8fFv+qaLWgoR6ejSeLHXaSrVxyXvqcbjMCrtpYd9+guzkPmsuEFLV\r\nko6JVcsM09tHXAeVa73U2jMEWxNLHGpy5hrrRmMlfYF9dIfX1QEaKJno+R/l\r\nls4N4dkDV32K4UiivAPF1qIidjG+ikFRllTbvuGy46arbaRtpDog8OmIMnMp\r\nOFEbXboHCVJNUwEkvHeR7k7abeYnr2HcENKjwHstcT8es+NXrlh/EGV3NbF+\r\nGGtcROAyxysDdUjTSNlkBJU8z/i+tuSAQxc=\r\n=MU27\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18cdc9a00.0","@material/rtl":"15.0.0-canary.18cdc9a00.0","@material/shape":"15.0.0-canary.18cdc9a00.0","@material/theme":"15.0.0-canary.18cdc9a00.0","@material/ripple":"15.0.0-canary.18cdc9a00.0","@material/tokens":"15.0.0-canary.18cdc9a00.0","@material/animation":"15.0.0-canary.18cdc9a00.0","@material/elevation":"15.0.0-canary.18cdc9a00.0","@material/focus-ring":"15.0.0-canary.18cdc9a00.0","@material/typography":"15.0.0-canary.18cdc9a00.0","@material/touch-target":"15.0.0-canary.18cdc9a00.0","@material/feature-targeting":"15.0.0-canary.18cdc9a00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.18cdc9a00.0_1663016629768_0.9326385966396551","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/fab","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2627a0f1d4cdaf7d8c9781ad8b1f920550149d8b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":23,"integrity":"sha512-JXiSCmSXyziaVktAVVW9Ccn6tVYfENhxyus9CVBjwws/bFc5cWgBaqTzCSwEpSUPpeDO/p+hzkSIWNcbeLCjGw==","signatures":[{"sig":"MEQCIBF8DlWQu9/Fjx6+D2jc5nNl9cl5/RQ7kKooRI8SvnCmAiBP0xVZ7QoD78z8ZmKaQrHccUeUhhcKSfDE2HuFopUfuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQbBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMzg//TbuIVgI/sqJL7N+x0NRwpEy+AtlwqOwx8HF6QR+GoKzTjfpH\r\na9ayQ8XgtsAe/SQ74FvnpgdraIzTL780DWFNRqcJ8p9fNg7ujfiluGNpM+/T\r\nkzI0SnN+Nsnt9Hzi3LisMI5ocxE7fCzn1m6+i19r2r3pMncGycORcno+JOIF\r\n3LOv1d/lS1f2RLzIDzfFWG5NbVst39zNTeYGZGCh8Ahx5NgFO/dKnasI8+9r\r\nzMoVLf6R+Wi8F+B99AjTgxEYPLp/UXff04I3ihZIz8ufugVogWCAhSh6EvIE\r\nggoIEBOP8rYF90XDt4vuizqHCIhSRqcIjQHtmxLdTgQw/tHwXRxjpT2j/b2M\r\npppzTLp0+FT34rNKLgk8+X8lcJHXT7m2WnbbF/XcT0IBFJorqPLaBXNdguFF\r\nUpZvy0YrOJHWrQ+cazRCVuAY+pa1fKvswCxbChiJxiLIoGXtl3H21yI/NbVA\r\nu2qlqLIIl9JyaeeBg3haGtS1eHKBtT6yWRldu+W6oTrpjIvVnN1ZRvrhlbqg\r\nsOTbHSvOyNk4FEUYAwnNXuKq5BF40es9U88J3+S40yTAdzBIR5yyYMLZXZyA\r\n2wOMZysy7Z/n43Qk85WXsrD5J+87QiuKLZsp3CblWr3nvxdCa/0kqjZ9jnQc\r\n+lCgalytzSty8Q9QZOcwSQo4sJn7BPWsCck=\r\n=JXcP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab3cd3c8.0","@material/rtl":"15.0.0-canary.7ab3cd3c8.0","@material/shape":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/ripple":"15.0.0-canary.7ab3cd3c8.0","@material/tokens":"15.0.0-canary.7ab3cd3c8.0","@material/animation":"15.0.0-canary.7ab3cd3c8.0","@material/elevation":"15.0.0-canary.7ab3cd3c8.0","@material/focus-ring":"15.0.0-canary.7ab3cd3c8.0","@material/typography":"15.0.0-canary.7ab3cd3c8.0","@material/touch-target":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.7ab3cd3c8.0_1663108801430_0.00903665385615815","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/fab","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.2860d244d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8da81e7745c46594cb6f6c60b4109fed1949e507","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.2860d244d.0.tgz","fileCount":23,"integrity":"sha512-nl5R9YoCpum2Uq7RU10ERvTe/mEVMdra9+eu8byD+a143/NkW/JyieWbFPi+jEIeQ1kHsCWhVtlB+15iAulfww==","signatures":[{"sig":"MEUCIQCvYf+nkpcr8rhtRu0KmMfUWbCY+Gvo3IsJ399uz3m5SgIgMbP7dzJT15o9p9eer4U6wMTZo1gtNVbnlxPYPtG8sag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP7sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWLhAAmLanoXU2peZYxEc/AV2fymp38HCEC7XQ04ovGwF4SypzdkAu\r\nGnDi8qsrHSbeOlsn0v+dqFpcuM313dIOLNk1mAwPUQLCFzlJ4shQvDcodwx1\r\nQT1OM3BjnGGgNP++PLFYnZdArK/71h4qTtKoipbs5zOs7S1FjMuPxnz+nBKb\r\nvys7owtMZ5wpGdEIyAGQY2a8VH4Q/YIPFtNFs2ZbK8XmZtZV7HZ1wwaueTM0\r\n01WD+Jx/dG/P0/MoIl7EVZ197K/rVEm7s2YLKBYpaaxzpU72CKLBDzVxwld/\r\nXFEziNauN5qQyUCcTtu10acL3AmyYstWpT+Fac+7YTuyPKgGECCidoeN5u2B\r\nX0EiwLSel3RYRBJ2BqKYgE4QlP4hCOHres4+zgBjNoQkSMI9r3lAnfk8Kke4\r\nNJdXsa66M6gYXLE6FdDsz8cigrFQiXxuNWBWojfssJEyA45e2bXWRpzjFfEG\r\nNQPCJwSjgfT5O0KQZpQxQKwu40i1sKGFOnvgEkpHmqHdIJiNUKL1Ohah8x9l\r\nuxsv8tvwMNo8LpAj7JWcRpTXeUu/H4VobcXqn5mW0Jr6zAYqntL8o7rJZ6TW\r\nMyUaEnxo6pfUtKWH3GLsDVECRz/9Csmh06CiYpIXpmY/y7AcX8R7kSD84DnV\r\nO2CvWhLYoTktNycl5uBNKMkD4IjF/rp4ai8=\r\n=bSL4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2860d244d.0","@material/rtl":"15.0.0-canary.2860d244d.0","@material/shape":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/ripple":"15.0.0-canary.2860d244d.0","@material/tokens":"15.0.0-canary.2860d244d.0","@material/animation":"15.0.0-canary.2860d244d.0","@material/elevation":"15.0.0-canary.2860d244d.0","@material/focus-ring":"15.0.0-canary.2860d244d.0","@material/typography":"15.0.0-canary.2860d244d.0","@material/touch-target":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.2860d244d.0_1663368940341_0.053767632445615776","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/fab","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.e8726533c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3dc5af716c9c1e8030135b6cc42fd613e486c58","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.e8726533c.0.tgz","fileCount":23,"integrity":"sha512-C8w8LlqU6ATmKDu6lLdkiGiqHiBLTY5hkasaPiMfVLLVjy0DoIt0qg8bFZ8qebyEBf/3SOjKSsEkeCd406Pylw==","signatures":[{"sig":"MEUCIQDASiNlfwCMT8o57gVBLx0bIIh7TMgx3RZt4H1f9uN1OQIgC3Okg5Q5x+demQNwE65Yfh7KQmjNbusTUrND/4WfWA0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiAYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQkA//V6ccWXt3+eCbdMcoh4SpW+WMjL5oQ8+dYfDz2CAvw/rwnktB\r\nOfMWxS6aNdvhAbiSbGWeykv3LVFhaSfJQNSgF9jZeuZXAYr7I6Zbl5t3ONiz\r\n49gFAvKsmNum1o4buXc5gF+I9jQXofTmPF4yt1eGeniqyOS+/rW/LCn7njfF\r\nfq8rAYWR0VY1rP6ASRv7fO3DYEJ0neSzdSbdVFAqWHTcwMbll5yQE0Wlr9+z\r\nT54sm5XrM1HGiUbYtgFnGTySDgRTRA3mk9irLr7+aRT2Ose0wLKmaSUCXhZ3\r\nVTIDn6+AecqHhoHN5GhqIz+ev0RGPtab1F+SeaFIEMFZPgJ79KqPlXq/zqNF\r\nNMZu+OSqoa57Yb4sLVzePw55mpmaLUAARwoGMIS1c0MNSuwZdfFPHJeBnSvC\r\nGuJyl3N7RFwclrhvojGOdzs3SlPmLbMvQ05R4EwZgW0MTGxwkZ9fnKkkciIG\r\nIR3MnGeD8Fh0lo2q4VJVk8PFIEcYwqIOqU2iFg9URiff4YyDUK1mpNxXKEut\r\nlt0Ppc/Hz9wk74SS/ujG+JP6UoXPMEioIpD8BevSs6atJOiWJ/yWONfwoVVj\r\nIePGnTrfZpyGMi0ScHgJRPXWmnlKdtgsHYxTdllCOKXjKvst2FrUfkMyaXM6\r\nWAHHLLp4PcP1EG8ubNZdbIwxGFcI/A9fRs0=\r\n=N65u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8726533c.0","@material/rtl":"15.0.0-canary.e8726533c.0","@material/shape":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/ripple":"15.0.0-canary.e8726533c.0","@material/tokens":"15.0.0-canary.e8726533c.0","@material/animation":"15.0.0-canary.e8726533c.0","@material/elevation":"15.0.0-canary.e8726533c.0","@material/focus-ring":"15.0.0-canary.e8726533c.0","@material/typography":"15.0.0-canary.e8726533c.0","@material/touch-target":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.e8726533c.0_1663705112039_0.1546529645049215","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/fab","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"357c1889749db8565078db4b577615698cbfe0d4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.00d8de0aa.0.tgz","fileCount":23,"integrity":"sha512-ylCSW7uc5cAwphEr7Fng2vn/RFIEJweNmuBZbJzAJS3c7SYoBhheAxlMS4jNwntyQt0Hnb828o+aQdLPeRbK2w==","signatures":[{"sig":"MEUCIQCo65RaUtjy1m3BGVeni5M7He8WdqE1m24dCCGKmFoiwgIgaS+5x+ujwT+yFIj8pFVucnKSy1viGblN+/QH44ggscI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyvvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGChAAmFcxoR9hwgkXk5WCTnF6QAotNbJU7J49DsDe+uAAdSFU8oEj\r\nhYpJGvggYfY1cLFEvd2U0SbCtBfLFMjPUpMOO2nWQPCvTPqk2Dn01BHf93p5\r\nJKhgbjonpBRutINM4yceaeUqzk9+DSVFM5JOYoiFcLabDRlD8kvpmByN+URy\r\njzUVY4/7/Wys0JUMxvAv85x4lui/TpRl4+/9Whhs3IWL+vVmcrN2fbBIvYOh\r\no5QGVyWBiP/+igA7c2vID24atLEEES/oj1bqxR/wO6iBjaWuCp6ar3/ygbdj\r\npPLekNLXyC8TlpQOkr+0sESdgO5VjuzbUJKULL5MXgjOyCHrqXFUadirC0J2\r\n3E2pFjC5cnIyiE+6CuvmQDwvxM5Ch0LeifOk4Ie00AGz+EfxCrxKtaO++kjp\r\nKh+XgZ7nbRnORrzMfAAfvkRwAT49zoU7q8I5B3Byrv4yHHZrST2Wrbcgp/jJ\r\nB+S21NqPrF1lB41HHUIEKIkFmek538DzVpJxub4IUq7NT42pEMflvET063ys\r\nyeWOaexG3eXUD3Jq71JEGAg69EKW3eqSCf1ngYYT5DOZlb+KpnRtPm84ps1V\r\nD7Z7Xd3x2mvnYaF/PuH7WuDK439UfK+AfbF+8L5EBYatSsAX+DPVmNgFMbk4\r\n2cj6QtPE/DQ7UJqKIzKY3Lmz4+7HfVUnBvU=\r\n=/G8Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.00d8de0aa.0","@material/rtl":"15.0.0-canary.00d8de0aa.0","@material/shape":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/ripple":"15.0.0-canary.00d8de0aa.0","@material/tokens":"15.0.0-canary.00d8de0aa.0","@material/animation":"15.0.0-canary.00d8de0aa.0","@material/elevation":"15.0.0-canary.00d8de0aa.0","@material/focus-ring":"15.0.0-canary.00d8de0aa.0","@material/typography":"15.0.0-canary.00d8de0aa.0","@material/touch-target":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.00d8de0aa.0_1663773679129_0.10459692967627099","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/fab","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.271aedc30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52045c2d07a95357973163776130e87304a4992f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.271aedc30.0.tgz","fileCount":23,"integrity":"sha512-RT0KTPIE1NAbk25cpJWf8SnRvZId2DZ68Wjs9hV5MHIPloScs5badwvkS7EDZn9hxHaAwwzC0tdXgEr8BlRsaQ==","signatures":[{"sig":"MEUCICYn3rCu+hpcw1hhrUH5wLgaFukj0IAXTPR19xZ3ruxMAiEA2pGzQE42PZ+cB+IS66aIyToFb//TpS+wBUsBcJLVoJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy+VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+IRAAmPrJznB9aJ6BqApZ2Y7sG+HLlrUwdxFu0fDZ8qbT/EiVX7o8\r\nXAERabF4LWnwRPsVjQs5379lUOQg9u4BFif12i6xAnUJZsOupxwKB8Xdn8zZ\r\nWGSHLdl7qObMXyvafaDcNSGGKqZnFM55bIA2RCtdC1tNrYpBTjj6VlT7F51M\r\n4Y1wIISS/aWT/nTNhOxNw8vQbklaxiiCplMbO6E2u7nrt4qcfAzen5KAeg/n\r\nKqbAvz0Qm4G2nOW4t7om4KDODhGVysyjHQXG7CzMRQ3FHncAXH5S9AsaM26z\r\nFPgAod1wAwCB2cggaKV8+X5qz3Xh3k8rbBVioaMc4P4BZNU50BWwJsECLrrs\r\nLMuvcKiseuiAkMYpM+Gi6XDgEGoDmnQAfcuRrvTbcgoWEr3pb/GYvuO5Fknq\r\nCgzRE074DPHXUTe3gK2OwnfJQWGEUBN8eUnYiWi2jWrRnot3Q74mKu5cD50h\r\nHVqVkLLblaBEQKs4jrL1qYf2t4f7Q8FbVZrD2/WzJM/G/8hawQyfjvFVGpp/\r\n2okMh8k6M0js/1q+K8j11E37h8fcHxOP+DpvusJzK2qYGLzvFT41FhqVCidn\r\n0B7Aah1FIdBN+U+2ImS9huLMk7I3r7lueN0gh92P9b1eToCrF6zZ5uuXl7eL\r\nqHtVIYB6chacbUWPUN1lzMDjopAoVkzJEkQ=\r\n=Jr3+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.271aedc30.0","@material/rtl":"15.0.0-canary.271aedc30.0","@material/shape":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/ripple":"15.0.0-canary.271aedc30.0","@material/tokens":"15.0.0-canary.271aedc30.0","@material/animation":"15.0.0-canary.271aedc30.0","@material/elevation":"15.0.0-canary.271aedc30.0","@material/focus-ring":"15.0.0-canary.271aedc30.0","@material/typography":"15.0.0-canary.271aedc30.0","@material/touch-target":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.271aedc30.0_1663774612925_0.8528320555346143","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/fab","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37b58bc72c2f103b6b68aa6dd2653176303afe2b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d3344c16f.0.tgz","fileCount":23,"integrity":"sha512-oxboDRWhBggyKX0IuDuTtKXbftwTu5yquEhk1mRaBFCMZj+mGvjexflijQBIj0/BGwtocSDOLwRnMxVYTQQWvA==","signatures":[{"sig":"MEQCIGkl6RQGhzUFYRnkHAeZoibO3HQFpaKxhVdxHNsnYMNNAiB7LEOkyWAfZcQx3+1gLB7N68fF3Lwe/F19Et7mNHu0cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCn+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHwBAAloR0jzEjaL5/Iv1Hj7LLUks3zAI6ivfb2r6VgSyT6gGKeXAR\r\nhKkSEkzRk2T1xMIWnL5L8nXXoEMfdqQoZ17SNTfeyNHHwd9WamdaGAE6++6m\r\n4GzBekkcz26NNHHyh1h9pnoInb1/+4bEbCmQ3mLodC9j+9fWOdJKzOSkovhc\r\nK1X59Q0IZdItulJVPQLBrkM3oRwQ7SIdTl7R8Eygzi13/DD/enSu1xW4yLWf\r\nr4OwfLPzJmDTsajSAsvxuQHs07eXxQH/i/mUS0nSkY+Zcihzny7vB+gxbPHv\r\nszZhihzVyM9PHDxq4N0MHpd1iSlk5+mXC8mZpYFQIQs9ep6kzMoo7v+gwEua\r\nDnEovhpoQRXKziFpxLh9W/ssM4L1kMyD+IQHH2DYP8GfQkwVK/XI2UMEExk4\r\npcSMN6JsFW4DMLHOc0ncE+a3wegxouACaCSQkhH/DJ0P83HNjrmPweuwhDcM\r\ngbJJVeqmiZNDgtjAY/7oEKYUN8dUg/6Mr61I4mJZOp9OJWYrTe/nMdGcT8uu\r\nLDEeEpw2EVxRhDZnaxZF7VoernEjSPlJa6+wdUea0WTjWTlc7Ff/lqH49kPv\r\nYclyBQHuYdyhbv5gnSdQnQ/RKUf456BPxlkHgEws1P0QKXtd5/M+r1kKXjQF\r\n3oaUUPZT7yhsXE7fmtX1dfBxO107mUlYadg=\r\n=lDO2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3344c16f.0","@material/rtl":"15.0.0-canary.d3344c16f.0","@material/shape":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/ripple":"15.0.0-canary.d3344c16f.0","@material/tokens":"15.0.0-canary.d3344c16f.0","@material/animation":"15.0.0-canary.d3344c16f.0","@material/elevation":"15.0.0-canary.d3344c16f.0","@material/focus-ring":"15.0.0-canary.d3344c16f.0","@material/typography":"15.0.0-canary.d3344c16f.0","@material/touch-target":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d3344c16f.0_1663838718721_0.1432209806699869","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/fab","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6219d7ba298ddb2a11be3a287fdb31cb21e54fe7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.94f20ccb8.0.tgz","fileCount":23,"integrity":"sha512-a0BD5/Yv1jEUxvBZXe3oeASyvc/ZqTSMrSagWOIjluIKmtdXSrgDxFBW6ys9z5pJNoJ2nwfTfqUAX4aRnX8C+g==","signatures":[{"sig":"MEYCIQCZCRD073CPzSZ/CDT023MQGb+Y8n/be4kTGWw2I88emQIhAM0mYgNY3Sp/1b7VPG7rlmXGG7rsV0ZrFfBmfAWJdwkB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMoeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpumhAAmu3Yq0OmGLVmX0upCQpMAxelr2fwpBnzvQMDu2CyxXsyf8lr\r\nq1lKTBiutK6486tLd++w0sIrJfy8r2gELp4w3+VIGoFakhaHZZacBx0aY/cq\r\nhStFebJ/D470rL5F3WrufiP9krqc4JehuKBBMf9M1Rt6pDUiwhrit6dx6sJa\r\nZ24+IVP6RRs+VYw9/ywwCt8GzeO7B3SgTaLfi2pFm6mX1j+NhYjA2JI58IRB\r\nEYJie/pQUpUuuBZ5qtNOMh7ppNY86flStSlST1HAhctUeqFsLf1BrVi4Auuh\r\naUkAXw03e3BZB/cyO4TL76O72XcjddGT1xNp9QroFABF4H4dhXEdgl5nknMG\r\n637HLUpxZlTOztQLK1T02IFm89gfaghByxicq/e6qXWY5kSNwtOwUEZbk/8e\r\nZdT3vi+BVGUbZaVERtuRIexm7kapJp2QfIAHiSZgHRIpPFEb/iEyPzUdxoVU\r\nsQvwiVUSddwSxf/3xYTHpu0l2jb7af/8PYDRJU4ZEPBP5kZaghRDTK8RjX3/\r\nPmPhKiH8xIpIuG0WSs8Cw7LxPz4YHV5XxgKsKfrDA+5GdFafnCYWnosXGbC2\r\n7eBVpfn5o03HAebPeIUchXl7mU3qeB1T7kPJQ759T6PsGpwRJKn4pv8IH1c9\r\njfrea0eg9Rpy5ajbY1B9vYvAg9bN7zJJK2A=\r\n=/tBQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94f20ccb8.0","@material/rtl":"15.0.0-canary.94f20ccb8.0","@material/shape":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/ripple":"15.0.0-canary.94f20ccb8.0","@material/tokens":"15.0.0-canary.94f20ccb8.0","@material/animation":"15.0.0-canary.94f20ccb8.0","@material/elevation":"15.0.0-canary.94f20ccb8.0","@material/focus-ring":"15.0.0-canary.94f20ccb8.0","@material/typography":"15.0.0-canary.94f20ccb8.0","@material/touch-target":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.94f20ccb8.0_1663879710578_0.014392136577465742","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/fab","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e25fb83e592aff40a36046ad61a7b42c1575f57","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":23,"integrity":"sha512-L2z+rdqErd+skMRBC8bPl5x8SZ6zgxGqdfuQM1Q2+/xul3bDQ/0Awbs6i14ahoa6whRtY4j3Z+DCHhz2Qfi3sQ==","signatures":[{"sig":"MEUCIBYW8Ebrd75kdv9BV/D/qgv8GSJMth/egf/jINWGaKKUAiEA8cS33DqrPnUhQFfhDzAmIyvcvIzzEz3LMznGRQmET70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcwKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLSQ/+PUgjZyEtvCwiTVSXMjDBhS8BRyNvTndEVWtt1crbXOPR7I6O\r\nyzSZAZebmbv2yUyqz1bY7ZA/TgY8Jo+w0fo/pHBPAQOgCbc/AjbiNNR/NmfI\r\nkkmQf9xeXiFuVFE1TxjtZFVviLDxTSUdkcRLJTyRXdC+sqJ6+pXKiA2j/m+C\r\ncJmgBaTOcBmLd59TzfQiJ7TxpnMR+OUipZEpZe/RYmRMumv3I3XRmQBemxDU\r\n57GeYHlWlhvCF6ybpMI82QOdliAJq17CCg9LlkqHcAbqUPdZ8LvLxQlHV6+E\r\nrhEWZLTjhBP/zsxtH7fWXA80SDIjCjpMwHBmwJ61KyMUuRpUgUW3q1Lt9JGp\r\nD8q9ybKJEF8c9/1eMklxlHKQVo9gdhVAf+GrI5bJqKAa3vhlDn82MmfFYD4b\r\nsZh/rrmhXgcjyinYxfUJZsRz5epoMIgEaP+AoRPlN2o1yC/27V7bH7E+tWhe\r\nLtOVZZkSD/2wQ/BZR+GA3633sEIzwPZ9l6XGkknLGvvTSCtsISJrxGQ7MuWW\r\n4W4Or86gbu161kiqgir95nucEMEPpjgdtMTPr3rF9FvNREmj5fRvwig5pNwt\r\nO6HVUlnKce0TxmN6mE5+B5izxbYCgOOxM1KwnkhuIk3HHx204gvzlwUI+WTU\r\nDiO8u5clYAVZZPWWyJDHjAlfiIQIxy2sBXE=\r\n=S8Ll\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.81e4cb7b2.0","@material/rtl":"15.0.0-canary.81e4cb7b2.0","@material/shape":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/ripple":"15.0.0-canary.81e4cb7b2.0","@material/tokens":"15.0.0-canary.81e4cb7b2.0","@material/animation":"15.0.0-canary.81e4cb7b2.0","@material/elevation":"15.0.0-canary.81e4cb7b2.0","@material/focus-ring":"15.0.0-canary.81e4cb7b2.0","@material/typography":"15.0.0-canary.81e4cb7b2.0","@material/touch-target":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.81e4cb7b2.0_1663945737922_0.44984044581875904","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/fab","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18f443fc4128b488ef6183ed50b001b810d03ade","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.aa85f9413.0.tgz","fileCount":23,"integrity":"sha512-3ouJVb1SJGLDc2XS9Z51JeMeedpe66Zdc34xJUDuHyfgTDqV5s0P3ckg4QMNeY0bFzmWs1v8gJNUVtNY4Z/ZhQ==","signatures":[{"sig":"MEUCIQC4QDRyzthJncUULlBZ1JyWuuqj34m7Sqk457m+mpS+ngIgXslf0TeJceQLAlpenIDhbIXLcXVwh2vRAIcS0o0CwKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMef3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJwQ//SXtJEULTV8kaisCQrcME0gJhEVMFMY8XtALWxfuePcIFCCA7\r\nwJ2ZSWs43iVqqILvOzPGfXd4oaSGNFFIX/d/X1WH2vwI72Qxd8rwNwu1wLKA\r\n7M+cmhH7UFvjTlYQbUGs9zDXRGMD20nXK9FupUmoINvOkx456Mk/MfIwimU5\r\nohpntgSUne1xp1SqC0tDAyoVVSdLSEY4hCZReDoOKlUoJZj8jsrE3FcibD+/\r\nhMQox4Ygljy93vyuL8BsmZ/5YjYn0Z1oFcuH2QCvQgsWG1jFu8OlHzH83jHa\r\nnI1PQK7mWcL3DKIkPC9amjRMlMqgP+RDpKLPkcnfCx3JOzS7xLsrTVvcOSf4\r\n326nUeNY8lDXFr3Nb4eq/no49a8l0MzThp8KfsaBvB0XimuRnCtm2X7DtfE+\r\nOIFHLneaMNy+nZOKiw0YL27d1PaHLOIuZyw4GveL0xBgRIvVdva/uo6TOBDH\r\nPmxc/xyvoQpIawOVnQ6mR7XlOZNNHPtihXaIhWo0e9vclF9IcOGeRZmV0g0j\r\nQnNUoUmHaiILgB3bTK6YMmhA5JY4kjCyg8GJEtpqrere4BC40VoL6xju+Jtu\r\nLKRZOUt2ITjHXE2MIwyQOERzkbXp++DZmFAKsZYvIYRHZpv/fy2IRzOYD/sz\r\nKFPyqDJGWI55UqWnjY6tHC3pe72uiRO/P8g=\r\n=8X7M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa85f9413.0","@material/rtl":"15.0.0-canary.aa85f9413.0","@material/shape":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/ripple":"15.0.0-canary.aa85f9413.0","@material/tokens":"15.0.0-canary.aa85f9413.0","@material/animation":"15.0.0-canary.aa85f9413.0","@material/elevation":"15.0.0-canary.aa85f9413.0","@material/focus-ring":"15.0.0-canary.aa85f9413.0","@material/typography":"15.0.0-canary.aa85f9413.0","@material/touch-target":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.aa85f9413.0_1664215030852_0.7283227790853903","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/fab","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.7134a7752.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"572669872a0fd4b26277a3ec0983e015360d75cd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7134a7752.0.tgz","fileCount":23,"integrity":"sha512-Uscy84fbL4u4fDWeRHHI1H2+YULJhNlB+3kSEFnTLXg0DZ1//llB4589WEmetUDOlRjkZ2bXbTT+h0Ir2jE6jA==","signatures":[{"sig":"MEUCIBvHfEsRjI7xVuh9RWXN30PlyvPXwYfcKDcMneQzshGhAiEA1rtgGV7TNcL6mDrQVKRdmHxtGXkAQqubMjoEaD9MXr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiB/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDJw/+LsE9PugKfcO64w9rGVdbmQ2cNjkuXazGKwIVgpisgosu+joo\r\nl5UEHzOMIQ6sUpAz7xb/0kI8e6HNMlOl87ULdLOQXKuIBrkZCEaZGPD8ybLn\r\nvrdJrBION3bG7T5lQWjzkWHRmF580Jq7PZqUyEfyjackW3+tnu9iG8C71ulM\r\n0gyBnZu1+O/yKDe60pnGvewp5bhkUfcTdRNWge8YugkoSsWh/wW5FuQSD8gw\r\nd0he4ufVBgbfMNvW8EgUXGa4bMgNY0QRqliuDvYWIK9MUiBGoQxZLHBj1chL\r\nAztqbCgI/3S9ODSfPtNGNpHbITQCuTtttrhxOkC9TvISo1ZFPukXQdyVUqHz\r\nLLnbqYx+nPebfctXS9LvjTiIlnu89e35aAKwydzFZN0cYHgt3XBEf0dYBcDA\r\nh5sz4fys5VUu1aJ7C/XMetvLL/HiCO8tdyn5WLcSX77GEn4qHKnLZbdDgQVY\r\nNaNy4a2OPwdqD0tqBPJ9YRfJOo0ZpCAggTAf+rOU6Fl44xvbMfJ4cPLtJIk1\r\nOpoR49qqlmEB0WXBJYG1ICyv60CsrgHEClPul7Wn4tQ3tJ7VEMl6eMUFxN3k\r\nuihgea42SiXoKpD2nz+vyrR1rBQHkgSrVipCqUBzdOgY4fXUqS6Ox5Hqxn9W\r\nG/MTiiSKnZIiLW5J3gy19tPPKqv5Ea34gis=\r\n=OSM5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7134a7752.0","@material/rtl":"15.0.0-canary.7134a7752.0","@material/shape":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/ripple":"15.0.0-canary.7134a7752.0","@material/tokens":"15.0.0-canary.7134a7752.0","@material/animation":"15.0.0-canary.7134a7752.0","@material/elevation":"15.0.0-canary.7134a7752.0","@material/focus-ring":"15.0.0-canary.7134a7752.0","@material/typography":"15.0.0-canary.7134a7752.0","@material/touch-target":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.7134a7752.0_1664229503181_0.4187261275095848","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/fab","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a268ed544c5042f82accd77ba7dd736519d9b45f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.70b8ac16e.0.tgz","fileCount":23,"integrity":"sha512-G/e0DfKBXbFuNCXpMN6JCfKPE7+Z13ZJ+4LB6VvuUmcmaEf1IwbBcH0uB9xe/rHSf50sERJxOhovpQ0EMO9myg==","signatures":[{"sig":"MEQCIH76+NHq8oByvkRIFYfc7bi5oi+FOyJ0fU0UKRBFgUU2AiAkhevGZsVCLakQQiKvP7kymZ0qWnUI+QxF6sPW7eEqjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM30PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWZA/8CnL0LC7vx1O/PX/p1kYQnoqLP8LMOhJ79SG2GPW15+tYS9+B\r\ninPnmo5gB4R9cfDUODZ4Pa/KnqkLArOucWZgh+dWqSUNorJqKn7QdVXd7CX6\r\nCEWd7AdziF4v7Ktd9pXKoAsl2MTem295OKBOGFNDIs7pRmDcRWK4nBfXzyZO\r\nsi+QDFJlTnFcU0Zj3+PjY3CE2IKH0XkiEoSXaZaxdBJvXb4EG39SbgWNyvUP\r\nKzfAITXvC1CGQWYA4NXvj8GecoHEvQpZqV+HrSfhYZP+gSp+nBwwkylVpKnT\r\noSDQpry1eqVVPQ5KUfaH8Lr/L1osPO615/mLkDeQBn/mxmtQrTCOVFfm55HX\r\nbc7XTKKqaeLZX9zMqT6WBn8BYFaHxCnNL90kUeiEtQp440Dadulg2lQaKh3s\r\nbIalGpAru00vn+GQAgqamNeTGVMYs3QrjT31gDZZtZQEHeYjiJ+Nc8V2VH9j\r\nMJLGD7DxVEXIq0yAyVBfHpwcKyNUslKHVinEgax9Alr9V8yr5zuJxYttiEHz\r\neQNtru8QeHzwlbkCFXolFxxo8IdkJtdt+e6DJu+IQdTvW7Az/z+4Y+p81ae/\r\ngyXyb9s20YpDV50deupdM47TFeZC26Oabcm5d+3qd9RrlfpEcIR257DiWdyp\r\nxnR0inSRN9Pp9pV5QP35IJfdYULUEyHVwMc=\r\n=E7Zb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.70b8ac16e.0","@material/rtl":"15.0.0-canary.70b8ac16e.0","@material/shape":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/ripple":"15.0.0-canary.70b8ac16e.0","@material/tokens":"15.0.0-canary.70b8ac16e.0","@material/animation":"15.0.0-canary.70b8ac16e.0","@material/elevation":"15.0.0-canary.70b8ac16e.0","@material/focus-ring":"15.0.0-canary.70b8ac16e.0","@material/typography":"15.0.0-canary.70b8ac16e.0","@material/touch-target":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.70b8ac16e.0_1664318735088_0.6619274420022556","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/fab","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.c20d74405.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d5a396c64b217957f9653445e524cf27129f2fe","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.c20d74405.0.tgz","fileCount":23,"integrity":"sha512-N/Mro0jdrtsyzVkT7by6/B5berGOwg6aFyShnCCGLU+pKToSSXFCLCgiIAW8bCaglWOQS5KTCEAbxQ3f3djyaA==","signatures":[{"sig":"MEUCIAp8EhLQ1Ra3FPYkEJUprwkQEFvONViwcVhPO5IKbWeGAiEAsDJqz3juvPLHag+rm2e6mjfvRLTIq5x1RVZPmrY28FY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4ftACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjcg//ZcHRig2e5oxARn36W2QFj/55iC4/gsF7i4wE78u7YsG5AVKc\r\nRUeo9B8Fk+OQ/xnoNqsx/30wdCEikdI9Mi3tAg/Ig/uWaC164eqyo4tytOY1\r\nv6j0DRjQZeS+QgMJWzilMarFXyoMEowzswS4pXGyZt9UFk4QgAin2ud85tMk\r\nEo+hjyBztYzVIEfyo790JMaQ0izsQZ0QPSFXtW+uDCBRuidUgFiZINvnmxMe\r\ntB6ao3NS738Z7XN4a30O59eJ4koe4NL8m+ETpKtg9RBRnLfsESobZ02ITJby\r\n1JbVM2zhwmI0kcbmRMWj4wg86iNMiKYuMOXF09DVKctqRxsTPXgZXBXqvnzX\r\nSGZilCP51R+gHtkyPruaXoZhTaXNsBqJmGJ1F+M016awallnyz8AiFTF/xBA\r\nic+5wJTS4/R1r6KNJ8/zUsizBw3e1nms0eWqvSdToOQ3kteHmzl2PgZifu/h\r\nc4W2+Znu29pHQKR0KcDKlG/b20738kf93dIScWw2GYlK85f9T6pjltBxPPkK\r\nEczwhxDd6z9cs4H/TLswdkUDE505A474uE7GxEVOAGf/Ta0msFNOGNxNnV/a\r\nVUWNglnORWBY87sH3ONkM+U3kFzUJIlZuTdhkhG0/1DV5ZeF5iPF64ZlFx1l\r\n5/a799hhG21vnW01494wHuo1Pfp1sBuev4o=\r\n=Xw4+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c20d74405.0","@material/rtl":"15.0.0-canary.c20d74405.0","@material/shape":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/ripple":"15.0.0-canary.c20d74405.0","@material/tokens":"15.0.0-canary.c20d74405.0","@material/animation":"15.0.0-canary.c20d74405.0","@material/elevation":"15.0.0-canary.c20d74405.0","@material/focus-ring":"15.0.0-canary.c20d74405.0","@material/typography":"15.0.0-canary.c20d74405.0","@material/touch-target":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.c20d74405.0_1664321517344_0.6264872742030301","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/fab","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8733a5098e2a729d4f67ab8f7b870a623dc835b3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.f033fc8d1.0.tgz","fileCount":23,"integrity":"sha512-Plds461gcxs0U9CeEGINjSimeoszAoSc8Yu0mqyFA0kp37lkuvRza20589ZjWWoWLkKG7aJaVezJ0BJ4ESpOdQ==","signatures":[{"sig":"MEUCIQCO/+lfYDzNUUIBuvcCIhlAUjO7MP+20AYji2RU02mnlgIgaQJ84U8LUYoPiaAIE3zqxICn6DlfFNCMLlLttz0rNYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM44NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2ThAAg2avd2c1miPctl1JUP9e8xOsdEqrfdZZHcrTTvKbPi0PP7Md\r\nn1X3hxotFTcfyhcAVWy8rNhJ90MytafNZ45lSHDIM8K9yp+AjFwy+GQlVi+M\r\nApSfMiHLl325zu60jSNNi09vaBGeQK2u0M37Yyu9inAXUQKrqbeeGP+j+3XX\r\n0CK5h4+7dsSIdkOoF+oaEFZInjVL6LiXb9562fPhDTXsSqBfR/zERqFcQ0VE\r\ntJj0/EJCqDwxEWSk8b9Nov8kGnWyNkFpc5RVZ9g+XZTFboUqmk7E+BZNnHai\r\nszcVQCXXP+pBP0icOfX+V3vTkUGSL3nJI/+LOMrZjERmJjIgj0ZobHmBIjn8\r\nC/pquk8oUFpxkNo6TNiEjZF4fwTiwBI69Z+iKWdQl8hAvfrD7pjKRUl/Pfk6\r\n1h83InSDHhpzXRYelxZTprvcYGUgR5ZGEY+WN3NRSBSjRLR5A26uFV1Y8+R8\r\nfuqLfBbDSgGIZ0Ah1O8qEMjO5b3+18Tax9+uitte75wkUGmf4TDHbIAvyY4g\r\njj8HItfCuoR5f6qL3CmQMfKHR4XmAdR3yf9+Fwuw6DP+10paU+uuIX3NJB0P\r\n78z5uHi8+AdPkooy5vlzwfuAre7QuGxSY8PAM9L2aOITYBqxURvRTjxvcGyg\r\nYduvUF6/1Lci68TcJLNTwx3JhBj9z6yCtBI=\r\n=/EAF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f033fc8d1.0","@material/rtl":"15.0.0-canary.f033fc8d1.0","@material/shape":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/ripple":"15.0.0-canary.f033fc8d1.0","@material/tokens":"15.0.0-canary.f033fc8d1.0","@material/animation":"15.0.0-canary.f033fc8d1.0","@material/elevation":"15.0.0-canary.f033fc8d1.0","@material/focus-ring":"15.0.0-canary.f033fc8d1.0","@material/typography":"15.0.0-canary.f033fc8d1.0","@material/touch-target":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.f033fc8d1.0_1664323085345_0.6331926807955535","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/fab","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9e1ac022e81dd8cdc246dbac473e89bcbbd3c90","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.8d7ae912a.0.tgz","fileCount":23,"integrity":"sha512-dytFOnwoHbEl65BBuUV/Rx8HOyAiniYFgqkspOA1jjVt03ylMOLJ/bO8Rub7+F4ZGJTbYSMUdkIrTWhJeMfSag==","signatures":[{"sig":"MEUCIBRTzXNCUGrMnA9ac0KMoJ3CsgTXOEXTP2Mbovl16Gf2AiEAmZot+xnWYM9jcpR+gWmQ6ZYWx5d4HND4P9pPw11JbTg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/5AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcUg/9FWWM3sNzGOJ7tCKsdGTXCtqooZFlu0zuiX2GBzS2YTfzKwpj\r\nFiAAKX5N8ctZTsBqPXvR/KPcz5DDsxUEPu+hwoeVtAQ94eN8YOFGP0w5plFR\r\nBzjJWAgGt3kHKvQsxzdrPTU6qcg6mVoxjDwX94KMZHZW0D0IEK+7LQKbXa0X\r\nJ/uOFPQcdf6KgrwKOMP6e48BlcDBGzzgu3kq6prEIbRB6VnuqinJ+TeLVw43\r\nfaE5gguvugaF5QRb65r5tDXF+U/wuLU0FpRSzrB4ZMMnJ5Vf1RaLVdMmsSFM\r\njWwKI0URFQrBqeUxoR4ocfHL3pDm/N00y1/rWaiNADWgjDmzx5QPwBB6uQda\r\nIuuTyFL0UPE6HGwZgipxnaaSUmRS1g8vKLOTprA1FGv+GrERSvcmpKW2CQoy\r\n+KNcyUsDA3+AZ7oLPX9RDpv+YURjcxIsjN8Xd4kGSb8hUHXr9nqEhEbIRzxs\r\nFETRhzuYHkP26rjEKAn4DFQylIA+fyapSNna3N/RjBt/9PP1IARluac4Grj2\r\nr3WYzBLwtQx/cZAPDF5hPn8AD1Dn7WDO6d4/jxvvtK7WdXcweghq3LeGG6J0\r\nI7BowX2YQV2Bx+BcCI080ogI8HO4M+BXHsgfnTYNyd5w46AXWGUxcCX7g57M\r\nFHcwdHE1XYJtvqKDmVwgswTSsGl//n+vCfY=\r\n=2Opl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d7ae912a.0","@material/rtl":"15.0.0-canary.8d7ae912a.0","@material/shape":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/ripple":"15.0.0-canary.8d7ae912a.0","@material/tokens":"15.0.0-canary.8d7ae912a.0","@material/animation":"15.0.0-canary.8d7ae912a.0","@material/elevation":"15.0.0-canary.8d7ae912a.0","@material/focus-ring":"15.0.0-canary.8d7ae912a.0","@material/typography":"15.0.0-canary.8d7ae912a.0","@material/touch-target":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.8d7ae912a.0_1664351807907_0.5387193486900106","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/fab","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.db414b864.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d587fe177626572a05189d6111385632e01d6e6a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.db414b864.0.tgz","fileCount":23,"integrity":"sha512-9Fc/0CcIKFUqTcTNTbBxjGz8O3pIRpsdEtaF82Ra8YRAHaF7rUoc9X7c9Rbv7He62JQTfY84iuds7hgyufLqNg==","signatures":[{"sig":"MEUCIBYFXtGoFgJI0/MHu/k+m24BHtC9GbfR5LwriWADR/L0AiEA3uLOQZBxd43avIDyMJqQ2FzIbgIstdYTOb01uZFrfyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF/mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFzw//ZZKx9vVsb3vrAaN1Ul17dZ0iIAjbE5c8l5I/GF2lnaujsjfG\r\nWHCQd7vj+wxopHxnBPwAscS2wiEX3oHZWCmVDfzaArvpUdJNGz9Bv/N0MU/k\r\n2PRpcNKSgjbJOaeuwZDjB+zjt6xDV8h9Oui2DbLPALhiKf8XxoVGJ2re6Vre\r\ndaj1UQ5Hffy94AcRrNmDKdGaQ+BUg25vcxuACbRCRiXb4w8ZvlRtEEUT2rAP\r\n1Cd11KParnOPTZjzD3McJdOL59Gjhod4duBdy1OdutFHOcjQ7z5egv7z1IEw\r\n/TF4+aJzIuFb2nozow/rbgW4CP0tquZBu306llp/6PBANH6cCKjswwp3IQjh\r\nQ0cohUkduv/zXpi5nDUGIh24HppHRUaeK7d1njLgGTKhWowuIjINaegK3zdA\r\nSamEeTHCoim6lIZ6e6gLLB/V8BWzV8YPFV/z/MWO5C6CbzFXvSBa6tDTYp9M\r\naCYfGZ4Sdsa9n2gwZ+oxrpCVtdaFDRE4544Sp2gkC0THY4PH3Jt//Z/+cmJJ\r\nEzi3Yjl47xcye6iwDNUhuV6zeTZau+hdcumiRltqS4J3ieXOx/VoWJLactzg\r\nBV2b//al06PKlFx1NXdo6po5T6LIIXpib+anJ2/o8w0AwmdSf5B3uGKGwDen\r\n4kqOsJgSh4dlRkXhEmFt86wyFvW6xv8T+Wc=\r\n=RQU3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.db414b864.0","@material/rtl":"15.0.0-canary.db414b864.0","@material/shape":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/ripple":"15.0.0-canary.db414b864.0","@material/tokens":"15.0.0-canary.db414b864.0","@material/animation":"15.0.0-canary.db414b864.0","@material/elevation":"15.0.0-canary.db414b864.0","@material/focus-ring":"15.0.0-canary.db414b864.0","@material/typography":"15.0.0-canary.db414b864.0","@material/touch-target":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.db414b864.0_1664376806741_0.12093328958198923","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/fab","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aa146f19388737d7a5cec5f50a025fe419452a7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.28cc6791f.0.tgz","fileCount":23,"integrity":"sha512-XkNGWVx/UNdCUaB2YsexKS9Fc9AR/Uz4cqkGWlu2DhAgSpZ19sYGf4yu/LnlRHt94kr3GjmSG0YOqWaIDukvSQ==","signatures":[{"sig":"MEUCIQCjtiQVWXE8h1418JyEkO1E6Bya6HdsB+14LMCF0OU7vAIgKcfnnaym2xRy3sfcOLLkwHWzP5PYhk6J0+rvBFqsVvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI12ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFrhAApNxyc2DDnj1BVEx18VfeIijoA81vtSokPBj6OITJuF9JJhoP\r\nkaHfNm8CV/nFVdmNi3rSJaB1v9VFFancCPU5+wlAZ2aRWBwvx2SmbYETOvk/\r\nU8FNvM4mycGO7MozblVAaTBJSMLLgcsv2mNDtYshvbI7T/pkPgJB49TeuNBf\r\nabI5rsfWSB/3D47KW6BMDRtSg2bwufwh/SW+uk5/JlRT6+GSCsfV0YZxFV1b\r\nXHx3X9FiUVt4gXAyvjCQwVrLE26zHL82/TwlzHgamBKqxRgLU0iUngCy+XbD\r\n61tx92kSm5uzyidj2749F+srBFeSdxDGHrNjf08yk15ZWElc2WEFEa7ewzez\r\nIGKTNSW0Wh0kNpU+hb4dWd8uBX7/Xh7eIWr4/RgvwPQbF5CfiMLyGeY+YH4/\r\n+UbxFJI3td4WAWazqmrb7YPo3CtA3AdnFFKYExCkIXITz3rz4qG5lH+RZQfL\r\nGbdyJnjogS8AlAba8PA6k6TsgyO2mSIJm/UMdpaLReT1PsrFxPjjH/r7g4kh\r\nUG7L9o48pjkmuFfsYCItDy0XKVYQ4yH77b1xFXXI4uHA0vT/eAIcBGIfpVTv\r\nla4ipTsvMmDp1zXUNWuItAJJMk59EPI+foDjaFE6JKavSJrMh2MjeCB5mnmU\r\nWdtRUXj6hEteOHJTbJsUbSDiQIH9crKi/b0=\r\n=8T1+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.28cc6791f.0","@material/rtl":"15.0.0-canary.28cc6791f.0","@material/shape":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/ripple":"15.0.0-canary.28cc6791f.0","@material/tokens":"15.0.0-canary.28cc6791f.0","@material/animation":"15.0.0-canary.28cc6791f.0","@material/elevation":"15.0.0-canary.28cc6791f.0","@material/focus-ring":"15.0.0-canary.28cc6791f.0","@material/typography":"15.0.0-canary.28cc6791f.0","@material/touch-target":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.28cc6791f.0_1664388469880_0.2846819157389593","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/fab","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"476121e5e9882a48659691bdc3fd65c280447cda","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a515a2d18.0.tgz","fileCount":23,"integrity":"sha512-dwO7Y9F6U0zLKN9RaQyozzliZbQIWL5g6Cz1jkecjeIoVe3fDz+2P6W8hNKdX0wAQC+4Ty6T3dGjA7iXtxPfSw==","signatures":[{"sig":"MEQCICek5sYnLPEsgrbLpckDCJDGj5l7y0n0BRNdcbyiZRMdAiAG4jmFeuDBEXuXtmndX41qpFmCa+qIuL/6gYt5JYpwAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJjeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoH5g/+LN/cAFGkV44L36t/7RVyLURuFOVpyACbYu9vdCzuOja/lCY/\r\n5lSDdbM/s8mpnf/e9WLaYcvDZA7KCOi5VyPfjj0o9Bgpt98NcO9f90ooXI6l\r\noSumY9GnG14aDg9gYRECFMZsC7V69NYoVMOmao2S6SVL6WgvH7EFkQ9YjZM7\r\nF8X1h8gL8zSPOqm7nDrMs/u2bEX6papssDIZAT3uFy0QDHHjI1fdYqclKAuT\r\nvn/P3mWkidVKHrDJi/495NuXb21O3o0Rm3N4XAKKI9Xbm1W+eBkdSthFfHyP\r\nteJ6XCLe0mt3lpaCZHfKJfQz8GCw2Uk+AbZRWdysclmNxFpYn9gAwebscplX\r\nY5N4/X4SCEbrpINMqCYJAf0DNpuHn9+loyv+wQh9ZvEcOxrsfm/vKOra6iwP\r\nWlcWrW8QLH6WW6ntsAX2Ke1kv4Q6st5A7W396sv++9MgF8sDoLzHDY+Sqvj1\r\nCE80lBkvLuR2Qu4FuXc+meopnRjqtH233cICeXR3UcGcns/b8VU3d1kmim/X\r\nFFTA4tYjqRt0W3JP6CdhTNViMS6MmE2fX9k2KFjm/br9MwAYhjpdnfzojy/H\r\nGoMRkt9CpoSqpIP1eQgCgjf9NiZ4PildADEwP+tjE7gNHHbz6DUcXDAJ+0ig\r\n/KuFJf92x1omjETnKs7tZExoxhAV9zSuqWY=\r\n=iT1C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a515a2d18.0","@material/rtl":"15.0.0-canary.a515a2d18.0","@material/shape":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/ripple":"15.0.0-canary.a515a2d18.0","@material/tokens":"15.0.0-canary.a515a2d18.0","@material/animation":"15.0.0-canary.a515a2d18.0","@material/elevation":"15.0.0-canary.a515a2d18.0","@material/focus-ring":"15.0.0-canary.a515a2d18.0","@material/typography":"15.0.0-canary.a515a2d18.0","@material/touch-target":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a515a2d18.0_1664391390431_0.5217545683232303","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/fab","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ce9523167.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d40d108dc95e00eaec34ee7d98acc1a6cef53f48","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ce9523167.0.tgz","fileCount":23,"integrity":"sha512-tlMXxeyccjLTISF/mwSAaZ7DWu16BgrOKnmh6ACaaqlVTkvzXby4lOnuCeXCvf7fKosExnZjSsYfcw1wLlUauA==","signatures":[{"sig":"MEQCIDR3uw91pJr3gVSA2W4nX7RqQkAQ2a2ZGCdDHAGpk9JHAiAY+4AH05zUuDmfrijh+3xugdGxNG8saCNVYWRZs6Y4Vg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgC9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+vxAAkSJItVyqYiq6oh4/r/H/IcSAH4KJ86sANyOrv+hR9C6+Rnqz\r\n7FlvbNyFHoz72yJkwTzR8AJUqgBktkv3vgasA4bJCsovTbHATYd+LLlWbmq3\r\niJg36ryDeQKpZdnA8s3stpICIVzZ5tjni6PWZwKqtu4PcCBJQfFz6xSsdwtP\r\nN6s8Xj3aYna9CnQP4txZjkAC2aFnyJQhl1mEH5nxmPZmPWdO6f0N4MM/YgjQ\r\n+pcg7RjFT6uoF0767gq6SdHdt2lts50DXtDFgi6Bq9yV7/tIkU9gEDrYLM8y\r\nwN5wOkZFonn90t5txRZNsEdrG8b64IxJ8DEeRinvUvguBGFJJC+jSFQ1fPgm\r\njbRdFmNyVnBYyiv9nQY/5mimJjZ7awRn/7XpuSddNUYHkJZrcabjvqKgrsCe\r\nPOd99pQVkX1+bjfbX0IPwtITSypK2gyWGzLPSpULEEtLmJpIOGaJnnCOgWDB\r\nfeLfDOK4/VUzfryXcV27od9PLIUeXEMVJ2oXSLxI4vPx7EUp0iyOup7VFjX7\r\n7xLNBn/y8KLf1ZMHK3GRrW3GTlxy2Yn3Ip8Ny3yr8xapQL6T/R/zMIvctCzV\r\nXo7zLlaTfkslRlH6LBAGR0IjBZhWir8ONPeoPasC9Ludyd9HgEl5J8rc8lkr\r\nRy25rXpHgc/P0/qnhezaLsSSBhMISRh49to=\r\n=ERQM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce9523167.0","@material/rtl":"15.0.0-canary.ce9523167.0","@material/shape":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/ripple":"15.0.0-canary.ce9523167.0","@material/tokens":"15.0.0-canary.ce9523167.0","@material/animation":"15.0.0-canary.ce9523167.0","@material/elevation":"15.0.0-canary.ce9523167.0","@material/focus-ring":"15.0.0-canary.ce9523167.0","@material/typography":"15.0.0-canary.ce9523167.0","@material/touch-target":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ce9523167.0_1664483517078_0.9669398590602776","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/fab","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc2ee5f2d5e32be4745a61f418fd377a831cb38f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b2310f7dc.0.tgz","fileCount":23,"integrity":"sha512-q5pF6r2A/hka6U5zglOp6NRhdn4KU57GTERmSJMpzHwzopa8GXhtrZnHdt0aNOgp/gzlcFNnkNlCsiYO0/dPSw==","signatures":[{"sig":"MEYCIQD91R/OPVP0yEbNtG6m3T2UTe2YeB2azPeUYqiNQwScvwIhAIqTH/gQ96hM3gwQWSVeUSbKXELVLfGDI+S2NfygCUQg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjTnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwCw/+Mg549MAeSqXfH+ra0JXOZvm63ugxuGfiTyC3BQWNlFQmg1vZ\r\nDogapEQkwa+DTm6ebJGhotnKWS9qcVv7ez1NZp1Y7XBOI8jevRok/qV9QTkT\r\ncrdej8nei8cPfkVx4+fKjywpmQjwXEHjlBVytEp0PBACSvz/cRyfnAlED/BQ\r\ndL8HV+xS2lBn2VJry2wK7VDt1Vsf3/YvxBncjfHNcP9Ia9bu99esQg1LU+Du\r\nAnt7uGAUO7cdI12uv4wQTJhj2NlKyL0jP0RV/oyt8mMRKrkhWllLWpfQz+/W\r\nPRq0DKFql1OANwrQyjGfa5TcjPvTL0cSZU9Rp72vZQQdSqdaM6mjIbwXhfZb\r\n43pkU+Ybr7LbLErHrCWIIbwFpf/K6gSda5r0xIqqVjMG/y/h/yvI66C2up2a\r\n4+rybFjxxmE1uQfCUcs5liFDMeSzJNRlTjHA5/ZyQX7opZDo1c0fXnKvW9lb\r\ndIGCSI3KhMkAescnu0kDhamSHb/1yK8QqxTewD9uxyqANJG2PWVBgg/dWmx4\r\n5X3CC3rDJB5f9woEHfmCixVkjHJCcdqsDHRTEV+P+IbQxDSVBAXEGqxmYw3O\r\nM2JJkK1wYkEoeCGuL8xAo0Q9rqgcm5ELzJ9/T8yXnHuT/oTdTKWQgLtUeLpL\r\nfhyljWkvyc6fyRkMz2Sa1fUnN9ca4WE7KGk=\r\n=38qS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2310f7dc.0","@material/rtl":"15.0.0-canary.b2310f7dc.0","@material/shape":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/ripple":"15.0.0-canary.b2310f7dc.0","@material/tokens":"15.0.0-canary.b2310f7dc.0","@material/animation":"15.0.0-canary.b2310f7dc.0","@material/elevation":"15.0.0-canary.b2310f7dc.0","@material/focus-ring":"15.0.0-canary.b2310f7dc.0","@material/typography":"15.0.0-canary.b2310f7dc.0","@material/touch-target":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b2310f7dc.0_1664496871358_0.13375173038252286","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/fab","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a44241e54.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ab9923be0e12e2345168b93bf2084f4a031e576","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a44241e54.0.tgz","fileCount":23,"integrity":"sha512-U0C2aH/oTxuva94eQT46bzjCErwKSWE3VsStlaxnhuA6AInFOroaulJ/mD4bxW9QwPuWnUyrXh7amKMMqoQfmA==","signatures":[{"sig":"MEYCIQCip32h5uRuen0QgNbCwBc5jkW9nOQ9kDObSwWV++0JuQIhAL3tiq1m+V8QpNJCYHZdAZ66yb7JNxQzc7iswUiBoF7L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqcbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBuhAAhFKMEEbMpVlwwQ/QCzWO7LGl9beYN316Q93CPekcGEVkkrVc\r\nukmu0pbN5uEP5MK45yLcC0Lfi9fQCYyI/34/QESDs9z7Ix6HTHoExDADk8kY\r\nD/g+GDSAJf4O6NpAvEQFKYTRJ+9Da06+P37eg7Z0HkRB6ZzSDikkms2TQjj/\r\nV8pPqbEMiG2A650JsOfpr8yxyGDDTxdCguqhdgB9DrFi4Hsz3sDOSyo4iiTs\r\nIVY4aoLUrgv7iryu7UTJKraNnLQxWR8DibpVbrhVuod9yj9P4kYJzjEaN8hh\r\nGyzOjDQp4m98AQs41rsqaqBDif0qvNZLq82va0jUzTp0sMVbxdqx6VCNqgpj\r\nKJR+lHSsDhpQtEmeYYf5KW0FPMToVCUdSz46EMbOcBhVPyGo8bEbJA19G2a8\r\nvKj/XXgukq0s0RCX+K5+p6JJD0cIS5p0gl2KVlTcQ0cSmkLzF1ri7AY9kIUi\r\nEe20HTQPHVEP6+uXaSxerfrb4e0IXwWVmtDueA8a8GYsRwSpID/xin3TRp9/\r\n2NteMDyqNXWZFYYl3iVrShUz4YUIDh+lA3OPtnC45emleO63woMXevU6dRU4\r\nAbQsmvdvXyEKLWG8ojqW+q/XFsc0UfGOKaZcPVBhxC6Q0UTzLXMCRkJaDBAk\r\nHsYq/n+Om4MKdc6rAdNS+Sn5Ab3PVr9Fpkk=\r\n=oiD7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a44241e54.0","@material/rtl":"15.0.0-canary.a44241e54.0","@material/shape":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/ripple":"15.0.0-canary.a44241e54.0","@material/tokens":"15.0.0-canary.a44241e54.0","@material/animation":"15.0.0-canary.a44241e54.0","@material/elevation":"15.0.0-canary.a44241e54.0","@material/focus-ring":"15.0.0-canary.a44241e54.0","@material/typography":"15.0.0-canary.a44241e54.0","@material/touch-target":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a44241e54.0_1664526107707_0.15189301675457845","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/fab","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12334bd3496a407e163a3b7fe3c7a33252cc07ea","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.0ce81e115.0.tgz","fileCount":23,"integrity":"sha512-cv0lh74C6YceqfacwQMiSLXCZbnAU+aC577ywIb/szm9QkdQErE1SGYgpNKItfjSlBEecJAy59FvA6NFhHN9gA==","signatures":[{"sig":"MEUCIHS4oB+Vo/B5AvCR/6OThWGAVUub+ceheHC14xkq/pRMAiEAmUi82Tf2JXIQt1yD20XDYKbiwI/0ESQoF92UjjS2noo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzMQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpT+w/+MWLSB1jQ8H/3gbvKcSPp+QHnpHy3Gj/e2sxUHAsItdeddtdM\r\nHMt65T/Udd5XMe3EtPIrb/JL5xfSF+XW+sO2cPV+um7pXEyyarZrGlMlyzkP\r\nbCW05irFiOTi1T9s4xNHbmVBxdnIutGz1/erHs1uz97DxanTe7D7psYm3WK9\r\nqhWf71xQhmI0I0JUUPrHKW4xJHak4lEf7vDmdrtVrx/3ZdEUoBwkf3P7S7LO\r\ncXfqeyyKYRwjgmf0MCXvKrLcFbfrgWt21kNhPrXPB47ViWmQICWVDqe2kbLe\r\nua0sVyGUA4Z4FnnEyD4Phtqe9OlOjc7sV8EutWKFo/OXDsC5skQP/jkEKF2O\r\nf+mIoomJ7KQYyD+eH2FyOgu9CjfZfMbDI2beTjD2OBNmqTH+TBhNVDDDp7g/\r\nnMQUD512Jqvlm/NkiGkEdZNZu8C/HghYli4L2+Y/irq6z5bTuvGP0v0EHetw\r\nTswG7iil99aUZe1VPwNZw8Kfx678Q1dqJbSb6foGBC/FkLVjJ3ABXhDtKS98\r\nHckdLGqRmDsulLIX2Gi/j6Tg2RKCiBSdXuloMBafrcW9H5sbwWL4bkZZRdMV\r\n3v6r+CUFium63qNYi0oXxgwELxr+B3wPlShhi9PZFI0KR5QE9YlKS5yR/xcb\r\nU94lhbrW4rlTorrLLpmzMJYo5Np5f7TYSPI=\r\n=oBUZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ce81e115.0","@material/rtl":"15.0.0-canary.0ce81e115.0","@material/shape":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/ripple":"15.0.0-canary.0ce81e115.0","@material/tokens":"15.0.0-canary.0ce81e115.0","@material/animation":"15.0.0-canary.0ce81e115.0","@material/elevation":"15.0.0-canary.0ce81e115.0","@material/focus-ring":"15.0.0-canary.0ce81e115.0","@material/typography":"15.0.0-canary.0ce81e115.0","@material/touch-target":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.0ce81e115.0_1664561936514_0.3427507600609818","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/fab","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9071ca2b35e76075f7e7775c1a6c507e9d7efc45","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":23,"integrity":"sha512-ap5i6W/akwkxhL4odaRnarqBs17bhPn1lBN/JnuTgwmzaWX9Ur/+SkK+cHj+KgR+ddtPdvUbsfcVtPlHgxHPbQ==","signatures":[{"sig":"MEUCIFzXcqcbhiTrL2/hcnvPWHKhD7kaI5y19xr3JNT+XInkAiEAkr0+Nx1ZJULUAErN5i0s2qm6TWbB+62P+mWMYLZwF7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGtNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKGQ/9Ha2r1OA5qgGLuL6INPSestE176EClA7PssFzAhkx4b80sUOh\r\nFgWsUUesyYUDBkN9Kg9wAV00nwyytG+IZ02C0TcWc+ioq6LYVtjstLMzjDXQ\r\njjzSb6I20qk/yBgF8xCjskP2/aDqma+MeXD3l5ejipASlnHVhq1gOml65mup\r\n4Lq4TulbpPHvhJyKZqhS49KqvC+3GLVfWZDXA2G5BQIlEsHwM8jy05xc+2pr\r\nKNaL6jEDyO1c/IyVfQjBD6KBlrJ8zV2rhoG0PtlNCf3m6Yr6OK2BHjLsD8zV\r\n/68rX9FjclDknFoMl8r+7dj/NJL9pouPA+tZE0UdUw8fuvICKIk1/9pwntAX\r\naG7pM2qpo9lR6HfNK4XL+EoT/42Jj4a78ZQm3CN8A1/b8X0iwOKzMV5R1DhV\r\nZQJQn9JOWYLErrTj65GV60vFBdDkSawbb39QYKiNoL57YRbjkTaKK/33IFUk\r\nEiBOYbX/d/91jvaSzuzSx4D/fev1Fzhz74gtNkITdPO+KukBxAwV4mCCnMK2\r\nY6QKgMGOT4B+zbbSWFFlK1GMFXNXX9e06ZwDfwOggY0z4fWSmNmvT/LN89F7\r\nxZQIfVP7b/pQVTzUkeyGV5pKKs62Ern+osPwVIvqzRuFcYfjiWOmJYQH71K4\r\nxVn20Y2Ca+8N4MGWXScfkm9UzSEUN47sYEA=\r\n=pLBm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3cc30f6ad.0","@material/rtl":"15.0.0-canary.3cc30f6ad.0","@material/shape":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/ripple":"15.0.0-canary.3cc30f6ad.0","@material/tokens":"15.0.0-canary.3cc30f6ad.0","@material/animation":"15.0.0-canary.3cc30f6ad.0","@material/elevation":"15.0.0-canary.3cc30f6ad.0","@material/focus-ring":"15.0.0-canary.3cc30f6ad.0","@material/typography":"15.0.0-canary.3cc30f6ad.0","@material/touch-target":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.3cc30f6ad.0_1664904013359_0.07765457404447318","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/fab","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"643f4d02e39819d9ecad51eae04c3a2f82a3daf7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d9cf98e60.0.tgz","fileCount":23,"integrity":"sha512-6SQb+NWQUjZ1ewIzcvPuQnD1jKYGzkfHtEjr0h/OuV71FFTazsZYQ4RdhKsGHyoKDZpmlFY8VUybzCriCwizQA==","signatures":[{"sig":"MEYCIQDULD4Lk7mMD6mvVYGu8ToJ/nscjBmAbPKu6uXS/S5Z/AIhALTzptzT3nsmB6jUh16ZhWb7oLDk0pXIbQnmDsdzG71z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIO8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpx7g//eHHUUE/jKp8j+5ITE2rHBERjBO6QiplJegKQP/qk0DciWlYj\r\n/P3GEm4755k0CjRpxcYOPYyV9RpFu3bMBItKZCABMFsrlcXF7Kmv9GdV8Agy\r\nKnBbr51K5+kPFhUxHNYfNs6XmEOAQMG7Br2DhmBwDdXBCu1eh4lvuA1D9hf2\r\nCoUxKwXASZ6UPGt3i+1IXZD7Q7QTPcuvBv9bLHZzwvPvAh/9Yd6vLCPb5uyd\r\nYSbUHDwXtkj0SO4qh9ZIaUIpWoiLJ+VloPukLxzcjh9+U1jhvzTlngQuItNn\r\nHJMYKS06DXQCyHgASdubOB87JSfxDNmSoG09n0IW3FnToR+YQ1dxhcDaJFEX\r\niZpFTKdZE+ONbyY0mjaGtCmR7xQ5DY6DzZAvmIO0cONqe1EJiYjwca8jDD8m\r\nDnUpk7+LvGBtg9bQ70PwS3U9t4UL9WMl6tKMHBRfImMybhO8KNNIzHkD29XB\r\nBtRGGyUjAm0Jko2AGgXSjm0AjZ7+1V/2GF7k7pDCfdwoEAAUsGu6/dAK7Bm1\r\nehsUALliQBPmVLyLYE3ZiOHveymoeVQb9A95qzLebV08m40Ghh4q1C0qLjcz\r\nEiikc+3dhkgesjATDLWqjkm7qeAaPQjmIaP6z+QrWmmy4b1yKrULZW9FULlM\r\nK7OCbftn4TnvaX82qF5c4iVkim0Ms+8gsXE=\r\n=BzWM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9cf98e60.0","@material/rtl":"15.0.0-canary.d9cf98e60.0","@material/shape":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/ripple":"15.0.0-canary.d9cf98e60.0","@material/tokens":"15.0.0-canary.d9cf98e60.0","@material/animation":"15.0.0-canary.d9cf98e60.0","@material/elevation":"15.0.0-canary.d9cf98e60.0","@material/focus-ring":"15.0.0-canary.d9cf98e60.0","@material/typography":"15.0.0-canary.d9cf98e60.0","@material/touch-target":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d9cf98e60.0_1664910267718_0.2291670729810602","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/fab","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c74458b9967fa497082c2c00f185d97ee70c310e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d71935c8b.0.tgz","fileCount":23,"integrity":"sha512-/I/cEALsyhDvJmbdv1FZfwU/l87B8joHinfHN8bi7dBSAzZodWrG5B9IQYadAWHuWCQtphwt4OrEiWkj0IT1Ug==","signatures":[{"sig":"MEYCIQC9mVDpu3oD3CdcPsFLc2klR5ujkprJMjJR6TDWojWRHAIhAJfklT+3lYKPGHhqcFXXTXDaQq3jn4E7lzS+fQrifrdi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo6mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpavg/7Bl4AQgxqGzJjrnVMnIuLd+P0hqufT+b0AgMHq+6WHWufDqdI\r\nGr4X6feJ9Snwhz+uRfa57AGqkeUQigftwhajG6BoLAp9HLrbNorop9+eEA+a\r\n/T7x3QPtNalclLHHdMwbscVnxb4h111KF2gjsdWNqXHpifaleG3sct/bSmp5\r\n/DahkFhwrzOxZU41zYKYCDdBdMBZGPcue+17Yvw30WLDbhrz1h95KMwvhL42\r\n/Gkj7UJKnJV7uph7AgyyUYiygv2N3vYJtsfHjERlsc0TsWsxr6SibPuiIwrB\r\nE1fmW/tjk+hkTlbT3dXSIPyakMKOXVOKHYZik3zXI0Zv9kAEUDUShmkD1AWS\r\nYhrSomziAVMbMqmVb0BTQWVLgZ41VriepqVr/UDPuAZLg+k7XstVcV1ndZ01\r\nwf8oUh+Uu4UtzSczZrSjHT+Vm0ryHgLK/RtIk4qguiclJc4AQ5bHCbL15tu6\r\nC05+nPUbcYiGapgs4kqF8lHfVas/P2vuaYs3fznHxc8A3isQUWko9iCOx+zC\r\nul8BmmsdA0LntGFEedblo3t/rXI7yL5q71eI0/Dlo1xEU6kxQtKkEJ+4aEyi\r\nafRDNpEnYvGlsm1N9ZFbpsQhQnhlfXtS5ejJRzz0+REBejLK7lICTNZjueYB\r\n065ggGLwzfzFAgoeFccdOd/MNW6j91DnbfY=\r\n=qoZf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d71935c8b.0","@material/rtl":"15.0.0-canary.d71935c8b.0","@material/shape":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/ripple":"15.0.0-canary.d71935c8b.0","@material/tokens":"15.0.0-canary.d71935c8b.0","@material/animation":"15.0.0-canary.d71935c8b.0","@material/elevation":"15.0.0-canary.d71935c8b.0","@material/focus-ring":"15.0.0-canary.d71935c8b.0","@material/typography":"15.0.0-canary.d71935c8b.0","@material/touch-target":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d71935c8b.0_1665044134385_0.026070249928864087","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/fab","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a72a033b2d83ea5872e1382793f3a406fa2539a9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.49c56a25d.0.tgz","fileCount":23,"integrity":"sha512-JFt66Hzik62DnzaFpugyPVRxt7w3QPxBfwJ5c1nNfzM5W4FRk3IQ2hROD203rF7pYDv1AqMO5sq3eSMApffPTw==","signatures":[{"sig":"MEQCIGdL3rcvEGV7RydFRd2cNqhsIBFCk19veZhXSWeJ+LkuAiAA+099UqklGWdpTlrVsWnjGFf9QuC2OqXpi61jQFcSVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyO5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQGQ/+P01zc+Vi92hpuTJORwoOWwx4f9i69GzCyH2I7fTrXvmPpAAl\r\ntLV2FSiLSSZg/dMlqFBvnQKNNkOPEXgoG8gLlmX98ssZVp46nqn5ZtkNxaFT\r\nde9QyHq6IjWEtuXB90msSeqPfhUBfQyTOpzTHxkNUrSpIV/Pu0LbNB3X/hpJ\r\nqIHjNxDr4iIXUGufJqtSf8iF1Fhkw/pv2xuWg2bAnnxX8hQxPx0m9Gw4Hl4p\r\nt/KgtK40GHsAp+w0RU7goqKpoMibVvrJ7fXpaPtoj0BFwT+jhOB8Mylat/Ai\r\n3VC6l7MWyJCmVNwnVjWL8UcJ936jF2BALIsb6P3RgwWubgZfRTeVWF5yvhb2\r\neCmtWHRKQYAKOVHfh89BPw8G5QyxhCjQ7N8ZlD6WqE2ZN7kTo99Qg8v7vZ8F\r\nzSQIV/O0+HNxelqCxrvGDTzn/pByD+BtkZ+M0AQ70gASaPVra6Glp6NasAmW\r\nfdt0VWczDEOiiwal4ZWOVOo1gkXCefpnWx7IG+78Y8bCWG0ajNaKVDTRF85A\r\nvj4+55vkLD9LZAHxTejJmzm3WNuXawDkRBOr4WEd51RLeglYLNerWxrc46jF\r\nwckKTd7tCbV7LW9lSYlT475gxig5Kcwv0Ndy5rxyaf507BB8F3bToev7pTEN\r\ngx8fWOvMGYnPXW0QABlprLENwVrp7tlpZNo=\r\n=FydR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49c56a25d.0","@material/rtl":"15.0.0-canary.49c56a25d.0","@material/shape":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/ripple":"15.0.0-canary.49c56a25d.0","@material/tokens":"15.0.0-canary.49c56a25d.0","@material/animation":"15.0.0-canary.49c56a25d.0","@material/elevation":"15.0.0-canary.49c56a25d.0","@material/focus-ring":"15.0.0-canary.49c56a25d.0","@material/typography":"15.0.0-canary.49c56a25d.0","@material/touch-target":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.49c56a25d.0_1665082297359_0.8042694872123564","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/fab","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.07acddef3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ea15ddcd7d64a7d6120b0f828b5805827663939","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.07acddef3.0.tgz","fileCount":23,"integrity":"sha512-+hC1a4zR+8P/mFbSLl32hm38QOXD0TScZW8PwxhDltkfjjn7QsNP0lAVpOKgOOAs9wRvWzbXElnej2PlV94k0A==","signatures":[{"sig":"MEQCIE2xvnmMr3awjojSjShbr61YDadFskO6ALsPm/tdvPOcAiBVw/E2hs+pPCnAUBWBkRUwUACXf9sa36ICqj3nVFr3OA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJw1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZaw/+IkR7MhmBLEjAl6vtS0uapEVFxs5cCvU1S1QWcdEGgjgW2rIh\r\n6QYO9MzHjJZwq2afLQXIjsieM7yoIRiCpoNypneqVBLfdQks2rcji0bOBE99\r\noqU3GIZVOD/ahGEngKdJ523vymlkfwFspnqab+2RG5ajvX1CZ92IF7+sHHmf\r\ntENq4MS5hjhmHu7VGBcTfPzQSLACbcsi+HqbHjybgbqTlvzh1w6pFMikV3D/\r\nGoqFnlxoCtQ5yUucwETltVnOLaeG6T0xxQGj6BP9M0eAcaLdWxKHIkWCcHBO\r\n1E2sxjc/UpsZwV/SAuNT5+/kYtf2TWU3uRQQs9Ub5a7rgeG1qqUnnuO7tsT1\r\nT84lzjbsbf+ug6BLghIVkVNEhQXZTj7pXtOSBHAR2uXhrZK9K5NYywCtrxVT\r\nyT8R4QSGqXd29BBDedNFoqSJMc+MSl3sLVw4Ikun3OktGGxEeAHCFo6s/MAF\r\ne2ZN2NjGLPoHIzEr1T8HihCigCOIuhdk4dlWtdzNUzSXddwXAI6H9geK8WpR\r\nmGOuvAXmYNfUaCMiYz9UrpBXZ21OdCgcDDY87OjXqiu+p5COKGG6E9e5/CQ1\r\nfMLupDBcRqPpZ+kLaiFo8HKfXsXcNUCnY8a4csvtBDTO/VsubLYDCbgv1edv\r\nAD0bk8EmAjzx0iq7+mxYEo+Ni2mUDEXO5hQ=\r\n=V0O1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.07acddef3.0","@material/rtl":"15.0.0-canary.07acddef3.0","@material/shape":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/ripple":"15.0.0-canary.07acddef3.0","@material/tokens":"15.0.0-canary.07acddef3.0","@material/animation":"15.0.0-canary.07acddef3.0","@material/elevation":"15.0.0-canary.07acddef3.0","@material/focus-ring":"15.0.0-canary.07acddef3.0","@material/typography":"15.0.0-canary.07acddef3.0","@material/touch-target":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.07acddef3.0_1665178676679_0.24190960619965263","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/fab","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8176a3d7781c90b8857e0434dd02824e24b95f2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":23,"integrity":"sha512-HLM3UnQSVM9WEMm7Ooe9E6qhsmkt6zmxA+zrCyfrzwFuEl9Z4waMGNck8lDDZV7P4REu4wjc1Ps/asf7DTvXUw==","signatures":[{"sig":"MEYCIQDA+OcRpUjQClnuQR9ZZnbtDlxMN8PQgqdlf+6MyQj1wgIhALrDbbn6e+7WaDcpxcWHCbtxNUbdm3fqxV/yYzCPKZbi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKB4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq6Q/9Ej9OSwO+bBQ/uWTPynUSu+Er6qKmGx4yGZ8eSnoY3QmTKIxh\r\ncalCtyuDJnvUsK5XVGz72guw1xi1hPs3OOSohyAOTmJ08P1QSj4SlJSjrfca\r\ncRkFNvhvkpsuY7l0ipUNRsQpnWb0viZYpf/Jk0YYpVDpknH1pUlvMFgz6z4J\r\nHt5OMfGBrVQ1hCIZlI1EanGCSgRbhOWCCNWQi1JqFchwSIZL2ygpZuzTmLoF\r\nbbo94nS1CteGMC7QhwFruNr895H3l1nnr5VzB7U29rDAT/wly/W+FJLvkIa0\r\nk/Y/s0F+YxiXX2GOI1K86IjX9CHA9FffoaUVe2vHZ0XvSidH5e3JULE9gvcp\r\ngei0xahzvXJ2cTSQ1xNdzhUPlbnRjDw0wlahQSML4/6sppwVjY0ZTpfCZ0sN\r\nO2TkL/ha2+4tZclACKZeINR/lDPohVovBM5wHkzugsiEUGRwDdL7ViTwQxeC\r\nhkaJNDd1CjRyEB5wA64Sl0hVcN77NrqtjAWgKM0uObj+SpAXOUTyFIJimVHl\r\n1et3NJIKAgVPc7WkytocSkOGli0CTa3A3hxx12dp57yC+YWZlyibnMg2are9\r\nXJ2UaX10x+rqNMYbvBSQ8NTksOKV34sYtZmNqK0S5UF4BnGajIuk/rzavFUg\r\nL5PB6Y9ffOM/nez5AEvKpxLY5W9jML2TuRQ=\r\n=lfnA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c74eb2c0.0","@material/rtl":"15.0.0-canary.1c74eb2c0.0","@material/shape":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/ripple":"15.0.0-canary.1c74eb2c0.0","@material/tokens":"15.0.0-canary.1c74eb2c0.0","@material/animation":"15.0.0-canary.1c74eb2c0.0","@material/elevation":"15.0.0-canary.1c74eb2c0.0","@material/focus-ring":"15.0.0-canary.1c74eb2c0.0","@material/typography":"15.0.0-canary.1c74eb2c0.0","@material/touch-target":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.1c74eb2c0.0_1665179768275_0.025318536990280416","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/fab","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de9307c9735185f541730b882a0c289ad75df6b0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.dadfb713e.0.tgz","fileCount":23,"integrity":"sha512-IG57e0FeGY+ikT4UxO0kZJ+oXR5VEuFfry82OsyHAEtzu23Hrh8doncAgjgUYZ+Rj2IAImsF9mQG8cU7dewNIw==","signatures":[{"sig":"MEYCIQDDHU+zSTCiqfpcfW6gcYlXfvSg3B8e38NzYXUyCyd8sQIhAPmJR8yFnk+xVhDrHIYvzfK2mAdswJw7RLGOS7gDGcUG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQVBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8Nw//T3SROcBvRwJhCJkLqu79JlrJKMCHQJRQFw2tu+qqKOv8/KFt\r\nCdO7c+T2LsWHYgcbeIhbQejOW0CzNkZ4L1aVaLjM6qAEmAC0ivilQ/IxzLtp\r\n0QksCLuULjk7YpWcKDrKyPjTha31RtqMlv4z9QFHeJZ4pi3rPxZo0Uy+HkMi\r\nzDDrtEf4Fx7E10J5gfQRHeZw9F89TdHStDsN7F4gsdHergLkgX5tKl40j7WI\r\nFU3wgTTPRplJOveA68K2RRRhnkUL6PxW8DvnPC/F6IjNwwGrpH5gKnyPauER\r\nhO7187s7JB99wGqzk1jFhrhM1X89+edFoII6NiWIKUFBcG9A8KXWAT94frez\r\nBlktgI1fkcMD1e8vfRUnRESJHs/5/s4jq9+X/uzwVOmDpzJejZjdsdjZEzCk\r\n2+T9zgPdGDb/PTH+RrzoTadWK9PIiev3FOZl0daVyqoYSA8eJSjZNqzyyUaV\r\njf7HlKMJ8UDd2pF1bF20RdmRGrwjOycsOHT6LIIcPBJdwWNT46lw/7g90VE0\r\nsUoO6lDUp/CHO2UP6jivJ4C0Q31PY9t5+DqYnsbLr8GHHhn9Nu2shnhJ4B2n\r\nVZOvQfZV9ve3/vdmAFENgSTLlshKpQUDvSYktvPrGjuNn4Hm+MoMsAdHn15B\r\nDIKhAXYNBZRaLEDaYMyfp+XVekrEgN0VcJU=\r\n=NWZ+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dadfb713e.0","@material/rtl":"15.0.0-canary.dadfb713e.0","@material/shape":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/ripple":"15.0.0-canary.dadfb713e.0","@material/tokens":"15.0.0-canary.dadfb713e.0","@material/animation":"15.0.0-canary.dadfb713e.0","@material/elevation":"15.0.0-canary.dadfb713e.0","@material/focus-ring":"15.0.0-canary.dadfb713e.0","@material/typography":"15.0.0-canary.dadfb713e.0","@material/touch-target":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.dadfb713e.0_1665205569203_0.5573976176090205","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/fab","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"902071b093a4adaf2796a2a02940a6cc2c7d1fe1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.395f1ce61.0.tgz","fileCount":23,"integrity":"sha512-d4BcocNrX9BEOW1L6AHf8xI62LbTXZeZNa/37QuTptE/QItM5stzSh6Dn6p8F3m9kUSgzZ/TztkaLQO6uN88XQ==","signatures":[{"sig":"MEUCIQCg5Yd4BPM5K5IOgSrUDUDWSmZ12jjudOLoNjYfbwt7uwIgYEeS+3jxEY0pCt3GAluvtiAEtOOflI3/WstyftmpWHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQW7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmob6Q/+O+3K96LKZI8LWiTbaeuIcpKJb6LY8C0pSizOo35IZC/AjvoC\r\nXCoCeregqgPQlE4sEYpX7fhD/I7qzmlm98/g1UCp8yrwF1HOUj/aYxLSzH57\r\n4d0gW/a6qT4qTOV1/Mm97ZNAC3EwjisxsDQY5OZqAtF7YtwbFcrZ4ORC8ipJ\r\nlMy1HBbqztlrWMCcBU9VS2yMLrliuI3IiBm11yBeTUAw4hWx9MBkcADCJ/Dg\r\nk/IJs9/5pWgq59OobxgpNg2lY6BCnf/ke2xEJiGV4uBvG+kV99RXreKa1dsb\r\nODRpci17CyGJizBX6DSRIz9juMjUnn+PDhZCacnmTw0/76J2hNjQFqdIvAuv\r\nj3rqaYmtvmF7NH2k8m2l7KYxb26pC65jDJEKnC20oBnXCybkVCOn6ipjb/h2\r\n2G89Lt0Oa6LyIvDJ/RM7mDGMkvv+O3jScqWlZn9ZNNbqK5HygT2VwrovIeJe\r\nUx+KuNELQjcPmoXB2ZXKhE/NX0vQ5ACxa0UvVVQbbC6CASfBZmtNQEMGQEvd\r\nqMXc4hF5oKumv2gTy2Q8P6K5J3kwgNjlbFX57BywYAjJS+WuZW9NXnFQueQD\r\nb19qULWmSO+A+jJh/FIzhLLsLhcDA4M9ygZdexiU/8iV6BSTb01NVCs7C0eS\r\nbJjNI1lkGmsIV8omP1i5i2SLQdwbxC8kpk4=\r\n=Daul\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.395f1ce61.0","@material/rtl":"15.0.0-canary.395f1ce61.0","@material/shape":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/ripple":"15.0.0-canary.395f1ce61.0","@material/tokens":"15.0.0-canary.395f1ce61.0","@material/animation":"15.0.0-canary.395f1ce61.0","@material/elevation":"15.0.0-canary.395f1ce61.0","@material/focus-ring":"15.0.0-canary.395f1ce61.0","@material/typography":"15.0.0-canary.395f1ce61.0","@material/touch-target":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.395f1ce61.0_1665205691533_0.21954873045736423","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/fab","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"726ab509e1546a70fc633f3b4d67fc4985728129","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.e741b5c82.0.tgz","fileCount":23,"integrity":"sha512-aljoflNf83qY58d199cDevADeu+jwbTb3667OU3h1aZYS7GTAjSJa+OFUYnqC863KGRzvPGX1kVPGty/8ubx9Q==","signatures":[{"sig":"MEYCIQCNgCC8Y517QNUkRAF1USOBKbQtnioHfcBRpHsk6Ejs7gIhAK1/pnAo3M0D4ielh0yy/6rM/gfMEJC5cGIlT3egdfvq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFiRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRVhAAhQQzCmUTLFT0S4rRB/k9hI8WhwnTKjhvFVIzWzDOrYYzKpot\r\n5oz6EGzsbSuJLd0hWUkXi8WLX6gTKF97j6VFabyYFJGA+8XDKfO6UrOWf97U\r\n5ud/TAKZkQb7OKAq7c3opDqtphSRpKc0FEuR/U/4alNhh/Q3SgTMvKmdfsHj\r\nbVC6TnD6Wch4KVEeBMv9+Qb94YSQjjczNljLYN5CSRaZrXkfbcssSyx43y7Y\r\n47kadf8OhCSFGhV7yFsDzoDRd48OciimK04GC4Opnt1MtFN1yc3IJoy+Eb2g\r\nY4Ms2Ef59GgAKpgpCCUiW8hwn5hQjD30mHlGGEcDprHfH8+J669wqFkQK84M\r\nsdH8aF5ABCiESp9ygNeSSgkOYNLa+idG7pOmy/8BXRJ/0yssvUUaw5VL+XOV\r\n5/9vHQhsN2ZwK10EWwmZgxVzUYHnxW5T2G0APfqQ4Z9Rre5MpH/BsbhC0IQ4\r\nAA+0DDUcj17awKbx2LPpDQR4Z9qEskUXSUfJjYC+ZPHBakqXbKRkgF7mFk9k\r\nTcQze/lZV803TkBF9APd/3jaoU26fQl+EHU9NP0lNCo/BiiIXAzFcqsY7UAc\r\n/BqnYppD+U5qh5Q8vimKAVZjusmnJGhq/TaRz/YJHaqocRewg2ruO/q0Rowf\r\ndTNl4gVWx5pGnCeztxOYQHGo/r8Ul/dUsd0=\r\n=uZkf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e741b5c82.0","@material/rtl":"15.0.0-canary.e741b5c82.0","@material/shape":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/ripple":"15.0.0-canary.e741b5c82.0","@material/tokens":"15.0.0-canary.e741b5c82.0","@material/animation":"15.0.0-canary.e741b5c82.0","@material/elevation":"15.0.0-canary.e741b5c82.0","@material/focus-ring":"15.0.0-canary.e741b5c82.0","@material/typography":"15.0.0-canary.e741b5c82.0","@material/touch-target":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.e741b5c82.0_1665423505073_0.9277215395616172","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/fab","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3305d6ce9cfcd1f90dfe1f5d59ee9e129b348d96","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.582f3cc1c.0.tgz","fileCount":23,"integrity":"sha512-eOBWSCyK2baMAwvg+F2PlGMFB7bfWQMYCNussJJt3p58aVfh7yoqTq9NTZhKHUdx2UyIrYk3C7lCPEXzKNyUpw==","signatures":[{"sig":"MEQCIH9k0CjZ/42BdghRNX75VMn7nFupKcSIue/KMCEKdcmvAiBh/01gLyXm7RH/Q+vV8LkapFV/FPxNxnurS0mS2y2rcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPXUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobOw//T6DXyKnPCFXCBLU3uR2ZfgAseuneoy1r4hiKp6khZQkEt5US\r\nU6xWPpnJmgWXkqjRSqGzDdw3TbEKIzuufIFQyFRnGmlgqIX7lz+fRB2gKoKP\r\nEnqYXAyqpJCdWNMjZl2JNk210W896lcKPxncspMcfG84+zo8ESSGN3Kvkl8i\r\n/7Dxwnl1ntKMdRk/iMM+9OsxM3fF8JuAZa0VDwXj1+WhYuS4SHCukyieHTBw\r\nPsr7ekLox3r/297RDb8E3sdbgwFpcIhO2OhA7CgBmBGIGW7ydAdLZQwxfX5s\r\nC2j1fQ8liT9N/i+XaOrsU61om2Hcj8F6Q36b9LEvcfF5h2pbqqVBZWZxcOS6\r\nCgSPpx2A9aDjG3Qnh8xxNITSCei/YENL7PNmdpiPUnECmPtp/ZFJkKg23fo5\r\n+gAIlKpWiHmKOQ0bW10xDjCU+e3vQJZV1S505z3QF9KrA8ripcB3JmZV/ouZ\r\nk2vOxIKN9oql8BLaZ2BrCcP2bMOj6gt1GaH35VbehPu11lwREcnlP6xT87Gy\r\nuMHkRIvHIuHsw2/YfoKKYQGGbAWo/jNX6+MhXMxqsxm+OvLSUYTpj3/nsbCZ\r\n3ak5Spsn9iy8LJBylQ+u9JChtJTGPqmLEKF2o5rRAzvVnVSh5IFiJbTdFaP/\r\nQ7b6r6VAGm+kuxaP8t1iMQo8uWNTZiMCrcY=\r\n=xoiV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.582f3cc1c.0","@material/rtl":"15.0.0-canary.582f3cc1c.0","@material/shape":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/ripple":"15.0.0-canary.582f3cc1c.0","@material/tokens":"15.0.0-canary.582f3cc1c.0","@material/animation":"15.0.0-canary.582f3cc1c.0","@material/elevation":"15.0.0-canary.582f3cc1c.0","@material/focus-ring":"15.0.0-canary.582f3cc1c.0","@material/typography":"15.0.0-canary.582f3cc1c.0","@material/touch-target":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.582f3cc1c.0_1665463764471_0.04673410651455567","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/fab","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf2d9b06763f9fa3cfc1411698bed92596a84548","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":23,"integrity":"sha512-0ccC0pndEi5aPoEMaudU44kMBOZ/NPE1u3scR6UqFzwnICoJbOycDVuWnkMxd0LoawcCQTqAr+bNX2zRoJqw8w==","signatures":[{"sig":"MEYCIQDAc0tybHg3x5hDTcxoSkaD6a/RGNezlrKVQi4aXP2clwIhAPZ4AxvJA8+NoHlL6sa6DtBdNKQ+4/HuHI+fXzDfFpLn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqzkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUFxAAguUSgbaGmGQX0e9ebvnJDyetP/HKAgfYw/mdCilYgBI9i3yc\r\nE+ieYoYFrhYCVzsQPWNOAahmwJ9ERTdkGjYQLcPnOZn6EHa0BMI8V68D+qj3\r\nw5xX004jpnMhy2ZYq5/WcQuW5GOQeMF5RvQBa4PA5VyvBx9trYT0LAgIIdUc\r\n+IUi5suDXogQ6NlsBLAKCWiZE1SN+q0VhGTr8tzQ/jbKsQ+ZV9JIWUScdbka\r\n/64J6RlHNsobl4Ebd18Ik9hqW9yqSc2hMad4THP6DkWjgGxxQXMG+zCreEQT\r\nlGtHyHIFUzvLiGVLQalGGmaHsGmdz4U1OeKg6Zr0Ih1fk6PkI/Z1/x11F5y3\r\nVgilluETxC4UhgaRfAVGqJl6xkSBKCxwctrVRv8nYzCYddCMubKAhJPFXFqi\r\n0CQkFOp8KC4YsPGK71HPHKjRLEK0ofF6tkeVv75qABAmfIAP9UF+P/DkuMNJ\r\nI5u3IcK+DspnU1PJdaMVbx2vVVapJOTBYyGQGyyLRYlByeb75Tl8M/aNeerl\r\njJoV/Xjhr736xQjDqobkCEIq/FKXa1kSSG8bDmxUqum9vELxSrh8fllFVT0s\r\nMx7D6zjUHAVwTUOLf7VPUPdqhrLRLT9PbCv9BqaGzArqYX6P4yWlA76yLUHd\r\nwKKI0jvpWqcykf11H9NI77OERu/vefhlY/c=\r\n=qQ7X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b1a6e3e88.0","@material/rtl":"15.0.0-canary.b1a6e3e88.0","@material/shape":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/ripple":"15.0.0-canary.b1a6e3e88.0","@material/tokens":"15.0.0-canary.b1a6e3e88.0","@material/animation":"15.0.0-canary.b1a6e3e88.0","@material/elevation":"15.0.0-canary.b1a6e3e88.0","@material/focus-ring":"15.0.0-canary.b1a6e3e88.0","@material/typography":"15.0.0-canary.b1a6e3e88.0","@material/touch-target":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b1a6e3e88.0_1665576163706_0.541367921660934","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/fab","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"754b69eebd7370891e7be2765cd175ce0a8e31ab","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":23,"integrity":"sha512-WnWhP68JwWI0u44s2e0KHalhRBkdEGmv4vxcz26k+UsyYDeSAC0Mwz4H3Feit3/IE+m5zPmnsHWqgl8rkw8bFg==","signatures":[{"sig":"MEYCIQCeIvw69nCQonE4UALqvu5c6Mm0QfT3FXxPVaFOmGwg0wIhAPeidQWI0Em+da3QjLWNvwVHY/IW1MSU6Bq7ka7Ihx0k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvJSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5oQ//aQcvwpwIHjd1qZ/vBjQkWujyEUkjqcUl4NaIA5dAfby83JKS\r\nKRIeylNIHBtRv6T/lKT4R7aKvxsdccEJxleW4NvmJOd3iWwk/us7HBDfZUGF\r\nP3CfM/cgg0dgS7sBbcRnEZLwJiWimMI3RQDsdnUec+GeBt5w4UIDIrJjy1VZ\r\nm6Z461S+8F/nrkQqNXNpMsdB0UQ0zlvhtgRBSmYeLwwEq7+8nN4FNuYo3B4Z\r\n0PbkGeQNmwbpC9QQIWcxaBpeeHWWfdG6Ka7W4endEMwuIFyYDsmqONuzOg1d\r\nVP7xhhg6WKBGvgEHJMidwuYqtOfO6omuNZH5LYB3Xxl4JNdWjIvTElkBe3Jh\r\njdRMfH03J66IEr5/e4NZZ7c8GjqBw38XSeW1hN9eGUr1aegoj70mJxP+WIDW\r\nBFKgTPCSXUmkwtD/bJfENCQGOUAdC6kGhJr/aA+nwIXeO6FIEfVZDN0ui0nM\r\nGH6h4Gj/5voHLG+GOvpcEH1bdHyrCpl2nnocnVLL3nmR+gyJndOKyuYRt6wU\r\nNcuqiy+sWdWrAg9lS2CWj6OZzwOA/rRNgEQrj3IiK145pESSJQwsdo0I8krT\r\n+Mqhww6CDIWpaWVwCFAGFlkohH+VdS/OOoCN5uns0RWvCtAgqd46Mk2LvyXp\r\n7oymp+RYDCNs8LJFIXDr0cDfOb+kYuo96xs=\r\n=DW9p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c9b1a31e4.0","@material/rtl":"15.0.0-canary.c9b1a31e4.0","@material/shape":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/ripple":"15.0.0-canary.c9b1a31e4.0","@material/tokens":"15.0.0-canary.c9b1a31e4.0","@material/animation":"15.0.0-canary.c9b1a31e4.0","@material/elevation":"15.0.0-canary.c9b1a31e4.0","@material/focus-ring":"15.0.0-canary.c9b1a31e4.0","@material/typography":"15.0.0-canary.c9b1a31e4.0","@material/touch-target":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.c9b1a31e4.0_1665593938592_0.9404246782387895","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/fab","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ceb0957bef6fdff16548c881c6e1d02a08c86bc8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":23,"integrity":"sha512-8GUVQ6+rBK5D3uVB60metOcZBIVH/bPAn1UdZ0Dlc6NqqvsEJcQmeI81phwOpRCK3zGreBEakv9SK92JYfhepg==","signatures":[{"sig":"MEUCIE0+0aUHD2Dy0hREf1aSZxGs2GGeStebwmEJOGkzlCswAiEAjdfnoEQBrppdKJxjpgWmYnXNSo9qS0Gbs4oxVdlJQb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxO+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrW+g//cd+u/wnYwzwW8PYHp9Hy0TJzEJC8cO6nZhT5E6JOISLZmfXo\r\n4+Penf9S1dZ/4LYXnw8aosYMT3kJaQzFMPjMIa8WTKGN//2Gai/To10tq4rc\r\nI9cJ1vLm4xFAF3Mo0DtfFsnx/LZUa6MYJC/q8IHQZhOoyWvkGvXyyGKWkB5Y\r\nHDeTAj+n4FqUF4EaV2uWor5TupzoGaDRDdKVijKr9et/AEOCtkFPixsbnC7M\r\nXc1kDh6IdsR9vBwPlzWY1tlV+ihViKK68fyF1ihd210XJdhEMzMmqJPaV2oN\r\nMKQeuzqUh0j2JF+2KAtMO3QxZ1t4WWH6zoCzaVca89W8XMAGHozqlV2MRf+4\r\n/mM+xv6g6c15PNBOqiP5sPX64Fz7fTECcNGGsRGBu76ZEZxDGrPe/RR6uABN\r\np/tSkXx7n5XDup5iu4xF2ZO3zTdxRggrTarNiQXAa0cxbk02TWmi9r2JRmMx\r\nwX7Lw3TEIuFY7QdbmrH0uuIFZLOIec+AXrJhuNDH1wHmSG2kRwYr0AVeboeW\r\n8X/Y7Glrita42EjCXV4G8qmxIBvp2sctKLcTLfQv4Vnf7cGAXWWv38F0DxR2\r\ne7kRo/wdEF/YXswWTsgOtUDsVKjCuDqsAGlJ6cpSLPWCvL5HPTndbU1eUqCH\r\nVOGxbMBrI5HghhFtXk0gwpj/9zQX/Y9t9Uk=\r\n=sgsB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13e9b0d1f.0","@material/rtl":"15.0.0-canary.13e9b0d1f.0","@material/shape":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/ripple":"15.0.0-canary.13e9b0d1f.0","@material/tokens":"15.0.0-canary.13e9b0d1f.0","@material/animation":"15.0.0-canary.13e9b0d1f.0","@material/elevation":"15.0.0-canary.13e9b0d1f.0","@material/focus-ring":"15.0.0-canary.13e9b0d1f.0","@material/typography":"15.0.0-canary.13e9b0d1f.0","@material/touch-target":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.13e9b0d1f.0_1665602494113_0.3278654263604994","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/fab","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d42e60cc9eed24f2febf4b577ee110dfab62381","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.1dc797e7f.0.tgz","fileCount":23,"integrity":"sha512-3wwC1d73aqhdGFsORmOjUn+D0eZQ3oR0wS96AUGGT4qY1BipR7CCD3V5rdxEE0si9zxkygDLku0HOUqZ586t/Q==","signatures":[{"sig":"MEYCIQD15boT0eeAOgpUXXLJOJh4SMFmB/k+4BOeQVI9znE+JAIhAKMcoHqC2iG7M3tmxITWCJO0hq1dl1UQJ33xiuSk+eK6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS7hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMwg/9Fi14Npg/HEYHN/jvH79G+4/s/YP7zSTd2X7OFSEyIavAjG43\r\nHK+Xtb5TNKjK6rA6aRUzkIyRp0R+E+HhpmaA3HnOp1JzxE/5GGR4lty+AZgg\r\n/VHiEvVNhyTkwO3dGYXz3RTkdgRGUZrNQiU+q7QZRTT1/lm/XAvglIf0SjNT\r\nhxON5THmNQXKaeR7vf9zaGB9hsz7+AWRYVBiFVaxCPJ8aU2JayOUMOL6lZ8/\r\niIA72GIsKgeRxAa1IkNRqmhgtfzTeEAqNbGrw3U15deEDAL2rGVD5eCDTyIH\r\nEntTbr9xSfvwc4UKHMYLUW8NM8ilHQzDNaOmNhHX6ucoeGM/x8SxwF8h2BtW\r\neTt9+h9vwbM/2cnYYM9DN7frp2j4namhSlBuf4yYTkQ77IomJDVP7ZGvM/td\r\nXcnMCy77xj2++V0p513+XvrPVRS8Pbsvuw9KvdzrpfuFaq2m7noVWtkFdHrL\r\nqYaMwb/dhir//6lKADhoys9YKWiwcqyO1CiWIfkbYW/QFglvfCpyeebsaBwi\r\nqczDAoiriZmQyS4MN6dz6QB3lwbgrUe+YplNoWDTapQ+7hELJIL+bTk8iC5o\r\nqJlWPiavbZN3sY4vaml1c5c8Rq8tFJ9MqEstQw9S7MTHqNjKxdwxMsAZMmHQ\r\nQGVw4qEQlRuqi7Z893mSUHNiau8PR1dNYkQ=\r\n=+/ij\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1dc797e7f.0","@material/rtl":"15.0.0-canary.1dc797e7f.0","@material/shape":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/ripple":"15.0.0-canary.1dc797e7f.0","@material/tokens":"15.0.0-canary.1dc797e7f.0","@material/animation":"15.0.0-canary.1dc797e7f.0","@material/elevation":"15.0.0-canary.1dc797e7f.0","@material/focus-ring":"15.0.0-canary.1dc797e7f.0","@material/typography":"15.0.0-canary.1dc797e7f.0","@material/touch-target":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.1dc797e7f.0_1665740512840_0.5702960585466763","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/fab","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ed4009397.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"661e3c72eae319c102dad44ff15ca8cf2226395d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ed4009397.0.tgz","fileCount":23,"integrity":"sha512-HRZ3fG81Qv7tx0Y2j3tW52phQnJybQ/Zu9bzbD1q6KbnbWNM/a2jcfUACTVoHQtPBc2FctJaddYZMAr2w9FKJA==","signatures":[{"sig":"MEYCIQCV6YE5LCfZgw26V8CcyoXgAHmuilsShHFbiIWYqpvZbwIhAIA2kFJgS31oU2RhwMSfnTd+NgqjEtizdrl1hWQfiBDS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZOWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3Ag//VqfDQUriefHXm+l4ND0vWV2fGG5cYyU5YJfpzUaTip1Xy9TW\r\nCfGYDo48WiwNPcK2QTdFcJJx/jtP3w5maT9f+ECpz6NIXSga+LOL4xtj4p1N\r\nZq6ECJlx+8ye50YRkEfrcNLpOeeBHNXAF2PUgytqLBC2OAvSKlny+Y3TNnQh\r\nxvcjPtNGFuoBLmCGSu0lkwXwKEQ8bEd5pK4lXF3wCk0Rj8jQYwg8a7H42ZWb\r\nhzi9J6E1JjlxyqqvYakUmozfYBxLGZLdn/SjFI0kRzOkyhs6+a6VUExWfK82\r\n0ro1cvW6DRG/GVk5eJ5NXAAXXewOo5plogPJCBi/RWGMpl8E73wc3jNv0l7J\r\nPr/QL/ZG1fWJyxUQ03SkftXCpR55bbvy0VRwZS1/q9qkMbyv9qdBUCQn6JJR\r\ngcjegX8WD78kgXC5VKBVMbAWqNDAyO90I8vWymKvlcq6VyW8UW8nb99x4dGG\r\nxyj71hFGKyr/0TpT3jMHHp5opW4u6cpP6+EPCQsGyOVsFySkzwPAeDlncK7B\r\ni91VicaPDEttWWhiwqCcQMpEcZSb+SFnIGi5b09GGtt18HHLqeRFj0dY7OyA\r\n19DdUZcJo3rN2RwNpoGq50YHU2JfiXta66+MacjnQneTRbcSIbZbHG1kJe4x\r\nyv7r5Nt6wnrfvmfBa6zrfKyQ/KWu9FA1qDI=\r\n=Ft4v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed4009397.0","@material/rtl":"15.0.0-canary.ed4009397.0","@material/shape":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/ripple":"15.0.0-canary.ed4009397.0","@material/tokens":"15.0.0-canary.ed4009397.0","@material/animation":"15.0.0-canary.ed4009397.0","@material/elevation":"15.0.0-canary.ed4009397.0","@material/focus-ring":"15.0.0-canary.ed4009397.0","@material/typography":"15.0.0-canary.ed4009397.0","@material/touch-target":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ed4009397.0_1665766294462_0.25625229347003065","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/fab","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6970c0d76f130896a6346dde86cfe7eb48dea2ae","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.95ef196bc.0.tgz","fileCount":23,"integrity":"sha512-Jjwj6WVmNSDpGs/JjtobfcgS8Ut9BkDtRWFKGtt8KfC9SZruin6Pjb/iClNA5ad+aaVMewQyJ7uXdzrv7QrMkQ==","signatures":[{"sig":"MEQCIGQWepWwo+Qjf8UT9IsqJQywKxaOQnXdSpctLm0u6HPZAiBO4ojef8aoMTQXMThkO2oVOWPzbECIwtcistCm9AyvYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe1FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9IxAAm4ZtAoLZzdDRVoI1wR1VlClR0fKwU7CoJ3Nl66wDA6agyUGC\r\nkzfKbC6oLxGxoAPlsOiPbvqoS853AlUyVdpE+UlX98Cz/4wE0MzeAnSAF5nL\r\niW/X4IJoPzBi/P7LEtq3A2PY9YO/RyIz0iWfS/nwf8W3UMgdyUNNfua7uN6q\r\n3fBgcO8UCdTL8JQZxUtPinwt3Whu0mieUYEISalOx+bMeYb5YmFIuhWDFxWd\r\n6MkfcWTqkb/Q/iG+eFy3MLOQs7hQ08fH94FbASamI9ZMGhER5/2z1U2xtkLc\r\nXnWIYzD+uGg29CvNDGVOjkKhTCDygFQqk6dBmtgnJWQKZu5e9Id3OvbI1G71\r\nklE8BVWvSwfJ2FQT8NpcQ4NroAi7B2na4mHr+46DDG88rBjS30mvUcWqyA9O\r\niXMen10fUa/A+QUs7h2cA4P2Ik73RwUa7gSf5/5O8vmYNrqCmqoQNo+5ojix\r\nrVOZkGPyhmOvaBCR8UVwp5HtgEezvzVPBNmuOEFk0cw5INmoHBSNUGdi9Ch7\r\nWJe0s7ObWSbYTcmAVkBwvekdeRvZ7YJ6IeHC9at+XhtQawS9GRLjO5EquIfU\r\nIB+SzZl3NdYqxAmC8gPSOcmhkSc4VVoeVNQNA+uDSkDjCXD7VPd3tDk5QnAv\r\ncLiz21KFjk9pJJkq09Ws+bcaab/VRXIr/hQ=\r\n=ZxOS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.95ef196bc.0","@material/rtl":"15.0.0-canary.95ef196bc.0","@material/shape":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/ripple":"15.0.0-canary.95ef196bc.0","@material/tokens":"15.0.0-canary.95ef196bc.0","@material/animation":"15.0.0-canary.95ef196bc.0","@material/elevation":"15.0.0-canary.95ef196bc.0","@material/focus-ring":"15.0.0-canary.95ef196bc.0","@material/typography":"15.0.0-canary.95ef196bc.0","@material/touch-target":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.95ef196bc.0_1665789253181_0.13990351081400054","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/fab","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7ca4511d3b6c9ea5a027d1f5267545302e3d7c7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.13eea1b2d.0.tgz","fileCount":23,"integrity":"sha512-KfHjJrLbs0kZBYJnZQHQcd5cZlafdBiU6GD8u4TMDkI+LVaSXexTl9YzLqDaSes+wzA8kka66/Oo+OBar0sjxg==","signatures":[{"sig":"MEQCIA1wH/FTh1f7cFkPvqEBWzApiXBLaxoFHxgjodIf4+OhAiAShy2pd66CYoTRYIRRWlt3WkLx2OziaA3CeqA28sh/NA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNFYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp60A/6A8NbE4a8CKVki+VYaey00fG/zj1K2Vn01Xy/7Chtv2T2XQp5\r\n80Xbs8phAOQmUbWzNKgyrUJr7D84Lpm8G9mGJ0ue6nt0oG01Y8IyFnTugiV4\r\nh9fhOQHZX4NDiO/j/dHSXKg2A+eNG+1O5nc/COpUxpCd7ElmC4Idj+hjsXcH\r\neLLxlxCyY93omZWycO3TqpImnMI77YVz+2WasUb7O0Dw+VU/OCfhCZYjC45J\r\nXakTOeKIr/WfEOT3ViW7gJMuZztaztFQnGUkQT43kNnsQVyNGn4a7s9DGlaq\r\nKgKuFvdEWb9zjsd702wQ10Uqwgspvb2gJlgme67uXZoSoMLGciSQPK3qyeGj\r\noWlnUYR9++c6hlX3J33xihFj+JYhNHkQ8GuvxpL7FtETy/+HeGkeyh3YH/cU\r\nyRQCk+MiYV6qbgVVMjt82dblqAAd6c7M5UiDwnlscr+jfvjdvWpj9u6WNcBA\r\nqq336x+1R+ofNeYfu3pW8ut+eWnjiMBxhOBpVJYhPK8sSgIsJym9rPWI/AB6\r\nsaJbTM7LXk/qgRulBJKLaQGgkN/43NtCetPx3OnvU/LdXta5GfzUBzyZWrKX\r\nzJl2MvLP/2sNpJhaJN2pOrcGuy893zBi9LqUXkgD2k3RtZ04dZWH1VXpUStY\r\ngja1OzF7SfJ94y6/9WkweEr5fB5KaUXDO7o=\r\n=H7fh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13eea1b2d.0","@material/rtl":"15.0.0-canary.13eea1b2d.0","@material/shape":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/ripple":"15.0.0-canary.13eea1b2d.0","@material/tokens":"15.0.0-canary.13eea1b2d.0","@material/animation":"15.0.0-canary.13eea1b2d.0","@material/elevation":"15.0.0-canary.13eea1b2d.0","@material/focus-ring":"15.0.0-canary.13eea1b2d.0","@material/typography":"15.0.0-canary.13eea1b2d.0","@material/touch-target":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.13eea1b2d.0_1665978712614_0.798294795227223","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/fab","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79423bbf824364eef1362202a4f5bd5f0202f8fa","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ef9b2babb.0.tgz","fileCount":23,"integrity":"sha512-bP9fMH8Q8vTfAhLzUCMI5y0oBRpeRc34BclHEB96kzkt26+OAsB+UDStSQExWmbjJXO2FJlI2q25dP1k83FIgw==","signatures":[{"sig":"MEUCIHy7K/owMJgNaGFpFyes8oPFD1Xv1ZcdyfjxFR9zx43lAiEAs0xQcFhfKYVBO2D5JQ74mjIZ5CaMdFH1+m2xEpjnJww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR3YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwSA//Uqxl1fzwtBifSZOPlbrD/c5EHROq9Tp1s85rh/WMF51jdSD6\r\n4W6gi2YeoBkJ40xof3zv5vJNSztUH92eLHNJxJW2QMGguHPPr+wf/wESCpJJ\r\n5PXhjNX83U1NCNkXjXeCZ7s2u88f7WCpRfnqZJQLE7PUvNanboF2mkJrxgnE\r\ndLdbzqBRtSIi9rsEXbTlCaw7vg7ZoFllSw3Z2FQMMM0AUDRuArOpQZg1wBHd\r\nMKY9JBFWLksJ5dWZmh+9OtXLDl86+nMTid7YGi5Jk2IT+reKbhFbtODIb+zW\r\n8YxPZC2rhjXKrW0mbqAYLmq1xS7tFc75TU6Ep2qRHN7IMvaSyfa+QBIEwysz\r\n2cebQDvsoASQzB7Y+w2s2FgSYn/p4ShW0pXum1qWy+ZoyxK8mQ8S25eTbDg7\r\nWOl+fBoeuo42Yi+KDLeQOD6fqaPBP//Xjkc0VSzgltkoax66p3Q+3HGO4ZFA\r\nshCWOkIHLjIafbnR6v9dvbMQDCpTyXJbDr4M/DDfAVwKkFxvMW3Y624N6pvJ\r\npQtB2baY8W7lEPFQQfw8J70Ycou5pVpnN30xhQxW1oJ4Ygt3ITkglY9VbgPU\r\nDZiaoS9n4Krh4isuWckpQ+hhViMBtTwO1zMdc+j9oWX78cl6IrvtfEFvW0Fz\r\n6c/7lBgi2ZU7++TLyKEIEDGB65rsR/Bx8XA=\r\n=SYrc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef9b2babb.0","@material/rtl":"15.0.0-canary.ef9b2babb.0","@material/shape":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/ripple":"15.0.0-canary.ef9b2babb.0","@material/tokens":"15.0.0-canary.ef9b2babb.0","@material/animation":"15.0.0-canary.ef9b2babb.0","@material/elevation":"15.0.0-canary.ef9b2babb.0","@material/focus-ring":"15.0.0-canary.ef9b2babb.0","@material/typography":"15.0.0-canary.ef9b2babb.0","@material/touch-target":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ef9b2babb.0_1665998296555_0.6856587360885551","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/fab","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb23528d2c7353e6d4bdb26e8fb000e4489c2ccf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.cec7fb987.0.tgz","fileCount":23,"integrity":"sha512-0iqVwFvOjrdaw7yjXIfTuNp4ty4eNAzW2H1jnRjlKIfcylEjq9xM8Rb3QCauGfU0mYPbao8+HiJ4M2q4/FD92w==","signatures":[{"sig":"MEUCIH/fGiUOmK6pP1GfzfOLOSEP7ew3gcP1aSgd3dKIlJxiAiEAvnH5finkUwFKS19pRVDy6w3CrXMh/pl7tDCUzD/4Lzg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTTmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqezA/9FopmxiVOZtH4sv6crjBMbGKYmIKFT8Jx4nBpnkeu3Gp/mTg8\r\n+iI6e9CjB9sQT8E+zAxhZ0RsAHV/cFZw+3mSzmzYBHtKTypkVvf71yM03G2X\r\nKElQ8aBJMP+tWANFgQbC2pCQ6FD1Hbzn32YIMuglnP0DF70EPlpSAzuYbmuV\r\nwUix8mRI7zgg1Z5DB1O4KgqRsVVjFME1/kOKpJz3ug6lCE9rC/FwWw4FLScK\r\nWsp0AVT2B4MOsbW5zgx0jtI6KwyHhLxmGEf05D4uC5egXKgxpxCJtdgJ4+Wp\r\nWUD/b7rOw+31Q9LQMj/i7WM8Y9zIcEIFQga31aRkRSv2sLzmRG57b3rkJzBY\r\n76ePWPXkTb0shduxt5ZXNpgt/85bQ7Nnxl1hTovAJLWFCcEO0ugRPrhXX9LG\r\nRxOwkhKOi3+3jXwYQEkSjTWay8f7EeM+a/KgBxaQp817BxPiO7mTs3tn/6NH\r\njaf7LgezBsQvw2/asTT1yI41mmoSS1ir6aiTGmSBjHpGKm/IvCxyHgR0VZS8\r\nYq4WECMAv6YbCrAZxf+Bl7gYUa6xt785VBbemtOSAPmijwDG4EP6K3pisR4V\r\nxoNhyHZvy0TERkdXmD411jlZWWlZ9bxFVA8Bij2Vw4cDoUwJ0xHjpN4ttBWv\r\nRcFIx4fxKAv0lSDSoqA5rYyPx15Jv9sNpFQ=\r\n=TUPd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cec7fb987.0","@material/rtl":"15.0.0-canary.cec7fb987.0","@material/shape":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/ripple":"15.0.0-canary.cec7fb987.0","@material/tokens":"15.0.0-canary.cec7fb987.0","@material/animation":"15.0.0-canary.cec7fb987.0","@material/elevation":"15.0.0-canary.cec7fb987.0","@material/focus-ring":"15.0.0-canary.cec7fb987.0","@material/typography":"15.0.0-canary.cec7fb987.0","@material/touch-target":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.cec7fb987.0_1666004198259_0.09390367871461924","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/fab","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00f3cf8bb6d01ae34a7b52d3ced83c9ed85a2f33","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.4fff58b08.0.tgz","fileCount":23,"integrity":"sha512-vys4dj0avhPea5O44c3h/repfCpvSQatjLiopJ5wk4hNUSoiwLKs7WSbKt+DlQlbuzKXXwge6xI7e16NjCZYHA==","signatures":[{"sig":"MEQCIADISEd2bIrEmWlCjwU5vTwIxMizVMvYCHkRPiw2wFJuAiAXTQJV3r4UcGiRPeu1YU3nQaIhYOqoUYTAqsszU/KqHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXNJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoqrg/+PRrRnNEDuoCcbe5qtg7+Awac3C53Oj3rQxejHom4IalSa4hR\r\nWj2U0IMSK+9d9mkzAAf8d6DaRCoNT5MoMouT6g0xtY9E/jaE1HZXVjD+jJZG\r\nUkmlTreEzoxPin1pUByvV8nkQp9PbQ7Xo/UDtJ/3C2WpUW2auVl0ArHuG5qh\r\nUNf8SzLzRC4NSXXw+smwRohNgq6lDWi0DVNAdqmD6b6AtzImlQ0+EuLGxyiZ\r\nREfaQi15idwc9VWpiwh7o/Yy2p+wiNDxwK0zEc7xTgRHsuCjAQFckqyH+FCo\r\n/Pdq0iClUjEwVjhuZ5JNTSwk2JV+tlvxjglWnDrojTkaf22V/w7rVIOaFyeN\r\nurm7gYfqDcluD0k0+alKpuSX7ZVdHqAHzOHg9VqgD4/B79ANGbtew1LSmmIP\r\nYCQrR6AwBcov0T2NWHuP5K6+ghM/+wqcEV6IhfoB4ERt/FeQHNRaVjhEIdhQ\r\nhXW84B1fAHhvoOWP6zsF6b+naHxxtIB0YEyUWrCxM8FJ0k9p9hUVUCdg3YAK\r\nCTr3OwiXdvTA+BBnKXJ24VcPJuefZtbtIfzi+3ktRerTv+cIY5eZUS1Sm3Bz\r\n6Ba3INubnp4a/qLokb7tkY3EgQRYPwgauadoWfWPZj4kds0PcHj9D64qp6pb\r\nhwf/ueNqRbxm8K9DFyHZsUx6FBO6RYfWxEM=\r\n=ESUJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fff58b08.0","@material/rtl":"15.0.0-canary.4fff58b08.0","@material/shape":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/ripple":"15.0.0-canary.4fff58b08.0","@material/tokens":"15.0.0-canary.4fff58b08.0","@material/animation":"15.0.0-canary.4fff58b08.0","@material/elevation":"15.0.0-canary.4fff58b08.0","@material/focus-ring":"15.0.0-canary.4fff58b08.0","@material/typography":"15.0.0-canary.4fff58b08.0","@material/touch-target":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.4fff58b08.0_1666020168780_0.34724891730415797","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/fab","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.587d8f871.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98130013160415685ff7f20eeeb3efdc4c972f4d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.587d8f871.0.tgz","fileCount":23,"integrity":"sha512-+SdP6PEHbTomayFfWYcbsT9rE/jiVlJ1NJBAWdaUBqaLpjxnCSHJOj0zewo7QuK5eFBnqNar5OMiAh7W9LfZQA==","signatures":[{"sig":"MEQCIGI/A6htvxyHLP1+Q0dVlirxJtmEwoxvaURBNhx4ITBUAiBVWBKtW+F8AYlh08eC6dpQEMNRlXVy259PI4GL6SyqKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXtlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmondg//Yj0lE1pZQIlzq+s60Nr1qlFDSBgc/pgeC683tuVJ1TFPi95W\r\nXxdPjOzvczcSicNGpO8CVsyMOEE3qC7IuReL+F+YrKsDpjwQ6B31Eme3MblF\r\n5tfdWkhukZBoXtJHm17ZWaizK3njbwJRegjtEQ/bH6RRYyhw7GVhn1wcTyFO\r\nvyIYKQ+xV7nX8Qj90Oo0+6GFCZ7RFozNQ2b9k81lTryg+iAFWf9t1avXSym+\r\nbEl8X3uXXeE+a2NnduEZE7TbvEzk8IpqnEADWo0OZtrgcW+aARsETu9e0nrU\r\n0TKIqICnnnx6+YidUefmIx7YQb7JYGKp/DvRWje/SIk9zVxk1JmOS8bUwf4H\r\nU+jG8k4lk96pF3XtC1X0t+GPl95hLfuaEGGjcBHzlwPmESXEbkT9qYbRkLrI\r\ngOCCbcHnIkDplWGqQ1DiZ69na2McCFM1RavokggiH40AkHPYmwaVTYZZRTto\r\nhJOhN0KpfEiSvaT7DBR1EDQiVEvmf3Q7G57uG30SZaZBG16znXVTmN7hBEZj\r\nqPjvKbA6RXB8qGAmtxZ++P+sSzveH+5pxAGGt3cmKYxjmen+znk46+CiC0LM\r\n+kNNrTQ3YcjgngpmIlCD85HEpyw++ztRZwoTeA6XpmcV1tl6mNcZPbINVtBO\r\n3W0Pdn/vE/xHfqax4h0SjWYigBrSXyx9wrU=\r\n=9YAz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.587d8f871.0","@material/rtl":"15.0.0-canary.587d8f871.0","@material/shape":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/ripple":"15.0.0-canary.587d8f871.0","@material/tokens":"15.0.0-canary.587d8f871.0","@material/animation":"15.0.0-canary.587d8f871.0","@material/elevation":"15.0.0-canary.587d8f871.0","@material/focus-ring":"15.0.0-canary.587d8f871.0","@material/typography":"15.0.0-canary.587d8f871.0","@material/touch-target":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.587d8f871.0_1666022244855_0.7751780739538874","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/fab","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6afdedb70ffc626ad62bc2c40175dfb6fe375dd6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.edf4b98d0.0.tgz","fileCount":23,"integrity":"sha512-tWU7Twarqox0202p6EKGnSRhJ02oinfpiA8kM4HgfY0MumWsqtaVFzxJaG5KuYb9atKgC1C43lU7GnW1ilHTqg==","signatures":[{"sig":"MEUCIGdFhU5hb39n6gzueVcXleGKemKw+lsLAhR35lqGwEqYAiEA27hMDrwGRIT0pCjXP2GDtyyXGovs9/L3F5r6hULGSZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYWNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXpQ/+MU2YE5guSarl4GEiaFZmYAnDwKD5J1JTPZwvE/jNlnYbkgzF\r\n2FLzdEEBpj5wQhE3T+/GbH6Nw92sG7OJmJVD87CejBkci9c/Kn+17UptY2yH\r\nQkenYM988Os5sqvIGmEjzZ8frRyuaQjPU1+w+a31a7mMGi80NhkNdzskBqkq\r\nM2boclwzhSliauODLa54pY41AavopqIslvCmNsO6H9J53yEWK0N2U7Bir+z6\r\nznt03er7Ao5c84MZvPkWNcNQRnnUXf5QdOjy7o59gBSxXkhA5tdz6VHJF1Sk\r\n2mcLywcOXHQ/ApS+l1hyI6/2/rTT5yszovafJI+Fx2/9sSXicI+Qy0Ryq4RB\r\n1QSNKGLd0yCJCirD1cCKhgC8LftYUhtqc3TtBcWJxKabgNZCrbnbhq7tidEt\r\nQqNtYIiirCgCkwY1p7eDld+vK6TGDcrg2UykLF6XK22JIKb+yHwTcKC8VQMP\r\nX+KEw89fsmOznt23dUYKrXDYExwqidDZc3Y7Yd3jmTRl8X1E8uY9pEa3+lCS\r\novBZXvu4OscG6xLSgYlCLOFlv24rIfzUkGdtWXiMNzN1/K9EydWeedG56lGC\r\npNowoEL5mo3C2R6U04VhdOgBvNdRlGqsS6ZPAp50jOHGCaJ9y+LO8KEVUdBr\r\nb0jmPV9z0kQwvB3QOUpTvoYcIj4FVPwmpGI=\r\n=9Mg/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.edf4b98d0.0","@material/rtl":"15.0.0-canary.edf4b98d0.0","@material/shape":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/ripple":"15.0.0-canary.edf4b98d0.0","@material/tokens":"15.0.0-canary.edf4b98d0.0","@material/animation":"15.0.0-canary.edf4b98d0.0","@material/elevation":"15.0.0-canary.edf4b98d0.0","@material/focus-ring":"15.0.0-canary.edf4b98d0.0","@material/typography":"15.0.0-canary.edf4b98d0.0","@material/touch-target":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.edf4b98d0.0_1666024845040_0.45956718968079735","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/fab","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e951a6c71df447b4556a0a18279e38e34d44450","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.024ac5f16.0.tgz","fileCount":23,"integrity":"sha512-qoZ9Kf1VkFu7UwkFFlEsLaiVObU91onH4q0kDTV7AQruOEyohHkI1FyprZzmwVE/Q7PSqYrQMKM4ZoD7bPpvPg==","signatures":[{"sig":"MEYCIQCu2xtqrH2KaMqKUP1PZAI1o3FnpQHI3qZdzEk+U89kfwIhAO2zHnHIT6DSqq7i8oH1kkL3p69p41XXsxW0xHM+1lrt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdpgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo11g/+J02oiTvNmOipQUbhHZ41vFM54LBExg13a0qIrDhClopJwM2m\r\nNIShEs57R0yeRT4Zumt/VYVSuM83XrkUhF20lGk12pijA45WoXH0Yxcg+xyi\r\ngaNg0CKDQ0JOzZ92TIet5pFwEynRHFkVsTzUelm+TNp/T2bBcFEziRjafDB1\r\nnQFsryjvggvHHDz9O46w+iqW9gFc2jhcZW7Pj16h3I9XA4FuULRL5sKcjj7c\r\n36EAa47mGpB92/vNR50iDiJE6DPAIv4awBS8ywrHTSPSNerGGGD3C1sEgOXq\r\nZXYzSQJ8Tq6M7P31ysuEpu5Y2QdOPp8+bfCX6eg9OSEVBhkw3K1G7yi7c4Gl\r\njdnZFZpmc1iQI+Fe/eSQYLiBfDKjR8MemgF2FW3T28tB/4O5ucIxPR1tbalM\r\n1poIJ8ttxo3yxfoY6e56WnFf+yqMuT6wc4eZlLIjjbCuJwAu/hpgnZLR+mAq\r\nwXmjv4hC6yvoc3BEBFCv4mmEBNTxF6XBRCm96FGCN277mAZGGHQ6FlBBgozb\r\nHB/m0rmWvLx0uWFZWCHvu5t26BVvlfyLU1SgoTlFJE3+oKjnWDH74RT6h/YJ\r\nLpCED3aIkQVOInoDoMzfQHvlii0wzWE96X+Iec/hcDPEhYuCUNikL6wiI1F8\r\nDoDjxWMC3OzXMwOTGMK0XNkGJxrDx+I4MCA=\r\n=bRL9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.024ac5f16.0","@material/rtl":"15.0.0-canary.024ac5f16.0","@material/shape":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/ripple":"15.0.0-canary.024ac5f16.0","@material/tokens":"15.0.0-canary.024ac5f16.0","@material/animation":"15.0.0-canary.024ac5f16.0","@material/elevation":"15.0.0-canary.024ac5f16.0","@material/focus-ring":"15.0.0-canary.024ac5f16.0","@material/typography":"15.0.0-canary.024ac5f16.0","@material/touch-target":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.024ac5f16.0_1666046560549_0.6559826355152847","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/fab","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75ebe129a913402185a96d871c6a0519b61d6f45","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.c8bdf6144.0.tgz","fileCount":23,"integrity":"sha512-uBZdykQQH6UKXAc3CAHTTeD1IuAbm9UPzQrl+h9439U/aSI11niyIREMJ4gtn3LFdCPH2ZkDStQCi3KSNu65bA==","signatures":[{"sig":"MEUCIQDw7o5UGOhxtmY5QGqTUrM/L9I+DDipu/M+5ixPtKNUPAIgH5mGWpLvy1Yxqt7a/r8XBKNxR9j1B5sZditqeSwS5CA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu8uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7VBAAoKhEdsjaiQoeQHRXdholWgH5DewnIqSebv1eG57e17Zub1VH\r\nqxWP0Ekqu5P5mt+p4kOjOfFo0j2f6yw/hR4qLMsqxMrY9p+yJbRWsVkx1mNl\r\nkiY4VHmb+MOXkvRz6fAfaAM1TikjxMwtsfRQOKrrL3LsNWetEC9f7CiIQsxl\r\nYHdPduCF7RaL3FjwH3bAFBfwysk2/99iKw4T1DCqtDZvzhNrr2+SVF9fzx0G\r\nd6YeOzxijIe4nP+SeI+gQ55VAjILi8E2IPqzC/G+0BYeyV+MYbXs2d8a9PbQ\r\nGYZ1hG7z9k7IgaCIhAIOMn08sdgRXTvDoKglW/NMFE45iVE5d3JTXnv136IO\r\nHPVQN8wxGeL8sZEBukroWO3O/g7IfhMwH6KWU17hGTP+PpEbY8e6R36t2/Bu\r\nO8g+p1c6TA+7HuLp8PqojHunY8lKDYNgY0VmslpqWC6ycs9Zx1BY2HadVgCW\r\nebSSnjmDJs+3hMOjYLlVe+IOShY57ROmTAUyE5S9VEIqrs74oVWDOjaDqdW8\r\nbOcRa2qylJwTcPkFLo750ZwCmPi22yLbELsm6eVmN2svJDcHzK/h3hpxHIKX\r\n5wjGcLkSSf85GSzP+v+RcLX6W+gExiH/DPyittIqydh9CrCLu8ZJ1o90FuFK\r\n/xn8cWdBYRPS++dQtGQlKMIvwY7IbYkDdKM=\r\n=8+wY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c8bdf6144.0","@material/rtl":"15.0.0-canary.c8bdf6144.0","@material/shape":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/ripple":"15.0.0-canary.c8bdf6144.0","@material/tokens":"15.0.0-canary.c8bdf6144.0","@material/animation":"15.0.0-canary.c8bdf6144.0","@material/elevation":"15.0.0-canary.c8bdf6144.0","@material/focus-ring":"15.0.0-canary.c8bdf6144.0","@material/typography":"15.0.0-canary.c8bdf6144.0","@material/touch-target":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.c8bdf6144.0_1666117422619_0.029019055942106853","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/fab","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.bacda4885.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f5fcbae6e5415846d0c6c281e384b2d831a00cc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.bacda4885.0.tgz","fileCount":23,"integrity":"sha512-E8bfYjeMiAj65O3FlkfrC+NUuQJbdQC6QgsNC9X1suG1P/hDFiVo07UGUtrXC5l5tjgDjAfwz4DmHUoKT7GULg==","signatures":[{"sig":"MEUCIHpPdA7i1/Y81cn49bxudcKf8+x5EHQ3UvZgIcySFGIgAiEA9jc5tHmAHy76kO79vf46Cdk0MFNT940xgw4J28V2dvw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvO2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoRA//QKlKyKaXC7wat1nrsnQrguBa76TaBmET33Pfh+uJsYLmmEvu\r\nLI3MD+zB8SNHZqSx8mai2TlnBAQ6WQHQ/pff7WjllKelc/RHj7DxUBoMYVrG\r\nOVUo08pQeHuZi5rWlzgIFILjJ24CTA31FlWmnDn53M0dpK7jm4Ir8kDkSmZh\r\nMqDR6/0tq4uB8CALrxqgIRqayH7r8PpRRjuBmtHS5hLb3qp2xhUO7plf+Vej\r\ndiAEcWnpBwFnR2ZaXZamyHeFLDOZJ6P2G4Hwv23vjmArZ4UeRaq3U9HJt4Xp\r\n/KEzfPIaQjxKpx0GUC65J5d5uoZpiECKmXXdxikVAzjOCBTBGrgeuuiS8f59\r\n5cVf+yoHzI4w/RHn3bSpRfr9iKbpCQVJSYJ0+aCJ8MgttgtMGJbM3aKdeKKQ\r\nkKA1nNxZYuk7NoC+7KrClEdQ01Q+77pxrkDOlns9PfqDMhaBxJ5t6qROxP0m\r\ntfLShgAZ9t0rCPUSa+cf9sP78WEPnO5ADuPwgPMOo2DCNSZZI0/HUv1AJs4k\r\nj3ZI9N9ccdj0hVEMYgwuwBkuqkps8ItXHEgO6iZlheV8yt9+rxCNGydtKYPp\r\n7ELJ5N6vBUHTlNruN6nko0a/N5WLVoCBh1VMJBw0ZghgaBYmlMP+LVWJC6s6\r\neuc1lOw0sUMdRMj0/uNdYMEQ8JRm/1dLe9w=\r\n=DO+7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bacda4885.0","@material/rtl":"15.0.0-canary.bacda4885.0","@material/shape":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/ripple":"15.0.0-canary.bacda4885.0","@material/tokens":"15.0.0-canary.bacda4885.0","@material/animation":"15.0.0-canary.bacda4885.0","@material/elevation":"15.0.0-canary.bacda4885.0","@material/focus-ring":"15.0.0-canary.bacda4885.0","@material/typography":"15.0.0-canary.bacda4885.0","@material/touch-target":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.bacda4885.0_1666118582513_0.7443685830730022","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/fab","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34111fc2ffd39f5ae09178f49520956139cd8588","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.92b2556cf.0.tgz","fileCount":23,"integrity":"sha512-aN7+MXjX9gFWUtNugqRJFw6L4DXZBiSLQgZbIm71UGUZ13SydMKSzF/3d61N+grUbJddv1hO5xIXbWTwd2ES8g==","signatures":[{"sig":"MEQCICSbH11EoDljIY9+CftO5WMGHTJPLv3frTg3+EQQUJsRAiAi89vJBFNMr70s4RU02/sNHanIKYOUqW7M7LqWYts5aA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT09FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmKw//cmn4hyX8t8hVh/BZSMlJtYMy2UvRWGxM+3vlr5hU5VE8xctC\r\nXe2tiwv/OGGweU2QzEDqakyYIYOQyn1TRdehDkd2n4mzU3ozPWYovrY/I5Lg\r\nYVk8b2z0AYjvFZtwVdVimIgJ5gFOf9w0dTRf/ddA1dFSJc8E7p0z3UGZ8Cr6\r\nSD76UEXZuO4u1sSxGGoSWlkRPJiJBv9/W/gYXWAkfbkT9hIEuqtzXEJPAXWV\r\nTUrvrRv33JcTtgNFnWID+88xD+8A/fyEL12WXZ6QnLY2oIu3GG/6eIeB/SHd\r\nqQAUud9hJshNf7IN/AjWgrWNfNdntsNftGCo4W3FoyT/FWNhJ3OsZuudxiAs\r\nDavq2jo8qZKYMF3kItft0KkjKx+YDYY2WHL0piOYgzwWG2VtrnR37iqzs7gg\r\nszXBdRzFf6mAEliis8ALavUA6YQd+2MxqXOhvI4qRUnEGVq49yQwehOezdGD\r\nOgMHxMMACzKGHZUHHifsdRyvhFVhD5HSkiJyPsYNQxg9F4hJlhCeaNN80nDi\r\n0uXTQUPQeCfcM/cubDJHJceOE09b0Z1X+0Ew5o3/iSc5Sk30fmMAlJNnd+Fg\r\nTyK/Yg53eI3OqmW/y9X6N8i4+CBLBzjle/OeJYF/rVNAQ/86eiF/uCGdohSd\r\naQih4fM6pWGzD6q9xiGAxGpWCCRFiRg3zGQ=\r\n=wIRw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.92b2556cf.0","@material/rtl":"15.0.0-canary.92b2556cf.0","@material/shape":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/ripple":"15.0.0-canary.92b2556cf.0","@material/tokens":"15.0.0-canary.92b2556cf.0","@material/animation":"15.0.0-canary.92b2556cf.0","@material/elevation":"15.0.0-canary.92b2556cf.0","@material/focus-ring":"15.0.0-canary.92b2556cf.0","@material/typography":"15.0.0-canary.92b2556cf.0","@material/touch-target":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.92b2556cf.0_1666142021193_0.9527222397012016","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/fab","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.cc804509a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef0f92d0ad6de144e416968ad69517df19cdb684","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.cc804509a.0.tgz","fileCount":23,"integrity":"sha512-7bX0Vj0qxJs/e1AvQ/f0j8g9LdPnPvM2VU52BzIKMhSEdqJrKuRBfNFXZRs0eWAzHWP+g/IbLr74MASz8HVvXg==","signatures":[{"sig":"MEQCIAjLKwOiXx5hXmCeAQX0NHYuSeZzP7dqdURQkOVOKtrRAiBQDUsMP9nYTZtWgiHayM6p8tJekMPeMYdav0HdwWSS/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1ApACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqbqg//WZ17TcbXRIMtKu+12KYpNmBnsEjk90tumAzopiS6aMj8ziP2\r\nPSazG5CdVs4+k6kVV8b3GdoS4ukiDJTf20NXJgvJovrxV/xXXgM3iwUgwMtu\r\nhVH8952hD2dv1Qj/OMhAig8x/tUwE1/l5tgBVq10gh/v7RZ/Qv048WLdh2M0\r\nIaUCUkTuNHJSZVCNSIapPg22K91v5qJhh61mdAd7Z5c3HrMsv/pHzl9VtIlV\r\ncuO5g2itj+QCNei3RBlqQQeoBGNF92e8PvjZ0jbJWZbPKXePTOzKmiNUifsW\r\nffCqLWj4K9SB7bJjnM8JARVbLx/QISXUovgivsl9kF+CY4HoBk9rm1I9n9/Q\r\nb8z4pNECfKSLZ3Tg2OeLmognSg2Qk953kXtV3R06MJg/0xQ9GRT+ZhiS5iCs\r\neCtIYjZ5X8o4bSkjLK4M5RiK/ZaIfB5LZDVnd+idlwzD5zDQyftCexUdAYv2\r\nbWeCK2bN/957zQBj2xTM49bHct6QOiHPqm7bL33BSlw83WET8VRF0skq8Ngi\r\nQM8uci9nL0UJxGuPQ4satPr5jrLkwPV9vlyvQDf2eehsj3TuBz2JU/lD1OrK\r\nYDSKGHrsZxgR21D7+L5erYxc4zA6nKSAeZYlzXj8XSNh1hHyQWove4sbeGj0\r\nCErUupjbDszzyCyMGHSr1CMZ2883hm5V5os=\r\n=NbxO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cc804509a.0","@material/rtl":"15.0.0-canary.cc804509a.0","@material/shape":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/ripple":"15.0.0-canary.cc804509a.0","@material/tokens":"15.0.0-canary.cc804509a.0","@material/animation":"15.0.0-canary.cc804509a.0","@material/elevation":"15.0.0-canary.cc804509a.0","@material/focus-ring":"15.0.0-canary.cc804509a.0","@material/typography":"15.0.0-canary.cc804509a.0","@material/touch-target":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.cc804509a.0_1666142249590_0.10614925525328145","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/fab","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.982bedae9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"635d1624704e5b1f86c7e1af0c3a48c7a7e5a593","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.982bedae9.0.tgz","fileCount":23,"integrity":"sha512-o9sKUkbM+7OUglRfn+WphUs3WSj4Hwu1iDU40pfHcplbgFo6m6yxkdph7hxTXTj/XSuir+VwzmJnjqpY0ljFcw==","signatures":[{"sig":"MEUCIAOaZu/9A/EcR2u2gHhOxYbu/LmgM0WsvZSh/3JnhzntAiEAj8yhpR+zDV1cx2Pe+3GtYljp/lMGjDOG5X7irhlwzKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1TYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpY3A//cNdHu97RRVCNCmbs2LkC/GbGmPLynqsrD/rGQkGRLS5twJIc\r\nn8kdbHuJ40KP2oBcLnNOCnRSSm0IvyFZBAkBo4D/HXclD/BGEFW0VFhGGyrZ\r\n8QI1v+y11wy12z+SAji7xBVLcuNmVUM+1SoFoGxUon1ma5YNKlMW0SanUqXe\r\nWDcvYHn/6bLr7vNP2KGs13YW0wpkJvpVVpFqGsTtyLka0zX0RkyNXMip431h\r\ncxJnNUo75zVt4PsZq82wudhfd9lQXgcrJ3jse2Z9npN0h7ir2Do4jXBPcaHu\r\nhDgoBcbRf6QCi5Tw4drPjHJLCKLS+zzAbBP7aUJj59UEWrttIBdzJP1OqXP0\r\nKV6At6VN1t5mpHCtk3kqekea6zTypuwtpbqSRICoNQlw8cycOFfXfhc2oopf\r\nkjQFHFf/wVWhfHHn8+8XueCcFDGjMMHZ6/w1AizHbZd2sBQrErThRi69Bmsv\r\n39+H6ibs+HkFjfWaH6c0mgTJBn/23tvJoUg89qGQ8y8vxbqDuQCkJ5vETXMm\r\n5ANyD2+H5B1INNgdWj4diCnsFHjWXRZ4Y9xW4sxdXTjUmx3GmsCXuIGJuOaz\r\nkPlqIvOFNlwWMLiZZ9J55KAIcBxE838D+mg4+rZUtLMj5cvedjIiXwRqqdFI\r\ntUfEPwxjYcVXg5dW68A1z0xSMgNAotjMxS0=\r\n=wxPY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.982bedae9.0","@material/rtl":"15.0.0-canary.982bedae9.0","@material/shape":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/ripple":"15.0.0-canary.982bedae9.0","@material/tokens":"15.0.0-canary.982bedae9.0","@material/animation":"15.0.0-canary.982bedae9.0","@material/elevation":"15.0.0-canary.982bedae9.0","@material/focus-ring":"15.0.0-canary.982bedae9.0","@material/typography":"15.0.0-canary.982bedae9.0","@material/touch-target":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.982bedae9.0_1666143448068_0.37241371172071625","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/fab","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77547e27923b7b559f9ecfa5e53ff5e936fdf30a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ee40081f4.0.tgz","fileCount":23,"integrity":"sha512-twFkv6O+FleSQU3cneTa5370YfBExU6nGDGveMo9FChcLfnqrsaOD1ciY0lo/oHJYXxaKZYHMc3sVHo3dqxJ4Q==","signatures":[{"sig":"MEQCIC1DyVD0fR/InMeGE9qcxjOf50MZzYfgjBxxKqBwqikrAiBq6HMXIVaPn5vBnhOteHgvAXn3i0ycReDv03i9RZOOsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFoaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpF5RAAkLSMl5TAAQ3r4GBG5xy7v5pL8K1n1MFRvccHtYDNIqUsOvYt\r\nkJwR3po6a/W6e3E+X2QPBZiwuQjmdevyInNuymbQ38wbcRVLzLDChM0CQtVN\r\nKIqGDnrjlK9b2PvfQtwiFt57FP/juWD7gZpGkVdFMAbfpM2g6MJCnCWO2nbR\r\n+GCVb5UBLtYB9SDrvlyUr4LYIyLP2/tlggYDTd5vOrDKHvmvjanP6b1dI/lp\r\nrQe27rU4Wd6qJB8fT79C6F5lTz72Sx0+DlReTm/4Ur/cMWB5WnajjK0n3YsJ\r\nZjtMZ5LK0gBrFNCfWMXyrrktlVcZ3ulcC+kyPBimIiUqS8XT+6kCGZ7z3YAU\r\nwITZVa8wq3MvtM3iJ+03q1svSuIQyA0Sv0mOLIkzNMQRugVuMKuJj9+MQZBa\r\nap4lUaOBlpEGrLhW/489fMCbhENCNE6G5qtXWhTfTrWwud4ClOf0dXvtIniq\r\nYQUkETZeXCPXwfDnWn/2uaenyQMMgTQlrlI0wIdI2WyhDpBRGZT5HbqNu9bv\r\niZsXho3l2DU0Bm55e0h6cgTDJAElLyK0/F2moN7+F7jU5a3tPNk10g7ACu5Y\r\n7Tq4G1JjDkr8ZOI81qzg9Mx8hQeYa/lFZaKKwuVRN/NbjHSYsdFOUl8QPuPh\r\nBf4fyPupUMaJU8byfCMEzqa+IAvq8OY+4eA=\r\n=tvTn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ee40081f4.0","@material/rtl":"15.0.0-canary.ee40081f4.0","@material/shape":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/ripple":"15.0.0-canary.ee40081f4.0","@material/tokens":"15.0.0-canary.ee40081f4.0","@material/animation":"15.0.0-canary.ee40081f4.0","@material/elevation":"15.0.0-canary.ee40081f4.0","@material/focus-ring":"15.0.0-canary.ee40081f4.0","@material/typography":"15.0.0-canary.ee40081f4.0","@material/touch-target":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ee40081f4.0_1666210329995_0.02921003243493825","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/fab","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"663173fb6b803cdcc1d0d3e97bb907a8c9d18263","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.98f1b54e2.0.tgz","fileCount":23,"integrity":"sha512-naeN30eB1sll2Oh/5jEKmU7cCZWncnsMhDJjcnKLEJl5glfMxR3aw0RfCZIIMryoqdkt2EOZBm8NnvK73q9mJA==","signatures":[{"sig":"MEYCIQCoPSdqbKW/PXUOfhti8FDmAXxWv1K6ti0GIQHfCHKrswIhANQqO+BcC+XmrEFOewKSgFDOlmQBaV6T1sgpM4IXchJ9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdI9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnCxAAk8aosugnSjKH+Aek+u8/uRHiKnMMGCv/a/ad1RuHSRum8XZi\r\n41W2raoTGVxNHdfG461V7CFsVcuU3UeREQufF+L038BAYcTs7Nve+2cWLoRo\r\nKGUt7M3MwTpc9P6ONhu7zFK5pIYzfe8yuDioWSfFMkRDKy3+KYWpoQgsgPMM\r\nw11OlDcuprphLyXyGqLuiCJl7XpAbYEOhGZZyND77VMNopuPJ0FwInv783Ym\r\nRXXBN3CDNubgNWIGMOnN5053Qtrw2rAndkv/GrFCMsDmHXS62lsFLDf2C2pI\r\nGQ63+6tUgli9WLDOKL/Ly91GZDNoxeHdNYCh4Kz+O91kOjlBGJ2qZW/8S8+W\r\nOL+nHsivIpRTi0ozcawbRc1KFRxk1UqybYD2HVvZvOqB72doXY1zRYpTBeIf\r\nbl8zIlyTdWTpZSjhWceYT5qLqWqEzhtMzhB3zZF30C+aBTMjCd3RaLuB8I4F\r\nUCZn/kKtlZNSObyLaPZ+V7Ums5P5rjXMDbsH+x2lZxPNj//yfmwnKTXaTc23\r\nxcFnVyyo7uqvL+Y7qBnvdGsBMs5eD9HpVoht9HWc50ALAcTLtGXaZEHJPBRN\r\nqj9+5lBBQ+nazZereMX1a74OGwVbs6FRN1YvQ3gLcURs91EopRT5VJ3Ne6mQ\r\nk3WZaLtzefJpHPjAN6wemqSMPAG/mU8XYG0=\r\n=+YOr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.98f1b54e2.0","@material/rtl":"15.0.0-canary.98f1b54e2.0","@material/shape":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/ripple":"15.0.0-canary.98f1b54e2.0","@material/tokens":"15.0.0-canary.98f1b54e2.0","@material/animation":"15.0.0-canary.98f1b54e2.0","@material/elevation":"15.0.0-canary.98f1b54e2.0","@material/focus-ring":"15.0.0-canary.98f1b54e2.0","@material/typography":"15.0.0-canary.98f1b54e2.0","@material/touch-target":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.98f1b54e2.0_1666306620886_0.7331324800499461","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/fab","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5fb46b49bc53289463dd71622fe8dc0d609f1ef","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":23,"integrity":"sha512-3sWZRdc/cMdg8wHxQpZVHKy5ta2uQXQ+tAxDsTnsgZ+xxiO0Lz4hjM6prQzB0+TsSekmNZxhLmIUw7WfS1LzAQ==","signatures":[{"sig":"MEQCICVtmBfWZ2w8o6XRMeTd+ZDre3QSFH1xbtJJkZLnxmecAiAxmgX5E9yZ8y4YXCHsGrjJLlUqiVa/RRC+VHkubNkDWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtF+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgnA//dNkPtJnLPKoQ+49CxfRoAvkb+zq3MEwGpBUz9k9J+vqdm9TX\r\nzfOvyA7NIxhns2EFlyvcEhg8d27e71jf9E/arEidAbHGqwALA857DdQavEzD\r\nP1EfquZfAz7QmEeKuOJz/LoYT313yk3ktpBLTuI3tHGJq+SHPMOlYRVDNTaW\r\n82SX+7VNHCiRQIMfZyI4RbRgeSoXuOFkFMJMmKF7jyDPuo1ny7iS4Wz6h2ME\r\nOMxkSERzkta9I8AggWhlVRCYkXA/TDKlT98NBeDKNTN1eS673vlxHn7NZaVx\r\nSEt4SNXFoyI7jQxjQV8bTcWKw4a0Nr9dKtHTgWurUpW7h5VId6KWezbjK6r9\r\nTimMOaC+2CSvT1lpKMsg/taDRGxZtSh35kK1J4CpHFblygegVqEkrMf/QI/7\r\nvG69cszH5WI27y4r8Py6fbaLTJbTCayxrwxoXeYQhnWYmicSo1IFC8TDfvOf\r\nwrVtFc6JCZKqwY+gZcNS8wKhi30NLRzI5bFPfojYaDbmpsGm5U26rMMbex8O\r\nJAXmrI77Onh+pYp6mmt/L3z2WQEarMQaFCeHxBYne1SclHCZprl+HkTsHkFl\r\nkTdQMhSdkgKZrxU/jjy+7dzgQtt7wg3C/eLAECkkvWNMqTIuYBS873+hTcSI\r\nXGrvbFrEZ2j2Scbec6Kh4ciB8V0diNC6c1Y=\r\n=D4+x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e74b7ba7e.0","@material/rtl":"15.0.0-canary.e74b7ba7e.0","@material/shape":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/ripple":"15.0.0-canary.e74b7ba7e.0","@material/tokens":"15.0.0-canary.e74b7ba7e.0","@material/animation":"15.0.0-canary.e74b7ba7e.0","@material/elevation":"15.0.0-canary.e74b7ba7e.0","@material/focus-ring":"15.0.0-canary.e74b7ba7e.0","@material/typography":"15.0.0-canary.e74b7ba7e.0","@material/touch-target":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.e74b7ba7e.0_1666371966606_0.7654705533738968","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/fab","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4fa617beb384c20f2846f93d7c0e8549968ec11","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ab55c07d2.0.tgz","fileCount":23,"integrity":"sha512-D3PtX9aOmAMeeLbbF9Vl61LwFAZENL+F7ddTU1eOiRpss06tuwk5CsnZqqcQjHfT5E+Cb2VDJWmJp/cN7eaN1g==","signatures":[{"sig":"MEUCIFX29cazJ8UAEyFSoMM4za32X4JHp7y71QoDHD2xt6yGAiEAzt3vkJ+rrhS/HxMxscLxFrmeSkkU7rD3FMmienqtA6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDQwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjNw//TH8a2v56IPoTaq3BbM7cWFdjnJIyY/LkSVRli20GXkKBNkLm\r\nuRgfDGdN9REln2Ivd8nLAEliuqtuAu0tHIrk2J+XDq1ZDfhQBT09mIkLy37H\r\n8QbFx3ZHp9LGhN6jsrDAyTtBYwcAXfQDIanTVOQ7krfdqu7LiVea8p+WmJ6W\r\nH7g27Q+2SULE6O1I+BRcVKDsG7O+qm9S7uxipUGUSxZmp3gRYtOJWQalh91a\r\n5/5qNCjv3KWuNfdYTodpXbhQnpKOn57QTdUEsTXKSG64nRQjeu0OzIVqlb4J\r\nkSRpleNMz4YsFhVlExy2hRAfo4759oL18dTSRU3aFi4dzGOZiENM9V9IquiF\r\n6pcp1WeThsGsEGi4GP7uwNDZIvYPzW4byXPZVSTQTmfD+o7eGxjeI2m043EC\r\nVmXT3GmRFtHgTNRGStx19DelX3Imn+eDOin00+PT1Zk+dE8As3HWh67AbrHO\r\nrDSEsyIsa2B7PnXqDIBTnllb7R/jdNWvlIG5BUa9A5iH9nJ3yu/gIjdqm81z\r\n0PRb7gznhtlcER8iYR+VI2Bnzz8bJ5amBcg4jWrPIFRgMUItNBDZZkAGg2b2\r\npsfcPShn5MkvfyACWGo8Y35kugagUgupbCZi7vNFBWDMpebW87mKTtTjXjek\r\nwGcqubkrmwUsyBn+p1aXlb1vkDRVvrIu5HA=\r\n=yvaB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ab55c07d2.0","@material/rtl":"15.0.0-canary.ab55c07d2.0","@material/shape":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/ripple":"15.0.0-canary.ab55c07d2.0","@material/tokens":"15.0.0-canary.ab55c07d2.0","@material/animation":"15.0.0-canary.ab55c07d2.0","@material/elevation":"15.0.0-canary.ab55c07d2.0","@material/focus-ring":"15.0.0-canary.ab55c07d2.0","@material/typography":"15.0.0-canary.ab55c07d2.0","@material/touch-target":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ab55c07d2.0_1666462768718_0.7533750169573381","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/fab","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.fc539db34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af90aa3a0160001808dc2a06fb8233aa38190ec3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.fc539db34.0.tgz","fileCount":23,"integrity":"sha512-UL7lUf06WWUlvJpfQOyhEuyf7PX3c5EoZ+CJGGCDhW8RMrZ48UcyO8pNyp1xQUhNcoJVgR5E1c3Kc/Tshh7/9w==","signatures":[{"sig":"MEQCIGjtvbTyakHSUlsoSa5a/lghKDqWkwKuQmkGoC6FPv02AiBXMMlUuLCzrv42WSWKvCV1vqfRL2qp7Oru2jXJQ1gyVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuCQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqy5A/6AkNsDGw7N+jRjDXwf01Qrsz7Jyn0/w9kRijpCp0AL3ETkiQL\r\nzMDkVsTH2+q2zBGS+oHcsxcck5L+TsdhahTjNdOmzkvRDl/xaeKKvJzXkEnZ\r\n+EGO2YAORRVAEHp7t2yiNILfyLClVGSoI4O32kEyseS/zipB8bHVmOMypGt7\r\nNAqr9f05rBnlaxZvobW/RTZ4Jp937AaXpDXTVS8MG94/WQnpLdyWqQGj463j\r\nH+BIAicsM0/kstgBqq2UY8Sn8YNQVNge2UU5V86RBbg63JMCWUCUwHD3S29V\r\nhLhKciio/WEFt3IUzeTWBq+b1gPJ1opSB2iPkeeS+IeBEcuVL/75zOYV6qsD\r\nuHdDnBnYZPmhhZQ9xC+GOCgeXpbmzGzVTHY9WpESiaW2WD7o8OXiuqm3vJig\r\nsX/qg3JYg1rnsJJbd+LEqr13KiufEs91Jv32J0Zs5QG8G7+OUmi2ww6IpOkl\r\ntZYORLi1H2hDYom/IWrukaQToAiLMHb9cLmjOKC3+ezp45uWvwkEAdHpfhoy\r\nFpzpYTmPau3cRFpBvFcfskzzLJluNWXjSAWnGIvtEOERMQIcXA5cQv4JcLhK\r\n9XeIe/scNkesOz7JjaOo2uQYfphAsmSc3U2/hUTj5+xSlgQr+naEGjqEVL9k\r\nijVSuDni/6UeqyOBDp70FqTGVZqKSIfl8/g=\r\n=ezhy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc539db34.0","@material/rtl":"15.0.0-canary.fc539db34.0","@material/shape":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/ripple":"15.0.0-canary.fc539db34.0","@material/tokens":"15.0.0-canary.fc539db34.0","@material/animation":"15.0.0-canary.fc539db34.0","@material/elevation":"15.0.0-canary.fc539db34.0","@material/focus-ring":"15.0.0-canary.fc539db34.0","@material/typography":"15.0.0-canary.fc539db34.0","@material/touch-target":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.fc539db34.0_1666637968288_0.627868406723509","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/fab","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c71d395c0fe0ed78f9dae898ccef0676c18650c9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.e340b04c5.0.tgz","fileCount":23,"integrity":"sha512-9B17mT2AVD52dKuc7hxqKsWtrQfZJvn+QQCGw7MkdtkQVb95cIa1x7ubnTweeYep0Jlu+IWwuDsrbU8g809Cig==","signatures":[{"sig":"MEUCIBcqZAoVzDUGUt+HoTHTqlCrBMpnbDH/3jBdEqA1LdbnAiEA6ttrusFNryMqXInmCqJ4Sc4eQK67dvp76BjZjPYyaTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHURACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjsQ/6Anw5dYAb15/v/N+GGFtiIKxKZmml4K642q6LjWRohTEDX3K8\r\naP9HtdFvULZnpQ5ZwFQ67e6tUYJb35cTkpYiMYuX/JhiWpl6gdC2x2ua79ym\r\n4m5SiRf3n1QORe7eTRGFgYFKcfO0hy8wlPf5rkKuVfGdxFRVXroPt26RJCFW\r\n0fOHNu9OZwLD/Mjdy1It6y1v3miPzZ95T85AxA9r2kjbgoMCmLD1BAianhMf\r\ntGSrTQGBCUKFfSYot1CE8K2qw53MI8P4vMZ/F000m8ppHnaDH/ppNvp8uilQ\r\n3IADaDxVCl12LJts5KgpVnYHQOXWBzh9FoQYUkeeKnCK/ZXiBWaeFdly1mFz\r\nT8FYQhJzKXef+KKPnwnSzTyH/F3WPoQFinhkuZz31EVpfaThhQHPEG30ZCpC\r\naga97NCL1sEnMwwsGFiBY/4xR6CVSBg+q/5xWnCHrgc4xq4y6gqhdBv6wYPs\r\n8O/5cb5PzAYkkrhkYJcMD0GFHSNQdIgeMoCsA75QkojavGvq+4L0pRkcmnYZ\r\n28DkXAW14e388fq+pNU/c8dS7gGgF6pNy5Zx5PNlFq3o5cRDA9aL9BLtXRod\r\niuDFNvwzvCImHoofjPnJy4xje5Rvg+pQIGolyIOaUqbBbF2a+HV//l6fb06Y\r\nAdOBBhFuczhrTUhDc4kfCuNxTavR2yL9DzQ=\r\n=0YMa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e340b04c5.0","@material/rtl":"15.0.0-canary.e340b04c5.0","@material/shape":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/ripple":"15.0.0-canary.e340b04c5.0","@material/tokens":"15.0.0-canary.e340b04c5.0","@material/animation":"15.0.0-canary.e340b04c5.0","@material/elevation":"15.0.0-canary.e340b04c5.0","@material/focus-ring":"15.0.0-canary.e340b04c5.0","@material/typography":"15.0.0-canary.e340b04c5.0","@material/touch-target":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.e340b04c5.0_1666741520905_0.6507780679296093","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/fab","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"384581a6799517f6af11ca2db7f670e2b43bb239","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":23,"integrity":"sha512-lCATt+fuOR2PlWoowUXdlEMs8dtxnhexNsqf2d4tdNHnCcnf+gZNul+T/y85eQbHspnmzhy/Cqd0ZfLxNyuKmQ==","signatures":[{"sig":"MEYCIQD2Qlzxk9Xl3PrpSeUV/KD4ZskRP0la3RGe59f+ryeUHwIhAKdzVB6I/xXGem49w7SDKisEJuF7L5j+uf3eROQfxvKi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW7MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8UA//TTV2q/GwOi/o+5cwL+uOJtYL1BnY/eRbRsKLn5nfs0bqxbvZ\r\nVQzszYiZnLej10IXHPu/F9jQ4r4XEp5VpSd9EdzrxFaXW7jRgZ1KKGhMTcQK\r\nUOTLnu13GnuSuVAT0Iqtd9JYYM8JEnzpe9/g7TZlKPQsvHDM48hUvEFiyIw5\r\nSVQn9ZVSMR9Z2gOt3ZKiGfdGIDI5n+zLG0jbNF2M3RstcB07FrAtvaDVBUX5\r\nMrvfYnSAuK7R0cSQyAClkB7JMm0zcpb1lCFghC/ojZ5u6yjoQmKONZp2FOQO\r\nPXB1N/jd6KrdMxwxfAhg2KTBaHgtnPf9gXee+4ueKeF3C7ZXXNNlSkBwxLAM\r\noTmhQn1mD7rb//Hrxc9alnMxcJxZtqhwJzcEuz8PICxPS/iY9HjhZPsCDsFs\r\nb2Sttth2sHNqEYbKbwyul6zHwQv+xqkkYobxFdhJMR6umyinrE4lF5Pt0C3H\r\nZYJqGtRpjJNIXe1rRvF9mxn7HMvDBz2PTHlvGcoFkNRc1kdPY94rY6R2KTeI\r\nlS2uALTlvpn0kbIfWjklV/vUkySKi/lBQGF7dOT3NQ6zhC/VUbZPFWvSG71N\r\nwfY8zz1t9CjRNRojKkmn6wuaPLBX0w+TE7wcx3JLLt1KDw6PEFo74HCHEgJj\r\nPLJxra2QNnL4qDLaDFetltREcpnnz/KsI+Y=\r\n=S2hp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2c1a8f8fd.0","@material/rtl":"15.0.0-canary.2c1a8f8fd.0","@material/shape":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/ripple":"15.0.0-canary.2c1a8f8fd.0","@material/tokens":"15.0.0-canary.2c1a8f8fd.0","@material/animation":"15.0.0-canary.2c1a8f8fd.0","@material/elevation":"15.0.0-canary.2c1a8f8fd.0","@material/focus-ring":"15.0.0-canary.2c1a8f8fd.0","@material/typography":"15.0.0-canary.2c1a8f8fd.0","@material/touch-target":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.2c1a8f8fd.0_1666805451958_0.049573069376640744","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/fab","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c96bfbd8991fd4d72f07174c528cd48f69a2a8d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ecfee946f.0.tgz","fileCount":23,"integrity":"sha512-EAQL64nL/mp9TY8c6WTRcqJQPnISZAO+0c2bvWyrG4Xj0r/QGx2NkMKy1MG+JGkcLR5K1RKneLbe92xCIujf0Q==","signatures":[{"sig":"MEYCIQCwlttry2NhkcTE0FSNwPLkvtK/082UFP+f+RrD81xO8gIhAO0MaDSqPjYmGxcVV57gi8rPjQfTLl+x+KqTj3dSwbfZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZVmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3tg//VMCu+yBeUsr3xP7061FbY3E88Pj74zdXHs0+2IpRZF2k/0Oi\r\nhJ1ww4tBEeqNQx/NSZug7cxAxCbOV3jf8PZCTaanJ2Q+dMiFWVvbNKUxfNAD\r\nbe66JemnWMaYSL3Il8yCKO9NXsK83TcZCpaU+zOQwJVfmsa8WZYput/5uXj3\r\nu9eZSBxnBd/UzR72tKGlPTTqgLEIn5J4YI9uNexVHwZkQgmkFmIVxn355ZJw\r\nrDX7Jmo+pq4wIfg4rozrfrXWPmNRdR54Rq+M1EscJrT1Y4IoUasa/HnEGfNy\r\nHqV3+1iaSGLQA8V23VrAn19M45/aePxQXhB2ZEFIoDGuDL2ivChRw2svvpdm\r\nB+QUWdEQV30nPNvZQu+YKeBaX3vvbR/W2pgi/F0uNbs2HNArG91NhXlviuNu\r\n2V/7Fhlw0w1xBZucb1SqQeXtQbLxA35wclmrv4mqgJ8hAZKeWqbTV2SliDzE\r\niE1c7yUdqY+fQ0kVpCZ/7HdlzUT14XYFI2xTMb0VR2ROk0AStvcrP2rQj/nC\r\nOn5mwEfU17D+1h4eKgQbjbK78xOeAW7fbiKMU5W5KwoqxgtxfA17xFi5D7Fn\r\nmCgtrhn9RxZFhUUYgywkSxJQmvKr4lH4CRqjbZkmOCoHMEesjIvRjui51ZZO\r\niRJPe23lNmI+7x0u/igaiXIdX1cvLqeFf8s=\r\n=WgUQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ecfee946f.0","@material/rtl":"15.0.0-canary.ecfee946f.0","@material/shape":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/ripple":"15.0.0-canary.ecfee946f.0","@material/tokens":"15.0.0-canary.ecfee946f.0","@material/animation":"15.0.0-canary.ecfee946f.0","@material/elevation":"15.0.0-canary.ecfee946f.0","@material/focus-ring":"15.0.0-canary.ecfee946f.0","@material/typography":"15.0.0-canary.ecfee946f.0","@material/touch-target":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ecfee946f.0_1666815334364_0.525315342286063","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/fab","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c43e4ee30f1588c90a77059eb9dd66fe1728824","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":23,"integrity":"sha512-5Odth5vJ2i8v2CxRl6zHAYDekG8/1BdTSyZTWvxCTIATJQDL1gEcvzllTs9S9HBpwcoQpD6TiMdqRBMJ6/BDqA==","signatures":[{"sig":"MEUCIQCEmoCDWul7YQO9fkwFsQpbUdDInjMRZb0k+10lDM4TWAIgbjHWa5JQZ4lJzpiZL15wfJhdqu4h+Dto0KxwnFUfsxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAa+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0kQ//UQL0f8j2fsqUlgMxNiDwliVkCnh2w/K8woeT1h4pq6k2LJxq\r\nsFTVlYUdrIOAaUhKOpCEMJYiNHT0b+1HpSvoXXHtZXISBToLwBVFHhliHXOq\r\nf+nihdvqhAF5z3cKVeGdsVNzL5Q5PHfuLHzLwh/uU9YMuEGenX90DkbonIAJ\r\n5xnD//Rdtn2BlbDlwToRpUy7ocQY8kDz6pZBAyPmiDqZ6zDa3yUTvb4QZ/40\r\nZE8QOOVVcahViAd7oenvy4teUoJpwIFhjRX+zdEWMaX2OW/VL01/WC0j0UnU\r\nkK7nNf8GsA3QSsf6TJ5yRnqfq5z4dgnQtf7vJzo4r7NGvBrqH480mUH06lmF\r\nNPN9wO5R00Ox9dBZO6bH5iVYGv6RFN5xycQ208/zeEeY92z0ZBp51A//HKaI\r\nh4M/986ow3cneWHpBlyo+dAb9j4jzWpUCSZsjsPIfD5RQGvWY6b017Qvh9KY\r\n33fXOJ1sQ/kCSJ5ZuhLAhLSU/2dxXiUNVGlt38zto/3Aq6JV825MjCxeGyP7\r\n/TvEKYL6HlnMROkZf0hxQ/xPeXVhr1cRQ7PylAFQ7hnE8Dy6KIGboZi/HJsX\r\nJN+2GB/EWQ1gQNa7mm9yWvzy6Cg30ruGXARsfhcvuhr6Cy6XRCsi+6isbsN3\r\nS/S7SsWjGh+v17FFJyOujh7W8/aWhJ4q2Ek=\r\n=Al1y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73ca9dbb0.0","@material/rtl":"15.0.0-canary.73ca9dbb0.0","@material/shape":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/ripple":"15.0.0-canary.73ca9dbb0.0","@material/tokens":"15.0.0-canary.73ca9dbb0.0","@material/animation":"15.0.0-canary.73ca9dbb0.0","@material/elevation":"15.0.0-canary.73ca9dbb0.0","@material/focus-ring":"15.0.0-canary.73ca9dbb0.0","@material/typography":"15.0.0-canary.73ca9dbb0.0","@material/touch-target":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.73ca9dbb0.0_1667237566311_0.25222952600894644","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/fab","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9df05bce3dff550433149506c9787c6d7ccb98d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.357f2e5f1.0.tgz","fileCount":23,"integrity":"sha512-+uKbO7vIJj/F/7vfp6ufpmJK6Q1yiA7sM+RP+mpWYm05glx9jOuBiOjsaE8Bq7DoTtZA2UWiZTskf2XDel1iGg==","signatures":[{"sig":"MEUCIA3GtV+y3u+dbGOJ3LubkJoagwHxCg44eWkyrIfDsM6iAiEApsig5zC3KWZKdD3r0Aw8T0YJ8Z7+y6nIOVBghpZ/vmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBjNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrc8RAAlUnEVaXADLLpvlAe8nZHfO5cFRnCdQtZtua4iH3eF6J2zQaO\r\nM9976VN5po/9GoE5L8nuPEptCdi1HjKsTpvVi2Ds06UiehbWNk0fkm61K79h\r\nUXcOrrD+jIBcUfxYmdqh7tZRWD9qWdJBDZLxvdSNrD1w13ttKv+jYwVGTAWq\r\nGwn6hKRLPM0rswdGsC9lgMfTzNAnH91uPU5tY4nQzUSHBAbD3Qkj6ElfC30o\r\nbkO/AC4Ew4oWKG/s6B4OxuRYcoE4WAZkP0udJ8ko6VOP0nfEPV5ncvPV1vp3\r\nvgv2mrGiqvtRn59DVbF9fotyLExUTuRkY4Hlqk+hfDY2YdSqsRu6dDFPVzHy\r\nOV3yzDHh44qB+QZIOMLtGmjQox1WmMo5macyCIP31J61Rn0AsiKjZiadvX8O\r\nIt+SwoFv9TWDW9TFiTfnAhcMDPggWFLsV74pfKY+Vh4JsDxas0Rcj8HqmOQy\r\ndVCixjcws/Q5yb/+Ge9LVoGvYeeK9cJ/wy6heX11MFMQxBY8QTYc6yCBBhi0\r\noUNhh2zaFEQ1GVNYcFvX53Yv+ZyN3YsVoBhn8lP6WuXs6EM+hrH9inr8wpEY\r\nku0+3eBKDL5BmkH3GqL47AW9zCRu/LM1LNRA7B0Sfy7o/WAzNz0jAi4TYtmS\r\nf6BwnjXukn3P4aE8f+W8hmQJBi9Sq0C+eOU=\r\n=BlAp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.357f2e5f1.0","@material/rtl":"15.0.0-canary.357f2e5f1.0","@material/shape":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/ripple":"15.0.0-canary.357f2e5f1.0","@material/tokens":"15.0.0-canary.357f2e5f1.0","@material/animation":"15.0.0-canary.357f2e5f1.0","@material/elevation":"15.0.0-canary.357f2e5f1.0","@material/focus-ring":"15.0.0-canary.357f2e5f1.0","@material/typography":"15.0.0-canary.357f2e5f1.0","@material/touch-target":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.357f2e5f1.0_1667242188653_0.6978614944317691","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/fab","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72099db04ae235a5401bb5f0070981abcd56a240","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.eb103d4b5.0.tgz","fileCount":23,"integrity":"sha512-gPLAX2C/I1mI/7gmHaHkoIlCWDgWWO1nm15iKn8AV18eyyMrmr4ozsFg5A4KUp7dkK0oFExL56KqoQb+sdLqVA==","signatures":[{"sig":"MEUCIAWH2hYUNYTgOYyb8xT6cySX/qSNTKEfXAB4Llfpw7Q2AiEAxBDM46JXkg6DWUKY3M7uJDkFG31IyBGl/28ayHldMkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCh8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouXA//XcDCPwknolhtv4k4hoTK3CNK0EQizAJf0WRmpByq6r03JbQO\r\nU10wWcoyVEXpSSZcmkhSdZSwyd7JSavPZHMB3vAVyWg0h6JeNK/PWWmckJ0r\r\n4hvtrjlul4NmhsnvR6BhBsklGo60mWnV1eyem6+8TJF85lftbIy2be4gDaKe\r\nEh47yULr9vYQXoUkSTMeYQevNcSG9PKfwsNWIUP22GRcXPAJ1ejnI5Aw2uun\r\nOjTvZdyKj/GpG3YktBVow95vT3Xeo3k9n/EMbrxzrjuY//rwWOChS6R3a5Tx\r\nKwgL31KWLwdr5U44+yaUu4MyNol3JeLHZC9LOtRav8AQoJoZ2USlcjCi+nF7\r\nB6PfOraZM96v/2USsMGYWHNCY99hUZOlk9GOzxi4Z35c1drJTWcNE4jTuFQe\r\nDb08Or0w3/uG018QJ2VbmgfI+7KHscHTmdhTiZ2h+/LSMfSWqXntgJzy8WWL\r\nmhcwv3jykrORRIvEf1kxG130VGRLXTzXtFGl7UI9qaBNp2gWjZh28XQ/KDHn\r\nA3YpQ1Gk4qHa9F+4+kqsNql6qhamQl+LeSmUK8oQYVDCLF3+SlLKNI5SRsY+\r\nxzCP/QbTI3IuO/ap6B1fx8cYthsaZLPRFqHdIxRnGPEFR3XOWErAQDdrLc8F\r\nFlj7DU6D6PEoiX3/6WzZoDansn90rTEMJlw=\r\n=z0j1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eb103d4b5.0","@material/rtl":"15.0.0-canary.eb103d4b5.0","@material/shape":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/ripple":"15.0.0-canary.eb103d4b5.0","@material/tokens":"15.0.0-canary.eb103d4b5.0","@material/animation":"15.0.0-canary.eb103d4b5.0","@material/elevation":"15.0.0-canary.eb103d4b5.0","@material/focus-ring":"15.0.0-canary.eb103d4b5.0","@material/typography":"15.0.0-canary.eb103d4b5.0","@material/touch-target":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.eb103d4b5.0_1667246204112_0.49492734298237573","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/fab","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.af5f01223.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04c4b6e6c0ccf3ec46c3f424f626a9edb0abc4e3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.af5f01223.0.tgz","fileCount":23,"integrity":"sha512-mkNTowV8HY/vAq/KWFTVWlTlRy0BYHIomklDz5w1zYmr4jm6UEsVq/EfTBhoOLwO2OUOyPL43CG6NCmRh8Z41w==","signatures":[{"sig":"MEQCIFDKuAJwvo+RiLMzZrAiWd5/YlWqZbLbPV1p6pgtNIGAAiApjV7WPz1N1r1RYdUyBGqL/2ayx8KPzmJPeb/Pz9VN2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWdYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDxw/9GBqMdr1koDScGmAcvSXDplzNLntkR/llEraetUNBoclKA8IN\r\nHVAUpqyi1JWSf7IPtWBE+Clle9YECIJGiBuNv/EUnh+7KlCUCY4MuyAjjSwN\r\nrn8mv35ImRt35zk7P3m2jQ37fsCtPu/79Q7QU6cibUQlerzUc5TrSE2q3HtN\r\nbKGZ/yM1rx6ZgEAHAIg6SjPrwyt9qmfxr/hUHy/R/Y0x1XIAI7eS0UMMHwLT\r\nAsQSfzKK6mwolEu7SGWi7afJW6t0EJZhE2LHqcwsIWY/2s00LWkeNSnPtr/R\r\nJjW+9KFykxzU/QEb8S79b73TLW8IEmYQ7njZpfIxNMIVTdxM6IsjjZafQg0k\r\nICVHV5Mdv46K1FZdCYYTAX3NQ1RaT0TNB4wd9UUYycdEVUWdmaPPl8nJ7yTV\r\nbqCQ3xm1k+97xOdy31PwHTC63YBql/neShVsCixZL9d+eO5y2yWWf0+zo2SR\r\ne/PmRUa4EhWJdW9/ZPfCVSFrc3ZcTz+nVzEnlmvV53Jh16Bz5IiNYIHCbKpP\r\nISC/7iSwiLVYgtRXIN9ci/NoV74cind5DxTyLQ8uOmG321x8Gt9W+w9ggTtF\r\n5pxkS14DIBT44gbjnE6cEa+nbSGI+1OL9QWWwc4JwP1U8s3d2TkkQ76z9IXN\r\nxcLksfaipa52q96oRLl5FA7h7G41FYn9tSk=\r\n=A09e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af5f01223.0","@material/rtl":"15.0.0-canary.af5f01223.0","@material/shape":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/ripple":"15.0.0-canary.af5f01223.0","@material/tokens":"15.0.0-canary.af5f01223.0","@material/animation":"15.0.0-canary.af5f01223.0","@material/elevation":"15.0.0-canary.af5f01223.0","@material/focus-ring":"15.0.0-canary.af5f01223.0","@material/typography":"15.0.0-canary.af5f01223.0","@material/touch-target":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.af5f01223.0_1667327832040_0.2645968538775685","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/fab","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.58733ef41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31e3ebcad86283626bb7ae9f31a3f33b386b318b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.58733ef41.0.tgz","fileCount":23,"integrity":"sha512-L2vIlnErVRKkScthqqbyCE86BfcatKXVWidQVnOgCUcnaAo0j90H82dYmThksuJ+X8o3y3MJFhfBMiNwOgui0g==","signatures":[{"sig":"MEYCIQCZP7+coq7T2P5DRKGf+XJXj6py8Jrh/u2G9ZPMja7oRgIhAJt13zZ2jqF1FAns+TOjXBV1SLZ8QlYLtlr4XWhil7wg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrK2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrhgg/8DC9d3dqbNx32IeKFOQXAGYJjUKFbiJ27cAB15NTUwrg7+xQ7\r\n30+jvH2uq+2B9Z/I7xOos4Qvu9gQk92TH4huhCngLEBqEtG+OVFh9VPbTVJS\r\nnf8gCPKEcDELDqVMz49mTdpwesJVwntcRY5hdXGZwtTMKxAshAOERltHJU6N\r\nGeduGfMbkayQ40wTDKOHY/6xx442da6WLew5zL/LymGuM21sT7lluMKucK+r\r\nqlkOSr8AGnVBl9bus917wrDfiMiTLCwAprjVkT9JFqqzQNZJNJXMOX7qWShx\r\nY9tBjrMJkyPn1QO2hFoUdiYSbuYfHg+Z/HEmgmT40D2+Aw3fNCy11EvNhThO\r\nwKTJYcXctT2vz5QAaSMtNEGtoIRtN25361Ds2aENmrlyc5qCkbUerNY402OF\r\nQ8rsK5R6+5KCj6AAiQSBYXpXtee18NW+MxOFA26C1bE3lxaPFzf2NP5cX2LU\r\niI8mMatxRozbAk93xSdqufr143+Ew4hSJfEFfTy+bL1xL1NtGfyvKN8Mpt5G\r\nFOV6wUDpUTZg6LV9Row5mf2LWkaDuAvb/JlUgL26IOU52d7NjbaSWSGDfRz/\r\nerfcFy7y7deyr8Kzo1PZ30FzDH9wrpKRfau5bMaSwrn17Jgxz1viZhN5NGbz\r\nLhTEYNl5GHcaXAF/fefzPd8KBKFABlbJ/YQ=\r\n=ZfN2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58733ef41.0","@material/rtl":"15.0.0-canary.58733ef41.0","@material/shape":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/ripple":"15.0.0-canary.58733ef41.0","@material/tokens":"15.0.0-canary.58733ef41.0","@material/animation":"15.0.0-canary.58733ef41.0","@material/elevation":"15.0.0-canary.58733ef41.0","@material/focus-ring":"15.0.0-canary.58733ef41.0","@material/typography":"15.0.0-canary.58733ef41.0","@material/touch-target":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.58733ef41.0_1667412662683_0.5979075229144086","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/fab","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.909b48215.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba415b9cd75e47808daadeb81a5e657e6f8fe195","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.909b48215.0.tgz","fileCount":23,"integrity":"sha512-ZNyWzWpuTV4rF9sygf4nvbhjkntyloeDoQKF8GpQzwxDptzg5pE/VOEMxkUuDBmPWDJlPJZE26umww6kXhgiag==","signatures":[{"sig":"MEYCIQCZt41tyvDXQTmRHbIoVedTduZ2EoJGSdZ/ojTrR1N1LgIhALlM1x+KhHWwB5lcXpxCKnRoD3EsfBYXKiORK+5+PPuT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz6sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogTg/+JgZq/JREYC+u6d4qqFvY7m43qrVrhJf0tdbRjTBDiv3S4kuT\r\n5Vn4N3PDf/Jlon6MhYPSp1eBaKtKJ+Zd/KnU4LWoD+s9nTR721R3ys010lfX\r\nRDgDHtoQg3huqgvidFE1eK5Iwxa3cFy2UjsuPPWQv4VwI5xhxRTPZMsgULIW\r\n0lOzDxegOBel1lx8GZyQPnEdphqmyV/HZwvimAjWkbYAtYzi7lGfqdFv//R6\r\npXJESjcGaqtE4BndvNNCh3FP1Ka8CP0nHOz4SowsQzS4XkZYQYadXHUsoZJd\r\nIr4HqVlBsH6Qga1XcxZF8mPWMAE1ni6eKYFddY6cH2LOFOBEp59qJi9ylVci\r\nAj/b9HQUnO2NVTuQxLkjyKqlEmY0+batwC9LyVLJmKqtU+8a+gfkzesg77iL\r\nQ0oTGqVsK1f98AYxCqDOZgXG/9uEDYXfjH3ndnL9avevnoH+rrMK7X2cts17\r\nigdOkZJH2lWBY2FbupR3aUXH5uSPhhAiTe589vFrMgqZIxL6EGDjpY416WgW\r\nzmrgmj3XnoQit9tGyMbYtf+1l/+nmcjwOjXq3dwjqm4bXFwKbuetuR9Iiufm\r\nTKl6hL7jV3OdDDaeQ8da5kgR/0PJk5PXRQNxrpBibFgfSgbBObNwbzGxEyHw\r\ngePF0tu8wvyzs6nWfVJiT/70BhfCKSltJug=\r\n=A97n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.909b48215.0","@material/rtl":"15.0.0-canary.909b48215.0","@material/shape":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/ripple":"15.0.0-canary.909b48215.0","@material/tokens":"15.0.0-canary.909b48215.0","@material/animation":"15.0.0-canary.909b48215.0","@material/elevation":"15.0.0-canary.909b48215.0","@material/focus-ring":"15.0.0-canary.909b48215.0","@material/typography":"15.0.0-canary.909b48215.0","@material/touch-target":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.909b48215.0_1667448492052_0.16764063088791303","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/fab","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8aa7eb94a0800da9e673e997d06ac6c91ee51ea6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7f17127d5.0.tgz","fileCount":23,"integrity":"sha512-QWeq6U2MTK/eRCANwXAUf4Q4z4lyWt28siKFAfIK6TcbvfLF8kbS0YaO4IWYMuEnc5n+cAVwb+mOqXIpKP6mjg==","signatures":[{"sig":"MEUCIHWNfEY/5WP7ZTpQ/C/DStd/YMEbNP5sf73kaZqrxGBcAiEA/bdOGxrKSVhKSoCoMHAqrQFYdg74jWiTgwkuB0gOvv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAYxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8zg/+La8gUKtq6z1n2rMM79hs9FBUiJ91EjvpUlPvjUvgwKmzdBvj\r\nc4z334lo3x2U33RzTn3tM7jrx54ZicLD6cFpLn3SNaGxN3BmOBF3Fu2Wps5H\r\n3oM0hpQCQeofS3OUUJFNGNRvZJQ4l3UhNJQIHNYWbifLWQG99pz+PJXuh0Mo\r\nEy4OBOpqUjVfvQE4lIEHkJa9H6eKYPdJnMBDO146o61XzFEJGPDmmWe4qsf0\r\nQTIElHNVbfaCPhTToW/9ulWpR69A5efro4rMoQE7NM2PiKRzRWm5bMhtBmNV\r\n3tQWQKiBxICA2pb965BCszu5AzL5rU6yqJpeSK8PBCP3YSn8hxHUsM9tB3zL\r\njcmKIj55fjTuGuQKN4fNCyxlBjHd3M+YJFqERSE2scNsqhAjmmkRgBQdHQEF\r\nRnR1Y2G8t9pKKgp0PTGOQ66JTSAoex1xHjRZrhv2mBTu36PTgNcNpNlrimGI\r\n/tNiiU05uWFEi6Et+Y9mwm4O7z1AiOuhMQ37SvPcNOfte5QndXtl1nVgT7Ob\r\nbdSYRdBnEGa2cL08aQRQSA/v7OlM8nzi7sffwFmgMuNooGZMv8yk8Z8dqG1t\r\nqCmXpN2OLyv+70r7Sxm88sdfYhCOyMUrpyMIoTbJEp3i2WHfvbLKwFAFzOJj\r\n9hyhLapMJ1FDTK/KG2yC69fzU+9ADq/Go44=\r\n=TFiE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f17127d5.0","@material/rtl":"15.0.0-canary.7f17127d5.0","@material/shape":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/ripple":"15.0.0-canary.7f17127d5.0","@material/tokens":"15.0.0-canary.7f17127d5.0","@material/animation":"15.0.0-canary.7f17127d5.0","@material/elevation":"15.0.0-canary.7f17127d5.0","@material/focus-ring":"15.0.0-canary.7f17127d5.0","@material/typography":"15.0.0-canary.7f17127d5.0","@material/touch-target":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.7f17127d5.0_1667499569787_0.7965320428823655","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/fab","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76c44f1c53ff07dd378af255fbc896eeb03adb05","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.da95e2a05.0.tgz","fileCount":23,"integrity":"sha512-NbAiDe+Tk5+TMcNf33ESua0//97vs5FuJsLOivyY7PatF2XvP2vJJkydf2giyPoPraoPlcruO9AqbX4PzHaNbw==","signatures":[{"sig":"MEQCIDnik7FvzxWIY8GnqtpmlQdX2I3ZmzpmGifbvrHgTRBeAiBCW+5APXYTD+3Q0BWrUiyqjgMn86yi0EaYIZejxsUYFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUTtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrT+Q//eHT8xFzQMFQ+RzpyYcJL7awKXndafYI7Nc/BPNoJ90TZJLlY\r\nlt3fP1soAURMksjqKwQ1xeQXK0QgqllE8ix350CTo/BmR4Ls3+/+HF1BMHTm\r\nI3O9qJT1W4VNpUFu2aPZHa28apIhKVJQzAxG9Pu2Nn5fpKpvkbgofFBk9Lk/\r\nD9JDSsYPHrGYr7f78eg9jZ/fG9azKKkO1eBe6nVqcfWHG8wPP/sJoUrOhO8u\r\n06KwCQlf0fmZftYR9wVDYrjbUsl/IUhdTVu1LyaCzQMQy7BPvz5CMiNJMjNH\r\nDOW1ByBcU3oNB+j7Wc/UzOXxRaimycHeZy1qZRGPGaSe3fFMX7GBURIGfwqw\r\nQyCa6xaWRf8wf+WqApDs8FO3TVA9nEA+8lVgwCPpogEY2ybeuz2wg9+bu24u\r\nle8cu3aoyOm2Qk83Sk8E/3Jku2bX/eIel/AuLMlKbltxvUC0vDX8KQKNimoV\r\nzAwpIT1sRnVD4ZZvMcQpQ92wP7nSoyCusMKxopvdPffKAProKETrs538WI5Y\r\n8UJ6gI0l/WOVfa28dUYXjNSHF1uVAgvmn/wfgpKE9X2D9Y54rZKcBBBQdli0\r\n/hYAIItmGn9QO5VMXrTGMoZji8cZgZT5g0VFONUTWPzGGgZMTeAKqj4v0a2t\r\n4wHXZDRlpV7HeiHNEXpNiXyoSVDdGXuJRGo=\r\n=byVW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da95e2a05.0","@material/rtl":"15.0.0-canary.da95e2a05.0","@material/shape":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/ripple":"15.0.0-canary.da95e2a05.0","@material/tokens":"15.0.0-canary.da95e2a05.0","@material/animation":"15.0.0-canary.da95e2a05.0","@material/elevation":"15.0.0-canary.da95e2a05.0","@material/focus-ring":"15.0.0-canary.da95e2a05.0","@material/typography":"15.0.0-canary.da95e2a05.0","@material/touch-target":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.da95e2a05.0_1667581165695_0.5672477622315457","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/fab","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.4832e2750.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36655a345d3fc96d3a98c32c0b55218a927bb095","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.4832e2750.0.tgz","fileCount":23,"integrity":"sha512-9R4vgQS+TcaJlV9sVFn3bJoUHWryBd5cS2HzZRPHpH/5WTxNurVKaFo+3stdWz/XFomQE5qHq+5aM9Jj5+hWUA==","signatures":[{"sig":"MEYCIQCogA/2ZRuqJeKgQ2Ay9Q3FDH9wzToYH8YjiQEWXxubkwIhAPnB9T618CV3iDpmg+d4k82JEvX8uTHoPMDtbiR4QuSQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXyyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLYQ/+PEDfDSi3LjASot0u9MceMG0G/6NVWn0uGakEF+H8nDgCo/Rz\r\nJkkJyr7ivMDdX+71oFuv0AI7rye7dVUP0+bohuHKJ7ACW9ZPVs1yQHpDMa0/\r\n7asUtxrGS6jbqSvSrsjQ+WVbVPNKHkUAWA7Q0jU4fAYduywu1FpLKHjqPof8\r\nn6RLrE4SNETCfuaEKgpsBsuOy2aAhkx95jQ/FaS2Wh1ARg9rr5AF6lrDdz6C\r\n7KhWVHqldFji/Cpk2jI1lV6yA1Hw89HJeMykCka+RlcvGpQ9T7GaLChGHRuE\r\n9ce2ejfjNxULxTxqa4ZAmpjb6siJF3f0v7/4gzMklJr/C4DWEv3sY1x3ec0q\r\nooA92lq6VUCWIPc/YZAof2Dsfck0WEsoEgw2XoCHFS4VfXHgTSieScjVeucF\r\n9ro+CMwSi/a4GFahd9tEcGrRdwflu9vOr/8UqVUWfKl5FIfttSM+9V/AmkcR\r\n8gNktZQs9Cz572nwE26xdCQ08BXXxS6DBtL7lD+6ziy8IvViaagkpxRqy117\r\nhutlxvkogOqywjfodq6GCRAql8sl01VnM9I+QUcKoGq10BhVRcStmP4I9sCC\r\nlYcthFnTHuShtZV/VmWt0Jvk0wmAAXBZ7skY9JRmOngNmlFyu3Vs/5grvSTk\r\n32xiFg+Dsy1z2dAe95bWF7yNUbMYEbs3rwo=\r\n=p5en\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4832e2750.0","@material/rtl":"15.0.0-canary.4832e2750.0","@material/shape":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/ripple":"15.0.0-canary.4832e2750.0","@material/tokens":"15.0.0-canary.4832e2750.0","@material/animation":"15.0.0-canary.4832e2750.0","@material/elevation":"15.0.0-canary.4832e2750.0","@material/focus-ring":"15.0.0-canary.4832e2750.0","@material/typography":"15.0.0-canary.4832e2750.0","@material/touch-target":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.4832e2750.0_1667595441830_0.9640652147746576","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/fab","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.215506426.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e5d2b78acfd83309ee5eed10f7db4edf50c19a8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.215506426.0.tgz","fileCount":23,"integrity":"sha512-901oYRIyQA/NZxAgD5DispCp3x9xgwjius8/SHDte5oNaxBcVnk/6U8TJUXjK9QE09Bwj+PvnsZW9CXsiY5Bdw==","signatures":[{"sig":"MEUCIAzapUMWpUrhBoowi8nqaRsOjtzNPu3tRQ8cuUSF+5gGAiEA6nxakuwPPcW6sodeIeYBCgKyxYdx3XrZyVYvYCclKoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbcLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoU+w//Xc9oTQgnlW/1Cqfw3sXA9UlpuZMgAQCG+FpOJBjtbLkoUUjf\r\neaWPniKTzeyKxpFPJhmDAngptmU3va2ggoiyLQoBk/9nTZreUHxxOWLxmSVA\r\nJxoupLrZoyzYLe516xG4fSbmnc4sm2s2bEqFb3I1nvSGKZxnN3+4ngg6gG3n\r\nRXocHLX/XfnkZCcVuLZpYUVlHzQzmDrttJKC2W2cHfKPcPwc4WIcglUCIlg+\r\n5LhgvZHCMohwj5CGx7jk3lcuMSX6vyqUkOqH3Je3PN5rJnjLs1HN/v1xFEOP\r\nrwmJ5XsvVSpRAL/E3fWKUnAB66bGaZDdYtxl6obQagNIOEGQ5lYTUDxYXFHc\r\nZ8DEWleVOEPdEP+SHmb04XTFYb9aUU+EvUP3M++us6yfpmb+3OuYdiWnt7Ii\r\nueUvYxtcSJIds0UKB9MRNlMqoxXmO7NKhAL4zUH07a/WNLnQTSgLFVWQ/pu2\r\npdzHFTkxB+l9FzHdjBnk6Ku5crX44OgouOzP+UThJnhKpKMELkXCnuQWH6ES\r\njs94+xUh6gNt1+RCZRjIoKK7glDqelctb5QMNw8kXGJR4a+WJeZrHUgVDLmk\r\nOx07hCdtPb2kX3yOGwayFuK7hSNnkRe8XV8f1Y32L1spLQtKHjOXbsogw+Tr\r\nH8yLNjyioLDmdoAZhYVuDVQG9kV+SYCjK80=\r\n=wYy4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.215506426.0","@material/rtl":"15.0.0-canary.215506426.0","@material/shape":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/ripple":"15.0.0-canary.215506426.0","@material/tokens":"15.0.0-canary.215506426.0","@material/animation":"15.0.0-canary.215506426.0","@material/elevation":"15.0.0-canary.215506426.0","@material/focus-ring":"15.0.0-canary.215506426.0","@material/typography":"15.0.0-canary.215506426.0","@material/touch-target":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.215506426.0_1667610378730_0.6121462341396422","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/fab","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.4cf917476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d383699889ee7a7facf26285683e18b5554f44e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.4cf917476.0.tgz","fileCount":23,"integrity":"sha512-cGJnyu14zrfvYx8AAMm77HimBooJoGEMTAigRA2v1QqjWJc7rIrT3faymxqlDlDS6poomJFnlMRwuOCD8BVxJA==","signatures":[{"sig":"MEUCIQC9bkRtVbD0vzorshHH/X+N8AB8AGCglE/+/kRazq56QAIgGE65mhVlI1nAmKJLyJFtLYcXY08olqs+TyAl3m6a4vE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqWoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoquRAAjhclJK6kGAcdGUVkdRaH3G8Hws4YFEnX+ileJOieWR98kg60\r\n1hr3b39ev2yGKqM731db11I5a9YqcmJqoYClFOlsAvTU5I8oc4u4AOE6a/zY\r\nz1kKS0hOWw2nKRBzjzkTv2CgYHT6fwtkZ4AE1evCP0BiMbCPSNtl259YS1Uq\r\ngwLSkl/UWfnVKKpvGhFelRxxyXsQBM9anSK70CM+Je7ueav0B0Wgi2B7s87J\r\n488bFKuUVJkv0HkOKxrumyGNHjW6tsIdcD9aJqo9rqgmA8mPestItmHuxBwd\r\noMvqMT75D9GXh8fj27YkVUijzHFPaJGe566jYm05DIpteMbTXjes4v/vFHqu\r\nso+5I6wcC3h7h38dxKraF7ifb6jajhsbMlC+XqxpYZUmf8GkWfFwfewIPN/d\r\nwL6X+8UdjD7jajQHua8yXwFBKHkmQpQ8BVeqVOAJf1Z1pM+Fitc4MFIK5rVq\r\nz4nOtPgqvFaTTo7d+Zf/fJoyBRa9Fg6//O6BpvcIClvF5jK4Uf9RjKKqDVSA\r\nYHjQPCMdSoZPMMTwpgBrExsnz4/c2vhyA3T8PC7P/6DFnmAB4r0FoV7Hz7qt\r\n6HN2ws8dA7yH7+ilFpGLkmu8ZDJt9S7nZD02YMUaPi/Bk2fSqp+WBFc7CLIb\r\nZ37Jyd7I3NERIvsCi01D15WhdoWm4zURDeg=\r\n=rvoN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4cf917476.0","@material/rtl":"15.0.0-canary.4cf917476.0","@material/shape":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/ripple":"15.0.0-canary.4cf917476.0","@material/tokens":"15.0.0-canary.4cf917476.0","@material/animation":"15.0.0-canary.4cf917476.0","@material/elevation":"15.0.0-canary.4cf917476.0","@material/focus-ring":"15.0.0-canary.4cf917476.0","@material/typography":"15.0.0-canary.4cf917476.0","@material/touch-target":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.4cf917476.0_1667671463913_0.28646269156616566","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/fab","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a62f2c9365d9a76a91caa08595a2ffc05898642","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.eef14bd32.0.tgz","fileCount":23,"integrity":"sha512-IMyMozLLIHyfwEHTyp55Jg5FSwOHOQpWtwhRDYY4+0/fLFYcgj9PqIF2d+wNlXv4fK//Vvnit7lCAQP7P3yflQ==","signatures":[{"sig":"MEQCIBl37jE3OBwpreZvAwr4FcYLCWf2RtHUdOjXUSq2IXcCAiAc2vuWFAomgSOdSd/cc1NcYCCh3SLfxoonxCP6xsCLzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+3mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLTA//eZSWhuYPkZLmrkBS6NGJEIidw0DWTeiwoSiS2r6NYrrPIiHs\r\n17x3edp6FheC7iizK+EWfObNJKTjQBNFnqCcLE+YMX2xrQV19jR3KrmLzTKe\r\nIbEHYck8vY3vkvZjDK3o8dImsk8oywrNdla/BS3CwaSfIOaXo4H72IuXHLsf\r\nsFSdS39MaVNiLteWBC98zI6Q7yaPn8Z84ydZUr5Gy36i8u2VQwo4JbFq/1Xt\r\n/wlMc5uHghbr96pWscRImZFvyCJvUfTEAfNU7MzrdScJgPvf3ClIHhrLqJ5q\r\nXui3zVt7tD4hE5MKcRfWLcBiKjQfwAD7OmAng4zfoLKucLI81dzR9Qb666eE\r\nXjhlQwlMfzh0IVgwKtJ8sroIAqVEOMTWfXa6WtEyFi0v5zKjG1s9jp8+EU4K\r\nUFvN7XTgzf0XL8hryIekU5tDoSNOKN5EgKUpuj/AeGEKhqVVJrPBq1OgPoau\r\n48zguFX6h52xA6WciYGHUD6sbDl5WeLCpb4dFpyoLuaphI8K29kYd4aOlHC2\r\nRqnT6dPPbm3c3sSPA8D7REm48XPjloO54Y5jQbNbF5dGcJQRA0qoQiPrfXYb\r\nH4iLppOjx0SXjYxyIDzzU/l7MIU/q/+rYxmEV0h0CFAyBYZswdR8qhuZPQwP\r\n+rIqKHNEaVk3lmvLLWPEiNgZB8w7J2OMs8g=\r\n=DbkX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eef14bd32.0","@material/rtl":"15.0.0-canary.eef14bd32.0","@material/shape":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/ripple":"15.0.0-canary.eef14bd32.0","@material/tokens":"15.0.0-canary.eef14bd32.0","@material/animation":"15.0.0-canary.eef14bd32.0","@material/elevation":"15.0.0-canary.eef14bd32.0","@material/focus-ring":"15.0.0-canary.eef14bd32.0","@material/typography":"15.0.0-canary.eef14bd32.0","@material/touch-target":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.eef14bd32.0_1667755493862_0.5485422084209655","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/fab","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e530ae1334149ba32d6cac5f43442ca6559dc9ab","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.6faa29fe9.0.tgz","fileCount":23,"integrity":"sha512-72x4dqLO8zuK3DOBzxUgxCIMwaRt2YNtFCWhDTbNFJ8z6fcMlE4LloQin5stD9gTPVJh9dXOetZX4FzdZH7TJA==","signatures":[{"sig":"MEUCIQDA/VwVi4PduAdLQi6IbvTHUdpgKxw4+ne5s0PWZvNN4AIgeZhq9ywriCE23fPZtgKZ6RTt0zyyYw2RCTU7X7w3lRk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHfnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgfRAAmpwEbXsURIPWaWGDHO1wBvZ8NeSV77s7i5EFG0QlQ5o5+uJR\r\no6PUsCuiVJ8kl+c4cetwOZOMQbxS5zZBwV/Hlc9WX1wnq0f2PaayZd7yf3Bs\r\npbRgOHG8oXxRaYbE3z/RANJlVVZ8MZx6cvCrRL0V8Hj72LPwe1s+ABbb94b8\r\n9MG8SJ1jSNN53wbM3PUFjsdefFphs/k9Iqy1yuZKPhwIsfgsojGw5oAAO3Pm\r\nwkj+FaPNz8oTrzVwmj17yzD4L1vFkWHdylaABY0lWmcmWkuqiSoam3zveLF/\r\n+88cSXQsQXNKJKpKZ6LdHdHKP0cEtk1C1E3mdpOepletA6EpXxgzSeg21+2W\r\nhwIBb8L5PwT/mGVQeTqT6s546DHa1wKbq9XJGjoD/6HCps2Z1r/usHTwPzWD\r\nOhfwGi3cx8yxQEOOx8mVyGLDEIOpvNYtK68WfeO8lVs4Ba7wMqo6JiQajL+m\r\nb62qUa9cD4qz5CHi1s9W7EbfV4X81eNaUucVBMaIC35cZvLt+RkLuBr/zSTi\r\nDVFqNnQG6Uqr7kohAKzeKIyi4YR6uiFv25SFzpQmPBGDd0sjOB5JSUKLsYdi\r\nMUbgubHBnn+5Rjoc/2OUqaBo2mo4HmKetZs+OFGIFgjBRN5r8DQqG1wZB9NJ\r\n9mSxbnb157AYQOKW10PCPK6mim7LSqhGTAU=\r\n=XyYn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6faa29fe9.0","@material/rtl":"15.0.0-canary.6faa29fe9.0","@material/shape":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/ripple":"15.0.0-canary.6faa29fe9.0","@material/tokens":"15.0.0-canary.6faa29fe9.0","@material/animation":"15.0.0-canary.6faa29fe9.0","@material/elevation":"15.0.0-canary.6faa29fe9.0","@material/focus-ring":"15.0.0-canary.6faa29fe9.0","@material/typography":"15.0.0-canary.6faa29fe9.0","@material/touch-target":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.6faa29fe9.0_1667790823506_0.9782745695887349","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/fab","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.9af09b967.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26b3783351675d4a9f3f553fa910be07ff453139","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.9af09b967.0.tgz","fileCount":23,"integrity":"sha512-Vm0nH1QfaR5NtQdWfLqT3378zpo1s/aSgxe9mstSll3Pa/ybSSQB/jCQ+QAp48B0ZjozQZiEfzEjx1Tv9LvLag==","signatures":[{"sig":"MEQCIEHQ5+ucF3re4V+rXZTfPbOwZuXVMqkqhunAMvV/QAezAiALNkLiEykKLoU8whrwlRaLPq134XBYLa6TEQ3+BtRLgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU46ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAuBAAnSi0tiqqlfyp5xbrcjUuK4/ENtn/Yi8E8ecebFG8dg2RaBDV\r\n3vZRu22sxTESMsSLBYyeUlJz8gFv9A6zM9x44JV8vw6Dd15AFu0mFYit+sct\r\nyLcjY2e7PG1ia9nImFaOHhC5dk8XqWHuDyw7Ii8gcdUKEMm4Da/5joxxRCzU\r\nk4Gxi++sno1IRVL9GkFFa3JBimL/hmfoimQcorGBH5vBDj7Zn84pQM/A3hmk\r\nv4GlgntpLLJBIRpY3Iiq8FH94k18/1soexUoCvywi05RLlVlNkdf1GmF+byW\r\nTIsYIu4upuihSBaQ1W4YT1dLcQhqfPZacv65Zg/N6Pp0mLAZH77ZnqL0kbIE\r\nDyIYOs41pOSsBRH/81E5q5g17YjU5brdkipakPfrLJz3iZKc3R+lkfvopLQ8\r\n8lkSbX8tFVjpwNUB0+2Vh/0AafDtwqZF3tsNSNnhQoDpbE0f6kYH37KEsLlG\r\n1aSJMgcEq7mbbqquZkaC+nWM2FCFDVaer/UmWpUyGlqUJGtigeHDywkivG+8\r\nqGsmFiF8BOB8sfqC3+akxzLrAOJ4TOWA5CVCh9ZuUsiwt6MibapnJAOPrENh\r\ndJacrvTpx7xZuaJ9ZgpeEVZQMUoK8sHq0/ylt8jXcj6akD5ZFnaFfPDzmfbj\r\nXPo2WjOJI3uNKVksgS2V26r35fFrBLGVz/A=\r\n=D3yV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9af09b967.0","@material/rtl":"15.0.0-canary.9af09b967.0","@material/shape":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/ripple":"15.0.0-canary.9af09b967.0","@material/tokens":"15.0.0-canary.9af09b967.0","@material/animation":"15.0.0-canary.9af09b967.0","@material/elevation":"15.0.0-canary.9af09b967.0","@material/focus-ring":"15.0.0-canary.9af09b967.0","@material/typography":"15.0.0-canary.9af09b967.0","@material/touch-target":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.9af09b967.0_1667845690115_0.03473496074430904","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/fab","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2102360fd460ad7af3b4e97f38b9dcccbb790899","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.0f54fbb93.0.tgz","fileCount":23,"integrity":"sha512-dDcXLZ+6RDrD/rd4b8Ocb42azT0DVfoFnRNkX4ydWZt9Euphps6nWNre18FgoUj4ILorImtu+SvypSQYn4uidg==","signatures":[{"sig":"MEQCIAkr5oCRJMmMg9sHygVufbZ61YNrKwG/NEFPZwAi5Qs2AiALy+b7bCwpr1E0Jq+2lgnt8+PAXnGLREA731+RgfeJqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatCkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmos1A//ZjNdhs2LqktMhnunLciyA+P8nQ/5h3aUejBioFdreNel14j/\r\nEed0QhjGzih4NcIKyXkGWWlFyzmfXZf01+Wu0jbwnVtpMmMXwrogM4lhJw3f\r\nCKfL7duuLe1KsYxp76ECmJl0p4yenAXsxvHOguPVv6Hq+MfNZrrvkzKM8NU2\r\nnU0UNThpPAmvMF30KP/h04Q79f9QfFWiobTZ2nFJFcs+ua1HzOkH5AGU3niO\r\n9rv2zIp4TJn0WYw9X7PpqhcQRNwX5cFzIMCVkr6mQjWXD8kY9tbtVlKDMzfv\r\nOLDRhx3tjBjWGbighQ6OeNTH1rrRm9ijJ/OLQZLEBMCH6JfSlCFhscvf6Bb+\r\nM1vSL0VAXSWFc/Ydbdd5rQ0dfjYwb23/iJiYZ2U/KJacYuoEVfy9V56f5eph\r\nleBbhGOe02AcjPmmgeGCeC+lQuBu/uva2R3NW/5BxbTIFkZvgSLZuH14/6aq\r\nX/GgEOWjM4MPWj/eV6xEl1/dOIm2nFtrDMSkvR5kN6/whz3cpx46tU2GiB24\r\nnuTf/uYRsSI6iFReqgGHt0ucVippXBi/g7L0EDP6LYIl0oaz15+4W3lHfG5b\r\nMxcizo3crbK+h6sfW6XLFph/Sl08x7JS0MYn9rQqGQXmn6cji62EggIUc+EW\r\nt+kmW+25JRDhZu0QRW83Y1MBuYjk1ctms7Q=\r\n=6EJY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0f54fbb93.0","@material/rtl":"15.0.0-canary.0f54fbb93.0","@material/shape":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/ripple":"15.0.0-canary.0f54fbb93.0","@material/tokens":"15.0.0-canary.0f54fbb93.0","@material/animation":"15.0.0-canary.0f54fbb93.0","@material/elevation":"15.0.0-canary.0f54fbb93.0","@material/focus-ring":"15.0.0-canary.0f54fbb93.0","@material/typography":"15.0.0-canary.0f54fbb93.0","@material/touch-target":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.0f54fbb93.0_1667944612394_0.3436647332263889","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/fab","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1892d7a1ecb4035d8a19f390618fec3a9ce2ac51","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":23,"integrity":"sha512-rRm/IdOBEJqZGvzJu4EzXqoJ2TjUmTnibsHBNJWdKwDPjm78IW3jhMiAZfmxQ9qWOw/CQI2Y6eEQpRW1PbW73A==","signatures":[{"sig":"MEQCICRCE9efrUO68XSdhIhFqlQwFA3oZ/wAkgBoXwNQCLnyAiB+fGD30A8xolFIbGBp2ZwKyRh+6Y0lBG8VCNcN8K6uDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjayoHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+cQ//R2VTuFsG1ZToWA6GEK9czSOoUzApsH/Ko70guo36b4Gn902P\r\nJTCMhsXJMM34zXyexZQOKVaDCr57at+6nBY5bWZzQGmtZkBRgyWR4j39RhyL\r\nS5dU6IpGuedySH3Ifqh+QIwz8LyGqCRfpbJiYUeq1Kz4lOP9hvORu2ppBnUq\r\nGBJi6bDuJZlBU/RQt0XPuqYecgcfXky8ek1j9dgvjh/QAINN+atDPhLek7tm\r\n6kZPIZ34JVUuwCdb+7m3LQmhY8JkjSlVM0EQZtvIydKxf915NiZfeYk+4ZVI\r\nlAplpltsfFcZRKTqyLGzyILplFGBCsDgIWNw/x4YHNPJzNuDubp70717AOwc\r\niwDmdKC1R8CHpbnIahBlw7XlfN8VXVzzfGKWZdMn4OwtQzfFo3EyEDVDOeoA\r\nXZD8AhAG8nTKpaenCgVEZtVO6DErVsi0Jnpb/OIv6fmfL7F+AzezlLmzwQKb\r\ny4f35SIxjog7z/3e45jYWkJ3oQ0zqWPZJumOsk+gp2ZHIcscopwuf1lAfX5O\r\nUyf4/uMzngl4CQ/AlSqhpRH6/CD6N62o2QnNoOjiAyiwK2flWoHs7NtOZvg9\r\n1yYfe8HxOVJJXscKdZS4VnHope4IDirF/27GwMFxVY6ky7VdFNX/1HDL6xSd\r\nFzO+5MummZB3QOQFGxWzOSJ+PRXzUungxxI=\r\n=tnN5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a8d47f9fe.0","@material/rtl":"15.0.0-canary.a8d47f9fe.0","@material/shape":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/ripple":"15.0.0-canary.a8d47f9fe.0","@material/tokens":"15.0.0-canary.a8d47f9fe.0","@material/animation":"15.0.0-canary.a8d47f9fe.0","@material/elevation":"15.0.0-canary.a8d47f9fe.0","@material/focus-ring":"15.0.0-canary.a8d47f9fe.0","@material/typography":"15.0.0-canary.a8d47f9fe.0","@material/touch-target":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a8d47f9fe.0_1667967495543_0.029899784428100595","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/fab","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ef7de824ce91fdca4edbc321bae3cd371682cab","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.66a1e75e6.0.tgz","fileCount":23,"integrity":"sha512-CvWkC7mPiOAkBObSS26furDaWX97EQIKJ+ZGW8UoUNi2AtQ0wlRzN+7HPRQqNZa3svKDF6CmnQNLmhAsV93NjA==","signatures":[{"sig":"MEQCIF6UnJlrLlVuKt82PHB7WuFDD5SjKUKaZYtNmf7I8DJ5AiBLY+DoNEWSyvGxQJXsuHdxOmitejHuBBUnpTXrBr7/Cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3R4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLgg/7BKrlb/6Q+CIfmXdoSH6Da8VTGHjUONw601BN5pWVTRIe5rUO\r\nOAsKNJ70WPszeUEIpUUinasHc/8ATuq8GQtQ2zmWeZ+H59o22+T7L++TDuP4\r\nG6RRhCuB7iVw8Ja1goxPgJNHQietQA2uZdeSZyatTye3hgaXEcMl8z6H3WQR\r\nwEfPNL3Ioip32nqd/Xlo1Fskqm7lVHoRzLdpGP2eZFqJ1eje0dWMVwzopo+2\r\n95Rrh4UDOrSxZUyl9BPOJdZtaIDwrN40LdalIyWOPLzcwLDfQfjK+i2j3h32\r\n319tIsFQD7nmIJdCwUZzlMtqcvD5XUHW2tPBwXcngNgq7F5ZXed56wGC73h5\r\n1Gl0lsl0ADFjYHHQlWT7K8OB85MeEBGIKFRr0hGXC71O43z+fC5LvmR40R5K\r\njDc7v1RGyyFsjpeD1AuR8NX87rPNJ4HAxXNkW/9ukla6Rz6K35uoIwQBpl0z\r\nFS9auShO4mOA7upyc9MfLSqbMQQ9mjb+cm6YNe2MA0AbOTf+K/uBVyOTh1V7\r\nt4NJzl1Z/K28fJhbuFkSc+f7hJcYY0Dp0Isor1bdXg7AM7Tyba8iWDnEGO9p\r\nFDhC7BbWf50bMdOjpYpRwRMagaQj07dpHCKal9QU/04fFmbiCb8UawXD2vpH\r\nyyXFn/GFDMTUkgwDGiJopTUz+umHc0ynF8c=\r\n=D8Jb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66a1e75e6.0","@material/rtl":"15.0.0-canary.66a1e75e6.0","@material/shape":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/ripple":"15.0.0-canary.66a1e75e6.0","@material/tokens":"15.0.0-canary.66a1e75e6.0","@material/animation":"15.0.0-canary.66a1e75e6.0","@material/elevation":"15.0.0-canary.66a1e75e6.0","@material/focus-ring":"15.0.0-canary.66a1e75e6.0","@material/typography":"15.0.0-canary.66a1e75e6.0","@material/touch-target":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.66a1e75e6.0_1667986552624_0.4876259713216735","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/fab","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab5183d754795e8996d4072589877dfcfe51896b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":23,"integrity":"sha512-nGvnlEUbit7e3wqxwEor6F7wr5WpNxhctkmOC2JH1NJMTai7EB4UTclUNxbJrZ3AYnmJbbgj9syL1QJHJlC94w==","signatures":[{"sig":"MEQCIFhGYJul/DPHpf0TuYWIIGtFh1H7FHzZy21ey1IyDQwfAiA9ZseqX7mPCO8I8+bUUpZrGzOgjyITwnQJC39e3c/rGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5S9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo1Q/9HaTskrA3dg6Iyd47ThA5R0Nz81DpQ05y7IoHor2mjZJurd65\r\nkPcfWe2wqsL1WOLXvYasPKKY8DNyazyxO5c6b6AiS/r9qsAsVyBGjECXHXfO\r\nwb3Ntk4MjZ+4UnTUwiws4k0npU9C96S/Ti3sgeNuBFArAk0SolG15gZo02bu\r\nSRivNDFeMpmYECKbkPND3kyWjLoal3wud7CYYbKHUOJhZn0WfchiPLSCkipQ\r\nT8MgzCkcDJrmF52ydAXuQnVpwYk3bq/QBNjW3DsQlmD1eXbUjzdkOeSAkhEn\r\ncCQvwZyQ5Sz3fAjse7FJM0XjWpssf6LvkPGfBz4zSOpK5SOPEuEzC0UGX9rZ\r\n4uJgCXnOM5RnSOntGYAob8+Xtw+JUfQTV7qgRmm8h/r+/qviECCV/qdUfnwP\r\nykaZxOSz0KXlXaXDt8f6FvlKbQx70sX01n7LgiKTAhaaF1KOMBlMRp3PfSJ8\r\nJtoCHH5uZs/FlyaFwRGO5K5bME9IvHYk/VnZD6uqKDY7KI5eqqZNK7GK/zMS\r\n2vfKNkEjYURzNgap87qBJa2et7jdB8sfDTdyGJBUoSiLTjD/cvQ8/mzbvWsb\r\ng/BBKGdlLkNWStB/Xz6+8z3L+20ogugGtlyZK6safntW3QsX1+XmPpbE7dEC\r\ngh1vWqPWpAKs93NlSE7MhxUTTDxtBOon87w=\r\n=JGDc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5e5c2afc0.0","@material/rtl":"15.0.0-canary.5e5c2afc0.0","@material/shape":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/ripple":"15.0.0-canary.5e5c2afc0.0","@material/tokens":"15.0.0-canary.5e5c2afc0.0","@material/animation":"15.0.0-canary.5e5c2afc0.0","@material/elevation":"15.0.0-canary.5e5c2afc0.0","@material/focus-ring":"15.0.0-canary.5e5c2afc0.0","@material/typography":"15.0.0-canary.5e5c2afc0.0","@material/touch-target":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.5e5c2afc0.0_1667994813628_0.36051365385244116","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/fab","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d860711f14fa361b99eb401295200284f92a31e5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.3e3f43359.0.tgz","fileCount":23,"integrity":"sha512-wu1yi28jwMoyFjAgP3S37NFWOBXCu3/bEL/lkXmvVfDk01OxjJiJLf7ga+/wqfInusjmV3d6pIs09XXFOCZXPQ==","signatures":[{"sig":"MEUCIQDlc2YIDPdpa69++nL/MdcVt2H/5LdDOAYJAGJVchC5UwIgd08XEkyCFWp5FH13uiupLD0TUqF+q7jlWpJMFkTyHgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAd+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLQQ/9HMi+d4f7kC+FlK+WbrqmsVynEJGM0UKA8s1Ccvt7u2cgREqW\r\nb8vgK2TOUDmB0bMUc0DrRgVjv92O3Med9vFHlV49bn0v+FI16uoumc0F0D7+\r\nbfiQB8o6zSfHo7bDkTI/da2vdR0ak00yF9EfFYowz2O+wnoHXVqEZeSp2tdq\r\nLAVlctcV5pdro/J7EFbKKuQuc2n3HtlCFu8X9sYu/I1WddbNqT4H6PgCKrpI\r\nhRkr4EzSsLsDg2DWoGTOPY0HvCC0H0gzbDwSF/9HZZAT63Ae/OzMJAWLcmo6\r\ndgS90k1H4oDeCYF35J8oUUfyWj1AVYd9XXWcMeQLcNNxXmaDVdIHOOE68SKY\r\nX1wSTrKABfEWuMqkUOXFpUWo6h+sA6LBQJacUZ1BaJLj0GqVEsF4Qeai05vq\r\n023oFwFkipA5eZGFDpEPmRi8m33eWOwxgKLhk5opktfgMP/Mu4FjuSy5B23z\r\nl3T+WA8Ad5jfjuMTuyGIF3vJWQhKB0SkfaXq5Vzif3xADlA9VRKy0m/sANDf\r\nmsfyAjz1ybL+prFUca9ZYVwCCCKqEH/zkl69E2ho+7nCwwKyYAab438c0lZw\r\nNvyOOGgWUwpp2wr4KJNfyJ0RKs3G4oEk9pS/2fj31xF9eZVoWGiJ8n0I2lPH\r\n6Y8Cmj40AlzFqgnT1FESj8FBwJwpESG29u4=\r\n=Kfl9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3e3f43359.0","@material/rtl":"15.0.0-canary.3e3f43359.0","@material/shape":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/ripple":"15.0.0-canary.3e3f43359.0","@material/tokens":"15.0.0-canary.3e3f43359.0","@material/animation":"15.0.0-canary.3e3f43359.0","@material/elevation":"15.0.0-canary.3e3f43359.0","@material/focus-ring":"15.0.0-canary.3e3f43359.0","@material/typography":"15.0.0-canary.3e3f43359.0","@material/touch-target":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.3e3f43359.0_1668024190797_0.7947240602437851","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/fab","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7816aec05866403fa59ddb62d667f40c8dbab7c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.3f667fac6.0.tgz","fileCount":23,"integrity":"sha512-CWtRyXNt7xSnm9F5ZylIZ4EAzQ7Z45qUAkw8x4S8WRsXMrHrCngtgpTXRG31e2x7tq6LTp+/VPyfWnHcTAHVyg==","signatures":[{"sig":"MEUCIACgjGcbjeT7nIEzckWf/C5kRSaiVXokWctN0jCYnFv0AiEAqvhox1Z8rGMVv3s7Zv1hAUK9e5EnrQdTVcHZYY7QgmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCRfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeDw//TFSwGEPzP6YTm0+63e7Hc6sv/vcbXm1teZFddrzQCKoknnLy\r\nKSImffRcjiQYd5GQULM5R4epWBvDlcURB7+PxAz5cQ1PKUVQoxRJwe2M1w5h\r\nmYxS+zP19PtMzOjm3vbBzVYjNqXBj5HZdiDEexhioU3YJ0NHUGKC5arpV20H\r\nkOF1j7+0J6xMXl8hsl/3NPzx014bFtdy7l+DRTT7e2L5EVDCMqbCH6EjB3/H\r\nf9cn5QwV054BfFxpfjQKdWaPg/VyPz2PF/OBpKIp+qP5PNTKGpcFSpeimtKL\r\nxd6E8ZP8livlkKX5hUqTB0GTgw4Ry2ONcqCtagBgFrQbjVSQ0yK90aHSorNT\r\njc2Xn7jJ9gKSfYQVx4jNDWdofF1VDZKd3pP/q6tlrcIUtZbgwruwO+Qe/910\r\nXa7YYQToPyW/gRXwgXU60VXy/bAh9RVoZY5w6t8CL43Q5hBo8KJs6ekiAGBt\r\nix64m3gXFs893t/Z6qXI2JbRicc75SmMC7/faHxowVtWaQrKG14x8nReMYRF\r\nWYSdFhBcJwtpXea6FspEAw0/kQt8doLwsZzqh+2ucvwtmsu14U6FONekKCWj\r\nD+EuGq3AYY9KkawYmmwNGAdGvdTdrowTAM2h7RTY+K7hyno/e98z3ewRM1ca\r\nkkmkX+l/VdQpWTyXKrPdRl5TjC70h6dqH64=\r\n=GELQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3f667fac6.0","@material/rtl":"15.0.0-canary.3f667fac6.0","@material/shape":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/ripple":"15.0.0-canary.3f667fac6.0","@material/tokens":"15.0.0-canary.3f667fac6.0","@material/animation":"15.0.0-canary.3f667fac6.0","@material/elevation":"15.0.0-canary.3f667fac6.0","@material/focus-ring":"15.0.0-canary.3f667fac6.0","@material/typography":"15.0.0-canary.3f667fac6.0","@material/touch-target":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.3f667fac6.0_1668031583441_0.2335789184059438","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/fab","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e874dc14ebe2f583d657fb5f2c6c553b80b16790","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.faa28c1c5.0.tgz","fileCount":23,"integrity":"sha512-0l4np/AA8rm/am8gJhKcJdO4xl2x2snu03epYk/wklLe+MjONHABgwVbk3jLihNUZ7CEk/zSqo0eT1gB5MIFzA==","signatures":[{"sig":"MEUCIFkMbwQFGi5p5abqUKJEBB7+8CrNTwbPnC8FExpg2I/kAiEAph+aIr/JUf9PowyFcI15xfeqxBFDVesFHQteW/nLACc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnn6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocWg/7ByDbUsVpbarYhn2Q/REY9uUX6qc0BCDTjLnUu93KG17p+siD\r\nziv5emxwsWvp6W4Vhet/JOZ/Jgyy00IgRjpU0F3zYjw4zNgkNBG0++XumQsD\r\nsbcTCkTCSlktXf/Moa/kKeM7vpxy7ce4Cf5/ZaDGA7FqjTcfWNV+ENb0Hsin\r\niLEi2GcfV9rAYDr7Txs+9fz5v8/dN0eKGA41LR0IW3Yl8cD+Ns20+st8NG1z\r\nIFXTqBAYwin+U8yXhpsZlx8/ffb04b8J2veMuTBfmOePb4DGWMcuv4L+RQxK\r\nRtjnRjHx1cpk7EOXggHG7VZGl0lvGmttxS/QmvL5yEFSNBAyd35Rke0MhFY/\r\np8/n/gjtcy7+jn3U7sM8OXejnU/o/7iB/34Pnw5S6w2N60YTBm+HkmoR1PJz\r\nqm6McXqU56PD9+CWIRXPxyBPmYwypvysGkhoPN7NRSCA80RzGqBGWP8l4N5c\r\n9wn5C+tvWcrOWhFupwLnMfqKHsKaVDBOfXLodV0W8esZETCfeVxabwckna2M\r\n/BfiMmHn+Ka4mjt1je1OcSO03CO8p1QQAIjgpoOt/ucCRYQmTn0bUqxxH4qS\r\n+RwA6itWjOY6sUC8WVyHlsbbsA8tOL/Z7+OfGIE8+WeJSH/d4+jEmp/Mq7ak\r\nkIBKFVWsNYWhwcCeUrt6LXKQIKwqX53ra2U=\r\n=Ojr9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.faa28c1c5.0","@material/rtl":"15.0.0-canary.faa28c1c5.0","@material/shape":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/ripple":"15.0.0-canary.faa28c1c5.0","@material/tokens":"15.0.0-canary.faa28c1c5.0","@material/animation":"15.0.0-canary.faa28c1c5.0","@material/elevation":"15.0.0-canary.faa28c1c5.0","@material/focus-ring":"15.0.0-canary.faa28c1c5.0","@material/typography":"15.0.0-canary.faa28c1c5.0","@material/touch-target":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.faa28c1c5.0_1668184569935_0.6223976869424963","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/fab","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a868c7866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df65cc1e4e087dd1e94f5b4d9ff130199c399f2a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a868c7866.0.tgz","fileCount":23,"integrity":"sha512-XaLcr+CO+rSCSh6nF+EZGyhyDZUIm+njQu1s54QCVAu8BSSOv7vgH5/HWgzTE7IMWY1XlCSHRWgFAxkGpW3w0w==","signatures":[{"sig":"MEUCIQDrzGbl7q97Wv/CEHaBAX0zIqq5zGhkxo6n0B1pUICxzQIgR2939Wx/uUFdVrKLDUr+6qGk7uyjRLFumJ71xy9/LJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnohACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqiiw//Xl3LAVIjf27YANxBKwEcReBp+sRP2QdV/HXCtzZG4b14b3pP\r\nHBlO8OE0Ty/Rw2IUIWrBR26Knhd8IjBmJ6aPZURaZx4wlOl1r7W/jIbfv97+\r\n0SwdcMGFgY5Z6g9S8Q+rw47BkeYIujidV11xQM55aXW7WsSnnRvWIfE8cGmi\r\nn3GZkmcymGgOmvdEO1u3PXcrGfoW49hilOH2VXkDue+1huk2/gh+wMB2Wvyd\r\n3BREHAf8NJmNf/KA4P1eOh5u/Gt6GdKw42xYsL5iKW+o9jh1M7Wpvoms9Lf7\r\nuUnkkmWSYofHIYDH5K7zmuW7ByqozKGfv3V7XyPA3ndMAbbFoZD9s48WWQcb\r\ns6juJ10twpIFvAHA4GE3fcZ/pLfQVLkQqKQPRHgXYMCFTuxgtdtvFJaqrX/t\r\n/QVaJkUXkKFBbxwOgOZF/a6RvXMIll3cS5to05iEjpfRRsN0/fCa9uwY+QTy\r\nyThzoQbw03RtH5OMCuIkhTL4cbYG7UyiIsm4dMp5YFtXAXW3rWnGiMBXq6yq\r\nn6O4wQlFnvXbesvEhulBUVRg+jsK11pPOSet716ItW4aB2H2bD/uXrrWDL14\r\nEV/8ZGfYIsGcjveEN9AiygcuDQdLm/gGRxXaOJ4rR7zyWFVFzdeSFAOQSEJQ\r\nTovMLe/4brFHFgwt4wl/G6RFuWZnAOnxu3k=\r\n=5+MH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a868c7866.0","@material/rtl":"15.0.0-canary.a868c7866.0","@material/shape":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/ripple":"15.0.0-canary.a868c7866.0","@material/tokens":"15.0.0-canary.a868c7866.0","@material/animation":"15.0.0-canary.a868c7866.0","@material/elevation":"15.0.0-canary.a868c7866.0","@material/focus-ring":"15.0.0-canary.a868c7866.0","@material/typography":"15.0.0-canary.a868c7866.0","@material/touch-target":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a868c7866.0_1668184609021_0.1169888752195336","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/fab","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3b41cae6d3e6422982f0a42ffe839d54c9bc755","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.602fe8efa.0.tgz","fileCount":23,"integrity":"sha512-CrKcYhMaI2GGtfau/8+sYqvQi0g03IqL8oP6cEjfHclWME2ntCY2LdFy3/c/anplJnITmCBOMSDWQ5zg9RAUGA==","signatures":[{"sig":"MEUCICyijgtYetP+9nMnrmDwpARvqE1BN/eFXo03GaTItsIJAiEA1GEgjy3fFxENw1O4GgIQw5e+3zQfx12+1XV3rq+4ajE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboJrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotxA/+IcTyw88ubP42Zq4sawD1Pop3nbqLtuxYwFeAfmMEAeMjMzua\r\nlhzyQi/3q8eGFSt870Fpi63/t66Pla6d89HW6/RA06I8xSp/WwHGI8w8/Tv7\r\ncmrdOtyqP/IYOevwUHhTYqWzmh0yjAjTnIofMq5b2ZZ/B1jQOhY//XuFgCNU\r\nuMoYBdul7VJ5yveGuI+FbBL2i65TuytozlXDM/rsB8beKsgoPi0AExAtM2IM\r\nwGOoOqKjiGYOQvYsh0kky2LqLJyncWBPbJhdzJBbvVGpuhrkOCrGnIiT+ZaH\r\nUMWDA1Z8eMxzI0jjjfgnm60jKkc3Hcg5OA5gcibebhcrEtwH5YVNURtidZA+\r\n8ADLE1UNA09G0tDZzUg2VYvxHyHSuL5f/F1NG0sTvlmby4NXczQl137PtY08\r\nmWxWAIyK+qdE0Js7wnU3XVDJBueUzvw765vXJX1qju2v7oN533op2uBbE6bV\r\nRbGieJwlrOiWMeQWjWbfa5JuHW3ANL+hJEG01A6F6FxGLJef69WpVxUy4qfD\r\nqErFIExc/Uha8Vwv5mIIJgDeWYX4XNLKM1cbR5vuEgn7NzvjofdggsdCRmVl\r\nX7Bh+qzpg4MY3F6tcZe59vRSGA9G8+ETHBnMiIUZ37ODB1WG9zxG/veKuBcD\r\nG5Q/YXbbrA6tcrKYJ/QgEpHSi2x9IWqa0yk=\r\n=iILQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.602fe8efa.0","@material/rtl":"15.0.0-canary.602fe8efa.0","@material/shape":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/ripple":"15.0.0-canary.602fe8efa.0","@material/tokens":"15.0.0-canary.602fe8efa.0","@material/animation":"15.0.0-canary.602fe8efa.0","@material/elevation":"15.0.0-canary.602fe8efa.0","@material/focus-ring":"15.0.0-canary.602fe8efa.0","@material/typography":"15.0.0-canary.602fe8efa.0","@material/touch-target":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.602fe8efa.0_1668186730878_0.49138393659108215","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/fab","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.558c2be62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0e4c8c3d868f3d85383a81f16426d6d1cf73392","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.558c2be62.0.tgz","fileCount":23,"integrity":"sha512-6Z9k/1rZ5OehIn3BoDvBXb6yujGQX+vLCFN0FpP+mXJz34x59LCsnGCLGrPiiiSKwuQnPqa4K7zNov+/EibDvg==","signatures":[{"sig":"MEUCIAQ35obb6EC5tcLZvaR88oNPB/wkucsDlmdLCkz21NIXAiEA4NlNYnKOqaWlShx/gZ++rwcNDbOZ1syd/m5iXjpm8pk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtCPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6Vw/9Ew0vuSQnLXgBCQh4mYzYvO+OdseCAzAXH9v75zS0NqSCwAu4\r\n0mLee5I7xTBpeZYAlpPfRzKRftBT++LG263bcX91bPPH58zGt+iVt+omAmSx\r\n5Ynf5EqTc9c08+G2ES9Izz1lDTpmS2uZL/o1ykwCXhqnpIvGf+sCt2O2suH+\r\nOyj1NopajDpeDV9Rb8KS/aL6gi1D2muA9HLbBhTPaY0KcwJ6fNKNMCs/ZBXJ\r\nqL63Xs6M0AZHkc+Cye2NKmuBzfHVKpsVzSSVSUy+lL6t1iUFUKqVsOHmhcZh\r\n7BzgSvx1Mrino8AnrqfSuaIFlafcNbFpwSsiRsWpDTJiP6Yz9GvfTfsXIBzQ\r\nd4IkKFgqzjsf+gIeYgWnIcjIWlvZhnVHr7rrT/jdnJq6qRDpNP8Gqskvgw9j\r\nZX9+TtZQI+gf7iDucGArFVmKPNiqLQhD2ruPzyoKg4EJKp5cvrkM1/g6mF1L\r\naONmVLIcIyuNP18SazPbLAlHTx0wxYgYU9Bf8WWLIbpy4zM0TwvQmeb9qHhY\r\nJaqpEkxvvTEiAsCsXZWQCwzT5pNomBvo8rRO0BymJDCI1LDMsXhSxWv6cyA6\r\nsd/CPefcOrRz/aPszQpWf8TbHOixMDIo5aK2fDVD1RuyQOSJI04eGNRxQQH9\r\nWYF8rdRkpnKf4gAv+Vs8gHab5Z4XM1uMGHg=\r\n=44D0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.558c2be62.0","@material/rtl":"15.0.0-canary.558c2be62.0","@material/shape":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/ripple":"15.0.0-canary.558c2be62.0","@material/tokens":"15.0.0-canary.558c2be62.0","@material/animation":"15.0.0-canary.558c2be62.0","@material/elevation":"15.0.0-canary.558c2be62.0","@material/focus-ring":"15.0.0-canary.558c2be62.0","@material/typography":"15.0.0-canary.558c2be62.0","@material/touch-target":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.558c2be62.0_1668206735434_0.16552792695686058","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/fab","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9823a300992215640f7a9032964851754ea94d0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":23,"integrity":"sha512-uSf1leW7UlBPBiPtjEsgRh6/eYTBECMgAP927Xrea9nfi4Sal9YFRerFWYcZQGcmHEK2krpu4uP6SnX2FmccUg==","signatures":[{"sig":"MEUCIF5UTmqiqGa7kqFFgsyoIpwsajEufSxbjDVbUeTzOFneAiEA36UT6g3Q6de8wkeLTqRPHt+uYtXvYImc7v+teZm/f/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmW9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqayw/+M2d8RSAnspDndEDfUO5jIZwv5Uu3UPROr95/KBB0An3M8047\r\n/I37cTcMeSM1MsZ3uaJ/aT3ZO71t1g3gy+WyGUfL9qzWbbmoysZ2sVVm8ITY\r\nST0FTjX7OWQt2JFAjIyvWRslC0B7b0fy1t4SoNUhlCiX/P6fbsHrFOgDr8lQ\r\n6ujxor8P0GKcR8h6W48OY0ziJL9YnV2n26mfjsOv5YlYwebWdNxxfaVkkIKQ\r\nM6/YKO8pf0HvE6X1l6OKVKwOo81MqCy3W/lMAWFHG2A3DZvrrnAflisIKMHO\r\nFGAnmVzYCqRqEXYsM1Mt2p+9CZwk83J4Uj1ycoYK5G8cIwK+Pi6MYkjLQ//V\r\nAuy4/nkt5UOV0kb+7km5mQgTfXIZgHfAzABCqmibiw4suQrxMvzKvaOVQqUO\r\nCegiJaoGcAGrQJ9RY4S3KEnaTVe8z2uj6ZNMNjOTdVerA4woEt2i7W1vbN8W\r\ncjjnU21obpsyP0HRiT/Dof3a5mfwkkYuuh7y3KvdkWonbeleZXTKZXa+6f2E\r\nnJjmFFDtF/T7tSpRxwIUJ7Xy3DiOi0a9w0ivO6qTd78d63jkvJCvf7cqqt/2\r\nhkjYVAo2TLJ9w8+bwM2LPlWl+7vCysUs9uLxBY1mGa2IRc4UgZGEk0tDiju/\r\nKWT597VW0m+0K/OnS/XCUexbKArnrT8RM6Y=\r\n=Rvno\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5c13a7a8.0","@material/rtl":"15.0.0-canary.b5c13a7a8.0","@material/shape":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/ripple":"15.0.0-canary.b5c13a7a8.0","@material/tokens":"15.0.0-canary.b5c13a7a8.0","@material/animation":"15.0.0-canary.b5c13a7a8.0","@material/elevation":"15.0.0-canary.b5c13a7a8.0","@material/focus-ring":"15.0.0-canary.b5c13a7a8.0","@material/typography":"15.0.0-canary.b5c13a7a8.0","@material/touch-target":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b5c13a7a8.0_1668441533650_0.73704493289239","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/fab","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26dbca4a148c376467dd7244ac85a42c24d8f74a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a6e1c0702.0.tgz","fileCount":23,"integrity":"sha512-tMzvWx2ySbS5Hg9a3TylyKEK7RA3X0FcXYY8ms89tuarSvIIN1ylayg1BhVjI3nD1162z55A+JWSzJcdGxOdTQ==","signatures":[{"sig":"MEQCIDmA48DdDrV7k5j+47GeReNyi5TX9KgJCQWlBb5BImWAAiBlGNIkN+V3t0kE5rVEVneJPMHa5/5RzcdF6rNfC5rufw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnp6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDhQ/5ACgN/gJL+kVGhlAxNENFBfXvCZEB/WgrFIg2Jd4mOQQFvvqc\r\n4rNl7pS1P9qYHnWkrGfgH5lFhbC+v27fQXZYV0PEdSUxrJL614LEvQ0V+yL2\r\nFBjn7sRtmoMAGfB3SOL4S2vuRJEq/BWW/yYzfFpy7PtcpPkLRMSBG4ccna6M\r\nifECSda3mTjWA/bih91qNta2ufw6CRPBIc0bBnAZ1anLk0cNBoATLjRJv5GR\r\nzG4b9GTFpaVKO/OSD7t5ZH0Rq/0m+yLx1rcXs/35mg8HnUWYKu+w/ooQVwTz\r\nWVGaj5b+FabR0tZ0PcZNVxtTKmYRSYH+is6l5fzGjnba1JKThAlw8KKdeLeN\r\nyq4gHh1OlKZlM3LEeIu6sRne5esLzc+VhKFy5MDgp9VgIuAapkdyIV254QqU\r\nxxW0pIBMrVGKLUIyvVx7w/7uTB1ykvHVJSllija+V5bsd6Nx4vAXA/TRbaA4\r\ngBhtGb+XA9joqAun7DdmmyN7yNAmeywMURziVuSOckGnyJa6JR3mguNlEhnU\r\n1xZZWvJH08I3AIKh3psUa/iBz7bxMz1wacQrIZGeNfcio1XhXxqeFbN0RdHz\r\n3nfMNnEcZdqWbdNNtU0E12s4qPX5TtSznKmwRpqlJwEOSX37ag4dJANxN0sY\r\n7dRJxEFxjQILSBHllcWth8lm3vPXqprVaM0=\r\n=GDbY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a6e1c0702.0","@material/rtl":"15.0.0-canary.a6e1c0702.0","@material/shape":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/ripple":"15.0.0-canary.a6e1c0702.0","@material/tokens":"15.0.0-canary.a6e1c0702.0","@material/animation":"15.0.0-canary.a6e1c0702.0","@material/elevation":"15.0.0-canary.a6e1c0702.0","@material/focus-ring":"15.0.0-canary.a6e1c0702.0","@material/typography":"15.0.0-canary.a6e1c0702.0","@material/touch-target":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a6e1c0702.0_1668446842097_0.5166618148468622","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/fab","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64e3484f0b799b546f3781c0d0ea11578a2cafe8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b6f8a06de.0.tgz","fileCount":23,"integrity":"sha512-yTFdQPDrKUXjbWXtWfYGmiRUiDRSKUE4hNUU/mH4YQcnjl7uD3IahGe5Rl/jyv2tzufO+cXzuUAR4N8yK6V3uQ==","signatures":[{"sig":"MEUCIQD11pRTPLnxZu53XAarvAoWnhV/n7pgRaaNRNPLImW2EwIgTHCooPsd8yWBbMqdC4e3Ak1URmKsLVIORJ3XCNtYtpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1vIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogiRAAgeMMIiHVM9pLSXHrn2AU1whuOEyTxn+RZEc4WQQ8QdoLBgQx\r\nKz2yQUO1nrvEL4/8po/QVSYZHPPMfV70gQptGyuzNcQEq6ZppKME51z77PqN\r\nS0yveQflIOAjCLQ7TP5dm5Xm7D2TD+tzCUW8ktHmnZbHi1CiUgAe2kvXeogv\r\nYKJSdKIpPhMdPSthm1fxDH5BM05MnimFVpZP+jt82yQir8hCwzBdz2wZ6Dqb\r\nQ1bXnkmjgVKBHM6xguJo5JB8NHKxT39941McAt9KzNc3fJSladz7hTraYltG\r\nqnlpt5qaKLdrDyJNq4lTigjr/pUmwXPKtzYhuytD1riKX7g28QPCvd33Cd42\r\n7Oq+GWZ0jAeNxG5n9Qk2o1L1mgTlBi6ISwBLm5UrV5ZCBOzqixJpF27g5Osc\r\n29fnljyvO45kOsrQb8cKbdMuzUsbr88WJNL0mpqzr9lTNOb811XFuG5BfRwQ\r\nJMKLOwYzz5j6fjHPAlqqVIjI19SR6v5An7rLlm6DjX/E/bvYoitwMuVJaa8/\r\n+7pzrXNCzK8p9zXtHF29xMJbFN7a1n1us8F3kRL8eIQd0j8Eu1eE/kVNPYIu\r\nYYc3TWLsRFKYMUzhvn9sTdva4XHCPk+sFq4384D3PPqyNTo47CzeTlkH+cjQ\r\n2t5kwXAcLS/dehRA+IG2a/KDxdJNkmTiOzM=\r\n=zVyz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b6f8a06de.0","@material/rtl":"15.0.0-canary.b6f8a06de.0","@material/shape":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/ripple":"15.0.0-canary.b6f8a06de.0","@material/tokens":"15.0.0-canary.b6f8a06de.0","@material/animation":"15.0.0-canary.b6f8a06de.0","@material/elevation":"15.0.0-canary.b6f8a06de.0","@material/focus-ring":"15.0.0-canary.b6f8a06de.0","@material/typography":"15.0.0-canary.b6f8a06de.0","@material/touch-target":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b6f8a06de.0_1668504520660_0.9799636486502981","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/fab","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d6c96756558a1afc6726de9f84baf861ae1e953","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.0163f3ba5.0.tgz","fileCount":23,"integrity":"sha512-TL0SW90S+13nN7/ZgeymjBMbxoycQ5CGTl2xKuX5+eNA+nuOC2PE/sn1fo3200E9f4hIzjsxXMbEwsHqBImS2w==","signatures":[{"sig":"MEYCIQDrdmoZcFTozCgZ7m9CT9rvECEILr/52HgdondUsQvV9AIhAOh0Yq7Icuw3vdlkZ4hxvKM296lWknLPAosr7nLYTP9c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9Q1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoj9Q/+NGzGLWsgv4tjY1Z/ngcGgGuljDbPJHpb2vk/B0FmDZaj3UYB\r\ndUb2pgWhO+gf9YFEwW0RG3GpdetOUp5BUeOssr+ATkcwrKEoPCArktLOEosP\r\nNX1LNGtsBzcCP9RV5YX7dGh36B3qQ32L2RoeAdxjIsqzOAvcRDu5dxePXPxL\r\nx5XiPvA3RhvjQqB1H4q6vBgf7KyPt6L0Nji6ERvUhuothridiA9WP0RoxHS4\r\nBpF/ztOQ1aor1P388GQ4JOFx5z7urhkNhOegrhdPzSOItzGZ2N7z24z5fDss\r\nOMaB4xgfHJsCuzAm4mbz06awhpGBq9OqDyF+5gwJ5PZkJK7PvGa0H0+2/EqS\r\nrRxtOlnNCgn7vKWG/wjt1R4J7GPfYpRAxOEC8v5nd8XceRb7VakFdcBDyaAv\r\n6QdCJfWB0qcv2K9LDSPgoi/1KzdZX7HKnRQ4ABqLTp8tpeXW3rIXx/OKymKL\r\nxvsLFwouz++m/TeaPmQDGaVMVG+vTk0gBR6mdQK6RYptAFAOjodMX8Pp/Jcp\r\no/GRDxbysZ1uPsKipx+BJ8qSFo9I7OO8UjL31863BowzohEuAFrk4UPqz6Vv\r\nqHh92r7cHBGSQgqS2s+nZLxq0PTlL+QvL6w/biWKn85ARfzQUS19d23rtTZk\r\nOx7eYWWgQ4a2fO4RDsQZk0Rl8RttjQbV4Ec=\r\n=bpZI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0163f3ba5.0","@material/rtl":"15.0.0-canary.0163f3ba5.0","@material/shape":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/ripple":"15.0.0-canary.0163f3ba5.0","@material/tokens":"15.0.0-canary.0163f3ba5.0","@material/animation":"15.0.0-canary.0163f3ba5.0","@material/elevation":"15.0.0-canary.0163f3ba5.0","@material/focus-ring":"15.0.0-canary.0163f3ba5.0","@material/typography":"15.0.0-canary.0163f3ba5.0","@material/touch-target":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.0163f3ba5.0_1668535348992_0.02033009027902888","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/fab","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5900fcb1cb988ce2c68177d7f96a12b632df77e4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.66c5cbb94.0.tgz","fileCount":23,"integrity":"sha512-Iv3y8QLBzXhN48H8/cCeaZ+a+jJXQlS5nATjdHA5+izYq/wpq9aDhpjOXCsKF2Q7gjCrZeXy++o3jIS06MgG+A==","signatures":[{"sig":"MEYCIQD/OvS+KcMXSAmK6+Wz29rmmVbucLuS+fxAfFwDNleU6QIhAP+OEcKSMnVWklb1Yzl5ZMXCv05AKB39XRNqPg1UBtrm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+jUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3bg/+Oz0F5bd/f4bwSwkYDV4fA6otHtocvXagCRUjnjj9n9FDDkTU\r\nXG4N2RMd4RYBAbX8/jKMZKqN8Xu/bLpVlLzVZaRWzz63188L95yTgEZg7fMC\r\nRBGW87S3JMOsvTXwMy8piExCHS53H5fhk8h4qfPCbUNXjelzxLtxeHaekBd1\r\nq6I9za0w4T/bPDGDbfjAFK71Le1IsEC8CJMzh69PLccbqdV5r88CzFrFYGOX\r\nGXTn3wZH7hiRchRJvsCmp9twPoyWipBEXkIKdkpYL1N6wfppHRYEDC9thdRO\r\nHlyuHIwaP+fXl3lwuVy2vQf/UEVc3b3SidG7jjvc/XEdIcC7+at/rDuQ8wui\r\n660YqvbqR5oFcc+Yk5jVEk5xK2j4vXHuqWa+22//+VltUBrxtjZwE9NVYYX0\r\n4hFN5/TAlZxQ/6v+F97bD+KUt2REye1iJJOBcjokU2IfOjqmKi4RUf63/nW4\r\nkL8hDtYag0vINQrKgrFBY6SZhwLPB2BiQjmh6UtZobkzysg/s3lKuwf+BGAS\r\n8W1rJSK4Ji0nPnq7ZEhrUIy22S29iVCOgGABaPah2rwsPjP1UPBeq8xFwJhc\r\nzdOEgYob4Rsgli8ZIoQR1zluANvqP+HrYEcYuxVbQvORr3OSEEcy0aoK0uyJ\r\nTyGfnwLX73sLV85RGQ8MTv5mfF0bAPzuWxk=\r\n=2mxk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66c5cbb94.0","@material/rtl":"15.0.0-canary.66c5cbb94.0","@material/shape":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/ripple":"15.0.0-canary.66c5cbb94.0","@material/tokens":"15.0.0-canary.66c5cbb94.0","@material/animation":"15.0.0-canary.66c5cbb94.0","@material/elevation":"15.0.0-canary.66c5cbb94.0","@material/focus-ring":"15.0.0-canary.66c5cbb94.0","@material/typography":"15.0.0-canary.66c5cbb94.0","@material/touch-target":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.66c5cbb94.0_1668540628120_0.3178741406925316","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/fab","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b01136063.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58b80f3a2e7b58a70b923388f27ba26140b6ae46","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b01136063.0.tgz","fileCount":23,"integrity":"sha512-24CCKOicJltR5rVZpgKUe6+AyALihfzIjGu2qG7WBK1pM8JXKUwLsxf9zq4Gsd3/+xgrULXuA1WGYqnXONf4TA==","signatures":[{"sig":"MEUCIQDXKoQsdxW0yYmpp+vXiyXqlSRN3H4eellULtnwzc3ytQIgQU14ZhfcGwcemYirB8AMVJW8x3CFfSSAsMMFJ3EfJXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCvLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvNRAAkxbmEKG9VhIm6hiMhbaSEVsuyYAj3yUOcxU8I+ZbrswFq5o1\r\nUNPyAtaOqO1zE/OQzrRZCsz4XBP52u393jBAlJkAZRJziXy8X0kAC+6+DHt9\r\nK7WQHvdkY9ZdbNVQWEDcPfPMWB/YN/k5rgYsaahVbwsYJ/4ubllGVzIEIf3t\r\n9TuVgjoo8NPDHofG94iJ+0sdO3tsYOmfC7Z96MsQWO8nJU5j/+rPUmJt1G/w\r\nPwsC4FGZYRk8jh746lVGm9diglQ/oszk3DdvUmtR0+/3x8fFaxG0yH44aNlU\r\nW/cKAV5QHh7Q1PvoU1Z26q/fPV6e/XgOcY3ccIzU53zi59vvWoajiXLN0jve\r\ngyJIastnKHvJnpL5Oz9I1PuUJ9ZdcpQRDh8eJvWttomvPZu10LVZ9WRqwxD4\r\nYwYShK54J5O0N/c5p/7CmgMU4dA2rZd3jrNJWGVXf7iyU02TDx0mXNQA0WmY\r\nSn5knquB0yzB163KXe4CTOgYxkYdVPsHiUJ01O5Xb+UC2yKQt7FGM1O5X84L\r\nAoKcIF/nS0Kp1EvlIz7k8J7LyiiTQRp440DxkNbCUiVu8DkT0UZ0XMt5rFFp\r\niR++GuXZv0eY5VIaKZYsXuadEf9RQNUqEqOPx5Oa9JPOwTi/JOW4uXj8RWi1\r\nz8P/zs7ujrxg/YadKTM6y79slUoxa17RhpA=\r\n=oGVW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b01136063.0","@material/rtl":"15.0.0-canary.b01136063.0","@material/shape":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/ripple":"15.0.0-canary.b01136063.0","@material/tokens":"15.0.0-canary.b01136063.0","@material/animation":"15.0.0-canary.b01136063.0","@material/elevation":"15.0.0-canary.b01136063.0","@material/focus-ring":"15.0.0-canary.b01136063.0","@material/typography":"15.0.0-canary.b01136063.0","@material/touch-target":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b01136063.0_1668557771089_0.19868025434203362","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/fab","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a48e047d9b380d81e0e053b271d48f426003e1c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.01da0cabb.0.tgz","fileCount":23,"integrity":"sha512-pXH/cu+9GgR5lJ+Fpkzjcgwux/s/qLQp+bLjEeMOBd5390rcgq/Ca0MJJWsrSc57FT5Jc9C+/rFKnztx/RzL/Q==","signatures":[{"sig":"MEUCIQDrrXv+xVvIwclcOby/BZy6ZKE9C0ttmYsnwPC5h+SV/wIgOtEGv+fbnuDD23xLoW5aSnF94Jjfhanphl4cEAZ+4LA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKnAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3jw/+KePc6BX06DGm70sugUYxPaGE6jT0kKK+o2pOG6LrSY/R54iZ\r\nBV1pHzlDVQenJ1SAB0wYeHCdgSgF+tbAu3qgRIw2OuTYS8N1qs1G5S4PZBJ1\r\nevUIXVAEWIKOWEYYMuAfoxrV+YXVY+gdEP24sJR5r6olxfeE3PlRGfLcRNQy\r\nJEJKdVNix8QzT7hnm9qVL/t2JRQB3Sm4G95mIZZ5J7ZN4Ey8VYQOplzAxvaM\r\nEOgWWtKt/mnEio2ks42tk3R+pYUtol1PqptWGQa77MvC8LWVQnuIyqu8yo2H\r\nHxJc6Ojz6w6rwLFd/QLjBfar82pvPXIUYZv2prKhW67wGsgJ1WRoQ8/N35bT\r\npKwJIfyzlSyfGq7Pw1WRVsuvPUqj9g2A/mZ+E4NJZNzYVIFc3pxNk8oiQiY6\r\n60BQJHumI84SRSAXPMWJ5KgZzZi1bN7srZj/JIABBb4w/LZdVhkAswAflu19\r\nrhcueBj69iqlwoBZfvmrWYzYPOU30WtkDgvSbH9LTty5uC47nn1a4WXJL+vB\r\nSSu4OePOIjCSh0FvoHAoTHK6SNKIU13fHK8Jp8V/KZLkethOPGYdo6aOHb7S\r\nO0bhRfJOzJ/NM2tyIubJqHYzhg2RflKTPQMOFFvXS6zy+Q7MJ8xLZJP8vfOQ\r\n8MSK0MnBSIMI+gGRBS9A6s3fAZkmYQOS6a4=\r\n=0Dg3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.01da0cabb.0","@material/rtl":"15.0.0-canary.01da0cabb.0","@material/shape":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/ripple":"15.0.0-canary.01da0cabb.0","@material/tokens":"15.0.0-canary.01da0cabb.0","@material/animation":"15.0.0-canary.01da0cabb.0","@material/elevation":"15.0.0-canary.01da0cabb.0","@material/focus-ring":"15.0.0-canary.01da0cabb.0","@material/typography":"15.0.0-canary.01da0cabb.0","@material/touch-target":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.01da0cabb.0_1668590015898_0.9716881360705059","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/fab","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.4ac393164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7d139e036dd33ecd14866b1df6c47d27450fd5a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.4ac393164.0.tgz","fileCount":23,"integrity":"sha512-DHl7LovPhpkVk/r4tmN9x1XltqorYVSV2RJKLYIsYjwuUBerqh54vegtIsm1wdIyRclbOngEf3LxgsE7QcDSIA==","signatures":[{"sig":"MEUCIQD9WHus4PnbEBPfirrE48IIcdXQvbJ3Pch4vxHXa99rWgIgWemTRRAccM/rhlb7fEFiBEhbal6HjXD9LnXvmRdmC4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQy7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq68g//cE1+VK3fXyyHd+EeEN2WNp617bkGP6Xv0g4wC9gb8XWgYvGl\r\n9O9URGu1VRLSSibIGs3AKmFmUd3oxamGU62x7uh7E5lRquvTUjLXj9kO+6CQ\r\nWwlwGe92bvZhAQiTiuQJBIb0dTBz5GyGMIkRLAU8AGySkZYaZB9jJ/OKsCDe\r\n0OzraozU0bSwe2hQcsxg8qYVe0Nw8jc5Brb4ggHryiGxKl1+/safRiQGVfHr\r\nqIm1Y9JO/G0a92A3FqRltPdcmHsdgo8uQFd7qAMJT+mGJsHDnHQpzIvgoatt\r\nBWaOyby/p7VrCadh66pmzWFaN3S6OTekY6DNClmMv+vwypolQJT0PqdCGWzW\r\nDhMyrTmV7/TsMgo/zMbb69h9VfTw+oQx8OQNS9GHHXP2ptE3AXAN0wHnbad7\r\nl7MWgf8JpXxtc1Cp99P9a4NXvt0C+HiHZR4JCAbKW3Z06ISlUkJVYQMoj6rQ\r\nnjr0zmauffg6LdK9ypul9b9rsZaq6YhznO/WZy9QTB/m79QrHEpC42cTHInl\r\nsbSP9NIjJoWn+/kw3npYaFbyRWX28QyclCI2e+WTGYHocLQLmlFOZ6gKGi0x\r\nl8oLf7B/KkfCw2hk74ZkwGhFUA8Nbxl4aRtcEtvIf/+CeLzMQORtIcoWbMdG\r\n64sQPBvR2uuJ2MKXJC26xOnrpY7kTXeKSv8=\r\n=ACf6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4ac393164.0","@material/rtl":"15.0.0-canary.4ac393164.0","@material/shape":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/ripple":"15.0.0-canary.4ac393164.0","@material/tokens":"15.0.0-canary.4ac393164.0","@material/animation":"15.0.0-canary.4ac393164.0","@material/elevation":"15.0.0-canary.4ac393164.0","@material/focus-ring":"15.0.0-canary.4ac393164.0","@material/typography":"15.0.0-canary.4ac393164.0","@material/touch-target":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.4ac393164.0_1668615354959_0.13604936215153351","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/fab","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.6048fb563.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b1e648aac5bd030f7111a372e87599845cd6bf7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.6048fb563.0.tgz","fileCount":23,"integrity":"sha512-fFH25VUTiSsAg7FnLsJzj3oluZ25wWv2ULG7p+EBaeQOFGBNNzVeEg1q+OqM22iyHS2wTQBzZkGaZDzTwySJjQ==","signatures":[{"sig":"MEYCIQDvWaDUxU7UlZUR1tgJUU6TUcHNaDLresy8Q62nz0LkOQIhANZ/dQ/VVSogVInpTqpnO5UHEmfxrXfB+wKpaQtJaBDF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ0xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpvjw/+KIXaIOzixfIWlTdT15Nb4mkxz2KQLCVfNzbY3fSJscoh8YWY\r\ntry0kxQnWhCvse6bZtSh+xSn2Vs6WSXDJ0DZF82Kg/DlwDUfnztdRnBkMjQq\r\neUthBN2gE8bStp5fvn2s6oMHOjzm9d4aQZNIapiYXo9mVq53Axf3LIGCBkoK\r\nhkQZqEvhgsnCiAPoi6OmdvN/zmwD6CY7TCxmC17ealY4JyzrVkoLXZzNIa11\r\nqW7eCJQilLL9KxMGJ6fcL1il9SBsDtr13LuwyYu2+VQRzJC9jQGbHyQ5FFlx\r\nqCQs6X9MTxBRCvFWC7evHdruf2GaRWByswKZnuCzDl8zIShNz/G9uqLbL4o4\r\nAMmSyGNNH2eoigeOgixJ/Cr4lmZP12dK+39tjKbAHLfdPr6tqTRwx5ZLVsXQ\r\nRc1vvQzQK/fQ3/BqsoFk1HWt2SskSrvvOsTyOSg75ryoU6zCDeuAYWwHijUF\r\niX8RAFoFpv846W7AO2kPmSvEcKNwPRqmouip7qGJI8fTkEMxR11cpH0yJTyy\r\n4srgs80fmx4//Pa4jVmyKxfeYkLK2eSSCTX1/j2rgut1v71vKEfGb5xm+aLO\r\ndZ8nkXT1/H5uU8fDmdP6dhFgqW0xRZw8T03cjQkhTrUabsS2Y2j9iiP0qaRF\r\nKuzoWmTJJzMMKMKqKImnGzqq3DEd+6Qscbs=\r\n=u5rh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6048fb563.0","@material/rtl":"15.0.0-canary.6048fb563.0","@material/shape":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/ripple":"15.0.0-canary.6048fb563.0","@material/tokens":"15.0.0-canary.6048fb563.0","@material/animation":"15.0.0-canary.6048fb563.0","@material/elevation":"15.0.0-canary.6048fb563.0","@material/focus-ring":"15.0.0-canary.6048fb563.0","@material/typography":"15.0.0-canary.6048fb563.0","@material/touch-target":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.6048fb563.0_1668615473135_0.6563201624064858","host":"s3://npm-registry-packages"}},"15.0.0-canary.3777b03cb.0":{"name":"@material/fab","version":"15.0.0-canary.3777b03cb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.3777b03cb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31e9ad64da60d5cad1f972a0f2c658fd5847b90c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.3777b03cb.0.tgz","fileCount":23,"integrity":"sha512-SOCLUSfMSofXHhaeElNI3dUmPpb/b86stFWYe3MFYqI8408YWVD6fo61GMnFU/r/TxnOdhU1oXxfJQCtZCr8Bg==","signatures":[{"sig":"MEUCIQCYpUKJFV05wBuU53QFgq3vkfPX8J5dmAb03FE9rEfqYwIgXhIAwSeYvQMA2HsIsPnLa2TrvX5PDMR7iyZlJ2BVw2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS7vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxAw/+OowoJzqccI2MkVxEuQVmQrVGH7EfoytGoRHal7M8nxAGqlDi\r\nUwsv7HJTbF8uHYk+Q352Sz27Uerra9Xc4hdQYHgIB/khnuiGjX7yY28ZDqvY\r\n1O/JJfypuFXgaLXDC3WW9VscFzh00vrCVAdqTzSiTYTq1QKlqd5WFV6X/cu4\r\nWsA+Xom37mMKmsesopoIr7laZszA6/QcPCOxe6syDwY0Urkf5zI4PHYlhyuO\r\nZvpuwpN+9tLo057a/8SSZG6uGYpwtGjcgEiwynoRPSgmuW5xcwBDN6i9Lwz9\r\nuqWfn0l849ce5WBobpu3NS1UYCoIiK6aHjwu7whzWQ/JHpTfxnR0zBoSamMO\r\n/ChPq4qVk/SnusG++eRGZnbkxnajkMv538RG+krwN1xEgXgvyZEnmWyRGzjy\r\nBQ6Gj4PpFHhYIFwHUAKbP3vmuxm7w2lnLEg3ymm4X5VL9/CC44q539mQA8NZ\r\ncY3uPSEFYfto3tkf0f77xZVg4W1+aR3ffPwEhIUkqHPwRuZc3mgJ3YUi1AEX\r\nM9fDeKFoNku/gCtkRkWdiLmK4JWCHYLu/sVR6vrxi0o7zTX8yOprdMs3chlv\r\nC2Os6UyroKpxji/DYsYNAhmcZS7m1uGyI+3q+pwVDFHyy5xTL+7ZMzWBCeft\r\ndUpN1eimcfSRaE0etFrK+97Tp/1s2JX/uXE=\r\n=qCah\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e02f6251b19559b874fd1998a9f0bea7d651e41f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3777b03cb.0","@material/rtl":"15.0.0-canary.3777b03cb.0","@material/shape":"15.0.0-canary.3777b03cb.0","@material/theme":"15.0.0-canary.3777b03cb.0","@material/ripple":"15.0.0-canary.3777b03cb.0","@material/tokens":"15.0.0-canary.3777b03cb.0","@material/animation":"15.0.0-canary.3777b03cb.0","@material/elevation":"15.0.0-canary.3777b03cb.0","@material/focus-ring":"15.0.0-canary.3777b03cb.0","@material/typography":"15.0.0-canary.3777b03cb.0","@material/touch-target":"15.0.0-canary.3777b03cb.0","@material/feature-targeting":"15.0.0-canary.3777b03cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.3777b03cb.0_1668624111438_0.244774004567486","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/fab","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0c0cae85350f6dcf18287987cb36ca012351402","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.f7f56fff7.0.tgz","fileCount":23,"integrity":"sha512-+CFD0aMDl44AFJhvKiajIU4dEVtcIyIl9seWn7Z0xtB6Sz0492zGv4MOcZYdQhHEBvIeAadYYk0ZfootrAbNfg==","signatures":[{"sig":"MEYCIQClmrmZNv6bIOWoWaqE1mattZbeHH0kid/Iw8JdAlSZyQIhAPoJ/BL4kwwIQwmeQfItEJIII6jB84VLe1/NlEeFSs86","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUBjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmou+hAAlRvqaNxShIN67/aWFajDjCWlk13uZEHBciKaxd70fEh1LnNI\r\nP1QvHbGoFi3D9Tf0WhJIx7Pz3nCpk2gQZXugPKcew1BN1Nhwi4zCPnFvKbee\r\nJaO9GVPkwdvlCAVO0WJCa28OfC9t4qMt8qgJrPL9xiPOl+ZqbBdB9k24NbOe\r\n5Z1ZbdVUopPsnTZzkNkHYNR0PlEUyGuay78I8OZdZNxNbvAoy1zIwEd8ISOO\r\neDLiaYIhOcgGQ3NojLsAOSy0BhdhNQuC78G8oUpKwR6yoUK8J5g+2SgfE78R\r\nR+v0nFOcdjdrDbbY2jKRMMYr/iuNLGhJyGDSwTQ/K+Q/j4xj3SjsASQUN3Ao\r\nJHfwQ9SzNG9dKrpCIdwhIFQOpO8SxIfgASv/dBhDu6WJxF3BxMu4l6NNiENU\r\nus5oS//9rVqDUzb0+y6c060fw0beCVRTYXg0G0tM4Rx7ikuzrwnBMcgRve+i\r\n/zhJX9fr+yGkKEWbUW8daATkF/SC4vDtapjRFJXPxQozB2gcWnNqY9WlRSY7\r\nJW7JzXAf4Qae625eqwT+hEafTZ+0CUYM/EsCCx6y9xfFiFhI2cznE821f9xy\r\nSfKjqtsdu0f2SX4xJNMm/v0pWrMObtSiEUmT1Rp72Te1Pp4phTYv/YyUnMGm\r\n3qfYar/fqON0xL50qWrqHxuvYCuSn5OOXCg=\r\n=8vwH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f7f56fff7.0","@material/rtl":"15.0.0-canary.f7f56fff7.0","@material/shape":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/ripple":"15.0.0-canary.f7f56fff7.0","@material/tokens":"15.0.0-canary.f7f56fff7.0","@material/animation":"15.0.0-canary.f7f56fff7.0","@material/elevation":"15.0.0-canary.f7f56fff7.0","@material/focus-ring":"15.0.0-canary.f7f56fff7.0","@material/typography":"15.0.0-canary.f7f56fff7.0","@material/touch-target":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.f7f56fff7.0_1668628579777_0.6898591652043149","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/fab","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ac093052b0ed2fce07a03f97dffe1332ca7f9a6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7c73f6134.0.tgz","fileCount":23,"integrity":"sha512-Snofq0vIIXLf8ngDLlaGwJ3RJSOUDI/hjHj4cDBH9gUxs/NRM+/rWCuAMhHL9iRM9vs81e7chghVIsimNi/cWg==","signatures":[{"sig":"MEQCIGjYHebJSuDhCjnBnBZiSZVMhnHEzD2FAuJAJKsn+WaHAiAaVdgNcyd76J7dX+cQSo0ak6lysEXVyEd+U6rdVtxxDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUFxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqMBAAn+OBuo9WR0xow4YUhWNDqkQMmAFZad3TBhKl7/4X0t7mDkGy\r\nyEQSB9n5ivtGry1mWe0BTcYOtuHf6oQeVXRamkybxTJqMnenkxjBazJXZICG\r\nkRVq+Ye6WkJSrkZQSV/vwDfn4ixKp7wXQXo3sVhcr86RkoMj/OHivff9dyMz\r\nrlVpYvIe+MlWlTpm4VJ78C8fIhhF/QZOEiSKC1M3gAhRa2ZAuwnvnCx81M7q\r\nlhfYtLF2Sal7aHPH9QNap8fiVtJQb413Aurmto5Zf5WEw72V+/8gywsB6BQZ\r\n3mg6jPw3ajcbtNDgvATL+TqAvkIW5dtQmuql70FFZegiOy4dD/4BrvhkMwoO\r\n4Te+pNxhDLjBOBUWhy5vS1pszJqXx5CEP8kpGfshzT31Sb9hEEv7eIYXpLmF\r\nUUeaCtVh7sjWYvf2PHevKeXgZNV/J3taPDL4Atlq0bpCKqfk5fqCaksrcHLu\r\n677G/m+aJEDaAYmCiH8qBPsaIYLZr4aqW8YHxUuOF1SQtYjZnzeoGhe72Yua\r\nidBJ5RuF5UBJFaqrF6yIfIuEv71Wk/ZpleKXQ0GPDRurk2TVel/jA1fO5s3h\r\nKuoDNyCvOVZlbnDWU7S2pUO8yKA+qIqX4mjgdSC2q4POJjh59bg0aKFs5qmF\r\nIjAT97SnDpy6Zgp2GGENsVtIRuPqgwBgosc=\r\n=M1pL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c73f6134.0","@material/rtl":"15.0.0-canary.7c73f6134.0","@material/shape":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/ripple":"15.0.0-canary.7c73f6134.0","@material/tokens":"15.0.0-canary.7c73f6134.0","@material/animation":"15.0.0-canary.7c73f6134.0","@material/elevation":"15.0.0-canary.7c73f6134.0","@material/focus-ring":"15.0.0-canary.7c73f6134.0","@material/typography":"15.0.0-canary.7c73f6134.0","@material/touch-target":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.7c73f6134.0_1668628848856_0.5922352583871122","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/fab","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.f1e037150.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1a870a9b13b714fd1fd8a1362c2698dcd902e24","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.f1e037150.0.tgz","fileCount":23,"integrity":"sha512-rPmOyAeAblckmtgJwJO1j3rPCzTMzAe9gkkWLR8VMrSFqQg/0DV/kbZULYBJjgHAb3Cztpe5c38fRo49nSZTeg==","signatures":[{"sig":"MEUCIF+SWpqWS1wMbKCk0d5avOD+Q4yWyOCKusa5P8Ylm/E8AiEA8ub8e4zzRG7WTqeuXMJ1JTg6xEykoimD3PXc+2dmBQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUKPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8yA//TpfPaFs5R5j9kcjnihvp/U4ev87jjrf+DfTUzoXsg/Rjulqb\r\naB1Qiwcp6ld2j1cSKR0BzVT0WtqdL8l4ea++SjAmrt8D7HUOkhZ4B1HuWge4\r\nz2WeJ46fUZAs/Pml74kSqUkSETbGB01XKlZxQ5ZPxz/1P2GLqAqXmfALAd6i\r\nHrMSyKZheiI1uZ4A6mW+DUtqANPcp6g86ueU5iO43fPOCX32TZQAwO4KfyEK\r\nJOwJ5msO55DM+O2hJosx8WkN1g1QH2f+KO/7FYFnFN3THBJNbmiT6bGQF+a1\r\n2XglIy0L3Wg23fbrVUqyKguHpst6YIHCLXWyR5PUxNo04dYb3/etZ82f7Rae\r\nxq5spd4Xi3xhvA5lEU0UebI4anr0CBUvrij9XZiexGGFtxgiInXC/2AB/+bg\r\ngFnoOduKfPqL9VfBs8BMSBe3aIKdPGoddW2ss86sycfib+9BLDvkwkW628rC\r\no9Y6jzyeEveTZkFxeWEWjMk+E0VDdYhYWVRoZ1x3IQ5FJAadryJFl7GTMuzL\r\nj638riJuwdIX0cJKlVy0Ut5AO4mBgQ9OTnqWgN058bjL+Y751DW2aOiCXEep\r\n6B2Bx+ZLYQz53lCFflo6aVRinq2ZSFzD2Zatrc8dJ+rkza7HwexQdFv49JMY\r\n900dVwgFkqxnzhofQToBwoQGGhz0WtBKP6Y=\r\n=cs9j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f1e037150.0","@material/rtl":"15.0.0-canary.f1e037150.0","@material/shape":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/ripple":"15.0.0-canary.f1e037150.0","@material/tokens":"15.0.0-canary.f1e037150.0","@material/animation":"15.0.0-canary.f1e037150.0","@material/elevation":"15.0.0-canary.f1e037150.0","@material/focus-ring":"15.0.0-canary.f1e037150.0","@material/typography":"15.0.0-canary.f1e037150.0","@material/touch-target":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.f1e037150.0_1668629134918_0.09996056015610422","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/fab","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.40b18d043.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d78586b526df10770839fd5b346e658240d129a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.40b18d043.0.tgz","fileCount":23,"integrity":"sha512-uUc++GKN+npbTlacnIRVAFAvyLA1YveHvdvMchaI0p5vBfBIBDwLI4MY7MSRYfZF50LjkoA04iN0pnxUuwUyww==","signatures":[{"sig":"MEYCIQDqy+RJwKfqKd1K2/pbp0yRnI6g+2UUuTQ9n7JRRnfmJQIhAN8ps788NmNIMWB5NRMWhFBbmYAR31Yppiz04IPIbLwm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWs7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpN5hAAoG+xVSif2pL710NmxuaLLawkZnjLxT/i+rJls3no+C/+5olN\r\nwWR2GbiMGorMC8K51MmTlDCwoQNpyL/T2hMTCzbYaKTKIob83R4BIXxtQZE1\r\nsCJpwDUY6eVuyBhUYyheWo9r2TE53A7LtAP8beQahExgRO64YpUG/t51BRKR\r\nb3GbuKRdGAtciD4YEHwCexFOHS7ttyIOaijYJUKQYHQY8yje4lYml8Cc6ipn\r\nXXVTdpONO4WlUjwrVFP6aM8ec9uXg6SUaWiMbFoPvNvNDK28hLiEMFmSb/C5\r\nO9PEMkD6SZP7QJrx35IRJ7vmCodcJ9texY/n0mW4Hp5dPluLZs3SX6rR6KBH\r\nV9t9RxBPki2McIdi/USBQHnpb4mVKskNosTdfAD0+X++X4rhR+2DsHp4dxvW\r\n/c/1gnDXbLS74pTVwREdYVlmOzO3v/PFbRu02MKxhb9f8nlGZ7jM8R6HaJT1\r\nokrp+gcqpr/yYLMA5ccoWjwiQSdQrdjeGeHmfDs0ETH+p4EwEOl2xQHBjb6+\r\nNsKW94UCAIYR649aeNY982lJcO8e0KsiNOgW4U7kOjv6Ju7TPG3XMevEKosy\r\nQh5rxG3XmF6lymIA+LNZq3bw6rQjnczsK1isScow3gvo/dc+qlNPSL/B46Da\r\nlYybVMOzvVNdUXVMNMPpYQnSDLrx10SanB8=\r\n=ovfd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.40b18d043.0","@material/rtl":"15.0.0-canary.40b18d043.0","@material/shape":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/ripple":"15.0.0-canary.40b18d043.0","@material/tokens":"15.0.0-canary.40b18d043.0","@material/animation":"15.0.0-canary.40b18d043.0","@material/elevation":"15.0.0-canary.40b18d043.0","@material/focus-ring":"15.0.0-canary.40b18d043.0","@material/typography":"15.0.0-canary.40b18d043.0","@material/touch-target":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.40b18d043.0_1668639547396_0.5652196649647823","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/fab","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6b2d9d4d072801ae7c223e8c4a953fab3b0dbb7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.86bde5c06.0.tgz","fileCount":23,"integrity":"sha512-RfU7Bgw8s0v2vXo+9tNUl/3n2Fq4H97uZlsCEXwb3ks54Xjw1WWbPoGyMrlZyJjcft6jr/Qp/qTIanVGQU5/ow==","signatures":[{"sig":"MEYCIQCcOdr5lJ72WcIrPSFk3mYWrcvc4fvLqMi6bBRUm4UkywIhAKdYitXGGT5o+HvWPduGh6rd2IClT/ljG1hMSeCHY4pa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW2dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKVxAAhVJ/qtQpZPHzhEktQCNuHx6ypLcDE6wjIifRiXlpKW//4h7N\r\nuPTqt4OpueLgo58Bn3wUn4OFo0Vr9EWzpzizQnWI1mT7xpnfbTEP58qqZdl3\r\nE77ALYtMyG2HlYKjYfds+aDQhyjAi80m9qC854Bkk86f90j05e8ekfwwLwp4\r\nNF9LbsEAF2V9UfPXEQfldKJLY8ptbHAztHy2/KX/ED4VD12MhZnX4MT32YIh\r\nbXQnOmb79lvKjSVyCjolXqAgsy6tgBrPOpRFHVgeL3wlvG4znjoHW+pcAX1f\r\nNrzYSS5gc4ORFEz3gBFihOf0Ts4i+7EHXQ4ZGxfkO9I+/aJQOO33xoghn78Y\r\nNCFKxxAxcvLasWb5/H3wDjnUdihNt+fOaMyZUpHQfCc6Av8X74/6Vc/nyz36\r\nS/3lJxjmLWeBUQwbBlUATNduYOXwO94ZOusjaeNQxOpuz4fkWP8jBIj6RBEr\r\n7+32YCG2yS7lymF92cyHLXbQFB8wD/gU3N87YQ7OZB4g67W8vurvHQfrTdMM\r\nKF0r7IMCErIrofZdX0lsAbnfBlJVV/49GZa9f9vxORZ/hoC50UjdXtQW67rP\r\nYP+rkVyB8Zvsk569CDwfEGdz5h/3waYeZQ2AFRyyLTKv4nMcmVTFju8AyFU9\r\ngwavS3Be/tBirgnOQUWFnzx9ezrYZ9DLZN8=\r\n=KkCo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86bde5c06.0","@material/rtl":"15.0.0-canary.86bde5c06.0","@material/shape":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/ripple":"15.0.0-canary.86bde5c06.0","@material/tokens":"15.0.0-canary.86bde5c06.0","@material/animation":"15.0.0-canary.86bde5c06.0","@material/elevation":"15.0.0-canary.86bde5c06.0","@material/focus-ring":"15.0.0-canary.86bde5c06.0","@material/typography":"15.0.0-canary.86bde5c06.0","@material/touch-target":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.86bde5c06.0_1668640157470_0.5668271091919179","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/fab","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.bb7751002.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d75f231c2341c2d564d557fd2a49827ff06db40","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.bb7751002.0.tgz","fileCount":23,"integrity":"sha512-3UofrjCGdRsBZf2rByLMeaON83qmsewylLLVJLEncuODyZWM5lVhr/cYJbLqIEm8KWGB7+4qn+I2z7CQhAURgQ==","signatures":[{"sig":"MEQCIBYZID1nizVTFYrj1KwNo5KWOosDHllwnqUoLhM72qhIAiBI5aYJGVnYztJ6NdEHUXWF3W5OqbcnD61iWH+Oku9L0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXmbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9Lw//VnAGwTbTINr4i+UmQ1QwfoYIrAmcJZPQMpNKJMl+UOijfffo\r\nceDKlqtG8qTrTyAZekhR/X7Dv5Jw5V/qMmpL5e2JLNYKVjSQBUWc3aZRPsDh\r\n/IguNlJsVN8/VXPyQwy0HBQYgpUOqAIAkGTH4wuNDedvRKfjlaHqjd/1wrqG\r\npzOcwgxsK2ChlRE17IlboONqOrHbjAQGbN3PmIcj7xfvUkaeuNAKtEEuMrmA\r\nLNUSOEgV+2JMbmePWWWifIpAan7pF7yTq9zxA61SuN2NfKQq3Quiux2Nfof2\r\nJqWP8roeENbl698A5bQucOz5Z7W2Fa1gYHgoxwEMcY5DP3w20S7+euLf+r2s\r\nOeLjRAmfwb4UtvZcwyR9py2LI3VBwLcH33z7Fvhf+9/GAJjhkACBIXNzGyJx\r\n0FH8p+xEpXYSwucONP5oiiapT6j7qUcylP4MJF9UypW2zshnKWHyaoq7yZ+j\r\noWD47k8K11lit3/QXFx3J9H0aCpq1jAiUJGLONipTaiYduIIOWvGbA87kAuj\r\nq2V131CofX2KtkkydNu+8JZP0A6mRXJfU0RekGHK4AdeAJ1OKHg0MuSk7p7x\r\nXV3//DfSNfJvFnRKRwuKtsnYTLzHskXLqBT4k+guWuxXbWNDA8jTRevUhwiZ\r\nEruSHONpzO552QHVworj7FyoBkoh5SOlTsk=\r\n=YmZI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb7751002.0","@material/rtl":"15.0.0-canary.bb7751002.0","@material/shape":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/ripple":"15.0.0-canary.bb7751002.0","@material/tokens":"15.0.0-canary.bb7751002.0","@material/animation":"15.0.0-canary.bb7751002.0","@material/elevation":"15.0.0-canary.bb7751002.0","@material/focus-ring":"15.0.0-canary.bb7751002.0","@material/typography":"15.0.0-canary.bb7751002.0","@material/touch-target":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.bb7751002.0_1668643226986_0.15822722342652606","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/fab","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"482c07a09ee63b000d377bc846389f92ad112d2f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.63aca9af6.0.tgz","fileCount":23,"integrity":"sha512-aXkGY1bP8gqmrmBRgswtcM4H8Cj87Aey6+c8s6PBunLQ497wojGWHYVu5oUALhNvTCroG9aee+Kg58WelJTKtQ==","signatures":[{"sig":"MEYCIQDbXOtXItmSfQzTiIvyhPSz4/JA8C7GstldTtiz1/zvUwIhALCd4OMV6bLjLwNKcI1RV4cdyfYqMCFQ78/jOmCaCIyw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoUtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpERg//a86Nnsh83v+vhfiz6jh4fSbeIyFe8BCg21LRt0QmBC/OzMc9\r\nU1r6iZB7kfQpLid8iGswV5ZUTvaVKLWg4y+/+XC/uiMUh31eQL5JWLOXSvkV\r\n6wGZp7ziFzCwsCTULOjrW4Fp7BMhRQmb9DktOMcNX4SFZDRcgST0z17JJ12t\r\nKiru2+z7RpS8pIhga++PgUu2AtFBUghfwUS5twrng3o04DuQiq3V7heHamE2\r\ncdGcWbalYUdBXn0XzrOnBKmoRWDBhS35lr4v7WW7vuCHqEzeMVKnQ2ZmJ2Yr\r\ntseBaY4HBa7+karmP5jpspZj3UV1E17rwzqNjoY++lwpgDB0o3oWFUcsEk+9\r\njN5HMRKBvih0UIOG1B3feoNI9JGM/el7cY2e1cCwnAFn8eekEzNDPybmalAJ\r\n+M7RE5A4R9XL+m7YbPHQfKIlpdnqCs5FMUhjQdJ6L0K3DHbJ2StXimHNh4Nw\r\n6npGMaM+XExFOKwRnmzKHdSd4XrjyxXvFB/kZzGAXtnL3SuqGwe7UKuvHN88\r\ngQr+T/hlKBxaIcgg7C9SFhhhu9ZMEdqLfdG3m4XkqjrryjXDoDLYg9FGk+6H\r\nSKnvnfjOp6zo5PU4VDBI01hM1m1ZK1mZHn0+eI3xaTqVKowVW28hQwlRhVBX\r\nGSyIpRbbPiVNYRtVVeIoct0XTYMg3tQOZwE=\r\n=TbTz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63aca9af6.0","@material/rtl":"15.0.0-canary.63aca9af6.0","@material/shape":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/ripple":"15.0.0-canary.63aca9af6.0","@material/tokens":"15.0.0-canary.63aca9af6.0","@material/animation":"15.0.0-canary.63aca9af6.0","@material/elevation":"15.0.0-canary.63aca9af6.0","@material/focus-ring":"15.0.0-canary.63aca9af6.0","@material/typography":"15.0.0-canary.63aca9af6.0","@material/touch-target":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.63aca9af6.0_1668711725318_0.9257974441574441","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/fab","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db52d5790652f0076ff3171308db800751a4bf0d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.56482dc2e.0.tgz","fileCount":23,"integrity":"sha512-SS2Ze10rPkfPBDEnBnGWol7ESfA0hc/IT5liIWQ5KKV+1FcRBRH1APvL9klqqousYPye+jfQkQR+cUzGjzvgvw==","signatures":[{"sig":"MEQCIGOWtbYB1t+gVCVhAz67LI2c7mTh5w562wQXTHTU/fx2AiAq/G99QNc8+l6pNGSIGQ60lKulGvWvtcmJDvYLmDENNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq3rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGTxAAnhncdkzPXoWC+TBIgjros5vDCYJacw2PN/eB5mt+kmG+WERa\r\nvaINVdU+KV+PmFQ6CN/o+8cbWSHpd5sRl1fAxYmrXxQUurSuedOuAJQeTFNg\r\nBUPxpi3T+CDwbmQMqa65/NVVRRyj8a1JW639N8W2ay2GFFGgZ2nl2ZZQujhN\r\nw2H4bNhczPWYiajkuGN0NIJ8fcxbt53lEEzUUwXaf0J6Gpkh3Xty0KF14Hsw\r\nvroByGDNYyrqOqgaJGonf211Z6Qt4n8ZF0IoKXtyUYMjwwC9/ryU/ApltjQt\r\nuBdCYQyt7/cIzfu/FWutz1kuuZFlv5nViueljD4bQ95mgZyY217mn/dqA9J+\r\nk4nBEozheVyzvVN7cFBXyyoCzlbmQ9Omn0Yt5qW2SkKm918cjVQu1mPAZH3V\r\nP33EMkHJmcSyGAQ4IxOxGi5xbzLUmbEP0c356QIVU8HVi3f3iOOXL9P/bAxo\r\ng4x/mCPKQpjSp/IB8R+4CdvwoQesuXSKy7bbnra7jEpl/Dfa05J6RLTTmZiq\r\nlSLu+iEGMXOBWhR947trl7alm19BdEJU65fISaYeJu/zTj9amxxNc3vt9cir\r\nH9rU96kJr7lV3zqQOaBxZ1JhSloKAgj6DfHEv6SU/34igeOurZ9nFsdg30HF\r\n7vzZ/2KEwuNfaNcff06mgJwmchFc7u1Px5c=\r\n=Yqds\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.56482dc2e.0","@material/rtl":"15.0.0-canary.56482dc2e.0","@material/shape":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/ripple":"15.0.0-canary.56482dc2e.0","@material/tokens":"15.0.0-canary.56482dc2e.0","@material/animation":"15.0.0-canary.56482dc2e.0","@material/elevation":"15.0.0-canary.56482dc2e.0","@material/focus-ring":"15.0.0-canary.56482dc2e.0","@material/typography":"15.0.0-canary.56482dc2e.0","@material/touch-target":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.56482dc2e.0_1668722154836_0.7329772955793805","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/fab","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.953e689f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e41890f2be0d4fd93cc8f88e22e7321cee91441b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.953e689f3.0.tgz","fileCount":23,"integrity":"sha512-ppTCAZqB+7b//BWQiN2Xjgc4whQOBU+HjYxpMP2lJb3Y8f6jCloBcHmzPrylQ4Bl9ZP0bPVu/UGFPmMJiLkSGA==","signatures":[{"sig":"MEUCIA8gx8MiCnHURoGs2wWaacyKVaeyr9OBNnMPOK6YRHfkAiEAjEdXodKvK1dxJ0chgwS6JP2eMCvOtaYDfE2R+BAMhQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrALACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpCg/+Pb7bd40uQDYejgdCC1NNdSA1++MZnZYPfncHqEpCbqaM/uvK\r\nTwiHzK3A2/xCUjJxsQkSRLigNRr9ROIuG3bnmlGqb/l+Pl/q3v5cBB3rBJ33\r\npHYHmvM/ItSUfnej38/BqgcS2Y/nMQA0k5mkl690QvHPLwjCQrMniYpDNpxD\r\nQLYY0tQ6aXbEQOT8mxshrV4VZ/u/88bDClOvnJNEZMRyn3MpKXx1P/uIJK4B\r\npEQTDBcewezhYVdEFyH3Ygfhv2rJFMnxyFUs6BVYoAhYSv40tRx1TSHNTmSd\r\nDv36WBZmaSA0Hf5Xoijl2rnmEeWLdfKRMWxlq1cEEcX5p7vG23G/J5Q6U1sk\r\n2ckUVGNcM8rWDTxEDuUpsyzkWIh9ltnJlRJxNHrOOju4l4S3j1pnttXz9rzM\r\nDmvN76YNl1W6JfW/Ml9x/+Gso0NpW2RZSEt4OZMYQQr6Cwb1cTy2KnFgT1pn\r\np32p5wwQ0CxRE5q2r2+O2N148C8d2IEAvRh2l6OP9oHBkG5nG3hLufhKNndO\r\nM07olxJPgsVUlXQAkAswbZGhXh7aAZ6i3I0/4F72+bD2+LsaUSi4Rn8zcWRR\r\n4q1dFj5dzthKM26j9SnHUjyJAUs+lRQRDvMOIHlsP421PxAT1dkcXmIrOWx/\r\nXOgwpZ0jcT0BuBBmcOEBUmCoN+W2mNmzBfI=\r\n=m3vR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.953e689f3.0","@material/rtl":"15.0.0-canary.953e689f3.0","@material/shape":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/ripple":"15.0.0-canary.953e689f3.0","@material/tokens":"15.0.0-canary.953e689f3.0","@material/animation":"15.0.0-canary.953e689f3.0","@material/elevation":"15.0.0-canary.953e689f3.0","@material/focus-ring":"15.0.0-canary.953e689f3.0","@material/typography":"15.0.0-canary.953e689f3.0","@material/touch-target":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.953e689f3.0_1668722698807_0.6752540918752679","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/fab","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b5606a793.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a1549280592cc5e59fbab22adb73ead9e3243cf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b5606a793.0.tgz","fileCount":23,"integrity":"sha512-rgC7eNMZ7K0WDQe+GziL9vEl9jhYifAMTNqqOt9HCxo5iYN6BN7FJ0524fqVj+3tfHgEPp0JZqsEscUsNuRChA==","signatures":[{"sig":"MEUCIGV8ZtsyjPo9p2npYCxPBsQTYzI+oNEhx8jN7PPl74iUAiEAz2bMOwayiNapkxVd6uRGsvKNlvSrwECbdML2++7dpXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1yqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrG7Q/8C19f2oG4PtJzUYudZLSPSPC2vGwI6f2AYemLMI7uIYfP+Pql\r\nKLzPOKO5FbSmEJlMp3KtYXYnEP6LgmVvN6VqV+iU3CDwCJvRL5LYobbt9lLA\r\nZMDZ6Vr2eyqGYaIWu+ecnAATAWHbd1HkhKCJAlrARGLTcYCXOTrXaCCb0JM3\r\naCQmWIwZWcxrYPspqZmai4m1Wt3j+sGlJtYXXeHMWmvYjE+bFaAygzOfn01F\r\nGuWIfM2ib5FXy8b44BPyPVzZU7Ox+SZau9MSOutHBl/QXpcOnqJAn0VQUcl3\r\nS1xK250yvl1TfWKwUNLp9JVqSuimJa2LMLb+aULf7CJpKIJJE6pb+aknYOUI\r\nqpFJs2kTqRsjPaOFe7CRfakR4Juy1b/QAaiIhAOI6HAyv/WPjPgbMIcMTeke\r\nujRvjT0sXtZ7wKTsfDv7TpeUGqoljDYr++TO5lXa0afFdNU2VENhLeVRDWF1\r\nDZiaV81LfQL06Q4s6qrXw5TeEJtR2xJv+8AwzITvwrSbFAKeEsf9j24OxNWZ\r\nDrOhpwMJ4wQUJxb1v9CbXZ0uHZjgeMbp5xYH4z68ljNuIm84sQrztSZCrSrF\r\n/HxBs65WSli82z6rB/fe5LbTmd+IYBrjVdIbN3tYTA1u130TRZbYhq7ZHBy5\r\nNLSjn0lNoBrJzLM1mpsw/ZZIjqCwy+7kB9k=\r\n=VxVO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5606a793.0","@material/rtl":"15.0.0-canary.b5606a793.0","@material/shape":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/ripple":"15.0.0-canary.b5606a793.0","@material/tokens":"15.0.0-canary.b5606a793.0","@material/animation":"15.0.0-canary.b5606a793.0","@material/elevation":"15.0.0-canary.b5606a793.0","@material/focus-ring":"15.0.0-canary.b5606a793.0","@material/typography":"15.0.0-canary.b5606a793.0","@material/touch-target":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b5606a793.0_1668766890592_0.5259199032952633","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/fab","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.8c5675942.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03d133a85664e455670d77ba56ab7fc05096719a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.8c5675942.0.tgz","fileCount":23,"integrity":"sha512-5ZgKU2E4nZrbk2xua4SwiufHXvtG3WI4IwlTOJWIjWWZMtMR2VOLzRooCbFsihZTJtSw8E8bo2YBZ2hAYJWcpg==","signatures":[{"sig":"MEUCIQD2GpURWMgdH2EBM5Hou8vRTi7we/ad3VaEs6jnz2V70gIgZtHm4fqtQHNFypCQka144lsOG0j/5TuBGdDyK2k/bKU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6HVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+Sg/+OnHZImuxUXvP42GKIAaQCB1rxsmrchrIci/TVY4sQgjgf25C\r\nOxQkZ7/41wbR14bKMurqmOtYXkYuQ9bVM6V0QcCSlmoxEodd+Gq8plFB2wnU\r\n2wgbMVQTumHCJqHECXzUTTP9v4CZpbxuyOnCqv0wzyRZcWxGPhcHzAdqhz2b\r\ndtcnmFGXnv62hKOs0PluNmz/exWkWbxyJeO83dE+e/JBqO0F8WZXqfMlJHmC\r\n7er1jRLkt6Kg4Cdmp+77pptyByaVXM6dblYXY1Jbp5nIsbZS9CP7HqFH/ptz\r\nZ6Lzdefrb8HzQ5zzfp4Ix/oDZaTACqrMLVyNGsjEmebuaoGjPN1yN1RSu8Ab\r\nKK0qNxjv/MOl1gxNHJZboi6kxnLiz/eLNddPBXM1zO8KRgCy4BseNX9Z9qXB\r\nmtHTh1kUcbi2y6L8wt4Mac9X38lsPRyWWZEZ/0ANpOy4RG9SI+0lNVfKhe0g\r\nBptVTyj2jtu/d2e9HBn9ebwuLuhr54rDpalyL+2GsI6wrDMF4Sz2wKTPn9Pg\r\nK2wfiYJiRPb9Vurn2ngs7hIIIciY+kV9PIzCnR0T28fuBq02xK7AcfHRf7OQ\r\nR5lJOgxdyK83clTORa3hfNpdFyoOfaWAX6jJ7Plxx+w82fMz37rvC8mcBQ4+\r\nG+ALvXKByIEmSH9K07kkK8i8Ev6GWPdNmMQ=\r\n=kqxE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c5675942.0","@material/rtl":"15.0.0-canary.8c5675942.0","@material/shape":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/ripple":"15.0.0-canary.8c5675942.0","@material/tokens":"15.0.0-canary.8c5675942.0","@material/animation":"15.0.0-canary.8c5675942.0","@material/elevation":"15.0.0-canary.8c5675942.0","@material/focus-ring":"15.0.0-canary.8c5675942.0","@material/typography":"15.0.0-canary.8c5675942.0","@material/touch-target":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.8c5675942.0_1668784597496_0.695570001329114","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/fab","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e65cd613ea389a105b1b2424dfb254596801aad3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.697fbdebd.0.tgz","fileCount":23,"integrity":"sha512-Cu0zg14E+cqWlsOSIt6fJs5cFzLi+nlcpp5ndLb7KBegMmtLBh2V6+Zrn+U2V7XRXD7KthBY7u4E3lnrFpvUdA==","signatures":[{"sig":"MEUCIG2cKfHrlgvivLoXNGaYeQUcLdVS5VdYcf+jvxM6uhfUAiEAgaYaaG0b2Ql2w2sHlyXakZaJdHGbTI1oKc3g2l27ToI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7pUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopWxAAkV//zI3eJbPkFCL1ol/SRiJ8mTpzHpS+JMKtkqSfS/6IuPwt\r\nXpMhrp9J1Yc2yvCbV6202xkKr2ZQesXbKLeUXr38i84JRR4vnP0ILG2czBKp\r\n9sgrYXMZGEoaJoF2nwL7Uhh57oXgTJAAKk4Uq8A9TXifrwXAJlpP/A61e9A2\r\nclm3C2aZjUcnnE/dOw1DiywpRhgAUAvHna6yCHJKC3Hq76TyyNjF6r2JY5fB\r\n78L/r/+G3c8r8zO5DtmsxPzubI2YQ0eINQQVmaWFjcYzsjFgax9rl12sGFBs\r\nNwe16HhO6pVb0m6TS6DlBZqWvui96549YYcCvkVKs0Yx1tb/MDHGodwmGKbq\r\n0HTzPLqpgOT8hQn/irp16vXOZ9qtZoObB101zPBQyhgI0sq6CdKfhoURotUu\r\ne3yu30leYqnm1cGFjxZNuAWpRacbQLCW7KINdhja3xO833AmFDNUycF3AAui\r\nyYMYMxEwDs95GWmpvGJwcpuK/w2iwTNIIVt3wFCWgUzkf4/Jqqkzi/c+A7dO\r\n72qyWEhwKL0phq2J+7lzsUoLdDES1jTCaO4jPAkteLCRIClZvSSkV4ODCpqt\r\nEMgc6X+qfcKXvTxck1yzaUI+DNjInpQk2y+KXXKBABxK97uitQjsBUOddC3h\r\nLV/C7MY+fyF6n7Bwkn+hjZKwH8/e95uhxp4=\r\n=Y84c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.697fbdebd.0","@material/rtl":"15.0.0-canary.697fbdebd.0","@material/shape":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/ripple":"15.0.0-canary.697fbdebd.0","@material/tokens":"15.0.0-canary.697fbdebd.0","@material/animation":"15.0.0-canary.697fbdebd.0","@material/elevation":"15.0.0-canary.697fbdebd.0","@material/focus-ring":"15.0.0-canary.697fbdebd.0","@material/typography":"15.0.0-canary.697fbdebd.0","@material/touch-target":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.697fbdebd.0_1668790868296_0.30701214230531937","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/fab","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d58410453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6970f1edf0cb2ab91c24a50593e20a067b9c5fc0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d58410453.0.tgz","fileCount":23,"integrity":"sha512-DLG9L6PU0hILPJuXoaI2Jwd93hLYnAS2TUVu9GjHR6GPcCv2uj8hEfnsQycnAhiBEVIvZyIYRRX3IwP6rUNVvw==","signatures":[{"sig":"MEQCIDoNEiDXd1zBrS8hRMQ6VvMP+eTRpU5sLzXzcwjstcEQAiAhOQ35TwrL2zyJWqK/WfXOVBx3WH68Mhx26lTYISiCHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9wqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTCQ//WZ9hlAUnrOD+E5fR6Z3CmSsYin5oiQko+e9L+8q0r2evmW0M\r\noXJjOyPFMg3z8rfHv/xEN46E+4Kg+IJKqUIE9AVcYXtCg5BdK1dWG5RdA2Zi\r\nYUaFXyCm3OLevhpMPJkiNVPVeCJk//sc/mrAIGAsV1t3Wp56ZJvGuELyWRPG\r\nmbM5uK6EmljuzU9XoKDnBlcg9ya4ZHUpk9acQntm+lU3TGgXuYXXWoyvcffQ\r\n1cMzJs3WO8oHVZkSypvnO90HrFCHauuLQcbJAwucoB9hlQ4h9AJed38oGhpp\r\nMF0fPKz8tfyeAQ49WzB0kdDYvsbbT/BglHC3PjymRFMYtziBnnuvQUcpB+RK\r\njoQrSvAOfWOQ9pbZkDjyqC2Qmx0IrUHSJq3MCtEMJNET/7Fw+ke4xkTpOUYv\r\naN97WD7Y6C7cod1d+eMDJeOLDi9whYLp5Bn/W8OKoaZQd5cv38ggFWXgFHGp\r\nYcMtNNIx/GziwngPKs7OLQHCaQ9RYXrQXy8tUMpBRf6+ZWOXpfJ6peLYEImK\r\nVK7FQdfKgIZrgMLY8LtkVDc+ro54z4GqPeeiooBsPeUX83axeDNTszfX0cDH\r\nIzjmszkfLHlPvKJJ5ehJR93hZsQ0/T+btaUvroDdzPIfx6r/x6Cvl3LyrkKi\r\n+GQELBBqfcxQdFsKM81yyURfRpWl4jA9hv8=\r\n=mCDG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d58410453.0","@material/rtl":"15.0.0-canary.d58410453.0","@material/shape":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/ripple":"15.0.0-canary.d58410453.0","@material/tokens":"15.0.0-canary.d58410453.0","@material/animation":"15.0.0-canary.d58410453.0","@material/elevation":"15.0.0-canary.d58410453.0","@material/focus-ring":"15.0.0-canary.d58410453.0","@material/typography":"15.0.0-canary.d58410453.0","@material/touch-target":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d58410453.0_1668799529933_0.35898305475702297","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/fab","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aa91c4c058655259ecf03122927cf85b5384f3a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7971d6ad5.0.tgz","fileCount":23,"integrity":"sha512-G58ZFK7M9r9xkLFP0Gufh1VKdcvRcTvYwEjBuG3+XOMDMjFzCDEMY4c54RG+tbwIiHmB8lw1Yl/dN3kFVc3kTA==","signatures":[{"sig":"MEYCIQCJ3R7PxFlPElhpA+TnGNePurPt8F1T3V3ERvdJM8QYuAIhAMsS32qP8ZbH84SIUgzuf4pJDekum7vEX8Y+DgOeUUTV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJetACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLYRAAiOQTrQibB0ldFz+z9mNa+O5UoCDGhRT+MOL612q9HHL0mpsQ\r\nM9dnoLhg8PpVKpLuWIhqGCJjpaYOWqoTZ8D+3VC4uDKkm/M0lKxCG7MXaYVq\r\nZ9c2tiUtsbDe5h/y66nfzyILxk38d1kx71hYsbMe1ADD4/yjenZTk+eVGH93\r\nkE9d+BmyPLVJ8+npU05vTtdXANgvxX0mOxgZn0CQ2bR9tpOhNbPqA1yfkgQG\r\nHGwPuy3pSnY2kpbMjzn49aB8ReW+zZR1WHREIGoXRNqZ2j5RjHr+UKtWXzd5\r\nUJPIt0WATSmLNJOMSskwVfFeER7ZuQLn9toBEH2TDPzZ26GfiVF8n7m5LRqW\r\nBjdrMtCbXIYtKQw7ru+HG31aZxz3J60HlyMQHeI7swroQ+arv48wXw7x2Kb2\r\npqL/LgY2WHgDke2IPMARAe49tYlre4DeQn7hoTRMw60Q1iAoH6VUIX4JWqxW\r\num7wh2MwKN0hRtJaP5XlbCXocUhrWi3H8Vq8EvVyVho4QcJ4RYbBZWuZtf3I\r\ncpaeJhnXlN775dcLr9gKT6Re2YIxamAYK+/ab9diqqF02ULhOvD8q7ZpF1Sm\r\njBMt9yEssvNdamGxZwmvBPcp+SnmKRfRbjTek0ygJ8IKpGqwxklDaBLP142h\r\n2f0Et8Fdfb0nCzJpq497lZhI+qJAN1ii47A=\r\n=aNmy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7971d6ad5.0","@material/rtl":"15.0.0-canary.7971d6ad5.0","@material/shape":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/ripple":"15.0.0-canary.7971d6ad5.0","@material/tokens":"15.0.0-canary.7971d6ad5.0","@material/animation":"15.0.0-canary.7971d6ad5.0","@material/elevation":"15.0.0-canary.7971d6ad5.0","@material/focus-ring":"15.0.0-canary.7971d6ad5.0","@material/typography":"15.0.0-canary.7971d6ad5.0","@material/touch-target":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.7971d6ad5.0_1668847533503_0.09522759414372728","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/fab","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd311189728b90f502e6e32c6cc1d269b5af4fd3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":23,"integrity":"sha512-U/8dV5w8KsrFLsDG0ud8tRI7eyZJEhvfaK1P1bmm6TnAcOduGfyAF3gCcLsp3YL/ElbNJDM15fHCYeBLYQBGNw==","signatures":[{"sig":"MEYCIQDuxzY0qB90HSYPE21gCziBT3Zp2u3gOnmzhFgr4ow7KgIhAOFuSD9U7ogLQtG9JVFzsG+p2GrBoqf7o4xyoNHxweTn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1jXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzwA/+OtrrjO0IKsD3blH1cbVpY4QvjUS5mjlcemQ/SETwtQrEM8Gm\r\nP/yJf0vkkcyToq0q0u4tdfUQsmZvovZ0xfN8IMx746F3/0XYIObM6d3AH9Ht\r\n1aQvKiDbetYhfEAzAHAobXs0Voz+zPoZSA99+X/bmaRa+R0+PBStetxxI+Sr\r\nUUXRk76ccJlinVmEk1mRZuYv+nNY+R0O0E1U9/VKp/7BovOKoEs/Ct7ct/hD\r\nePx6OSs62WeCdrOFkPxC4E8RLbRimZkjuyGMTlqw1FML74EzGsNqy8RBH4Vf\r\ntZQDsGKbSnXVnalj+QS4AxQ7Ly//wCWX3OiJwI7rQsBf0YlsMOE3y8RTmJKb\r\nzk83eeP0mLDsH0AwbavQ8aT0jVc1LoWStDn80JL36sI40hm9cKYW5UleO0J4\r\nHWc/9Un+Ix5dgewUYwrA26Lny78T/Kwbo0Qwd+8eHl8dGm8AVbAUUKQqIZCq\r\nFxlhd1U2uF7BcMyxNawsgssXmJ0UclrVsVnswrKBY31Ogszo6dwaL2a4/H4U\r\n+sFBMBRRoAxdaTzWjoJ47z4/99ZZpDksw2S72B9lnug8myXict9OS+O99d/Q\r\nNcFAyBA9uQ7u8fSBHEWk+3ZHYI8tDEg81sDVlDfTRMmaYF0PXAeObWj8TeH+\r\nxgcBUSOi7c+XE1hKXq9nFpVbU4rGUF2U8is=\r\n=2QEw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0ae73b0e.0","@material/rtl":"15.0.0-canary.a0ae73b0e.0","@material/shape":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/ripple":"15.0.0-canary.a0ae73b0e.0","@material/tokens":"15.0.0-canary.a0ae73b0e.0","@material/animation":"15.0.0-canary.a0ae73b0e.0","@material/elevation":"15.0.0-canary.a0ae73b0e.0","@material/focus-ring":"15.0.0-canary.a0ae73b0e.0","@material/typography":"15.0.0-canary.a0ae73b0e.0","@material/touch-target":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a0ae73b0e.0_1669028055552_0.5805806093652697","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/fab","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.96f472604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"661a4a239a580bbc524cc82d42cf54f4b0cb827f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.96f472604.0.tgz","fileCount":23,"integrity":"sha512-AEeJI95Ncy8q1xsjfqRuCMBzQ1nuN5yryBdnoU0QTKhhImYl8Sxuidu3tZWc1tpXwVEYR9gA6THpqjXcrr2XiQ==","signatures":[{"sig":"MEYCIQD6b9m9genqVyAShl0kHCV0mflAHCBw587U7Lq69T8HMQIhAKTwydi37X5jQrPkBBkx2I/DMth+xc8cmEmlSuZHJzeJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3S0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiFQ/9HOZr+w6mxHhWWzH3Ni6qxmjzGp4vygbryBpvBaXOY3J/7jb4\r\nO21W8FGwbOVOjq1vWG/tTcftbFVDWN0uBL3QdYIKr4L3JNyIiMPwKQxIDUlp\r\nnOk9coYiQ/exJY4J/3T7xsorQjumRFmaO6eWRls9L4oL1zYScq/ToJHVaGKV\r\n5hfMFLHKBRwKo7tUIJa3jQlKCvPl9NQERtNWbQD+fOdoJAtWlUV8bOBwfn6i\r\n77px5RDl67864NsSQ5+KYKAuEo8aC6IMx22XObuY9IrA8orzp6WULALQNF1q\r\nLUVRERoi9srld8lHQ3CSJS/gX5jfrZz8KTV1VLRZr3Y5cOP4fBJ7qmCMwpxQ\r\n5OCPQfKWY7SULOmXTwHiV1i2KJmH4GKhCPfHmInAXGfKyQQCd/v6DH5XGAmY\r\nZcMcg982mDiJ9SJSf5aswNPc6td6+v366yhd/UVQ95VNqTMe9a6mKQBUCbY3\r\naqkLlzp0+it1Of6G5jVK1Ju8/SHbxF6uJNwK4DQ8GSeo/fsMEn7h/BySgtsd\r\ntlX5PhipJLmWXVe+rLQqCzDCgHGzeUhDXICCteTKxe7frUSgWywQ4LiYHAeK\r\nnRPID2GRzjbpgPPxWi3q5Z3woEa+uHAxEoc3xWPJIXxbHj2DJSU2MSm0Xcz8\r\nuocajdWu85mTQtjpoAIvWWY6pDCYsiy1mec=\r\n=dpJv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.96f472604.0","@material/rtl":"15.0.0-canary.96f472604.0","@material/shape":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/ripple":"15.0.0-canary.96f472604.0","@material/tokens":"15.0.0-canary.96f472604.0","@material/animation":"15.0.0-canary.96f472604.0","@material/elevation":"15.0.0-canary.96f472604.0","@material/focus-ring":"15.0.0-canary.96f472604.0","@material/typography":"15.0.0-canary.96f472604.0","@material/touch-target":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.96f472604.0_1669035188481_0.6980457963971556","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/fab","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01dce300bbb60f0d1dfc21a774dbe88c23507b75","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.18b8f31e1.0.tgz","fileCount":23,"integrity":"sha512-t6k1RYvMn3S3VqRju/KEopBVWHOFuEdTCH3zpBGqJtJo6g+7ldRbitp0Px3OU8OCkfPGBlU4hH52wbmWsVfYCg==","signatures":[{"sig":"MEQCICCdYTHHtiN2kzsvOar7vUC/Gj222y70U7DKQvyL/5PFAiB0QAK2QwMN3j7FlMkdLi53gDC88sCxBIGHlpwDstGkNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6EnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOlw//SVTNHqFqLkY02fKqIvW4C97eDIvZcmIZ+4GDm0or8SmmP6dm\r\ngOh/JDey76OXyh4Q3LeAEP+EUzb6MFyI+nqyMItD+RYYNtHTLaseAo1CXoaN\r\nBoqdFhTk6sUuWBj6+wXjf6v35uh87u+VhA+eokE6mJd5egf83QYdVrW83lp0\r\nDu/6giuUVAU8w7TGqGReeq9SYSC8v7/7L2tpRq0XApugjQzscS0d6qfo3vky\r\nGHL593phtzv7oxcNQ07LOJeK9+PGtZ7Nn6LwIXGSqisWJ7p530EEdsCWsm+R\r\nrqzholH25Gp17HFXDENi1rJoFk5cc785C2l/iKrn+Sj/QHLbzE+F06oHcQqB\r\nm2dbIjRlLz2zYtbnWCWBJ1ykcsRxcNBSgglZGn5pZQQZDlIggHN+qyTkEj5w\r\ntqAx9KwAC3aTOq9+i7G8D+rSmjQx0OY+mOXP2uZfgLrdFQ6woTVn9N8trRpx\r\n47TcYc9rp9t4D76bIHjrOFPZJJu6W5fKLwilMuKdn2trjLBlZTPO3Gy01Dz9\r\n7n4KjNp7zclRGrl4/OZuqSd2dkFc6bO0Qns6ApKma7E4GZz2l4ntEELlAFv6\r\nEEyP7Y49YjKTNw/KB6LbxqT8ofy31dmK/Qk86vITGApSLf4uP8N8Ct6ON7px\r\n/ewtfUXBOFFTTYOCvDqfPydn4l/2YTOukVE=\r\n=15Yq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18b8f31e1.0","@material/rtl":"15.0.0-canary.18b8f31e1.0","@material/shape":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/ripple":"15.0.0-canary.18b8f31e1.0","@material/tokens":"15.0.0-canary.18b8f31e1.0","@material/animation":"15.0.0-canary.18b8f31e1.0","@material/elevation":"15.0.0-canary.18b8f31e1.0","@material/focus-ring":"15.0.0-canary.18b8f31e1.0","@material/typography":"15.0.0-canary.18b8f31e1.0","@material/touch-target":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.18b8f31e1.0_1669046567174_0.46107369836749945","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/fab","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ebcc2ae86a0a4ad03f67045aba90739b18e7427","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.912f33ce4.0.tgz","fileCount":23,"integrity":"sha512-jAfQk9+I+pPNRAGyT2Io0I4TKTUPkwC1L6Mz6K3iuAIMu5HQqisRLLo3ATGDAGIJiWlm+Mx4PsRmdKk4wt1TkQ==","signatures":[{"sig":"MEUCIH3SwK+tQJJQ95bcdHd0m/hDLkoPPbuS1Y77hZ8J7AbrAiEAlJSSI3RafbBqlWx0jNHYF174PKQXWB2VsBkb2x/6Vpo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7tRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmogpg//ZiEevH4UDNuMcHVix9Nzi++esiVSkiQSjhh3LoIgFnQxtSvC\r\n6kLc0sh3A+ue+FtvGNVCN2htUD+l/OCdnM10AzXPi3x0yz1y1G90YAx0JBub\r\nGLJKiuUzwWESv1Hm5iq+NM8o0ySRc3eOeHoHZIObA2vtn+8JOBk9WMLOLnG0\r\ny4hMjEp5Z/pKeEwdD2SQcZisvReaJ9Hls5TF4SamZZ+n3ondi2CMKiVDYlTU\r\nQud0FD7ld19GOWA+3RKxrwaVrifEXy6++OhCFjt7BktIOBtYPtQJt8lFZ/+B\r\nYtWLvfRwgM+7cA0xj89/3z6w9Mj0tv/XGgleTekT59gROwbmJ1xViTaTDyiJ\r\nthmE8MCnsFaFaXCmRWEx8q2TK8st+QR1YjmhrI+2CBrr9g1K0/7JUY8LTnOs\r\npo+vBhZPVHRpP5N+03kRI9neDYU/eLc2ipC/9ahfIZJQAXdsjEa2yh+wVEIK\r\nJzq4VEgzRaC9wriTzs5Hbb9oJZS3FlrhIXTNB8tXAlFjJ0yfESewK/oKjXv6\r\nKsubFbmQSUKPXWUSrygWXNoKEvQ91HFcvhFDvPwI2HUPCUbD4jt08rQBK1CK\r\nkvND3MvMMmavWIQaxZxb9v44EYfaYZsCnbLic/Aoo+mmJjo0SOjCYXSM4DGv\r\ngaYwrwHSruwWuasxfyLWcQwDWqdSLgKvYA4=\r\n=ofji\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.912f33ce4.0","@material/rtl":"15.0.0-canary.912f33ce4.0","@material/shape":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/ripple":"15.0.0-canary.912f33ce4.0","@material/tokens":"15.0.0-canary.912f33ce4.0","@material/animation":"15.0.0-canary.912f33ce4.0","@material/elevation":"15.0.0-canary.912f33ce4.0","@material/focus-ring":"15.0.0-canary.912f33ce4.0","@material/typography":"15.0.0-canary.912f33ce4.0","@material/touch-target":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.912f33ce4.0_1669053265361_0.09890764080479086","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/fab","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c37b061fa5ffff6b4aac238dd2cfdbb7b0a13d9f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.1e1b1c369.0.tgz","fileCount":23,"integrity":"sha512-+e6bHVJHYQqq4kCIWGpy11MWJBzicViSm1lqDp5qDOUgHQbM+5ek0ErK7V8OlpdmlMlIMQwRULr41W9q0Db28g==","signatures":[{"sig":"MEYCIQDKATkWAxJ1tZbDnXh5cYv7slimgaLxw4GyBV7Mzx02fAIhALQEKnVEsCdK5TmbkJYFPZ7PEgYE2fogvsHya9adp4vi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm3xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmph5Q/+OYjSFi2Ug2fkn8F4BWUXc0/Yg2Go/4Gc1nvEQgm4OgOwJhyk\r\n/PrlECUWdfEtGWzDdUTFQhK0gsLF4Z1aglnx9WmvsdgfT9GnaASUjFromDkI\r\nOLdYm4l22Sjyx64QxXSCZoIV7C81J5xrrCKa4E1xIIYK4cuNJLn6nbVG0OZH\r\n01PlRFUDVO8BGIBeoorIOD6mzFGT+Ar1Fi177rrrJPwvXxbS5MBx5hFsF87C\r\nhMnmC+kkw2tEBrJXRfN2yEC1vqkt8DXOUHWiVFAmx493zcNnmqpnrL1y6pfX\r\nPy0itVPAoNqcs20+Ek2QCwAWb6jZPfyopXoHcqATE4KNYiCrQ9Sb6iAkA1jn\r\nmsNPgLD046IIAdm2M1+m2WbtDtyQAbL5BUYSqvcjQyoLDRL8tplXC76pUe5D\r\n2+eGtNDy7Bn2pXJMcrMZHuc/h/ulPU0+ftj5uULcBHgGYEZsezpxauZp7A/G\r\npN65qbjC5zJ5O5E7GUzwt7WO/Q+UvDBm0t0ylhxKKMOLpH5UiJ3ra3FJ/4lA\r\ngMHGK4ob401CsXT3ft0SPJ+04DxNDFFicxlBvV55oA3v77AMJbaTqu89DgTz\r\nVySpNjw3IqhMTk0SaDHJKei/GjIdzduudffARmB+hTKGd/r4O/Aq4QwmZsml\r\nbMqbWnKemeCUO2rMbdZoFLSq94zpnejko7A=\r\n=CqY1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1e1b1c369.0","@material/rtl":"15.0.0-canary.1e1b1c369.0","@material/shape":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/ripple":"15.0.0-canary.1e1b1c369.0","@material/tokens":"15.0.0-canary.1e1b1c369.0","@material/animation":"15.0.0-canary.1e1b1c369.0","@material/elevation":"15.0.0-canary.1e1b1c369.0","@material/focus-ring":"15.0.0-canary.1e1b1c369.0","@material/typography":"15.0.0-canary.1e1b1c369.0","@material/touch-target":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.1e1b1c369.0_1669230064719_0.3471284424432617","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/fab","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"393d87efadc5e8291e230be09054bcbdfdab9909","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a2ec49244.0.tgz","fileCount":23,"integrity":"sha512-Jn62l9xqB+URS6ppzNFlVCi4Zx+E0kC3kDMRWtuTrM9s8LrSeyFGHxgGadEIVktK7soc022BFC1XnG621ZrO8w==","signatures":[{"sig":"MEQCIC+QMrf/mNBZoeD/X6nst91/KZ79UB2j2Ny8JcjDhJDPAiBYkNyMKTyBme92LjViesduKUUw3HNM/tYn/9+/mfX5yQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnUDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVzw/+JqmiCSQ3wL26aPhO6ThhuKGCknhYJapVBl4M91vZJ/WZnGYj\r\nagrRWV8nxWW4yw8WYLTNZNGd0RWCkfVUVuZwDbFplV8VXRPK9MMWu+minE9h\r\njp8Qxqq/QLPBcxGXnHgh4vO8FA4svTb7/t1+5W0QxK8wm/MIsRwJpnebLRUa\r\nkh01HNta7cb4PZJIvYylCMS0q6N+TeXL9N2hfUGpDsyZyirPzhgFdY6Hbu1e\r\nPdGK4r2tnwlBIZPNXXqPejuGmwsL08ux9A48l9dUZGfoWx4MJPXltFhkEE/W\r\nfgwCITmM36dWxfyqyqAp2q5iiBV2s5F1+HGAPDjB+IP5lZWcYJadxDCVfrfg\r\nACtfKgo5+XXvFkV79oJcUooNPGpwYUNl1LrBggoMg3HNFGoPAosCS7Ib9HKI\r\nlRM6u7c3N0kMws7JQRpIAgt/m/ELVDjYlLiqgH3zBz3hzWmWwOb8bCCpkVLc\r\nUUOsNV4lR2wWacveriYHCJweukPriI4BztHo0I7YWYY6vtGTfoJ8e0fS6EmH\r\nSJJWBhfm1gVcCDHZhgel/N99gskM7T2AIIvlvEwosldZTZcEXwNsJdPUsYS4\r\nUVQgkm+v8CvncJsbOIsJ8QCX7h6HHVbR5J6tHh75zvTgtQ3YdtCbtCbq0V8i\r\nqftOOkusTHaUkljazAhtElUaYWRFhULIcM4=\r\n=J53g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a2ec49244.0","@material/rtl":"15.0.0-canary.a2ec49244.0","@material/shape":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/ripple":"15.0.0-canary.a2ec49244.0","@material/tokens":"15.0.0-canary.a2ec49244.0","@material/animation":"15.0.0-canary.a2ec49244.0","@material/elevation":"15.0.0-canary.a2ec49244.0","@material/focus-ring":"15.0.0-canary.a2ec49244.0","@material/typography":"15.0.0-canary.a2ec49244.0","@material/touch-target":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a2ec49244.0_1669231875645_0.7184678086491423","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/fab","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6060197a3c2375d5ae1dd3620fba5c0be504290b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a7458ba0b.0.tgz","fileCount":23,"integrity":"sha512-7dOu+3WdBClOaoZ7t2Tz8SUlBRKreZ5YQAfdCizYEkW1vpDYf0pEVeQyJNB2KApXyUduKhxJ+ir6+igtBCNMnQ==","signatures":[{"sig":"MEQCICoOGrdoAikBAG/vrB6/zsYLnB6ew7TIg65CeAt8J5l1AiAWfdOAi1AdSv8bZEB72GFlZzQAAcATC8zjshY3DYHx9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn+uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwEg//WtmvKZCg4iYjvthw7jxp1eF+2J0Ke1UqZN6wUJbmyhRTWEie\r\nO+xcvMY5OhitlzxMbMupaklpga4/lKkKEhiZYLsZsYWLC1N+0WS3lIEVXruZ\r\n1CojLql6dwe8JNYoWobgVYSlKzcR61pj4gQx0ab+xVRsvibaOpb/F/7exJbv\r\nMg23XnjqsvjN769OtBV2NQij+SxDr8t9K8j37usgHJFEG/9usJ5GbQMT1Lw3\r\nd+v78z1qc13xQKIuIg8QX8p300LAOKQsd+TbKZiye2fhGxLZDUx7fp4ERgk1\r\n+QWJoL4KzWeamrA4sKbfv3bWTt/8ycwOK52dtl+/ngUwzhYcRBJhpPOKplKq\r\nz8iuJ0u9R5oCIczouTLJg/+ftMNRbtTLIW7TaX3QYw50gRxzx2v5tUcTrh0h\r\nohCq+bFuzL6hZlJdIBIQu7TEeBvZtK6fck4j4ZONyQyx1eeibd9e5DM2paj1\r\nL3ErEesXQrLMam4I3TtGL361TWOs5IhkRgr9/P+yW+RFwkHsytRbTuVeeSgR\r\n3SDhFw7Wsu/kL/vKNNm/yFMAOlqgAF0vIOTnsBQjN0JbF8o7245XVClcb7cN\r\nQ1IbQo0m9V4911LVXJasoievvbtXPFgBpqpcyAwHN7Rj3VF1ABUALodhXl7S\r\n5yV3tLN5+p5/xhALx9gscbWIKhyMJ/fDzzA=\r\n=m8QA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7458ba0b.0","@material/rtl":"15.0.0-canary.a7458ba0b.0","@material/shape":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/ripple":"15.0.0-canary.a7458ba0b.0","@material/tokens":"15.0.0-canary.a7458ba0b.0","@material/animation":"15.0.0-canary.a7458ba0b.0","@material/elevation":"15.0.0-canary.a7458ba0b.0","@material/focus-ring":"15.0.0-canary.a7458ba0b.0","@material/typography":"15.0.0-canary.a7458ba0b.0","@material/touch-target":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a7458ba0b.0_1669234606633_0.4618346004757621","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/fab","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e41c9762bd96a963d418e33b5b108eeafc101cdb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7c35e5036.0.tgz","fileCount":23,"integrity":"sha512-46V2/PIMl49ftZmmtKHYIdprp2Ej7NU1vTIVpkDcu0OINb32wd1DxKYA0GpELfZ+dpJdhOPseV3yeq/NLEwwyA==","signatures":[{"sig":"MEUCIQDZj17fP9AP2szsvS+QsNkuNGqLOQPbjDtJrfJkxAZBWwIgSumsXuywROjhdxYzrZjX5VHKIueNDgVVdOuXKJb/RQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy3TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2Ww//a6aUW7UL6um1h2rOZDT5q30Jx2ARdAQAYoU71XU/u6CpxvIx\r\nipU/85TZBhmO5huSn+gsZFWBEhgtQ0hsHKk6An9v1p6d63gTSboVrc2yIyM9\r\nxX4/I1xeEgQdO/iNcwP7iZcbgrjN4HLrVwMPFd1ESxjd19U3LS/hqyKBmLPN\r\n+gk0OAmlQUCkzGaBg1XEcKT5OKcTsCM1G9SXcoLQZSWMp8Y4T6kg3Xitl3Yb\r\nWt9B5pDiOtH4ZwIXcxXmoO4N7q1dHStB4Zg4jApbCt5CHCXglhe7GLCgDOsb\r\ns8vJkiG4+pYeGdkNOoHTkMptel+KxWb85l2+EwUnqyi336vX5cUcFCgtbjnf\r\nHdVauCdsAvnpaXWrtCYw6aHgNKNqNYqqNcT7f4AcISMK0ZwjHXQED+F/51FI\r\nCKICdFVAgxCGN8XE7fBH3i2dRNGLILX/OPNF5tNB2pmhpnENKB1Bo9ZO4M97\r\nSxuwV31O1gs3pZvW8B9X8TJbjSwC3yC85XCre41sJy8oO1ewHMKv6thMI5Fs\r\nl8C4bxPNfTrBJwJRcgIyEpSSjJfUNL4OYjwyYjJaPRydSqB0rTdgcac18frT\r\nnEAZFRj42uTP8mM+cB8T6gSuYmt37FGg83NWozas4v0+/Y1hQjNY6Y2Dyg4R\r\nqNhemCgjRgupAeZpuBg8IrYQC1eTzu6jXwQ=\r\n=DMxy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c35e5036.0","@material/rtl":"15.0.0-canary.7c35e5036.0","@material/shape":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/ripple":"15.0.0-canary.7c35e5036.0","@material/tokens":"15.0.0-canary.7c35e5036.0","@material/animation":"15.0.0-canary.7c35e5036.0","@material/elevation":"15.0.0-canary.7c35e5036.0","@material/focus-ring":"15.0.0-canary.7c35e5036.0","@material/typography":"15.0.0-canary.7c35e5036.0","@material/touch-target":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.7c35e5036.0_1669279187287_0.5348261132373346","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/fab","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2437149100fc894a2652c24c410a68506f2b3d7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.4356e05c5.0.tgz","fileCount":23,"integrity":"sha512-Q9RU1VmZ7muD1kTcbA79of4rZTVU2XOj61LKnSxMXQcT09+ByiuYTc2zE09INrZRqPQBhhf523WGDKL87ig/+w==","signatures":[{"sig":"MEUCIGdv6rOj23EIMIzSQo3nRN3qo784XBYvrqZT4xCn1ULzAiEA0YjHavxvcTqQ4fdGoUnoqLPAVtznC8EMQIsiBaDlVSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfz/1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp42Q/7BBpBWRnzy/4vCB81Z6P9F3RV5TyO3Ko6F7rQd4g//TpgHhNN\r\ny15VeQ7+W5WTcNRdI6TgoZS77Z1je0kMW9fxXRz0/e8Whn4T3kWFp4PKntQv\r\nnd48Iu1KLzyxt8dY0347j75DU8XzcR0Ug5w83FN6ljTUiLi72IzUMcuIZ/9R\r\noYEbMmhoWKqvH/F6Po9dpAs777ooUl8nh6u2OZxEsmZ1r8m751Q31FGIO/FC\r\nv1OWn415aos4UbGwdV6CqdGK1R86UqtArVtUGGPzNGMEx+5TxfLgEZrCiOm9\r\nUo4L2M88R6YMlneZfbWh5qjsQYBakTt1fgPHw3bfGGWpOKNQ/7nfM+yFNtRM\r\n+/vy3w3ofUQLqIlbXRFUKLLa4pqYt1tX6EfJX46KPNZM5B/IxubJZ0r6degL\r\n39d1gH1s4H1viW/8mk7oFGDAmeH8YFVSbpuxfGeNNrpVZXkY6q5P1WG7GYJG\r\nhOXVp3da8VK5N4gY8MdHS75sGkC7NGHntXwGTWrtW75w5c6OC8ONL+4MdlqB\r\n0Auk2n3pbXidRG+aAyRbcSREJ8BjsNSysMIftdBA3jDQE16E77AvPDJBmhzQ\r\nthtXGz3dkiPWy63hVnUmxBTKDtbuokwaouoKT3qYmzUfUPwX5CUNUuLEdm0p\r\nxsJ+OUWzCnDb+fjjzHFcFUtsxGdAfA/M6Zo=\r\n=hkQ7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4356e05c5.0","@material/rtl":"15.0.0-canary.4356e05c5.0","@material/shape":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/ripple":"15.0.0-canary.4356e05c5.0","@material/tokens":"15.0.0-canary.4356e05c5.0","@material/animation":"15.0.0-canary.4356e05c5.0","@material/elevation":"15.0.0-canary.4356e05c5.0","@material/focus-ring":"15.0.0-canary.4356e05c5.0","@material/typography":"15.0.0-canary.4356e05c5.0","@material/touch-target":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.4356e05c5.0_1669283828962_0.5868228590205946","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/fab","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6311f5b9d8db245023f82e764e3ec981b8e5ed1c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.cb605f8af.0.tgz","fileCount":23,"integrity":"sha512-yw8RZ/TJHE881QtKLZm5COeLv/EV+GHWgUF+nW32otd/hse3UvRra/qikMX1Vx3qqDvi6XxGTHQbI/9bpKsKqg==","signatures":[{"sig":"MEQCIBrJreXPsiZmmDsIobnGH9hWwJyrkpdkdFFBkArNb/k8AiBgofZ67lFRCHpEPiKiXe+fudzSMC99PgAknZYZH+9Ekg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0RmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxBRAAjiwVs5Xmi+KApQhIkDP0NPiGO2DGpdXkidvA+xqdVVnJSd52\r\n5S+ebR9XRs4bxEUIiT1aYAvSuHF6e0OdSapgVJWhqk37Ht1SyAB7MOYFoOo3\r\n3CcX3Kn3SYgf7QCEd1TgMwG9uM5VpzujFzggfsrxBHKrR+baa550/Ua0gARa\r\nDlyLssPuUrkF4+NeacbpscPFdja/Hrat9BeVfMYDqAkuASDVdz0aiUDXskBW\r\nwELfrfrGXrF2hBHtZI26wZNRBNhATBmohKEpF+8uTK1rYON+qEjd2UbsxQab\r\nJurMJ2+PHCK7QyPT7ErCkWpAhYWDEIIWbDIoLOdzPZwMAwiJT6rax4li4sBZ\r\nl7UUWE9fJa5ZDieYRarrmpTTxIlB5Z3JBa9lrepje4GioyuEZYV+5CJAf5b4\r\nlhWxGqdJNqExUS3d32Hh5bDsaRGkTTALxbRWByzb3wpHSKRbmPW6sjllwod2\r\nXviiUrxSm5Lk/X3579tkPsVhCRNG37+Tm9/JWzaurIJNv33BlgZ8rWldMJNr\r\nGkQXhPejhIHBf9povNR6jp27GVDmcvAWxXfh755rt+NSqHgBgNYK/WWWTQQ1\r\n2eyBocnVgRzFenfa17hJEj0VRqZsxJF7oH3dK80nFKGZcfzMiqWOW01ES6cB\r\nR3KeRxVN0gXpk5WUUc5LaNF3TtDIZNSVmac=\r\n=sPIN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cb605f8af.0","@material/rtl":"15.0.0-canary.cb605f8af.0","@material/shape":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/ripple":"15.0.0-canary.cb605f8af.0","@material/tokens":"15.0.0-canary.cb605f8af.0","@material/animation":"15.0.0-canary.cb605f8af.0","@material/elevation":"15.0.0-canary.cb605f8af.0","@material/focus-ring":"15.0.0-canary.cb605f8af.0","@material/typography":"15.0.0-canary.cb605f8af.0","@material/touch-target":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.cb605f8af.0_1669284965943_0.9135942264254329","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/fab","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d42cb11c2702f6b7aa10bcb50aa59a96ccb221c7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.05fb07f9f.0.tgz","fileCount":23,"integrity":"sha512-Spcjjcmi6VCw7z27iuWCjbDyMpChYIEGONBEDOiaquT+c1MO/WaEDtxJriuaXsNbQx+xVYcpmhFTmb4YqIdMFQ==","signatures":[{"sig":"MEYCIQC8FYH3GHZS4s9rmunZcAqfMxmcjpXQ6IMXJZODE22HIAIhAOTf9AdfM7lbWb1jNNpXpO8UiBQnuRFibmrkIRJG+b/6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6ZeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodKA//YfSG2EmEiC3p2mC/MvBtPcnStugvx2qujbvEPZcRT1KjvqHL\r\nqp1kKVweThD517gkzB5XLAeznekKDkOKVHzYafphOJ5/2FkrZCZLwh8hdzJP\r\na2ohsf/fYPr2OsjkpN1+yjPQ7Np3c9ePm95/sn9WZz9CqyZt8cDF0gLebadu\r\nO62Fx4pb70MHfQMNl5ckz6ohUq6+3be2Qos+iTbskJ94No0ZdqnFDVidCy4c\r\nQdYcYUx0aHHs9xucE2JqVV1v62voTYwW/rRafsV2ZfpFC4DqQAgmXTmKSM/n\r\nI+OoTkykOFdj7cPlqWkt1CHse1L+69/4nJJDus0gVTD9vx+IMD5xo3AZuFHo\r\nIil4iBVRgelagB10U4i1vBXt6VjUtgZW1gpI4KZmhLNx8DGmeSE98Z1gtjrJ\r\nXUG3wzDECMQ0VdV1C0baQoPxUIMkrEDNXN3wiOn/F36nzpfh1vbxPATUHwhL\r\nBnxDX7aSD09FWD2XJ4JVEuumQfWkt+vRpVQrb+2FoRfVOXUb+v2J0PmBjifn\r\npF5aeasaZnTP8EjfCqcW2gYxLqp5dknQoWAK8OXM1caqBH2GimzoFPInjpAD\r\nZdwX1lzCHswwcTvNL7eo2PoGjdpYgkhL9LZ6PLim6+FzjUrM2qtX0jN898L/\r\n4ZtdiB4Biiiick1T13d2gvoWQI6Ws4UyvEw=\r\n=rEuB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05fb07f9f.0","@material/rtl":"15.0.0-canary.05fb07f9f.0","@material/shape":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/ripple":"15.0.0-canary.05fb07f9f.0","@material/tokens":"15.0.0-canary.05fb07f9f.0","@material/animation":"15.0.0-canary.05fb07f9f.0","@material/elevation":"15.0.0-canary.05fb07f9f.0","@material/focus-ring":"15.0.0-canary.05fb07f9f.0","@material/typography":"15.0.0-canary.05fb07f9f.0","@material/touch-target":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.05fb07f9f.0_1669310045950_0.11520589362722822","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/fab","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a911b386b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"892cdc091aece1293792b6a0b0bb51ab863463ac","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a911b386b.0.tgz","fileCount":23,"integrity":"sha512-7FAnCrD7vm0NB4jZ8ZYzepvaXQGZ5a6c/TflQ//Ejv0ZckA6VcLymS8DSP0t2YhXfWlJ1gVVeMuR5qQt7iPiAw==","signatures":[{"sig":"MEYCIQDs3wjkvB0YK5Qnr3jw1YWxrEvRZupIEnRLVwhapTXy6wIhAM+6UfOyVjz97o3MIVkb2iTm5dlQgXXI8atLbtsRo9Yc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOYvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPLRAAhcsk1loy1Y7rwwvT7iE/qm7NtMRFrle1QkWcKcxICwBi0na7\r\nkTleeVtteg3efsgRfc/jPKdznXmxx+mhuDKx5cjM29hSXpSV77xtnX6UBl4s\r\neOz0aHNAR/E/qqqIWRCP3RRuPd1CasenH9PEVU4TpYkmXXC8sc/9ZdWzfYiX\r\nlu2x7cT3HOe8vRIvaYn5YINTR55R2mpciX74AzTFLVPLjUUTiP9II4XK8wtx\r\ntGhVACgHzqJrVogZgXdUbywyqeNJu602wSh1HR8iW19S6iVYBhWJx71VK0oV\r\n9z5eUGhiAMaOrJhNNKpTHJ50f93ZihXssZ8IRXEOPfiyj71kSllRo1g0DVtb\r\nIqkDdHx6KhB2tsRV+u4ruAskfaKDhsYptA1FKR3d6Eb/SBC2+0ADfyq1wGlr\r\nAIzKHpdXhDDculOAGbRNiP+K9pJiKDYcjZqD1ula4WJbXQLSnwwuMSdmZNbU\r\nx3ZeTO6xx2uKS/K6yMua93TpZJuyHZfuVBM8N0c3I46nNAm9f1sBKLzTWZev\r\nVLnnd5a4CaAE6jg+5jq/Ls/ZmS/PdGHaFKGRTRpEXw0dWokJ0sXNNkjG8luZ\r\ntBaDJBQljWs4+s3ypCAcwo3e5hb8pziS1NBceJjZ8MbNu0snfg1c7DeUBKy7\r\nk6s8hziPn2hUpNHEpK7lGdAc52kG7ZyLzUQ=\r\n=crAL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a911b386b.0","@material/rtl":"15.0.0-canary.a911b386b.0","@material/shape":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/ripple":"15.0.0-canary.a911b386b.0","@material/tokens":"15.0.0-canary.a911b386b.0","@material/animation":"15.0.0-canary.a911b386b.0","@material/elevation":"15.0.0-canary.a911b386b.0","@material/focus-ring":"15.0.0-canary.a911b386b.0","@material/typography":"15.0.0-canary.a911b386b.0","@material/touch-target":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a911b386b.0_1669654063489_0.7200193741999221","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/fab","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6900770ad07a7a2e5d3b1246874000c8d63827f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.2aa8050b4.0.tgz","fileCount":23,"integrity":"sha512-xvr+3BgdjHjSwC766+64Aw037G1DOllHeNiCElAGhHgJvJd37MgnpaSO08iP1/Q+OnEzI8KRAUHjH73M6tfHtA==","signatures":[{"sig":"MEYCIQDX6+/Ke9UR+3DCtJd9BRB5OMS6S6MfxgR7aKf4cABlNwIhALlckGMR6wiPk8ngA9dNEsT9RqddMUfQD1aSZSTNBuLf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQgBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr25g//dSn+xkmkq2jeMkmDLlaXeVa2vsmmQxQAsEW9RgeYHe315G4Z\r\nbokXmQbhkElyeQQcMBIWhIZWuVhkQu7CWiqSt/EMoZhemHf0f8JBszREdB/a\r\nbFqNQjxRBjJt1/CJMedM/71pZ6kV6UwyT4IteRrpF7ESqRFtMZPstIj4/0O+\r\nvFsXzhN3gCJR1Hz7MpZGM8CDg7wVn1gAUzw6F/QxSZWxJFB5i2UKZLQBimyL\r\nMu15kgsCcbCoosvOCdPi/PLYamJTAR2aNTKpHhRtb/7TrLiJ+S1elbCxq8gt\r\ni4/Pvltb/CvGbCX4sXyJ5uZuGmY0zPPukUXyGt2y4u7XcEZyDYBC30HPBny/\r\nsFoSrwaL2ZfikqE2wIbIMwRXildRzNPCT+JCOC2JwBqfkbfIkK1hsq8KVtWb\r\nBOm9dKxzBfnMDjlFA6S60EX3wD1ih+/dPp6ZptyJ4Z6e6gzA521UryqELz7b\r\n/F40rN4Avlses4Vw//zwOlrnWnnPOa6HwWs6ix27pbFPTxyduJ+eyrpfNWIh\r\n51uRcZ3NYFVthuJdWvalp+DyscqOy9Ha8lOhwU67K34Tg3EPyTMwBrr/J14l\r\npTu8kNm3PF9Rf6FYW1LRhR0XOIJI6NUQqAOkd+UkZJzr6U0+a1BO4bk9h3Wa\r\nhHw0cXq/LqsSmrNleDgzYz3I0Dn4oDbak00=\r\n=Q12u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2aa8050b4.0","@material/rtl":"15.0.0-canary.2aa8050b4.0","@material/shape":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/ripple":"15.0.0-canary.2aa8050b4.0","@material/tokens":"15.0.0-canary.2aa8050b4.0","@material/animation":"15.0.0-canary.2aa8050b4.0","@material/elevation":"15.0.0-canary.2aa8050b4.0","@material/focus-ring":"15.0.0-canary.2aa8050b4.0","@material/typography":"15.0.0-canary.2aa8050b4.0","@material/touch-target":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.2aa8050b4.0_1669662721203_0.06224389613797898","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/fab","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.323904a9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7529cb33e179a3cb3b4d1395b54326d94baea11","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.323904a9f.0.tgz","fileCount":23,"integrity":"sha512-sv24lSg7cPfLqUCYWj3XVnIMlzucpZkK99eEWHAS+mqqCl3E+mwjo/gvUxEKzW0QH1M22ugYfzXZUgO0wxxoHQ==","signatures":[{"sig":"MEUCIQCDfaMT9jkMn8g4oA3PZi/U9v6dObqr8HLrhh6lKvcSxQIgHQ9Qgthr4+ceLA5xU/sp4Wh9y3ol/tDuL0xtkv5sI+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiaYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPlw/8C34HPUOxd0JjaDvKsmWZCTMyiYYQUGeZ5dIuJmaoHBLYwx6Y\r\nLMgC1Jx477j1o1aDsFvMIshUdlQ3tht0PaWROO6c/giFesqyEHH4Eepk33uw\r\nUzNHzEgHaXekNUdv3Y+icNfqsFQ23ODwbEk8Y8GjSWCRHiWrHOJnkslubmm3\r\nwzqQ2RDxQHGI95ycUPwwOayu3ILYJhdZI5+NiM+aoQpgahvxeIahS1XsKxPR\r\n67AIFMoKQ+N1tnCpqRM0NovpDJyLslxCcz3DlW1Uc8qmCNsBu5fgJU0kT/jh\r\nuqy37ZzWasAD3wlhkgDJwi+kjg1kZ0YWXfNog0aR/kht45qokLQdScPXlWGd\r\ned91jxR6cp7IQKyZXC/7cZR8iqdmInKsP60q7YRGFbyfWSKWbEiJYmTUCDmM\r\nCy0r/HrJWXUrvYWl9saQdlCcqCGaV2grTyJS3fvXNrxjQbfoO+l/zjpVRg2y\r\n+G563r/sAmQ1+Uip9fW8hBw9v6byUEBr9ZhlBh+tZ5KEG5LhZjrO5RStINSq\r\nO4pgzfBsKU4oJ7n/hP4rPC3kjcXEV4xs0QDvhAmnD7XNAF2VUKxTPhOzRdB5\r\nYYJw1l3Wn1adyh37PsnlmE7lnqV7mhqbtiUO39FxAiVNzVpBlY4X7XTQpIpf\r\nPaIvUel639NMBss4WWpQKsdaL2TpvfkeNEA=\r\n=aiDx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.323904a9f.0","@material/rtl":"15.0.0-canary.323904a9f.0","@material/shape":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/ripple":"15.0.0-canary.323904a9f.0","@material/tokens":"15.0.0-canary.323904a9f.0","@material/animation":"15.0.0-canary.323904a9f.0","@material/elevation":"15.0.0-canary.323904a9f.0","@material/focus-ring":"15.0.0-canary.323904a9f.0","@material/typography":"15.0.0-canary.323904a9f.0","@material/touch-target":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.323904a9f.0_1669736088702_0.8573787852248562","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/fab","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.168a629a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"968e620c4b6b3c8a4e6a1edd64590931e4a710d5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.168a629a4.0.tgz","fileCount":23,"integrity":"sha512-FdI5RPn0y3lcFI0dNy37hE8zF3Gr6H0oYBKwndClJ+7wy8muQfbl/Kq01dA1+7ut3K9s7bkGcXb88nZt8y2JGQ==","signatures":[{"sig":"MEQCIH0LoV+yU6rH/LK/lox6ykZZ5oJ8+nhRHCmxwFu/V4OCAiBp0kyxaX+7/n+mL3ZDja2ZWGlrxh4pxT8SA1d46f7UwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjguACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5XQ/+LoRZEP48HX70xhWGYj71aRvs4HUBftO7ecUOBcaqI8pSamq/\r\n8mZU1MOxTb3CypSRdMINjEtrRZriYGUEgRkolK3fCK6KYP+36rbevPBOQKpq\r\nF10rDOQGnVDVR/txzaVL9uRiRyPFYlzObsFtCdXX2PP6m44QLZR4egU01ndR\r\n91sRcqkzHxBXD3a8o8FAbn59mTVvm6oOmNCoCArnNyLFHX/AHvFm4o8hPGjR\r\n2+h6Y4B2Stzi2AoaoIzXErMr9hwInUZtPZU7DfQ8m6BXeCiDF2Xf+WySKJ6B\r\nybutXTSjYLbDCAGcngAX3oboLb82eiWp4W0wxsNYe2m2wSKF2tkgM3xdAlZ2\r\nTuRhEx07z0NKJhJwO7syDeCYVQz7vF3eJ2wW8Bi8YOROgbVkUk9rH32GPg0w\r\nY7NK0aDHKiy1y8KBt2rJhya8WoXywMTFzqD+6nViZMSLDgfnGNmzOLDcRqgh\r\nrrcSDeN1yBrZft0LBQMJx0Ni92SEhP+kUfpbYRdff2p1xaLEm5CG6gHNanB3\r\ntei4X2VLp9Ir5k1vcS6C77BiZKhv8gq9904MXtHBgO/xJnRC/6YcaYRXCQgO\r\nFpi5W4phNh/Mj3+LtD4p/zLJSjgTsEqfaWBUTAv44S2xzPb1Oel3RyMKRDhx\r\n0USHN62FPIs3rkdvDr3mKsMzlDpIisqXGBc=\r\n=WGTs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.168a629a4.0","@material/rtl":"15.0.0-canary.168a629a4.0","@material/shape":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/ripple":"15.0.0-canary.168a629a4.0","@material/tokens":"15.0.0-canary.168a629a4.0","@material/animation":"15.0.0-canary.168a629a4.0","@material/elevation":"15.0.0-canary.168a629a4.0","@material/focus-ring":"15.0.0-canary.168a629a4.0","@material/typography":"15.0.0-canary.168a629a4.0","@material/touch-target":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.168a629a4.0_1669740589807_0.9532984908440569","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/fab","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.65c411674.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb802dbfe6c40adf67538a74bb90ee033a0165f5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.65c411674.0.tgz","fileCount":23,"integrity":"sha512-FhHd5w1rXrjg//1CcRjKdcpoMRwGu7jaMZ/MZsKJfr10K1Qky9ESsNbYQL529K5frYEjy91h/rLo48JUpQ7dlA==","signatures":[{"sig":"MEUCIQDjK/2yUv8yGQSidO1JIk6n4aBxtaRg9A/WhkQIfPopMwIgOGvG4L/zcLNo4d6JRY+sBxtb1p6+fZ5yoooVBO8bzHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkOrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaaA//YBzyPeJkxbrWQ+DtLKWVm1Y4EsoubY9AnoU37yboLtLNheOF\r\no912mZF+rqVToZXm8UaVxWLLjm7p/qtCGqA4RqRRAf2oy5guyvUGQ6klMdXU\r\nCxaLkVP9Ij5eZ/OM/3a69JM5NJmWidCJ8+SOewUW88FdHcGqEnBFeW/oXHO6\r\n6UHNSV713XEWPkjZ+sVJnzbEuMxAiOyYiDuhe04OpNdGNHsoRFF4O80//ZSV\r\ndc6b66hbirMs5IllVGSD1X0XMWJPvIJBramimVElF9RTdEBgJB8N9oMDe9ih\r\nScd/H0j9uX1GQwVryGxHvSBZmoa6Nz+ClzFjHxGguAi19cYyHUo7YdOPUKlf\r\n1Cqnu01Ci+ClJx+Xfdxp3opxtdrSIm3JbaUUAhblgtQxNkl/iXsD08CWCOtl\r\nfHxWs+/eqktsQbCYTxIKogUVa9abyFYAVUgD15k1O/wj2zm8Bqt9mR3xsgK6\r\nl62xzT+f01f6oNQAa6T6qk/rjcD9PKLk6wd+YYg8v2LfwiKr4GVsxXSbmpo0\r\nXScLJr6EGUnrJuPK2n7EmbjRVEzkGE+q7xTSU2h50qinrxEXNbP6ZZW4f9Sj\r\nlkvzC8m2V1WR9opiYF9VQfOteEY7Chmt74IRGHsKZVxgsXJ02x8MqlshZBpj\r\nxmsznrJUqpGI1AXX9C+tsyc1H3O56jSGkEk=\r\n=jImj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c411674.0","@material/rtl":"15.0.0-canary.65c411674.0","@material/shape":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/ripple":"15.0.0-canary.65c411674.0","@material/tokens":"15.0.0-canary.65c411674.0","@material/animation":"15.0.0-canary.65c411674.0","@material/elevation":"15.0.0-canary.65c411674.0","@material/focus-ring":"15.0.0-canary.65c411674.0","@material/typography":"15.0.0-canary.65c411674.0","@material/touch-target":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.65c411674.0_1669743531327_0.9879133624894443","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/fab","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4cfd5fe9511fca7210532263e3a57dc33597a67","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a86d36fd2.0.tgz","fileCount":23,"integrity":"sha512-1Q//+06/xwUDyDc4uYzehRrraFQfX7ZxUjhwOeuKEgY8qv4eCv8+/hcrNe78HdoJtS5/1KgHfRLJGrYsU2TUyQ==","signatures":[{"sig":"MEQCICJH1JxaEjdRByR0BazprTayAZMnyb78Kv2XGp8q46JBAiAv5KztiqEwJgLP6cyc+MlWmQlBL8dmNGaB1P8eM/DMog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhryNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxWA/+IorkUw5Sx12MlRzMlJ4ARFBZJjmBQXqf+c5pglbbVfuq1Oi/\r\nDCS/Qr6ZaHBY6WSkqWkJsoDgokJenUhzxZThLsSrern8EnuSGz960EAFBq90\r\nIFtpH5aVeElcKZ67O1Fkf/0TQe/QQhNyU5zmq/GKMEbXdD2pqSDabOcYMeCc\r\n0qk7lCU3EdowLhji/U4/TkXHKtM/Z1okhWpRKGsge+C3kF01siKixAHJa/cU\r\n3gBJvLW6mHZGHxSZp+0ZPk0pmOoSjTnE3FjgZIA59JBmKPnHO56oOczNElx9\r\ngqDukikoJZqJ3kFWcxn7zwAc5oeW6ACGOxWOOaYJROhTYFmNa6XV2yXoJr8s\r\nYBlkUgFSETy2vbCWiieloPNlvfc7gx5Ps6PGBFLCRux1ASPrW0q7Z5RvTagn\r\nMqxcYJ+BJEnniwAUqYMDyppyFt8cK5Ph8ljd0mTZ4gtkmj7neAD5iex2qEyh\r\nlNXwB+Ue10CI7JRxMZQ2PqM5FH7y5EFkHtoYDB7wwFYa/ZL/eC3YcNQxa4H2\r\n4CVAWWdVZpMWDCVNd+3fvVL9DOHEdcas8wFGMvSQivC9AW1ClbYaFL0+v3hH\r\ne3j63tUylzGAe2CXxiCfb59jM1NILlDwl1pT8JCyPD5Lh6adhT5kvAcxiTM0\r\ny5QY8mVWCXYOCJzYDQG/0ToblscMDS26jwM=\r\n=TOjH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a86d36fd2.0","@material/rtl":"15.0.0-canary.a86d36fd2.0","@material/shape":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/ripple":"15.0.0-canary.a86d36fd2.0","@material/tokens":"15.0.0-canary.a86d36fd2.0","@material/animation":"15.0.0-canary.a86d36fd2.0","@material/elevation":"15.0.0-canary.a86d36fd2.0","@material/focus-ring":"15.0.0-canary.a86d36fd2.0","@material/typography":"15.0.0-canary.a86d36fd2.0","@material/touch-target":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a86d36fd2.0_1669774477541_0.4619048191387125","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/fab","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17d4b71449493dee742c9dc284230a22217a9a21","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.3a1f46c66.0.tgz","fileCount":23,"integrity":"sha512-128xDCx0wfdfi/4RTwAgH+xPSw6LtCw5SmR04qDsmlsGXlByEcVqdvgg11BCwucI7I9/4fM+j9MAQUBp99hrtw==","signatures":[{"sig":"MEYCIQD3vzMEqEkhQtQfRqafnIaMoH3qJ+C4yrPlfgOLbFDuxAIhANLXPqICEAdy99iCc/vbQSyzC8n+XQai2vx/BaTyOfYl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0eNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWdQ//U4I4qwNvPpPx29+ukG3HHUrBAgLqSVSuJUbV2xDKjztIGAJw\r\nSUpBICd95WXbW5twOOW4FCSUpfs/TSl/PhZtQzWgxcue/N0wZ553tsvjOn3v\r\nIjiL2+/pD4XkMQElmtz4S+8aSkrHlb8MKMX3zHRuC/ip6iafQ9/c07mChqPX\r\nBDO9uiLpsqDQyJed3lIofLxqF+kVT7JaXmgrXLzarERPa7XzdO8XuPGHL3wE\r\n3QHVxrXcv7mUqtdC6PbLkJJ873wHRl8Y4eSUbliCzy4Y05w/H0FkWAK+VSmt\r\n+HLpIZdonWeNWJDWAgK3cUuyVp7N1O419r4rduQXbeX+9V6DBHDp5nJGe0ns\r\nwREggMYoDeog5hA1wI/9OCTmNRdIwoaXrKkBxQBDliOhJz6jSlqP6ROTcNo6\r\nQZqp2hhvTdkXiXRNa06V2tOaiabm9R8kEv+WaglXIWkyVgFN9g6zQsiIKtmm\r\nBmkfrGb6VlMOzolEnPCbVdRjyqxX70h4EoEEYFDRti0cPL89Oov/cK00GeQ/\r\nwLQEokVcIoTNDln+2Wyo5kmMHoTh6HeRWKI2yi2GX5QxfcGnIA8USkD2O1tC\r\nbRlksr1TRPR2fhvThtm08i0lmqOjKY3o3I0K0l9rSmWNTOAefKAbt080Ujow\r\ntg50/bprIiLTN8mkozxU009OFsb0cZ1aY/k=\r\n=+Dpq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a1f46c66.0","@material/rtl":"15.0.0-canary.3a1f46c66.0","@material/shape":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/ripple":"15.0.0-canary.3a1f46c66.0","@material/tokens":"15.0.0-canary.3a1f46c66.0","@material/animation":"15.0.0-canary.3a1f46c66.0","@material/elevation":"15.0.0-canary.3a1f46c66.0","@material/focus-ring":"15.0.0-canary.3a1f46c66.0","@material/typography":"15.0.0-canary.3a1f46c66.0","@material/touch-target":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.3a1f46c66.0_1669810061421_0.3502093028537556","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/fab","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c6195d3dc7d9e29d80e1ac4fb78e526d4cc9d12","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.32d8a9648.0.tgz","fileCount":23,"integrity":"sha512-SDfrIkn4TIjYwLKXLL54112vs1QWEhBw0UxUk5Nby6qqdFOKE+8F2zWiYyTac+Ag3ImsS8dtrLYJqCaYI4Aarw==","signatures":[{"sig":"MEQCIHnRk4O4WEjYuVJQk5a10S3Hdpd3kkCgDoU5kOzGn2PyAiAEoWzfdM4kC8aRP8L/Z2cxKrSfyl1irKW67pYb1rInyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOSDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoo3g/+Jn5iAejewO/lNn29n6Pbr9pYB0Jip7GeqlHNookYw25pExdD\r\nYTr0h6/+0GKLZWNOWYf/K7QBRfLYTvwIBL2gIKxsWHX4RW938O1+lKcqQbq6\r\n1Y9G2+9Yr5BAMLhnKb9VX+joFNLfL4eCgDu8O00NSB1hvKhbAthaKhrH6R2c\r\nM0so68IFfGv2TDa8IMBPY/Vi6/aRnm2IYCb+IB+63wrA/Y34Ckcuw4VPZxL+\r\nxUuymeXPnxFa/h8K/mzKD7h9QiVRJ/zPaEbtPGMPrd4P11wSKBD81JyD5bOB\r\nQ+hLuZHijyWFrREALr6MkE9CQWxS1AR6KWkqndO3IRjRI7IfPRcW5Rd9lGCC\r\nevjsy3KpshzRUSvqJqQmfUQYhpL+Jb0+1INKdm3ckLFxLlY8vcLtpkKNihsN\r\n9dQW1eLSTMGqb+vMEruknmbx+IAecEgRcCnMudmrNB88mFf7HLZCm3D4osxt\r\nBizFwQOwTIvp8WIbvFlIzbwNcaFIXBwqKuzShA4kimfILTVbmFWDwURyInVz\r\niw9H3rclBVnBtuJY6hMcIHcpkTEDjfmcTuawOlr7pEyWv5TXA4Jzm81ncycq\r\ny75R8qiRmGgGm4SBGkyg/LOQLYagzGx/d/zHa5/4Zw8hrSLBfToKJzaJvJcd\r\nCyHbkF8tkIWkK5S5gY+vcaNXSHUJorQJy+Q=\r\n=v0LE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.32d8a9648.0","@material/rtl":"15.0.0-canary.32d8a9648.0","@material/shape":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/ripple":"15.0.0-canary.32d8a9648.0","@material/tokens":"15.0.0-canary.32d8a9648.0","@material/animation":"15.0.0-canary.32d8a9648.0","@material/elevation":"15.0.0-canary.32d8a9648.0","@material/focus-ring":"15.0.0-canary.32d8a9648.0","@material/typography":"15.0.0-canary.32d8a9648.0","@material/touch-target":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.32d8a9648.0_1669915779128_0.6340796641129476","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/fab","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.03618ab70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c400a5c334f45f2171f377b4c364fae0738c3257","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.03618ab70.0.tgz","fileCount":23,"integrity":"sha512-p1d3f4MOI0YkVNvXdHHHJhYHxI9SsZLD3YebLChJOxlzk1+KmFeEuwT8gTubzvYahQccNtpbJu3Q1cVTMYWl9g==","signatures":[{"sig":"MEUCIATydWA/J7YKNoT0XlQsUOVN00uKfnjBU6ISpTFVGL1TAiEAosnQAjhceZM9gJVyx0h1eJGSEJ1PFLmpIpka5cPkKoE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRSeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTew//WjfSSxVPAfvAmczwRV1KPMvCKPAimBGgsIGMCz9XqsTYFYZl\r\nUq0jNMxR3YMq1lTVjEQmx5EUkLMBAq5mLyUrSVgkrXvw08IIPAySkUACdLYb\r\nEHLUUqFfrmqOjo5SmDOuTgc+NtBGLUBgCfad2IY1H4iADzcWwj+NsE2ZJvH6\r\nXgY/fHDvPtr3j2MCjs8LiiV34QWZDfRlHM1BLF41MwDtaQlxxs6oR88kr/7i\r\nDTx9bq+bPEO+9IuRFfV4ibxq0kQOR6Vqc69PGldudCx9Ys+YGKnsjP7URsdE\r\nyH99FUAS3AIICIGKkD8Errd972BXnP7zpg0gE8DT+AMy8q/9QDUnXKkx2Glh\r\ncrv++7422YjXYEEradBiguatrXhWlV4vvhvsHS+7KSd3z223CuLVO3PFp23j\r\nP4yl9KTSvPWqXLc8VpkZGKsISMVnzeRoGB5Un/UQQJXJx/utWIdpjIehOSvz\r\n6oC0gwzk72lPgSEkBZTNSUxB9BPWig7XQKE4PGffFFGMNrsgs60skEIsPumF\r\nMw1hMaWlIGqJDejzdbM2mW+Qbp7l4tShBhG9835eLMcU1ZD/5ak+bOtqWRZa\r\nAgbLAtHSCsMX0qKJZe6zeFMDdMnf/trVg09XaggXy9FSrENYsNoqLK/hXRtZ\r\nHE73eFb9Tc4wthHi7ARByn8PHOWKyitSIx4=\r\n=7agA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.03618ab70.0","@material/rtl":"15.0.0-canary.03618ab70.0","@material/shape":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/ripple":"15.0.0-canary.03618ab70.0","@material/tokens":"15.0.0-canary.03618ab70.0","@material/animation":"15.0.0-canary.03618ab70.0","@material/elevation":"15.0.0-canary.03618ab70.0","@material/focus-ring":"15.0.0-canary.03618ab70.0","@material/typography":"15.0.0-canary.03618ab70.0","@material/touch-target":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.03618ab70.0_1669928093884_0.8973694693331979","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/fab","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.68aaed940.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93e75cc15984d2f68e1315ff27f37a055ce0b4ac","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.68aaed940.0.tgz","fileCount":23,"integrity":"sha512-vCAkvu8SlWPKNDiVR4Mpr/7z/V4xszq5+sOlMhHxBJWpi1bYOdE9K3ZgfV2kDmJYkIdfREZM/aCb/i0eIAD0dA==","signatures":[{"sig":"MEYCIQDPYZ2BWWpFwpiG9dR6dybFvPDXI9ZPM77Ikst7G5NwDQIhAJU0tUlkvo5l8glAVe0hJgvpI8llLQmIsDS2YJ6k9gdG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRuQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdLw//TSzxQ0uCWBld6PDMZJ4D7Z1T2T8ZXwLc2v+CLIF8+hd+7KUC\r\nHe0l1oiW6g10z49iofHJ4RKMIs9iVtR1BDifXqIg6nglR9aw+KdO8VFtrIrm\r\nF0NpGkM8gcYyHsZONF8vbCF1TWXXTQb5BXMAQydFL2kDSbCiRKhh7YA44cB/\r\njsaZc+O149YDnMwB/pi1KngMGl2rKjpoZFIorSddHyzg2/YhEmhQf8RDaY+G\r\nMvFMjZON4P/KaAfqI/2ZuHUOkpv2bpFv40s493r4bqMgkAeEsYCRVw3TMsaR\r\nwIPCwMCZrfykEAhI2MH0DbIMqiqzOsc6urQyTdMvRQ7Nmh826TQrBw1jmr0R\r\nhowHMGj69VndVjCuUf6M9u3Day136ZzZponNYBe0muSEjJn8BZO2Ekc+jHOI\r\nyKLv8FL+w0Ydgg9lVn9z7V55UuQosZTriEdcyx2OuK5gtNWWdl2uJgbgAAWp\r\ny34im+Sfhedi2YCYgiVMU6padcsnloqwtpLp2TJ2xmMVfLxSBQlsltACh44z\r\nlQXBrjOFPXAzkaBsksoMh+Ko3r1JOOf+Grj4/F3Yuz3ei6mICMVa3qvjCvvz\r\nHDPdfvjPHmoV+J+Cl87DGWkE0sUt5cRgEYEmnpBdPK4ghtWfAz2qf+EMdE6X\r\nM84YaCHa7d5egBL0zxBga9Sq7bMEb103OMk=\r\n=2pLS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68aaed940.0","@material/rtl":"15.0.0-canary.68aaed940.0","@material/shape":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/ripple":"15.0.0-canary.68aaed940.0","@material/tokens":"15.0.0-canary.68aaed940.0","@material/animation":"15.0.0-canary.68aaed940.0","@material/elevation":"15.0.0-canary.68aaed940.0","@material/focus-ring":"15.0.0-canary.68aaed940.0","@material/typography":"15.0.0-canary.68aaed940.0","@material/touch-target":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.68aaed940.0_1669929872272_0.8568870064540239","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/fab","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92855a9f10cdc52a4b602de0b01f35e0565975e2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":23,"integrity":"sha512-OjZdysD/i2p3PqdwGmzvW1gMHh7vG33oc7ShMIQspk5QxFj2bS1g9E3/EhH/OsPuOWn8vyuiSsYGqZsiq1nfYw==","signatures":[{"sig":"MEQCIB9g9DFBdZKfmRrS5V+cf7KYlWQBQ/q/M/MhoHpDVj+WAiBTTzHUqHw/LuKb+ZhFgPpVC9Qs/gRI7pAfwTkr6RwJ0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib8rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBmBAAn0ScYbdilN8aoCoA72n51zVWcaB62mpWcVuTuavxm+Zehr3K\r\nLPqrDx0att0QwU1De4EC0QKkQIxdVO8dgeds4fqLcHvaIEK8oLKfSn856Hd5\r\njnVDXGNv0cfJqmu0zkyd/PH27usF+14HKYiqqCr7j8MYFEHTaQJqyxD7rGxA\r\nwywHoC0EeIbHkq9x2kLixAM7O3MdWfiY/ZC7g/wW1QHkioOLO5RDgcAHc1zY\r\nSmoDX9nRHD6nyhp4nlDfusDLRWWP46XaMGY1lTdljZnz4NztE/kML8dxy1Su\r\njLrL/xpFxZKSSW4l29n+Nbn2NAToxEAlQoFt4MPRGXX8NKTyzymsdyWqU1Qf\r\nX6SUBMPECRilIsukmXo2zqWU2fkqz9nBBK8cTPFaHVlcRzCLVZ2agzdQ0yFD\r\np3Dj9hKyibybHPlGVw11aQukbCppexYHK99fWuzuA/8zQZXSplWxeBNmigkT\r\n8g+O6f5x05D4Rs7TL7xc7vIsFzS960tk9TAdos0yC9h0/ImvkIw/+s12ANZS\r\nQFzPi15UUTAhsLQsljfgmECQQjw2NxUw5KPOmpakzj5Ms5FsjHudskGiRlIl\r\n8XlpTAsAXq+UO/jx6mqbhfdOb2JfrfgqHmXWTNaJUbloA6NrRSqMWpfyMSPt\r\nXgkPKktaI11eXyrpLqOKBdxAsRjMKUzdDaM=\r\n=KvDw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f0a0bbc75.0","@material/rtl":"15.0.0-canary.f0a0bbc75.0","@material/shape":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/ripple":"15.0.0-canary.f0a0bbc75.0","@material/tokens":"15.0.0-canary.f0a0bbc75.0","@material/animation":"15.0.0-canary.f0a0bbc75.0","@material/elevation":"15.0.0-canary.f0a0bbc75.0","@material/focus-ring":"15.0.0-canary.f0a0bbc75.0","@material/typography":"15.0.0-canary.f0a0bbc75.0","@material/touch-target":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.f0a0bbc75.0_1669971755443_0.7455514772011922","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/fab","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db72ec045c9d0a0ede54641cc44b52edd9fe0140","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.dd99c8764.0.tgz","fileCount":23,"integrity":"sha512-ibXogOTlnW/10DDgbdIg9wmjkmTlpzWwFW15YeoAi3eeHBpfHJ1SBtNPaqGhZQ+gkMWI+NVimKwCMWGJRFXf4g==","signatures":[{"sig":"MEYCIQCitlr2WkNh6LnEyhkgB5ZIjy4Ks/Lnk0GhxcRUTYW+igIhAM5aj6qMHWxOpLuHU4Z56qBwgcs6C+73VOH9vtBce4kg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigU0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosCQ/+NR3NI4U7X3+qhSMy8Vj0RCOC8Hd9B7AplMMYwxTe8wEp08UW\r\nxl4UwhRfiPKTk7mAoBmOFgPz/hgj2tlWpcex8UPry8CsOekN8whq6/5FStGk\r\n8Nwm4+uHlhYmNw13FPgNOaN5iCZaQ26bq5Q9iaxS8+5h+mKiXZIrrHzblur8\r\nM08e8EifJy55mb1EWs8EKCzw8Dadycj0g47yKy9gUpWRVRSDxJqFodYAHuch\r\n6oFdY0h88HUOXkF6xD+o1mACOETTkis6iHliJad5LoL1Ld+O7vyrs36xGefw\r\nUx67+p6JeE5bc2heYRYLdUtxA0coP4+GX4o6+gtqneU9C5HFL67nQu6jbpRP\r\n6Zcu92V0eXZrO8DkdhJDWeFcNwYthfzWkdPl1Bg1ZoZgv4rQlyPi7fDzQj26\r\nxcTvatw06+acPWayFSYj0KF8NMlAKquGzgj6FS6O1TfwrvLarkNorP1WvquH\r\nbbe5MS/SGlkvFrVOvIM5R5Z5jWV1XfwsAZPH2wRsB81whI6sIxHKuxBySMsD\r\nap3Kxv8TfnwlIAeucE27z+pCDn9niHhGlV8B7r3bHQjfaHZanlJCnn2ht33Q\r\ntEjYdmie97GI2OP5KAGgjCdNdRW+/urx8PErXnya+SO/LX1Md1V09CCkbdGN\r\n+Hp8rwXe2xiQTc+m5bV5fIyd8ngSvqOhrXc=\r\n=OHeK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dd99c8764.0","@material/rtl":"15.0.0-canary.dd99c8764.0","@material/shape":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/ripple":"15.0.0-canary.dd99c8764.0","@material/tokens":"15.0.0-canary.dd99c8764.0","@material/animation":"15.0.0-canary.dd99c8764.0","@material/elevation":"15.0.0-canary.dd99c8764.0","@material/focus-ring":"15.0.0-canary.dd99c8764.0","@material/typography":"15.0.0-canary.dd99c8764.0","@material/touch-target":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.dd99c8764.0_1669989684579_0.8739628055737478","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/fab","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c8d0d11f77e8ef42f080a00a0854c57271a8d16","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.fabdcca3a.0.tgz","fileCount":23,"integrity":"sha512-OuEqpSXpogHa/keeqM7Xy+JvVptUsckbHH0xAZMLpT2AnlOTHY1zN17YSCaX57dj//9l7sAFOSemZbIWRfbl0w==","signatures":[{"sig":"MEQCIDsXPwDQQ7DeaTw+zWH3UBF+rrmmn2Sdy9CH6v3jKxStAiA9o6uDxuLgE6iRXkQFrdhFlpV+89717i4Iox6WoT2Rww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihSkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmon2g/+O6f6biswQsYAb8RCyuwpk5k4i3tkLZZ3vW4d/FoURsUek1Qb\r\n7BC4KTjgm3eX4Ak0k2dTRG42P0X4gIvMMKEyzzDAd1HR2vMfyMHTdkiSkV8B\r\nQEx3rZDPhuELoBz2bciTFjDIjStEeKQMmTq7feGQ/fTjbLT1nPnV1mN909zA\r\nnMGdpJ+yleD9ZZK1IN2C0BEqxiRS5A/GhyRAjudLUzh0HytNQ2PAdXAjvAH7\r\nnFCByCXVxeBkKVxgJ48/CMkDgAWDslci5BTQWuzfZJyUn+OBbDMoYwoIrdML\r\nl5lS4HGLOlQENslVlAr26xifDqAHw4syDM9UCbhBF19W9fiBU1OoBkLqKUeO\r\nB0e5XN0XEAt/UDyoXrVpzOP5KvckyxXyCDFHGBHaKtdGCIhmhkarOMyU37ec\r\nnuD4lcHSF1IMDz7L0jG/UXnDAWoJgJYGOGjfPiGaUd5deLtB75T4uLj18EUe\r\nD3lAOn2aalkBmH2llmzdtQA55wkM8Om5gn+CWIFuRPWUdt4Zbm7+BrpJ4yp3\r\nYYe+e/wlw28IE8XbSVTDWEXHK4LB4u3BimCCk9ul8Atih5qNEzeRfF6OBJiT\r\nwcp8qDU1pwwcZcC0pT5ZMrMbelW24+hFM8ePe50mH9yFAOFlrlQtBsgWX67q\r\nmrW9W6eg11Q2HkfSS6fZjxbse95+jweaM3c=\r\n=T4VZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fabdcca3a.0","@material/rtl":"15.0.0-canary.fabdcca3a.0","@material/shape":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/ripple":"15.0.0-canary.fabdcca3a.0","@material/tokens":"15.0.0-canary.fabdcca3a.0","@material/animation":"15.0.0-canary.fabdcca3a.0","@material/elevation":"15.0.0-canary.fabdcca3a.0","@material/focus-ring":"15.0.0-canary.fabdcca3a.0","@material/typography":"15.0.0-canary.fabdcca3a.0","@material/touch-target":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.fabdcca3a.0_1669993636470_0.264320550990778","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/fab","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68f4f93f82dc2f22bc64b18b0c3a063cb4149c63","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.2d26722d2.0.tgz","fileCount":23,"integrity":"sha512-wP4vuZyYZvnH1BgtrgLwQDwHUaaySeeFrHgOgCABu1XDsVlLfmnaDlATuy/CrMHRIyevJ9aArtwZjQj68OzlXQ==","signatures":[{"sig":"MEQCIF888r6GDkQ/yGCBRVmyaZcgweOsyRl9LFVKI5OJkYfVAiBcvZhHHVZnbCdk10F0vSgeILfxqgtC6bt30lOik5svmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiidXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+2RAAmZNj6rCe2fTIVxCFUF6XobmtIDWhFYZb7ElI6SGBudvi2QxJ\r\nkh8fwYSfhk2ppsaqw3vslESgU1yI6EcNC1My3IfjR9sG7coZ0LWoA5P6jT0b\r\nWQGaoXLGhLU5h7yHfpJhzILAs4UB0HKdNlfPkRBvMkmP6AGUMvm4hOlspTmv\r\ncA9XFB63eHoO/Y+0b+BJHVWOBBiiACQwCd0T3kF+1MwmCqZa63ILTTDN51Cd\r\nx6iC72M0R6FXQFe3jFdgx/LDPiHgfay/of0okFEE2gg20i+zlpiLhzoWliza\r\nhnmEFh7HcSyAobnIJaH7mFiVs30N+xvsl4dUZ25HqI4e+vB26iu1Hnub/xRn\r\nj2gD+K56uPo3aQRwoaCbED2tWt4EqnX+8pJDoZp7xzl+o3Rqem0t+Cz/IrTR\r\nQUIM1uQl1jGUA4Dnn42/3a+BpcZKorGuZCpEW2kV2wQpflapNi6Y6Lnw2cWC\r\nH9Jwfm9DPRYVmhw6c/zrDmTNoPP39FPLTGjcFd8uiRz97Yxnv4vNOHN++ftD\r\nB7MFE4ECj5xFbQYUB8McVor/cUTqhzeLtV0Z6Qz4sWRrhqQff8t1QtqDfGuZ\r\noT/6qgfIUfJwkLhNdKTnXMYbuOZ5SD2xOpjKXsOkS+utn+TjlnhKTkMqjKtx\r\noNSpVa3WxrpwHCrcN6P+Lap5cHPp2X3iwrQ=\r\n=bW0x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2d26722d2.0","@material/rtl":"15.0.0-canary.2d26722d2.0","@material/shape":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/ripple":"15.0.0-canary.2d26722d2.0","@material/tokens":"15.0.0-canary.2d26722d2.0","@material/animation":"15.0.0-canary.2d26722d2.0","@material/elevation":"15.0.0-canary.2d26722d2.0","@material/focus-ring":"15.0.0-canary.2d26722d2.0","@material/typography":"15.0.0-canary.2d26722d2.0","@material/touch-target":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.2d26722d2.0_1669998423549_0.1706044246251619","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/fab","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a193b4e0542e0b4fb8f25af338be53d852e43357","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":23,"integrity":"sha512-vSAfbT+GLNr4ErVAVvt3fxigbfExRWKZTPpZT9hZGDLohLUVDR9JiPfVG4HFVB59jC987R08Dq04rrSAFlEeGg==","signatures":[{"sig":"MEUCIBczc+hzDSkDZV/xLwttMh2zsdUA5tOGtkeE/ZmUc1k5AiEAwA0ak2c7oumDoOJuwkHea0Us/+k0pKCBQVEdh+wpG9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijkrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqpfw//a7Q81EdG6YxjUf6SgVfMyOkG/0o5amdgM8wMHMXhWA+82V7z\r\nooTY2DpkbAV95UR5LxHZniyvnbmtdA3r3nAtk3AV/sGzphUFVzinHyY3IYjq\r\nqMO6SNZnHq4vorDsUk1yVo3X1HtpRsu2+ZC7GTuMHTTXQUDEkHWDXzfu3K6c\r\n7CtedFYLOaPEIALmyDpB8xR+noulN7aVos2OE5kmrLoyhZNuy3jE7HKaY/TD\r\nmwjIGRYsFxYCB/o4ykuWsUjE56hpfkPK4qKPnRyRcWjjlSo5hjBU8E+fBp2F\r\nSY7k0Olfph/zmpQ5nMfar9xKYgfs2w0aYJoPwkpS8SxTpJ9vRNyamck6wDhg\r\nGX/S+Yw+dXu12ptu7SUpAmMYVVNX8bSGF6Ms1L7PIv+DSZJRkZ0fLAl96hXG\r\nyyEO0JGs2b6e2R5szB/ADq7xowzK35DQAFLPf/uQ7w2v3bmyem/0xInWYqYP\r\ni7GAkTB8bZuH2kDxMBRMcPd3UUkh6sD9tmGHmBpLuABwUAhqiIf2FOzkbYDl\r\nPwI+V5EXMxutkbw1TrJs5a6IZNL6kI9SGHjBdJG5W6emkMQo2IFSXxuP3XJu\r\nK4LDCVR5/R1XZSudeVdiYZXm7AVK2ucJiFw9Q++16Ix7t2h9LkzC8OjJY8/q\r\nD+ItdkxCeL8YxRQ/m/k2SrEs8RZZJf//UDQ=\r\n=ozXn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eaa0c3a86.0","@material/rtl":"15.0.0-canary.eaa0c3a86.0","@material/shape":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/ripple":"15.0.0-canary.eaa0c3a86.0","@material/tokens":"15.0.0-canary.eaa0c3a86.0","@material/animation":"15.0.0-canary.eaa0c3a86.0","@material/elevation":"15.0.0-canary.eaa0c3a86.0","@material/focus-ring":"15.0.0-canary.eaa0c3a86.0","@material/typography":"15.0.0-canary.eaa0c3a86.0","@material/touch-target":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.eaa0c3a86.0_1670002987372_0.6782383412764041","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/fab","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"357606ea0e3af40eee30f56db03ab323ed650136","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.79a613bbd.0.tgz","fileCount":23,"integrity":"sha512-bSA9xs+9zUt3B2yuDK6WFZyLnnPyZ9PJxkoN4rL0L9G+9N1wzWgeABeb2Xqu5qvAAG5KXI9NWEh2TcGh5apLDg==","signatures":[{"sig":"MEUCIQDxF6KYds0vu4GQ6piQyPY0MGpZ1uLdihS8VeC8YiLkggIgIZN83EBOqhzqMVMB3RsAID8CextZQSKUUeZYtx/Jg9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1EVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpreQ//T3dL9JMuzG/f8eZxnrQ3EhBcM9a70sfigSrAXNEzszpu0W0m\r\nzVeeweXrLlMqWYjc4kU+neENPmvDcNFe+awSyx3qXkDSEcw91vGsHcDtndhQ\r\nHP38l6VYR6Oudbynj3Me+RlU1wj/3t24oO9z6I+/nbt/KrjE8M3ostc2d3p0\r\nc9x0uW5XsfA3C9D1M2/8s7G3zXhx1+kBdIyqNRbGs2WIxCWIpS5KLWPGSLkZ\r\nxZ9M/FMN7M+fZNlYQN+oyTIUK/0RJhucODMKWhbugTm8nIzZitzCNaljyIOj\r\nJZ4kqbpAJxguex5sIvevkyo9YvKw6zBkqOpjz6pyO1sgkNoWFzFspUAsA3Zm\r\nQITB195/5xECKZHV3yQeLhWveIriSXt0vRnAx9Oww1Swi3w+WAO2XwZWOrT2\r\nPT8H1P+8+7mA5yqGImVrKBSbs27AzthV/cjDxQuAhgOr7BuTe/6e69hbQDZX\r\nEvshGIkdfGsdvV3K5EiJTUoScQ7g+kA5djgs/jYCLJww6KBrVFOFRrcWqOqK\r\nfRF3JfxJgJKUixKg1cECC/T6eLOGf3f/rUa26HsUDkCwr7sRwRICEytWsC84\r\nZfgRHrbFP/HgZglMU0LqjFr0qpnx4CjT68eERjV/TySIFJrLyiIzXLDDWNhU\r\n9ykEJlSiHJrDgGCGUaBIRSZRT7k3DGDk+jk=\r\n=bFkv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79a613bbd.0","@material/rtl":"15.0.0-canary.79a613bbd.0","@material/shape":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/ripple":"15.0.0-canary.79a613bbd.0","@material/tokens":"15.0.0-canary.79a613bbd.0","@material/animation":"15.0.0-canary.79a613bbd.0","@material/elevation":"15.0.0-canary.79a613bbd.0","@material/focus-ring":"15.0.0-canary.79a613bbd.0","@material/typography":"15.0.0-canary.79a613bbd.0","@material/touch-target":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.79a613bbd.0_1670336789440_0.8879016745482975","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/fab","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72741b66b67a0dccef2b6d7d48ed6ba839232c5f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.c871fe61e.0.tgz","fileCount":23,"integrity":"sha512-X1rLf257cPTHVNibL5k5/482VUd4LKwkAXP0JI7HGTq+xvi0h95trrU1KNe4Ip+FkeiAQCVMVHrevPtQu2WMwA==","signatures":[{"sig":"MEYCIQCIxnh8Zktwz8xWEhdVv9GvZIfPAkuNu+ImG5EyNTE3FQIhALdjwCXP9YEAGawy80KB5Tl7mW3uflGpXIeJEifbwNSx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEYzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqvog//XW9Rnpi/r7//pmuQpOLFfj4KjUGGMet69bmmsjWpOkBjwp9c\r\nZNiWwO4MCszymqmhvjcJ2EG+uslYrOD3Ffuziw4rcyoFGRD45oFlQHop7zQl\r\nu5Zuox9coIDxBV4tfyBWoPaGdUM24pWSWKlxJb2I6b4KNSoyvVopxfw+/Yi6\r\nkDFsVd9jieBFtJafNI3VE50Ca33Cf6ylGfjU1xHgO0cqabYsd1wvQyrFLmEK\r\ndRh7/UGm+bIcN0uk1dqgNqIv71Dvd6YCyXVx/2yzrus8a8swNnVN1eFbXqE8\r\nv8Zncd08x8tbwzM0NrZYqC+0Cs+QWXhCzTZIOrXfAdbFbDOX+2KeeY0ZZpZ9\r\nPoX7aQy+xrkmOvIBhOcHdisp/6Hqq5mHjSkQWRiXl30LjklRzH05N8++zTba\r\nEMho/6Zz9rmlYXi96N/rd4FJm0tzkHH7h9BeWUAWZO7JrOaHmHVjiAGBwUvM\r\noQYXHw7g0p5fccLXLb0oc/3/Ppw3sotiNduLG8hPgfl4k+cHQku70NbyLEQ8\r\nDU2GJpGPvjdrHabSpJiQpQnyJ2NgGSEh2L7z9AdWQ+Mj4M3cD0rY+zHLhqZn\r\njaggYSfxtkn5aWMukI1fNuKQmZH+Kvw+HaeaeZ1hWmKnKZJ0Q+rpnewR+xEZ\r\nUfHPoidpwDIYAptgtG4OCMcVGh5hsTEL1VQ=\r\n=QFuq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c871fe61e.0","@material/rtl":"15.0.0-canary.c871fe61e.0","@material/shape":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/ripple":"15.0.0-canary.c871fe61e.0","@material/tokens":"15.0.0-canary.c871fe61e.0","@material/animation":"15.0.0-canary.c871fe61e.0","@material/elevation":"15.0.0-canary.c871fe61e.0","@material/focus-ring":"15.0.0-canary.c871fe61e.0","@material/typography":"15.0.0-canary.c871fe61e.0","@material/touch-target":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.c871fe61e.0_1670399538904_0.12373027549816129","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/fab","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e7002fdab5dcce10ea896c1e18d2a70f2e50890","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.9eaee7936.0.tgz","fileCount":23,"integrity":"sha512-u4/V1jNPFzpKVKjfKTULV/G5OGYY6wSFduiHKat53BCBh0DDas6n338/5+N9Bk6FiWcwx2vcZOcxjmt6/tJZMw==","signatures":[{"sig":"MEUCIQDGeERm5CzgJgkTdFXccmIPj9jfGy51rPqShRq91qsD/wIgLnjH2DATqHLz4QLxSbW2TEwiK8vgUqfQLqalzsBjrNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPGJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7IQ//YOPsVS34AZK545tHo6ftFmkilhKEtR88+sPbXPytRMTj6jtY\r\nHdrBLeHi4Ts7Y6HnUmZjZvlQE+VurXNvO+pg3wZ8va45j4MV6NOJGSAH9hao\r\nHRLAl+6tNaMH0bgOpDNDR3ub7BkqOnmiqONgCLXa0sRVBPQNCxudyTSytyfj\r\nj9k8EzrwtflvcCKWt6nfaL9kiQE2HqSJj/jjf4PxXjEeXkUpZfzeYj4u/IBW\r\ncLMzaWZMmfGcui9pCSQ4Ddc4yUSrRk8EhhPlAtg55obX9mYU9Ba9wheaP4sK\r\n7LtFGlOtTg7HXwB71aPf1NEpaEgtqtn3K7krZorEDnSFGgL36ExSEcoV/XPP\r\ncwU0+sbHjtrkFh3gudppc9M3tU/cLwCBWFbI548WO3nmNFdRXu8WJwkCQdEO\r\nYTycj6zRFy0q6BZxoCTe3d+xrYZMOlztkOzWKBkaezHdA4knX76jumUBS1x3\r\nkXxSDW1IbstyESEF7Tz5FTbTve3rYR/nywA6SFTIZB3Z7dTOJx0H9O3ycEi2\r\nng3LUrWrD07PDoirCF+bj//vw3y0/RTBz+tx1m25AKX8H8K/ipSwRC7iY/bT\r\n/iQITPJMC4+qVOKts8jBMhaAMHRYnSphzffkQ0Jo8XhA3HeKxz+T+N6XWp1Z\r\nqlknW216qTxJjP8p5LAGoLS6nv73gH8ypkg=\r\n=LHRq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9eaee7936.0","@material/rtl":"15.0.0-canary.9eaee7936.0","@material/shape":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/ripple":"15.0.0-canary.9eaee7936.0","@material/tokens":"15.0.0-canary.9eaee7936.0","@material/animation":"15.0.0-canary.9eaee7936.0","@material/elevation":"15.0.0-canary.9eaee7936.0","@material/focus-ring":"15.0.0-canary.9eaee7936.0","@material/typography":"15.0.0-canary.9eaee7936.0","@material/touch-target":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.9eaee7936.0_1670443401003_0.14997736251888338","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/fab","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d01f001de9a1263a2a74327be81d19d5df686ebf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.1d37bf601.0.tgz","fileCount":23,"integrity":"sha512-/OgfzK4Xeea9JOPAqu1Qap9NUSBB2Nam5z/nT40S/SOAiSgrrT8WR/ELPtN5JtZ+Jtcc9Ct3qnrx3Pu5YGIBtw==","signatures":[{"sig":"MEYCIQDb3z3jlKUWwxEPA4gVtc9Zqo6poKuA82+CWYZDv7dE1AIhAKrfdUUg2TN+OrkRVjwi8TSpnK74uoX+9n4k38AEjYeS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPqGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq4g//WiJh4dvzxVHw8u+0i/6jvgZoAlX3Hl9/xnSIQoisDkhrNo1U\r\nhA9yZ3B9UvNM/Vfz6qc2c/hVfMN/Id3YFiK5Kq/e1MUywN8qQewFV1qCGuzw\r\nZWPkO+BNO23FgGECZwNSHhXMvwzXMQWzvqhTDBPj0Dj1ZF0wgWzDaOg8HUGR\r\nXJfiLRpQEIkt/rXTzLbQgolrefr4z2kqL9TlP4qlNzHdLQNaX7q476OueCcE\r\npdQ4+Evg4IY4JdsYN6+VMzL+IicCDArRdseDFkQfrEQ8nr0TeKpBTYUfwGDa\r\ngP2ldWijZWApcEwFH8euAnHOD01kUB6UMkSqLJGejdoqRbvMNbuWvyZybGYD\r\nmK3vHhKnM/uTqlAXqacT/XimtB6uWhA28cD2VL85mMFWEBHnpOqBmIdNTEUc\r\no6geJDOI8eLWAJ/6aRfGYlEznEbr99oyFZswRFfDn2G3o3OY0RtH7VuxS1KI\r\nIsxv4Hdby9UJceqe5E0+cGyAFTrjT4sttaEQSOfUUol5ts/Yz3anHu3xsg6v\r\nJYo5CoPECOUN4nfEYhZd5I4V6JS4Rw16nCaonKAcfBvtA7MIbO7+5mzv7Q/p\r\nod2i9IeVQlvbSYvCtUsMhYxz9jrI/pSeJ49ZQf49PYnaNd2QJG/Y1WG5R3Hz\r\nIXM/bXHF0ZaJj4HtNxkABhZeuxRu28vkRGU=\r\n=gF7/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1d37bf601.0","@material/rtl":"15.0.0-canary.1d37bf601.0","@material/shape":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/ripple":"15.0.0-canary.1d37bf601.0","@material/tokens":"15.0.0-canary.1d37bf601.0","@material/animation":"15.0.0-canary.1d37bf601.0","@material/elevation":"15.0.0-canary.1d37bf601.0","@material/focus-ring":"15.0.0-canary.1d37bf601.0","@material/typography":"15.0.0-canary.1d37bf601.0","@material/touch-target":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.1d37bf601.0_1670445702211_0.13586650681694046","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/fab","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5233f23e46624121a334245551062e2d00ab957e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a5fe069d5.0.tgz","fileCount":23,"integrity":"sha512-J3Zn5dcJboyJST98hi2FuBlq/FiMAv+yQZIkHGBuZNB1kyb8vhzt0elrRd0GfUeWS37Z2PHTQ1TV7+nxTUUFFA==","signatures":[{"sig":"MEUCIBN9U0k5sqMeq5AaXB8Ut4HxJ9S4RJ3hvYb5+qMRtgpVAiEAo+pUmAkIHOaNPkR5J/VLKRgZN0ZEnmYw1y4RXvIPCtk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4IhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqbug/+Pqf35bwdGd0+JwdRe6GHP2ISwWlIMUbl4bp22LtA538xJYRP\r\nkghxFhO3tU7yWaKNOJdNBWhouOg1nK2lhF5DB5yCBYRHpoKKKoEP5xLDis8k\r\nUEcO4Rn4xcik3Iq97M4AZuw/L4TJdV499Du/YvVl3/r55TptGc5+/FEN3FI+\r\nffOJHHz33/+L/VbRQDRGPvuuZdbo66usWwqek6OVZeL5gO5kP/LyV1dIP2Py\r\nVekuaZfe8yWBG0BsAVTjsBaDmqvIUMLaEaKx7N6LX7qObP3FPJ5JO4uNgfsS\r\nt8LZjCFHRVNSBTbaUX6JDBsrXW6xj7AT1Cf3A+muj/fCQ+zMUubqIqGB7Q+p\r\n9JMmo6gx5Cu4NBoPd6FY/wZjALoGOFPCTuSslN1/mboqAkTMQnQt3+6tUq+Z\r\njXrdPPMXdT2Gs4oh4lsdNpCwPvDRBblqnGwKxPV4fP5RrTC+/e7SFk1Rxsm4\r\nrqg/nuOOd5K6MSf7tHjpSMJ8idkKvszJvYxoJqojnfLMUShjVs565nqR1R21\r\nQleTF0uuYG59FD+9mPGIJUnWwQKpt6LRVV8UUms4GD9eibOtzILpjJY22ig4\r\nkkEhofcJq1abMLbzN/jwJfSpEuLGq0NcjKNK+Oh11tz1riK+5l1g1IBmosYK\r\nWniZJ1fAVGy3C2umERxiR2aQlpX5YEw6Ybs=\r\n=boBJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a5fe069d5.0","@material/rtl":"15.0.0-canary.a5fe069d5.0","@material/shape":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/ripple":"15.0.0-canary.a5fe069d5.0","@material/tokens":"15.0.0-canary.a5fe069d5.0","@material/animation":"15.0.0-canary.a5fe069d5.0","@material/elevation":"15.0.0-canary.a5fe069d5.0","@material/focus-ring":"15.0.0-canary.a5fe069d5.0","@material/typography":"15.0.0-canary.a5fe069d5.0","@material/touch-target":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a5fe069d5.0_1670611489156_0.6242218895712441","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/fab","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4af935ef3827c54fcd8dc9445109f2d739645f35","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ce8b5326f.0.tgz","fileCount":23,"integrity":"sha512-VSWH5hF2Lnwwm7puBMBZ6N1lHVAkkKkqC64Xjs5PQZ1qKfocrfmtU3cjnv+ACIRvPEt3jRs0xGy6n7MHCWDNfg==","signatures":[{"sig":"MEUCIQD8R+cDSER1IJom+2h1HkRPROeUrp84huE3llYZX91oXAIgYOpxvOOclLkASgfK+jijlXIty33frMMzA51hfe1EZco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8VBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr63RAAnqrA1yzDX790jmCs8COdecPTsQ2fm/bprAhrW9p3UrI7GJ6c\r\neoIfPy90B670WRzNsWhH7vMk2YYXacKab0sI1o2EevARTb8H8wE5VCzoN8sc\r\nT5+yBrj/O9zVnlVG5ScTZ/Pnk6J5nYWVvypqyY1Fn2CtMlj2+CoakjBcKBXh\r\np+Tr5n1q0TFgi7UiBL9/JyQcxGytnl3+6TFk/B1jF6d/+r0KnLP0ONlDIM+n\r\n5BJ4ip5Fy9CckXpFp4f25g3YAjnJkBBlltfRxwbvH0rqxtMSYQXM+RHYR91m\r\nakTH5hRp74/Vjykbm3wEmaDB807dw60lDtPllG0CcB9+k1jBfMg79uy1WTZw\r\n6jlAuU69UFoqA4idW3B/Ts0FXDyAjMug9epqxtoJlMGNmb5iIUlsS4/66bTW\r\n4VYg+HSVKIqaQsmC9iDu2o6lqRglFUEpWz7VddVdj4W7WEnlXzeHma1homo+\r\nMeyKYym87icN8aiA8e22Y10jz+oC3fyZzqv1BBebXYRZnu+Z+V9nKBjoJV2A\r\n7PEnOxxmeQetutzPrJUab16snl/spH8DYcBayoiqQjsxHV6t66ZjliYBPlwx\r\nuHwJLzvY0/8xxXedCIeV1mt/5Lu/VQf9CsijVyx0+ssjDFg5UR8DrAgfvzfd\r\n4lB0ldL7O06LNLCDRN0YwDV1Kj52RPIZwgY=\r\n=gYm2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce8b5326f.0","@material/rtl":"15.0.0-canary.ce8b5326f.0","@material/shape":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/ripple":"15.0.0-canary.ce8b5326f.0","@material/tokens":"15.0.0-canary.ce8b5326f.0","@material/animation":"15.0.0-canary.ce8b5326f.0","@material/elevation":"15.0.0-canary.ce8b5326f.0","@material/focus-ring":"15.0.0-canary.ce8b5326f.0","@material/typography":"15.0.0-canary.ce8b5326f.0","@material/touch-target":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ce8b5326f.0_1670628673063_0.8904509942641243","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/fab","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a69694f4c0fc6d959e20bd8524bd915f53c0e26e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.43f5323bc.0.tgz","fileCount":23,"integrity":"sha512-s/l3PjJ3E0Yj5aErKnpclTYHQDaADE/jPTAS5OoXYSFfxDQr70hBGxsO9UjBF7WNRkaOkdktohEAoYpolEs82A==","signatures":[{"sig":"MEQCID4+UGrY37ra244ajjcr3cCMbppAQdO6hzr+4mjhNYFkAiBOyBDSrLVjFadLRLhq+W9LVPKrnK15+WNaOFjOSzSMAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1sZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWrw/8D9mFYU0j8QuqiSs6l4jQ6dmAPTcz8emd14KEX3JLpJYOvifx\r\nqqq9qzCE5NEwcykW3hkJcK46t2SLsY8rwawdfrC2+KzMk7o1WqMNMgpSRIGR\r\nn6qKEvQhfFo7mcIoTlRD/5nRKEhvFsdIBf55+skfFw5jPyYozzssKaahmhgh\r\nCRp84+ghpJabXJAXGoUiHBOcXg8j/5ASks2y1K3XEkF0Mrel6SvJ7mmL2Fgd\r\nOQoV6VZpLJ+BdeT3JML0YKhWbonRU0g5GcMze2IxmdT1mlhbqmhPxb0IJDH1\r\ncp2IzRclLDvK4/gI2acjtxZh2LB/XeZKFGhRZax+AmP4Hox/n76A3uhQWZpC\r\n2u4xcmlzrmZpOsnEGa7MCIi8iS3xdn6oOK2mVatKodVuwADzFW68oj1yWOdq\r\nfDd4p5RmUvC9XjnhkK1aCR4coXqWnFl4pqkxr8ulOSE+9y5DL9TqRu5h60QL\r\n710Fs/gOlJmIvfZtF1dGApxiKU1+BSpYD4Ve9m+KMleh5ZdW8eh2m0mKfDCr\r\nhI3kRChThBUWI4qSTsxSOaCINtq4rRwN1K2RK27Dz3TbFICCb9JR/HhbiXHw\r\nrqwgu+3W48OY6E/nwrI2ULprmjW2cCAjtaX3v67p9w7O0PafpcoqCXBt3cyA\r\nfmsHBsiz6cUd9gLVqJ0v3ET3aEcVgAIUEVA=\r\n=Jych\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.43f5323bc.0","@material/rtl":"15.0.0-canary.43f5323bc.0","@material/shape":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/ripple":"15.0.0-canary.43f5323bc.0","@material/tokens":"15.0.0-canary.43f5323bc.0","@material/animation":"15.0.0-canary.43f5323bc.0","@material/elevation":"15.0.0-canary.43f5323bc.0","@material/focus-ring":"15.0.0-canary.43f5323bc.0","@material/typography":"15.0.0-canary.43f5323bc.0","@material/touch-target":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.43f5323bc.0_1670863640867_0.2887181961902958","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/fab","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d8e92bad50268eaad88fcbfde32e960b3f36baf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.5490e32e7.0.tgz","fileCount":23,"integrity":"sha512-Zp1LkbfEDEXWrlOAzokgM8kAplBYZlQGp8wVkpaL5LgjeO/K1l60SuJToTUAW7VPsN5wwf5m7M8MLfXwk2xCjw==","signatures":[{"sig":"MEQCIExYeBMHW0bV2intVU0l6JjiNfiGoI8uJthkzbZk+XvEAiBl+ehtnK5g4D4btMNB8JxhtZrKmV80B8wkcqmZdJcjZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl16xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7kw/9GwR0kKfKNzABlkV0c574Lzj1fH/MJVAI1IrSuACcbluyb2Wh\r\nulbpDYeaF8QtpSENoF3FlT9AVMK2fYqE2HMLqRmG9XxPOQktFnqoR+9gVN7n\r\nMQvJuJR2p6xCM99z6Xdjh0YOIZMf68ljxMei5m3D3axC+AeySSIU023tsWM7\r\nENWTf/wxz/iRm45DRGb9CL78ET5sLkHM+NjKB3zUI/aEXXee/vZEyC0nh7W5\r\nal8I3tFeOHzCsEP3SEUQGFKWjTXxG9hMZ55KUcq8DJXrlM2Ri47ZlzhRekkx\r\naLK8iyCOIyAyrWuY9jG58E9r6602Nxtlbby1ABo9Qy6Y0huqOCPI6QnBxWeB\r\na4FoW7jMSk9zo29yS5dfKF64Fk1CQOagoKMv6Ms0p32/9f8/NDGtZVSDrGjf\r\n7iYCBfVrcy8+82jiQLdAZpGOX//euCFEIxXd8dgyRj9I3EF2r8kO9U0as04N\r\n99b6X7LpdwMvawydLgzr9II7WcBsDaT7K6tLYI8WRwFPNuDyoizw3MtZJGXD\r\n/FcHGb2aElJMQ95km/moaYZfDbYKeuk1nFEx3RzuyN0e8t1z7GlD8FUgM4XA\r\nYlhN8OY6wysV8qu0AXWZq/2DpQl6W3i4o4/21EgonI6XdrHaPbNkRNb0SqX3\r\n2kYzUr+0gZ/BBDtQ9TZty8UXvtPo5abxScs=\r\n=4nHc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5490e32e7.0","@material/rtl":"15.0.0-canary.5490e32e7.0","@material/shape":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/ripple":"15.0.0-canary.5490e32e7.0","@material/tokens":"15.0.0-canary.5490e32e7.0","@material/animation":"15.0.0-canary.5490e32e7.0","@material/elevation":"15.0.0-canary.5490e32e7.0","@material/focus-ring":"15.0.0-canary.5490e32e7.0","@material/typography":"15.0.0-canary.5490e32e7.0","@material/touch-target":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.5490e32e7.0_1670864561014_0.7216725761526368","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/fab","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.817002c29.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76940ad156cd0dda3dddb5447e5fd127a3299541","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.817002c29.0.tgz","fileCount":23,"integrity":"sha512-Dz93SQzz+R4UiG8zkKXz5kmJ2TjdUbhbEj57gnJhj/Cc5SdcoVGeX+R8u3xZYD9sWySzsu9efbX4oAK7CD8k8Q==","signatures":[{"sig":"MEYCIQCnRqMnEmz03f4b7AGbsgPv3kcABmuFQ1FiVgmcB+yoiAIhALUYPKsnrgyR9dzuMgoaUoYjoNdyb3ervCjzcewu8+LZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPSYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4eg//cAJa7zDPUl3BprkPTlcmf+4qevMaeL35bpGjn5Elzc/gi9WV\r\n6XulbCEl5KJcpMZQoUY1sBDv62Fbd477QWCjutlpfVyw55epVr+lVvSFcmst\r\nWUiTHzBp0RRMyri8NdPP0YmuIpRH+1j6ISKQvnUyH59uyxR+Jy7yK/fsXRft\r\nR5QpZIjE03SA2ZaqnrLwTWNG8c0IxrM98W8ZOGriXKNHw9PK0ALID0SgpXrw\r\nSjlG52Of8SFdA+tYZqlTGH7IdJ4v33bPu3uaX7kiA+8OUWwcrFAx5BmbtmWC\r\nvzizpqA2/A8s26a5Vm7pPwWxbbRRWd6mDr2QGOzWStY6plRhg8ewLozj9wA5\r\nvVBA2GTJ616FthXrsE4W0qrD8XzJWyKdFaOWOm8g6l9ih1kEVw2BmHIpDomq\r\nxCd87UWoJ2Iqlxfmg+1V1fR7IUS5a93ByovwtffbqskbFvwOlMbx00nGqVPt\r\nvFBmRJVLriUA66TKRJcXKJ4SQviQNTo3UdBcIs8IIg113ZYXCImUY1o1pubX\r\nyHFoTalITb7aTLe5yXrgYLK4v2ASxNEa0GR3rleCEft81GRIlxaEbEMcySWR\r\n2wWdE0Lr4Md9Wc3Jld2uBSsGt7ZoFkCPPxZuO7YW4uB6qkGd7h3F2Y1NZ2Sv\r\nIzvgk2az1iMyOSzNs1p98iD3oj1uzsWHdsA=\r\n=D1lN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.817002c29.0","@material/rtl":"15.0.0-canary.817002c29.0","@material/shape":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/ripple":"15.0.0-canary.817002c29.0","@material/tokens":"15.0.0-canary.817002c29.0","@material/animation":"15.0.0-canary.817002c29.0","@material/elevation":"15.0.0-canary.817002c29.0","@material/focus-ring":"15.0.0-canary.817002c29.0","@material/typography":"15.0.0-canary.817002c29.0","@material/touch-target":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.817002c29.0_1670968472216_0.5330219716509945","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/fab","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.313a1326a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d40b93de4e7c8e529031b2718324ad5ec632c974","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.313a1326a.0.tgz","fileCount":23,"integrity":"sha512-OyrbB+4rH0ojAXNsFDifE6f9VoBL+E5GP4PeyvUSVl4VsVEvQ0JeFTk5R3d+wF8WH5IbkvmQTnFfWmkoXYuIvA==","signatures":[{"sig":"MEQCIEf78zcdd0UUgNW+Oa63cG1442LEg2s3HsK4S4SuCsDOAiAd+WUzT3AsfOdVWpOLDXbs/PtnVfmr4Jfcf00bvcXouQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaWAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0vA/9GmI070Hnev9xrKiw11BgVusGpwc1x8u1I30Dl8tbminvNuw9\r\n8jKs2bv26Cq+6njf5QklictXXuMiFDBzmbsACv1ViIqj6y/4P95x+WBd0Mmg\r\nfktMQKDLnQrkTvO7xHbHZg2h5QLAnAvmGK/Q6GTiYfS94eqRJHoyfWbD2N9X\r\nTZMPPzIgxOApLj/hsfYz0YIEaLwBI3EvC701x3mtkwbA+ptm/Kh/i5AIrQ9s\r\nNmpb4e0PT6lvZkklVoi5AVX3vjpH2X1GxConXKDoqpkU5ffmV/gUp9itXLO+\r\nN6c5yY8d4NuLt7Go3x+KZ+kNqyeSEqexMrSnmNPmODx8tRe1+NpPHHSR0loj\r\nXkp/PsL52N7WO01/6Ju2mCilH+001XXTIguLNvPLz1mtfHD34jUNReAHNzi3\r\nShbMRu1wBQsWYQMBxr1XDni+Zxup4/CG21a9LBmJngEmqMFa/6O/KojmYSCt\r\nqfjIPpjzsxjgTiWnvXn6CzzevJxMNuoJiO4TbnPWgwzCd5+0cFzDE4qfqYPe\r\nIbcDuaV1ajSwy1CY771Ga7EPcJwys8k4BDbqu1DBPn58TL2Yesx3efS9n6Nr\r\njlXxyu/0J0q4U03bfDSDvrgxSeTUKMbU9Dc/So1KQJWQewm6CcrFzEy9/ymF\r\nTrsfVSr2qYDILpSK8HC6M/Fl0tnX+nFdEiQ=\r\n=Otf5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.313a1326a.0","@material/rtl":"15.0.0-canary.313a1326a.0","@material/shape":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/ripple":"15.0.0-canary.313a1326a.0","@material/tokens":"15.0.0-canary.313a1326a.0","@material/animation":"15.0.0-canary.313a1326a.0","@material/elevation":"15.0.0-canary.313a1326a.0","@material/focus-ring":"15.0.0-canary.313a1326a.0","@material/typography":"15.0.0-canary.313a1326a.0","@material/touch-target":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.313a1326a.0_1671013760471_0.8972991166861752","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/fab","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce1731c53fc516877e6f04b541e8bf00d9cfad2c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a69c14e10.0.tgz","fileCount":23,"integrity":"sha512-2QeLzny2svF+q3KWMelgH8M6OIiJR7eTDycjf6tlWE5iRXh8oRqC1FHYA5ly0Dwp6u7y3nl2KtiAUBu/6Zc6Xg==","signatures":[{"sig":"MEUCIB6kkoWruoyGANDnwOp6shEAcI5U4nfsO1r0qonov3yQAiEA+jnn0bdRVP/gXUYV/6FlLLynN39zTbgR9/wFIbyLhZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbFYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZUQ/6A0uIW1i0TFSjKYQmmE/PVasbgcpJh4K0GnJ0PSF6g4dnnaas\r\ngEQFsZvNrzzCZqLdKdiTcLzmsJE1qNU2b1yxVCdUCQpVhJBob2sx3N1qiKU+\r\nsi4GzKB8aGSsfAfG9GI2wKm42CKE7qYejoae2wNlogvLqvSW0s20qbYdKfIl\r\neeFrUljRSIlbVdrEYVhnwI+Zj38mdkkYUgXI7VU6oxUv3sMmXsq18lTf2LLf\r\nM760RW4iTZHbKXevhrtZGo95XbT8q9mC2L4DSFvmTpuEpxpqkT0yemriAzvV\r\nqMj1RBHXhqQA1pkdbMZVg0XvO/K8uMqYrc/gQ5uzV5SSxijqxdNv1I2nQCyA\r\nlq34SVIi5mM+8aY/jODx9UKfzHseNQRl+Gvph4IxS8qoevARO2XSnYQZdqB4\r\nkCRP39gBUxUx/EGzurn5T9FXfMRcR/Cbbf1kzAY0ToO+fW095rcqodldaewY\r\nJU1tUjuuUpg7RyglNov9gqwQNJnV+d6vreCLjX/3BSYT3ykukegyNSyu/H50\r\nQTdPxouqRrp0KyDNIfoLkI7ZnavPLBz9eiSMgqWXJIzP+G5b1iXb00qTNMfe\r\nPfJHYA6f9/bjgjsI+CRWekjzisWuuknEMARcciLf3m2qlGiEIgiGgJp8Ww+v\r\n0jFuNQMt/FuKiEmB+v2mD5B35BooibB5HcM=\r\n=ORIv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a69c14e10.0","@material/rtl":"15.0.0-canary.a69c14e10.0","@material/shape":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/ripple":"15.0.0-canary.a69c14e10.0","@material/tokens":"15.0.0-canary.a69c14e10.0","@material/animation":"15.0.0-canary.a69c14e10.0","@material/elevation":"15.0.0-canary.a69c14e10.0","@material/focus-ring":"15.0.0-canary.a69c14e10.0","@material/typography":"15.0.0-canary.a69c14e10.0","@material/touch-target":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a69c14e10.0_1671016792609_0.33719521902216454","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/fab","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0753009812d19d145fbddf22f97e42edaa837a84","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":23,"integrity":"sha512-fujimlxrAI/PbRohs14Ysx66uUmFg0U3WcbzfuLnlmHrgx1iaww3PzRco4DeIgW/VlKHI4XNizK6VCuhmlWKgA==","signatures":[{"sig":"MEUCIDG6SwVQfWsHO3QDtqO4dK3Wg+fSxE/SA3K6df+QdDQ1AiEAqzDB9HJjos7Ipp5Cp0Iwli5N7HhuzwhPBBqoB2pPAt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf2gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmorxw/9FNo7nL5D5AkchssBPt4I8iwCqkRK93FzwijlXy7/nEZLSkFY\r\nJv6ELHvaG+lk7e0vbJKqO/Wq7o7LePKOGmFCOw3T6BVN5viRnM2yj1/wv+0w\r\nqdLZt5fuQR7L0+BcLjmH/Iuwfsm2gOJasbOWwy6VqP9vQe2iT0bINe0L4vz9\r\ngF2btptSpluLB1DHL9x8ZJhrmPbCaVLxRmiI+mGSpWmKCzfj3zIrxhW2IG0B\r\nFcwAayA2CIkTZZsFj/LxLK2d/J882l4wtT84pR8lfU/QEb7nTFCqAgi25xXG\r\n1lBYW4B2J7CCJ4LXNGb6JBm7VeTiZTlSxsVhXw0AiP/TbXIEfEN9UKaCCTOR\r\nsDQTAj8JU9V4w1g8vci0i0tMCVCCLYfm0+/Q6pqy16DoYKVfQ3Ts/Sh/8IHN\r\nLRhL+BJQNIRVN2i3Qpo05Q6ihaLw3R6RUlo7SO+M8BJ/agyC2jyRzE9WJGh0\r\nwX//gxCLyIzrHtm6D+R6P0ScC8fU/47uds8/btZeNw1SjqJsOzmyIY9y7EAX\r\ng1tUZSEpq3iZLfGwphVB0jP1smyspxwgzI16sr6LY6jPTU1EJcfRlg6vzRaL\r\ng+2iLcnvtkbjjWUjBvcbUXf6W5RnET/syyxLUiZ+WSeallgrCuFBnbIaJAnx\r\nbbITcupTkbDScyawKzfBHBzjYe4xTGLmIkU=\r\n=dQe/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f43e0ceb5.0","@material/rtl":"15.0.0-canary.f43e0ceb5.0","@material/shape":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/ripple":"15.0.0-canary.f43e0ceb5.0","@material/tokens":"15.0.0-canary.f43e0ceb5.0","@material/animation":"15.0.0-canary.f43e0ceb5.0","@material/elevation":"15.0.0-canary.f43e0ceb5.0","@material/focus-ring":"15.0.0-canary.f43e0ceb5.0","@material/typography":"15.0.0-canary.f43e0ceb5.0","@material/touch-target":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.f43e0ceb5.0_1671036320371_0.35342462238185224","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/fab","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.34767110.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82c7a25a82652174861374ade435a51f8634a7bd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.34767110.0.tgz","fileCount":23,"integrity":"sha512-5tgEy6N5/XJWMnNtDV5ODweqxcHTEtB28sE1xax4HKvbHuSb7zbo6V9JnfXnxrToqvSJsHF56I5+OBKqeaygBg==","signatures":[{"sig":"MEUCIF8cP2en7dYxuHDjmSoVxIU/KGiFRAKKcYQR8bKZIq1tAiEApMTzmt+oRcmCT/up0ZYkv1Bsy57yZGw1/WC4uVp6wds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgXlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNeg//TX2PtRpgR78ncsFG9vqjCWnumzUUIf1q6N/7Nn1rHKN+xYOx\r\nJgXFlZjIisX0FVDAxtME9lhaEuP92Ei1eouWhFb6YYcPfFmmojlVCE6IJurv\r\nDDQyzTnJolAMv4hd/sktgXawuMcHoXpgh/G3X+4dvQChihhDvAdHk6sZoKK9\r\nJMaJ0nV7WUnLULu31Q1RsDWwLvVPlwbtQyL58Bf8T0RRcF/0Y9u5m5fOZEyq\r\n73rA1aAt7TN+zHVRqmaGNwbX2gru9EpWtlksyxjKroT0JX2TbOACe++J3RaF\r\ngQuKK1N1Eoeqjh62wmynlPwYwH8f9TGdO8hcPXdi6eYuqJdz87lHskgySc49\r\n6MXdoLcb/I2qb2IfyFuvOk9ZCI4huZTkalKOTeRxDXgGOgGYQuiUN8XULHwk\r\nP+dzRlre/mWK86/OEi61gdtMowQdUS25id+aS18tZcino6KCEUmNYqOg0Hhq\r\n75+uO5uoSzLE/KSMYHmyBAlT5VLETXGVgF6SKh1gLwfS3D0HLyQhOhtIxPsO\r\naWmBwuNUtCY1olq1faj0QsE/I2b59HFnMxkyWWIdRRPtv+Aacr9YLgKeyC42\r\nPAJw+8kyHCMHamADvCPLPn/F2Wsle+UTxamwISQ+0ZNJ5/FLP7R26pBFNVI1\r\nOIH7D01mRuhIKgD2iP4oDBmMmrXD98wxs/Y=\r\n=tiFl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.034767110.0","@material/rtl":"15.0.0-canary.034767110.0","@material/shape":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/ripple":"15.0.0-canary.034767110.0","@material/tokens":"15.0.0-canary.034767110.0","@material/animation":"15.0.0-canary.034767110.0","@material/elevation":"15.0.0-canary.034767110.0","@material/focus-ring":"15.0.0-canary.034767110.0","@material/typography":"15.0.0-canary.034767110.0","@material/touch-target":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.34767110.0_1671038436843_0.7807465839576964","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/fab","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e3ed52873301629cce8c21f27924a6831b4a268","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.1f99f3c50.0.tgz","fileCount":23,"integrity":"sha512-yVbT6BJOIjhJRWKTvOjgJqUXjJKTFUQ2QkRabpgzLq7hUDRQWRL7pewtyEK8usVSvVQcbNPaZ1fVzqsXjz3Vhg==","signatures":[{"sig":"MEYCIQDl2zpnzt11BXQK21NODQVwcOm5FdMxqJwJcc0Zo5SOhQIhAJ2NLST8Z6Tca3hgcQkngIuxwsGDRTd3J7gJA1PG9zI2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy55ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxJQ/9H3FF65X/QKgBOBQyWPy6z81H27fXNKptw6Lfqgag/m4bPVQK\r\nC0XCaZmR/fMYrK26rKefAtnuL7pDN4deUo/+cjdrVV5z5lehYfmr4CsfuiVk\r\nZUekv97Cb1EbDTy815sFmXsqoBfJklBmkZv7lg5R1FflxAgl2Sw5uSKJUPCw\r\n9NPY8nSaMdKDZwjnDbGY4ErUjtOqhs+uRuDa39LdrTakwAFEbvb+luUzUi0O\r\nySZvm+exemcAw2vvkV5rxLGb2O4hxr/J0/AR9xwIy+KH6J1WV+cWENAlJxUT\r\n/H5UJ/v1eH5yjUNFUluFZp5yipF4BfpagieEaKwBh8uxHUDzRCp5XvrjGtx6\r\nkUAjvI/i1mK1GDp2fjwo/rdrFKHF2RuHVglzpTnv85zxYPEaP7knejbWlpl5\r\nD1MXlxRG8aU0V729lDZsNvk9AlY9RAi+AmTY0HUTozVl8D4DovED70QGrSCh\r\nUalMt832AA5pkZLRSUWGlo0KZWL39gxFHhYMx0GtKyqLenTPSm4nUtGMNXY6\r\npTDlJMr8GvLCjBofK9xi452KcWZGDf/QAe5JLAVr5y8NkHIRxCAmoX+N/d+S\r\n0XW6Bd0ASSko2bkyVrbIA+7NETDce59aIFMfx3lUHqKilLtUqTI+gTRZoFjV\r\neTrifqpf3A43xKPgC45WzqKKwDQQZLJXAvQ=\r\n=/4xv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1f99f3c50.0","@material/rtl":"15.0.0-canary.1f99f3c50.0","@material/shape":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/ripple":"15.0.0-canary.1f99f3c50.0","@material/tokens":"15.0.0-canary.1f99f3c50.0","@material/animation":"15.0.0-canary.1f99f3c50.0","@material/elevation":"15.0.0-canary.1f99f3c50.0","@material/focus-ring":"15.0.0-canary.1f99f3c50.0","@material/typography":"15.0.0-canary.1f99f3c50.0","@material/touch-target":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.1f99f3c50.0_1671114361000_0.030663808198214237","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/fab","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f504c694b2368e46596acca7788e8c16523813ab","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.cfd69490f.0.tgz","fileCount":23,"integrity":"sha512-k53H6Vmqr1rAmKwqObJPU3kT31xaWJmYTA98sL2FEx5/6Jry5P0IUvHz+ioxGiuczYPK3L7MA012sVR0hxKVkw==","signatures":[{"sig":"MEYCIQCMH7Qd4YvNKDjNS84Cs5PkY2vxa6ynctgsEWUmtpRWRwIhAMdI/y3U1be9iRRHNyQRpSMSWtGPg6nZSMtHXQkE/hJJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNBeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3AQ//VQ4daOxWdR+/AIBVai62J0QDwhIaHHObMyP6gfWTkQLqt2qF\r\nbaRTbewCNyra/t8qSuigW3apOWfizNQllBSexQxXWfJ7TqlDvIiOXk/LUXUA\r\nA5TIpN594LH4iFC7mwOwudl5C+o6l0/sXlBpyM0aDQrx8SbYBtokaKaMoTDf\r\nlKqfEjrJnyxG2bukzXg3fPPQyPJw24nmv+wBxbK8qa/5M+x963gvrRL7dBVs\r\n5TkH5uV1oiFU0E2KJ34+/c08br7A9M09t6qrqDBxD+h6b6V44XlP/zcRQQ/y\r\nf05hxnu8ti8v2Kh6N8tfrlEhHTdELqRekr8/DDjnL8QQC+bXZCEZpzb8IlSF\r\ntZG5RD2KYjCruJD4V3EfRIDbafrCF/UAsWYJ4GaNsxtF7fTWfBcSpDOiXUpf\r\n1UPxt0l1LOkqcpnKwz7ob9dxi7hxZHyr13QmpPJaKB/OH2AsK/ol4xTjsFUE\r\nj/xhgsAIuH3ksdcYyqWGpxn7jSeey9rzxj1rwx8gkuVAy6SpBgDdR3U6F86x\r\n/FUnColrgTB/f38tWEN8Ps4zMfH9rzXTxxNRPqoaeJUTUs0+L1aWYDW2p2mT\r\n3vKshwejpFSOa3EXckFBEBEqdjJyMdlr4tdnthyfA4euJqnd2NepsuhI2gA5\r\nU/MOauUfDhirTb9GswEaLR6VN+iJnEWGNpY=\r\n=LR1P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfd69490f.0","@material/rtl":"15.0.0-canary.cfd69490f.0","@material/shape":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/ripple":"15.0.0-canary.cfd69490f.0","@material/tokens":"15.0.0-canary.cfd69490f.0","@material/animation":"15.0.0-canary.cfd69490f.0","@material/elevation":"15.0.0-canary.cfd69490f.0","@material/focus-ring":"15.0.0-canary.cfd69490f.0","@material/typography":"15.0.0-canary.cfd69490f.0","@material/touch-target":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.cfd69490f.0_1671221342017_0.7645962518570151","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/fab","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d7e5c1b3957f3080f1044ba2ef1151f869d0078","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.94ad8d986.0.tgz","fileCount":23,"integrity":"sha512-5LqlO/3KhPg397FI4k7GWpFb90Y7Fn2p/kuZMVEUlM6H8bcOj46z5KjlcLJ7hfNzgd1SAxPZ20EUHlnM3WEMGA==","signatures":[{"sig":"MEUCIQCwC/9kHItJZ0q2gEBWXO21mCeUQa1rXxWSSlYax+gIHAIgZuDG65C6VfNA/nLWDusUVPJ4K5ao0733k87p/e212gs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLsoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo1A/+OD0Bd+F2RxS5HlZuVIH8bhCbZdvpatOk5nO5dclfSqSVKuZp\r\n+yI0UhvT+VTycbItrm9z1TpLk7SscfZfkKt7ZseXKtGJBp+r+oo26QmSAoT/\r\nyWUerOVP1rxO4HvJWfudv1PvbW3bJGT26YT8tNFNdxnni/B/5xgzOD4IhvhZ\r\nJYpciK9sYgIAs6mvqVeOIcp+kOecZFekThmhoSswTMfIaF0s0rFZ6Y7fMSF1\r\nlFk6+9O5eEJwCqSJQ38jV1NjrNTqn+h6OUohr4DjXVy5sCEl/S6LBdTfU/8z\r\ngub9ooKgy4tV13YZ8r1QBUMxtmUjkXCqd0hPY9uiAgWx8LEkx8XBADiOzW+7\r\nhNoBXEPITPb6g/ldqdBMfxsnZlYEXgufM5vUGMe0XnyftsTYHjl/7FaNiHiH\r\ndbW3xU1Ef9HdhUUAkOgR4FlTFezvP1wRR4nS9s4jhRkd2nupoyzbq89XC4c8\r\n4lteYxx8MaEcaV3U2mS5QFOUOL9YctL/hPW0eIaH1DON2v3FCo6R9ylopjZ2\r\nF0wlttTJkE4AZ5Xn5Mr/hQoqy6kSsx498wynXuJQDNAHPD1toEb/SrWuhnHy\r\nKxFpbzQrlqzJJQkXlzX4TZA17r9Y+n0+vRL1MppGKmvSgzcJLtiqiSZCDWo4\r\n9E0KqKBoE9qES2K1wjtSEwQCRI+oOIryrAE=\r\n=hGyH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94ad8d986.0","@material/rtl":"15.0.0-canary.94ad8d986.0","@material/shape":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/ripple":"15.0.0-canary.94ad8d986.0","@material/tokens":"15.0.0-canary.94ad8d986.0","@material/animation":"15.0.0-canary.94ad8d986.0","@material/elevation":"15.0.0-canary.94ad8d986.0","@material/focus-ring":"15.0.0-canary.94ad8d986.0","@material/typography":"15.0.0-canary.94ad8d986.0","@material/touch-target":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.94ad8d986.0_1671478056460_0.9282261251122299","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/fab","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.604264203.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87a4aee5cefa42d208a0daa15165d53210b1f532","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.604264203.0.tgz","fileCount":23,"integrity":"sha512-9mg9PaoSMUDRv42SCh3puN8zIEhzp2CYdmKJE+5glutK3b3NDwGZZYNtyya/7U193BIBXXYi82focpXh2OiWxg==","signatures":[{"sig":"MEUCIQD4TL71lX40FQu4ivLr30iUFvfJKwRgcpF61kanLLE/6gIgDhCWmZBALxmFlpH2RTuigyK6STqpwplfpaQdeVi1QLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo317ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXrg//a0ZpHmiSQ0Sc5dzF67l/H0gUVh/pd3bvT5r11H0oBYYmHtQh\r\n0Uk9KgWRyHo8FBWed+J+n9B6o3c5SdodcYgHHIUuXW1KAulZ1hL8L7aZ1AKu\r\n7NJY5vWe9QlkQKacItlSMMsjb6diquTJV9OAKZPV30TJTY5R5TMuGp2G2tEO\r\nIRJSl8rOYGcKBC6lrE9AUBRLz2rMag+9K12xdMGbFuA9WMo38FelspNASViN\r\nX5vMunNBh1mbXqkNgFG11nE3HazF8qwom7b20Nu381iSWAgt8psaBf4Cnmqq\r\nLrMLq5AtXZIg/s/yPszJGC8hPwm8bpF3gB27logwwrvXMGl/C/FbDAGvItUe\r\no1t10ocGxv868iu1SsiVcxmkcdSp8AJQpn48xhlwTWWioQ7KNojHgywurIBT\r\nLdye+8we4Y/Z2QxaZ4gVRlVYRZ0+xhMQhKRGatVBa7wT9P5sScLamROC8Y9x\r\njGzgHi8vn32tPmchVYYfTGWUou4aAnuLLp/HFmdKSQjou2JJdWzv/93E8JO8\r\nqRNrUYwr/zjtmL94KSHXnl0WcNHlUc+kZ3A9E+o3+2IgzxoUt3OxoMVA7YPc\r\n90TOP+nyp2paHkPZ8Pea0TRcSNIDW0ltabCBwT2nJADUf33zkptkGOeTDb5Q\r\nTbHbNGzjl/60a9WxxCF11aVy+Ckgx0EpufY=\r\n=upmy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.604264203.0","@material/rtl":"15.0.0-canary.604264203.0","@material/shape":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/ripple":"15.0.0-canary.604264203.0","@material/tokens":"15.0.0-canary.604264203.0","@material/animation":"15.0.0-canary.604264203.0","@material/elevation":"15.0.0-canary.604264203.0","@material/focus-ring":"15.0.0-canary.604264203.0","@material/typography":"15.0.0-canary.604264203.0","@material/touch-target":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.604264203.0_1671658875390_0.376700004852067","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/fab","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a4b9a38130b0d97354afa47d3bcbf60254e2f12","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.85bcff6af.0.tgz","fileCount":23,"integrity":"sha512-HsvZZ2BWW6nolwlusBuqgnMH+UULltKgg1E/GQVa/dquzmwLIO8Pt5PSdlAGSxm0jvpf/SAN2YtUpdjNGsu5zQ==","signatures":[{"sig":"MEQCID7ULz3gD5u6unhGWZhxLfN4rUaHjwGF0jvHSxKFd/F4AiAu1RtqRBGWukkEzLi+UqGPkciFQME7OL7PqFeDNcdq9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDDGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsrBAAmPm25jWrPn+nu8GVyVrOaKEuptKjVgQbvv1tfC+UhOESxbcv\r\nRqXL7XgmDNLXnwoDSJ1LwyTXjP4WGVadN/CKBksx8U8L3p1X39k5HRQNXO9/\r\nkCyxN5lvaqT6jDknT/W4uyUgovbaXMzMJLMWNqP+iiMCmkskMUJZGu5GiXqP\r\nwGJ6v57sQgjHHbE1rIIzBQTuI8ALyYgm0b2Jc7Qyrw6tSLLcWNa23jgo3Fyz\r\nhGWpYCHfKYuw0jinqFQnapf4qWdcYBiAy+P0e79L8nxGblkSfgbq6mV2aIIP\r\nND22yti1kAFRyg256vd0WBOOI8ayIP4LAkkZ34vLZVvLBDl2WpWZl4zpcPNe\r\nnAUtVF5X/BcNTSI5WCx8CEJ5nUinyghN82eNdT0xsl0LQJrnCqn4+dQcSD39\r\nNVqHXla79uy/aRdQq9nJz8QC/XbwDL9VMbfN5VTq5CP55fz/IkFLuyvmGnv7\r\nkmj1XxpjPTmd3yU9e4yzJA5U5LIA0aprj6k0xzUuUk15UIQKokCKLdg4QaTw\r\nfHl5vKFe/MNgJJbyesC2JMS+/ZghqYa5gWqAoC1NiltjPjzELJRqpQfk0Oo6\r\n3FzrkDsUNexG3GAY3TOjbxDLaL2UYavGMs+SFEo/IjQFsWrTCuMOVJbJoEzP\r\nxF5gRIEycDbapDrvsSEsWBYChg2ZR2g/iKI=\r\n=7ash\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.85bcff6af.0","@material/rtl":"15.0.0-canary.85bcff6af.0","@material/shape":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/ripple":"15.0.0-canary.85bcff6af.0","@material/tokens":"15.0.0-canary.85bcff6af.0","@material/animation":"15.0.0-canary.85bcff6af.0","@material/elevation":"15.0.0-canary.85bcff6af.0","@material/focus-ring":"15.0.0-canary.85bcff6af.0","@material/typography":"15.0.0-canary.85bcff6af.0","@material/touch-target":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.85bcff6af.0_1671704774191_0.499637193523359","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/fab","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9cff709b766da034b84f5b4eda8a3c827774141","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ece3e8d21.0.tgz","fileCount":23,"integrity":"sha512-wXtpRi3+vTbNltyjEg0/AcwfbI5xFmBZA6s+bm0VDGy6F40EFVR0/4PKwL5tnhJsJwlLFGkkNai2ilcNuTUA4A==","signatures":[{"sig":"MEQCIHvw7qFQTxnV1NKjSRV1ddi/MjqvycQDOuZZ+b0TeomIAiAvT63D9ui+1+HNzJsiH8eyCdtTgu4Ala4wLZXRAOdDaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJAKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRQw//dWKCtXYFpdYlwwqcx24PuAALpgvlhsHuErDlYqc32+tsI2Gt\r\nvZ7UrAWMqJUk4vV/NpilqwC9E2wOG2+cwuAqSAVsiehljDc/AxYs8kWTzUae\r\n3BBY+tj4hyqicSDRVns/W6A/xAMk/sjdPjhX4iV2bGY6uTLzc+RFO49eCq9u\r\n4IBe7wp6uzAFmdcdpxXI0WkwmXXMLtoE5eRLnFxeuaD9KQIasXVg6onyFLoA\r\nCiwTucfBt7BNbdJyfx11t35porNK9mGbg1D618vX5PyZx/pr9/sZ5Q5GDUzR\r\nLm9k4esTrHTKNXuK2+/DwDJHy9nWC8qqIlka1iJZwp01Z1PicRzCge9HoLWQ\r\n3Z3NzZJGjDioe/DuxQi3Pn02i2jcP05apLRNnlU6pGosfXvGVEZp2egv/xRH\r\nCIOx7jTXgSdiXSwP3gU5WWOlNAc4njMPsEbuvKft5dIQq4h/rGBQUjL5CATk\r\nShgTzXo9BHSv9uRzkSqsne6shy2kaer+Q9NStChQzdNpUWZO5Al+NHjLCncD\r\nInUFz4v0fSvVQ7yGVpKjYW2qkc5v7oSotHHU9tgmFU2fYt5xuE1R4BLUYj7s\r\n9+iBvE1K67ahwzj2vFNpyJ9Gg2JsCMABZZ5GQcJid5z5pF/glNyH2DoDTDhj\r\nj5PRRD5fBAtSpngFnXBCWhSrqcoZrKv90V0=\r\n=rVGJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ece3e8d21.0","@material/rtl":"15.0.0-canary.ece3e8d21.0","@material/shape":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/ripple":"15.0.0-canary.ece3e8d21.0","@material/tokens":"15.0.0-canary.ece3e8d21.0","@material/animation":"15.0.0-canary.ece3e8d21.0","@material/elevation":"15.0.0-canary.ece3e8d21.0","@material/focus-ring":"15.0.0-canary.ece3e8d21.0","@material/typography":"15.0.0-canary.ece3e8d21.0","@material/touch-target":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ece3e8d21.0_1671729162264_0.46614548486812457","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/fab","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7a026c84ef4b5f44e38c7c8b0d37466430d3e49","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.278ad53d1.0.tgz","fileCount":23,"integrity":"sha512-1pivvsAsRFV+KjEA7LGg1sU+A1uy1bUqgPTar8KXncvlIgPSTd9rHA2e6iDmRNO4Iru5vao0D+IuTxzeUYWahA==","signatures":[{"sig":"MEQCIGTen6gB3EdIEb3By3nwylLyJB29WgkV/6JgMyyqNctIAiAyMY3RLZqFZF5+QazFOtCwR1G4NN3Seyrx+vce7RVqig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyXfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHSBAAhXrMrH65rndYO6mkxlxsYJY58nY/rmCuHJaKtxydbbsN3F9J\r\nJXuJmVRyF/8aw0JeeZz2I/FH8QVibBn+tanT8MMML2OyVqIwiHX+qgeLQvWD\r\ngT8qmxcyWZcyumt9Vy+qNWpN0s+k7DGHlFpbvdf0ukXzZ4Q6BHis8vQ9eGB6\r\n4TwEDV2BQUJAv6gAV8FSzurl+Zf1brt4lAHhdvZMlXQklPLmHTj4J++rjVxW\r\nHX+t9iU+n34G1LJGE1xYjAf9Ug5Pd4K5Z8ZFBy/yX0KJcDMZc6AEfijoe4IS\r\nM6HjWt5EWH8fuEY0KioCZY7dxMO0wECWtEeEesya+2zx26CS2CBdx6jjluAD\r\n2iJKZWc2BesN61iV+89j81Ya5ZMDbdyUh/CXU7RJfASItlvSVvfM65rkr47O\r\nbeM3t8nMPQQVRQ6vRhtb8Z7dysMrbkmaMZIGp2tZy461GFV0gV+IasQmdczl\r\nuQuaC6FK1uXasvDF+W4TY72rVwdl+eSRz6SdJ/XOpRZ09jNKHtRsmmJNtnh0\r\nvxPyA1Gc4G9y6LGoU6pGZC+ACn9aeV8Ou68SleDaXT7hE1ZoWxO7/zV3qrzx\r\nZXub6nD0wTRCWZ6eKZCBMtm4iMoVGS+rV4uPGQZK6Mchc5Ix6g5xTHr5gUwn\r\nQjqoQ8dr22bYJzMLgf7sJlWAdL803Y6gKFw=\r\n=tqrN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.278ad53d1.0","@material/rtl":"15.0.0-canary.278ad53d1.0","@material/shape":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/ripple":"15.0.0-canary.278ad53d1.0","@material/tokens":"15.0.0-canary.278ad53d1.0","@material/animation":"15.0.0-canary.278ad53d1.0","@material/elevation":"15.0.0-canary.278ad53d1.0","@material/focus-ring":"15.0.0-canary.278ad53d1.0","@material/typography":"15.0.0-canary.278ad53d1.0","@material/touch-target":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.278ad53d1.0_1672160735308_0.08957113764381663","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/fab","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e23378652a78fe59b072b7cfb28f577414c5eccf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a7d8389e1.0.tgz","fileCount":23,"integrity":"sha512-6eXFgGrvKqOiQt69C+RZSGCTBIOoB4LVkJAb7HwOPZID3BlP+eWF7SjvJ9lDx+zxkx1pN/G/e7aLWE3JuUguPA==","signatures":[{"sig":"MEUCIBDdBW9UzdmtS/ZUgNkvnrqqJEA4tk95Z3+5TFmoP18SAiEAuphj/kmo9hVsdIOGC+hcNgnWjBAVg9nyqQ3ulP3PA/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0GzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTyA/8DdF4ueocP5zsuDfbC6zcthW//kaddjOhOONo1L9w1pp3Nxv+\r\nDtCf0/MHuvb+yNdxkYhsOtTPd07UufqK44bAXuwatyvV2l018MLcnoHqt92C\r\ngULBSOuyEobJsQ1PHaIvDbtiJWXb2NedOkISfahvFPoPNR0kFZRi5cZrvl73\r\nJNNNiVMlEIS8yex3ROzZ7lBsWWGIf41wBi6gAZIryoMR/OwzK/8QUFlCsA+6\r\nGvDHXXQUMe3oVfxdpC6LaChVxHUu13+QCCNiDC62IbjJTsyYfB69Kr6K0NaU\r\ni4IyQu82F4e3jaQ3sJ7ZIHiUAbDkP3tpcupg1+9sa4g64BseqUx2pH13oGhZ\r\ncfWKee+jEAqgfu/e1J5IUV5l2kZLPlekCQGLJb+Fwai8ttvEybhgm2w7sGMk\r\nO4jtmWkNwB1h/5xQAhtfdQ9gus28TEdcUYK6x9MFruaQFTbCEkC7h4C+zK+u\r\nUwZYbuIEQV8Ga1trxtbISNXvWV9eVMRDQ38sx733GOm6FDx74/NKPAgfZW7J\r\nY/2pXt7HcumP20QBKw06j3Ir+N750+K/qQ+6TE195MT9NPrxPtqMYA/OM6sz\r\nPdd54MpnYBVNiP6HSPKwaSKANsv83QGemaSC9kkbindycFykDr4P4GrVT5jY\r\n0hkMYrI423Gm38aNP9FX9A+bPVJf0GmTsMY=\r\n=MLyc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7d8389e1.0","@material/rtl":"15.0.0-canary.a7d8389e1.0","@material/shape":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/ripple":"15.0.0-canary.a7d8389e1.0","@material/tokens":"15.0.0-canary.a7d8389e1.0","@material/animation":"15.0.0-canary.a7d8389e1.0","@material/elevation":"15.0.0-canary.a7d8389e1.0","@material/focus-ring":"15.0.0-canary.a7d8389e1.0","@material/typography":"15.0.0-canary.a7d8389e1.0","@material/touch-target":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a7d8389e1.0_1672167859131_0.49030468128444604","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/fab","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ac11af1e5be50bcf615865537b9eb2d03a8f0bb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.8175d5eff.0.tgz","fileCount":23,"integrity":"sha512-I5eZww5r8tdtwHw5Kr8Uljnp2y4ierUMAdE1P1Rwyjl5e1EKq1Nl1FpVJP3GbMOqxK/Bt3lq3ipt+1raDxSJFQ==","signatures":[{"sig":"MEYCIQD3750UeBupKG2Cp/qowQzCSSJ4MzanNt/yGZw3mYIdgQIhANsZD5bQTpXLv03WPFdz+ZT+pndMrLIbSh2hXWxGPcRE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6FKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBjw//YBtXN8cXPDjLiG3QKkbAMUhm/giT+gWs+2yGI0oWLLvCMBFJ\r\n3IB/B3C+DRyO3MUafFJXjzkgXzbO7bNEIo3CHihCeIS8Mfj+SoSc3f1gOC4K\r\nu4oNUI1utOm2XIimJLKVwsqgNaq8r2equM4NlKFxlL6jRki7+FDxj5xr5jde\r\n1HTAyZL0vJSFemMBmaxYYVYK2Pi05LsKHqWVR1rjVDI5Y+BVMlxw8bPh82ve\r\nQk8IxdgEcMdPGYEWm+3da8v/cglS3upH4fg5nHGSIQdUNfhEwJdVgRvxgNlJ\r\nfgwtaZbInhO8q0phHr6uUh2VkPDH7E/sYFKjyA66/COTVL806SntX02sUWct\r\nG0pmkmb0cjl/toS7SfhaxIT6DKDVj4w+sjhCAHouJ7fRtx0c4u1aZg/yOAjr\r\nizH60zL0DQx9/dob+aWDJzm/AjHDtT6Q6wxP2gQSXGotOTjqsct5xLlzHXPV\r\nGCkn1FNpy/SqT/CIty0sY0l9ANVLWAgAaCvhwYOUsnV5P0YmYyGv8CVcEAZh\r\nw36qlBBLgEX7aUmDxrzb+fMlUqi03OQC4QWK1ilCYWZdoU5hJreW12FzfA/v\r\nMVnyWqPpI9a7hvNM6rN4cofcrAFgazy9nQAOo9zO68WqLcDzRUSdg9IhLKU5\r\nMqILjg/JKcRCq67zjx1K2anb2YVSWbxey7c=\r\n=7kCh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8175d5eff.0","@material/rtl":"15.0.0-canary.8175d5eff.0","@material/shape":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/ripple":"15.0.0-canary.8175d5eff.0","@material/tokens":"15.0.0-canary.8175d5eff.0","@material/animation":"15.0.0-canary.8175d5eff.0","@material/elevation":"15.0.0-canary.8175d5eff.0","@material/focus-ring":"15.0.0-canary.8175d5eff.0","@material/typography":"15.0.0-canary.8175d5eff.0","@material/touch-target":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.8175d5eff.0_1672192330339_0.09842022535681272","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/fab","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7925a2de563385646d86e0196eb06e1137555a9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.e21dcb86d.0.tgz","fileCount":23,"integrity":"sha512-lGSki69LTh/1WFWgvTHYyQcLnUjYAVi2AbUoMNGFSjqRCrkgrg24WSwBCYmlotZSJBNJsYlgjK1u1A2JEd9uXA==","signatures":[{"sig":"MEUCIEl++p4MM2kFg6qeDQu8Uo2xtmrsgFkBxtR8A0pGc26rAiEAwq8fpSpOr/wSnBgYgtXGsgVnt8Dwy3m5lyp5H/9Jl20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ4BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpXA//c5+uggQjqBhCZK8rufhxF+dOgH4bvYKzodDd3CLXZsLrjnWV\r\nTX+b9cAdC8Q8ShyybbAk7WQ9iuxPn2R10PRqcoC462zJiyb3kD11CU5GT229\r\na1qix5YqmOfWtJUUGWOzLEiTTNGzV+GPIp38/WlUXRQ1aWzps4ovpfYxCLVm\r\nNwumzwYt3AtCtklHNJGImjm6vr+UMZR+eGjPsG5LHJZ6y4XrMt0Dts4RDORL\r\ng0YqmkjMt+Wh0jqbq9AI7co6aSkR7a1pTbATmLCCCIHH+U3pgSosUFNa0Qlp\r\nwz11tgVVtcQsmG2KlyStpVKBUKR5aM6z8nsCJqWX26VB8w+J7YlVT1uvSYA/\r\nNoI1d/i6jI8edCDeF2ei0IFKXgZ6U01wskWX0Iti27xaEVrR+x5efA/+ozOM\r\naog2SzRNzMQ+NwvzdawfTct3o4wjHaAxjZwXlhIBvwvX0GihMMreactlszm1\r\ncderE0pvZMx4FAN09C3tCejIWUozhKxInmYkp4YvA8eEn+E09D6I8dB+UEse\r\n4Mqp7hdBUvAn+2n599pratS3ZpX7aEl+JpvWJlz4zxA4ir4BvSb5UzAtqE2D\r\nRSYFCK4itBZRdiAmdP8p+ziGPY4qzJNgvpa56CnQLBn6ej1CB8T8e/Ow37Zj\r\nIY4mL/6kp5l7CuA9NAB4lFMUUR6RgTZUtr8=\r\n=DdGl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e21dcb86d.0","@material/rtl":"15.0.0-canary.e21dcb86d.0","@material/shape":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/ripple":"15.0.0-canary.e21dcb86d.0","@material/tokens":"15.0.0-canary.e21dcb86d.0","@material/animation":"15.0.0-canary.e21dcb86d.0","@material/elevation":"15.0.0-canary.e21dcb86d.0","@material/focus-ring":"15.0.0-canary.e21dcb86d.0","@material/typography":"15.0.0-canary.e21dcb86d.0","@material/touch-target":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.e21dcb86d.0_1672322561489_0.16513346557566622","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/fab","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32c2cf20e568b1b01cfa6d19b619e6a9a2933c84","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":23,"integrity":"sha512-agncWEQMOh8vK5vKRviuw4XQc1UtgHdCkS5VjUGBqPrR2zQ94/ac1H2z3jIbbLqHhEvduZJVrYj9m+39wU32Yw==","signatures":[{"sig":"MEUCID9wcoiRMU3HNroeUmD1QWWDmsvsOD5lKs9xdSP9GYzUAiEAt8UAuoOL81Pz4JI+49KO+jvGcaP86kjUEaMaYNgx4iQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre1mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrotQ/5AYffeiDr5mqL99ReU0YktU3zb0iLWNPilUCtDN4R1kfnJLyK\r\njC6r3ashJrK+XvM59sBlZKfT6rPJXwZEgExEi2IxKDKkSPjsChVrRzu5272W\r\n+1jyrRfZSBI5+IW2nLLTL41Z29JkVp+bPFS7WgMtvgAjC2Add6qhc69/4UZW\r\n60Op23Kz4dgd9NdigffJ+d0nWgltx6BNuYmvKiNdtl9tRNubRwNd87fymVce\r\nId0kfuSTzTIJfVLxEK3Gsc5Bv1ldpL8+Nd7tTmR/soKsafYrgFL37xH9PTH+\r\ng2cscQI1b6L3AyDTI3uZptbiU3esKHiNhZ8qxGINNZTKsfElSV7vwQu8iC68\r\nrY7QFmcSVEjsxIqU2vhbDTyENB/gpgaYYBwoWafAz2ClKqWjnQpiedYhAkA1\r\nlGjjnjmWR/6nwrUvbCoTC1QVI8CJOVFyW3XrF648PO7lq3fAUIRZcRs2ItHI\r\nUJ4sjo3rvV89Y0AaW/rV7q/8iZ+Q7ZSSrU9UAjIEwGY0OsELjWLRTCbqy/aP\r\noQzkrYhcS/4A6dE2Xi2ZcHrT7VTwyGikQ/5OKc9t5I2En/lD2kdlDRMpZVAi\r\nqbcz28EZ8pvZetGquAooBKPQ/tk/QN5McPjA//U/GY5Rwn8WXriDb/Y1yysP\r\nOcNZ4u817xz8cl9E4SHcQFkPYnOncquaGD0=\r\n=r45v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.20ab6f5a8.0","@material/rtl":"15.0.0-canary.20ab6f5a8.0","@material/shape":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/ripple":"15.0.0-canary.20ab6f5a8.0","@material/tokens":"15.0.0-canary.20ab6f5a8.0","@material/animation":"15.0.0-canary.20ab6f5a8.0","@material/elevation":"15.0.0-canary.20ab6f5a8.0","@material/focus-ring":"15.0.0-canary.20ab6f5a8.0","@material/typography":"15.0.0-canary.20ab6f5a8.0","@material/touch-target":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.20ab6f5a8.0_1672342886382_0.33628932280296486","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/fab","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b9806f623.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a70aceb8ab423e505b597a54e96f7ab722fc6019","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b9806f623.0.tgz","fileCount":23,"integrity":"sha512-ThA6adP2rHy0IDsR0v5fjkrc9BjiVeF5vOUejMHH3rxzwLjfmVsSvx2DzOq2QAh5JCr4EW6pdtLpwQNhLnQuoQ==","signatures":[{"sig":"MEUCIQCDbcefO6tMkLuANXpr7YPAyOYNb/zhmrVvtU0fWjUKLgIgLgcxSxtt+OiS5iKU5XGeVXMFNDbwXEysF/arRsvFV+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh1sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq69A//Y85MNdd/luGYmq4XM5O2juADsxZWfTVoIgcg6uwHpFpqHbNs\r\nOAiWyXjIK0XZ34lAF7SIh/z2D/sw6BuE7Kr/DDCaDw6fy5A3tjQ895oVpSTC\r\nv4SsmKEAxI/zl3ay1NM59nHOSCRBkhEzJrWOYnNb0Wu4gaZ/yvOaevz1r7Yr\r\ncLd+ozanbwZCf9/J7hGcd9Tk1147res3SSb3aDD3Y2EE/Q3TPMAS9jQWlywO\r\nrxqlyZbXU4/jUTrZBuR4QLuQiCmj2VYKJlBfYNVqlsgijRgQp8OKs/tgaVFL\r\n7M1hoXstvQIQ19kXEluZVvUIvJhU+WEOKUQUiUEJMG+Zk/zJ6X9DGl8t6Fvp\r\n4k6l27Ehcb8bziMq/7uA+5Y8AqvdPvoV1TH5VHdU51ctkHD9EjaMA/XgL0zX\r\n9Jgq9GNIrxsLVkyMFEYkS8Jhd9NDO5CSzA8xW+AospDyqnXzdkdzgtDacUgA\r\nlxzPsiOS/zbtP0SHSTsAjiUhm26CBameaaAr8RSOjXLjxgnlZXqx5UDUsThV\r\n9rNkyc62PsYALSFgKnZGNMTwfqtEDPVXMxQzLx1XFW4407FimRDuxD0/tO3W\r\nPCXTvWjTbEe+xzsLqjgeY/PKEAYyYqVCCVFvJZRkCEN3SmPrKIdfy5URHdWQ\r\n6q9FV92Wa9tgZkwehx4rebUICGms/p397IA=\r\n=55Aw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b9806f623.0","@material/rtl":"15.0.0-canary.b9806f623.0","@material/shape":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/ripple":"15.0.0-canary.b9806f623.0","@material/tokens":"15.0.0-canary.b9806f623.0","@material/animation":"15.0.0-canary.b9806f623.0","@material/elevation":"15.0.0-canary.b9806f623.0","@material/focus-ring":"15.0.0-canary.b9806f623.0","@material/typography":"15.0.0-canary.b9806f623.0","@material/touch-target":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b9806f623.0_1672355180292_0.45610218609046527","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/fab","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f404ef817f47a2800db7c1b4924d9d59db676acb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.50c9f550e.0.tgz","fileCount":23,"integrity":"sha512-FlQr2RHfVvdRfRI24MUIjvHEVPioLPTxYBEV+GIKtcqxrduOSydWOIetC8fNIauH+fnQMBLXXspNKRnV74MRYg==","signatures":[{"sig":"MEUCIQDUSYpUAV7hhg5Yr8Cz4i6YhtR9lWJB/QVsBv3l5Iz5+QIgfmUE+ixBm/uWUCv5tc5ZR2yne3zPtseiuKcu6QK7Gk0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE46ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWDA/8DO37VOSc06SeBz5CH7CMjMHWtu8gMjf+cA2KfaVbJnpga2E+\r\n2wXLXpUEKVTDUp/vnEdGzkJHsK7zcyzIqFvUGVekjpgaTRH8b9bZp752FOFB\r\nKrEW1kEm5EtXiVvaSsVb0GWTtp8ELGSsKkIK8R9U8KFGEUuUNkAxouDuksZI\r\n/DvcKrvak/4awDo/kcTRgHuCt9QQ/q/7v/1ORRtJxz9PBDgX/o8z90wm1KkC\r\nlxqZym2M+6GUbCh+aBODvH0FBeLkuPF8aJFgsoVwWov1QymZcWEjtHkN+RRu\r\nJwJYbb4X00QHRMYzdORAJorfnDsgxJS4ZpxhzvDq2+FeNX5LnugbWU3aH3Df\r\npBn+ir/SnpuHclMglSDGoXy1VzIWgAkV9oqzz3MZaaa5Kqu1QSR0gi+kNO2O\r\nce5e3NWDgH2gByqeBN4vFlwn9aQ7XS28iUBRih1XpXSUU+t8oO7NZI48M3iS\r\nFQ7L6ThYJNSaxnScPY6z7sJJoRCasoGsc8QuSXm8exTC7oDhKfXb6ETAjX19\r\n5tVbspuvZsXODahe0UW3JmrgBtrqflNuKlYxe0Z6R9T9oX4V8/omjsCeFf+M\r\n2ke9yLdz2xCsGSBiQ01ucG+qqIkjIMfbi6tCq2U9xH9EXV9YKnrYECryLMK8\r\nbJWQY86vlGnaFrp2lYzxHlYMUTzP2JCBXnc=\r\n=J0uF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50c9f550e.0","@material/rtl":"15.0.0-canary.50c9f550e.0","@material/shape":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/ripple":"15.0.0-canary.50c9f550e.0","@material/tokens":"15.0.0-canary.50c9f550e.0","@material/animation":"15.0.0-canary.50c9f550e.0","@material/elevation":"15.0.0-canary.50c9f550e.0","@material/focus-ring":"15.0.0-canary.50c9f550e.0","@material/typography":"15.0.0-canary.50c9f550e.0","@material/touch-target":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.50c9f550e.0_1672760890036_0.42391629974013245","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/fab","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.af490a848.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"801f70e38ae3e1e7a034dcbd012647c7ce90b0ad","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.af490a848.0.tgz","fileCount":23,"integrity":"sha512-AlX1nl2D2xIucYSxKZYn25H9fz9tUTbcbh/qWt6mF8lVQIAMJKWPWfQ2yvf7Wixaw9+bYOa+NSXvETWqnNvxuQ==","signatures":[{"sig":"MEUCIQDBh68TjpUURVRx/nRfeCFT/UoR8FiEYnBkyWOJJRkYUwIgMogI/WkD7ZTMue10kplX7fhsY3sVqk+qD5/nr/ZDWqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFCDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEeBAApNC5KjtdtjASiKvbZSY2jA+NGaJla1RBehIm/rkT9xcwiFtv\r\ntKFUpJ8Qu5gjZFzawPI6rYuvdWy0GpxhDkPWmvy7mT6kUQei3rNPq0qY93pO\r\n41fp69NxRmx1Zr/m2Ony9pfoRQr7Wr45SQ27bztxo1Ma4NGFiaPMxIP5zua/\r\nyZFdRxEH4/QdvxSkoCtxztstnviR//E3SBpFaN45ZpNzKnxRblfQ+iONQJz+\r\ngOJMqsd14lRVPSmhowYslndtobM2AlpVpzmtVYHbFFy4iQ2oTakVFaiMZcRd\r\niykNHmaCZSVsXmzm+ttpFevRMFfA/ktOFhX8K5bO/mwmO+EfOMtTkUKuEiC3\r\nsoyj9mmWiFoKdmq/Wc4+C1/wVA1m75ahC/PNrDj9SptnqWeR19UGNtuNy0NA\r\n1G0DvX9cDdP2sEgyxkZUjsq7TGP1WmiJACQmCWJ0C/mAncJD4yjtA/HJJ0RM\r\nzYkjKQXmfUkyIGQdsIlDClNMydAT3c1W8otg0F2Vuaszhuh5cHuZ8j6tFFki\r\n1vLY7BD/0R9u07+TM6OeYozljLkpvScd076/a+TLp4JcD5EmSm0fh7Kqt7aW\r\nWG1zicPWxAgU4ZPEjrrEHrDG8RF47OzRcM/naz4YBuAa6dCpuIw9on9s76aP\r\nNK3PK18u3QauYl9UMgVQyhQrem7+dHJVXYY=\r\n=hHwT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af490a848.0","@material/rtl":"15.0.0-canary.af490a848.0","@material/shape":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/ripple":"15.0.0-canary.af490a848.0","@material/tokens":"15.0.0-canary.af490a848.0","@material/animation":"15.0.0-canary.af490a848.0","@material/elevation":"15.0.0-canary.af490a848.0","@material/focus-ring":"15.0.0-canary.af490a848.0","@material/typography":"15.0.0-canary.af490a848.0","@material/touch-target":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.af490a848.0_1672761475257_0.8073849960789881","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/fab","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"618d816745ab523516d90ac8419a3572b9a84aa0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7cf487c98.0.tgz","fileCount":23,"integrity":"sha512-h/jq6y5lqNe77Kk3Bd3uDHVkJ4ldnSNOM/kGwjICG2qJjcObxfKO0sPlumdny5gthRQLqrZqmYpLw7nJ3ttQ4A==","signatures":[{"sig":"MEUCIQCGUKh2QQ60EbS/wLaldpyl3+xptt08tM5/g53eVMLShgIgYFbn8L//VkLs+HMwC9KE/CWdxQ5enaZ/ND2xJ8PgLlU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGhDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYLBAAhCAqgDNAqe/Ccl/4OsAYUgggy29lF4PuX5pol1W0uMl/BC61\r\nKdd0yQyQpbMLm30qynHhQxlBqNn81BCpfatCSZgcbrv2uOYNJY+V8q0qcgD+\r\n7uoADw5CcpTOHkbc2K2bY7Ym6PPpy1p1KQMmLfsY0joKzGSB6a/8TaSWcAG3\r\nHqN2519YyM15tNLr7vOW8xlHUbkrJSbMoej2khrz/tTNuDpRjI0JGN7P5XKI\r\nkb9hPalMHtFwO9eokH2cvMbaGGhGJX29SnUkDfr6DngyZqgPvXVOkAFrIXaO\r\nvDerW45JoMj91NHursNgtb+auffGIGjJ7hm7ohx9K+glnUDxjt+5tNMR7IDY\r\n+Zm6Fz9SK+TZ2bTc7JoqxDfXtXOjM7O24ULsNs9Jn/O90pRjEePc34fAf0VE\r\naSa8WA/+INdwmXyre0RIxh8k/zcRnQo3mydRgpbwcj9eBXZeHKQLw/GCbZai\r\nxWI2HMpLitIlqktGQkdwWOUyRmPXoohSSy2ci5cmo6BAq4UlQQNn7DraWzAN\r\nf8oX5/47ArvtJoMmSmoeU5y64rm30QW/j6esBpUjYWga+CJn/r6KnBS+oaSm\r\nqq4ybq0W/ac0Fx7catLwPlU5seqTmLykYNeWx3XQe29aCFo6SJbFeKkzv05x\r\nH9S+OhZC4yk4zNrtzJm3CryZXROZbHyi7ps=\r\n=Xwb9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cf487c98.0","@material/rtl":"15.0.0-canary.7cf487c98.0","@material/shape":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/ripple":"15.0.0-canary.7cf487c98.0","@material/tokens":"15.0.0-canary.7cf487c98.0","@material/animation":"15.0.0-canary.7cf487c98.0","@material/elevation":"15.0.0-canary.7cf487c98.0","@material/focus-ring":"15.0.0-canary.7cf487c98.0","@material/typography":"15.0.0-canary.7cf487c98.0","@material/touch-target":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.7cf487c98.0_1672767554861_0.15005757411694343","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/fab","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2b642ec9aed3fddcb41d39703677b89aecd2b3d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a52be2d5e.0.tgz","fileCount":23,"integrity":"sha512-aDgrvXdOutLafaHi+FhRr2/trFkUz8CgKIUSd4C9H46F3iMPRs/1NuBXOGE9enBF5QDI5VQOdbxSEFNrgsvEvQ==","signatures":[{"sig":"MEUCIHSR0POiDnnhMW9HhXegwhmmMVK0jO9E9t8/nHDi0vpBAiEAmY/Zv/tlr64K6ydmi6xcXC5kq7HuNUdPmprrzRSn5vQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH5kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHRA//QvydD3FhtW2Sdzt18RNmB2bL0fCvvI0ghOiCJYJbrkQR+0jr\r\nFyjUb0DCQggvFnUCIFODt4RKjiw4e8fTNqdNff9B2YWeddh7FeLeWq08mk/4\r\npJhjrEWrn3Ngkxz3eKexqgAAOdKeQkgSsWN7KaeXXutHa8Gka1bBNczYVfan\r\ng0rx8S3k08s55t2cUee8q8/fy33kV/q+wHunC4MYvTWKy7T7olMJwOiaqjIB\r\n7KTXA98gCkoz3Dl2AuP38LnIlaTzwxoCm8krfEkIjRjKOux7vluHD3UBhb1N\r\njjhm4e5b2RTCsQoKuyG143DIj106hDpETkRodFJxGP7MCE46gcO5qjS8sSoC\r\nFI3pPO8w04v4It2M09A3GGxKWKYj4Ci78d4/UEJvBkzCpCsA+OVMhkiFzKnQ\r\nd23SD25RY1H2FZ0n1QyawXxRT6w1vwg9QbaxN5ukNpER80NA8G38QaLQ8kRw\r\n+5P6/irKe7MpR99+owDq9RnAEr1S8TWbcCwc7ugwiDRlC74pl+uVGsXvp3pS\r\nKbBel/sDbobKPxPh90mhSm0Z76FibVEqTwd5HS6ikenmcfeX0mWfL+nJ1nOv\r\nUY0vSVQ+qunc8hMknQwPLV44ucWjNsF+YdMvtnqYr5sKtOr/1JSwyCreqqB3\r\n9yEY0KoKNFNSihfiwaaM9iPlhIsL+OCmsFA=\r\n=GGvj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a52be2d5e.0","@material/rtl":"15.0.0-canary.a52be2d5e.0","@material/shape":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/ripple":"15.0.0-canary.a52be2d5e.0","@material/tokens":"15.0.0-canary.a52be2d5e.0","@material/animation":"15.0.0-canary.a52be2d5e.0","@material/elevation":"15.0.0-canary.a52be2d5e.0","@material/focus-ring":"15.0.0-canary.a52be2d5e.0","@material/typography":"15.0.0-canary.a52be2d5e.0","@material/touch-target":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a52be2d5e.0_1672773219868_0.2455908979949495","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/fab","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"739b24b0a9f018ad988e9287b59cf1613f20839c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.e38ba17c5.0.tgz","fileCount":23,"integrity":"sha512-Wo5Aw5qALj27YBNPnR58G9g03upQIh4fRuUJGKmu/tidm+VCvyz7ASmFH/zQxB9xAkcVCuKQyREVK/E17sf4PQ==","signatures":[{"sig":"MEUCIQC6cWyHokvnN9YVi9+Yc/lf/ztvwBFXbCPiXZB5hv2O3gIgQC1iJfE4rowizxfMlyCwBsTCQl4Neku9wy47cnMBc58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK0tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoA4A/8CtV7L6UehTP8CTLfTkDfEZILwlM0KB1Cc/xNCg7mREft7bcA\r\nFyug6PcnCKZnob4qIbFrv8JiuJS6v61GoL7aSG/r6cmUO647ZQACW8eDWc0K\r\n2tZ6BRv0J0rnEFQ/qSJS+YnQF4OlpjxAO6upOfWGs/n4MNefSrA0BuGF1mEz\r\nbZk7MOPn229U7HT+nYXyXCoFsF2LD0q2amiuHBQ5Wn/fKEdKjecgU63jppWV\r\nn7o0q3vdmIryjByviF2HLsRxRvNYZudh1c1acc8p84MCxteYxHfpeC7MV/QB\r\nIvteMkJnihC6Rq5heKFz1dnu2AbDfsNCB5XX2VLCPJ1q6OE2KQrAJp3W8fUW\r\nLfserHoS6dxu+kwNYxOrr3p0pF4/23MSKfQ2MEtbLMxhFH+88+xm8bn55pzs\r\n6t6+PdpktwbnrwAla7tQlHgSOxJHClbH/yyy7pUn/zSopuciYTPday4HfiLs\r\niPbqsasgDNF8UHZurPiqrJBhpSHgz7/w2LacAkrKgYbglQfVqXIAHl8D4BGH\r\nNUtPcadpURh/a0nTdVM5B8DwCP+NsekSqyn7HCQdTVfZOsyr9+E5mdMlUkJ6\r\nqq9UbepNkTCSlFAVR815MURlf/M3EYDRITmu4zrGu79hBHq26kXYWjK+LAw9\r\nrjZmPZllOcq/fUFlAWfDm+zdWmQrC6kMq9w=\r\n=pkiF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e38ba17c5.0","@material/rtl":"15.0.0-canary.e38ba17c5.0","@material/shape":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/ripple":"15.0.0-canary.e38ba17c5.0","@material/tokens":"15.0.0-canary.e38ba17c5.0","@material/animation":"15.0.0-canary.e38ba17c5.0","@material/elevation":"15.0.0-canary.e38ba17c5.0","@material/focus-ring":"15.0.0-canary.e38ba17c5.0","@material/typography":"15.0.0-canary.e38ba17c5.0","@material/touch-target":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.e38ba17c5.0_1672785196746_0.8876469360618573","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/fab","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d93906123141630f7825f393568c63d29b3b9381","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.49041a6c3.0.tgz","fileCount":23,"integrity":"sha512-UPHz8Wck24+XnuIWz6PVcpCGbQ9jKRBWgdO3xbaju3P51UEexMyZkwi6m3wawfIUs9w1mWr3q2D0+DI8aDUeXQ==","signatures":[{"sig":"MEUCIQDYEDqfLOUDb2JS3wwOskSRE5Gma9f2LQzbAo9lqIMR2gIgUBvu7o4H1R3/fktFuRMQ+WjXGKns9MCIlj6qSjS74N4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZi0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3bRAAgfQYbzVcXSVYlLdEQ1wRzhjd/zVEYDccvGS1gj5Xnc+vkigF\r\nab3l53KurK1i3uY5CgRcVFt8jQxFEoRc6dZjOTYXCp9UcSYtrZOATsKR6D9e\r\nwa4Cucdki4IvIDrRFejHYGuOrVM2JaKwpzr4u9NJZqgJV+BeZLY1pDoG/k3E\r\n+/dwKXgRmXhzRkNCpb/tpblkb6nfSzeNpuv9t3lgVdCeFpvQmzvRtlL7bELj\r\nrb058uvZK0qQCqGsU6AyOZ/0xJ8S7WHfNZEXYabf28dTd5D4Ycy2raAasNUU\r\naLc3Ibxg/10AKzP43tBEPazgiioSBUhCW65Ln+jdmQ9X3y07m6PAq3lPgpfs\r\nYxOaiLPkWr4jT1Hb7AfVd9bjeOp0owWYpquV/X+JOsaV3cKauZMdvTNN9dX6\r\nlAZgLNEenawX2ubRsBhNQnBZ5VaNow2LsNl9LlwHcsakzG3TaZK5iJgOnnvc\r\nW8UARvC0Gg7Bv230uP/uaKvc6wjV2ByKTQ2xmrQ1lJgwc1He4m0T/y/W8a3e\r\nVMDWqsx8YEGwT/y8Hk8E3xEV7bCk6fuG+uDBlbjMM4gozzyNunHQ0rcXyx8Y\r\nlggDbnVLuLGPVhAf9gdOYxcUCfbSpJs0RoxWMJzUNFIABaUHc16Ok0OmUpMs\r\nW9eCO5gVkpl7/twjhnydpBTVPAxxREpM3Zo=\r\n=AEod\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49041a6c3.0","@material/rtl":"15.0.0-canary.49041a6c3.0","@material/shape":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/ripple":"15.0.0-canary.49041a6c3.0","@material/tokens":"15.0.0-canary.49041a6c3.0","@material/animation":"15.0.0-canary.49041a6c3.0","@material/elevation":"15.0.0-canary.49041a6c3.0","@material/focus-ring":"15.0.0-canary.49041a6c3.0","@material/typography":"15.0.0-canary.49041a6c3.0","@material/touch-target":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.49041a6c3.0_1672845492516_0.5228142315502031","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/fab","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.c492898c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efa623529249af440e18f79fc9f93abd02566c58","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.c492898c2.0.tgz","fileCount":23,"integrity":"sha512-sVCgpW/NMn4NFSkm27OGXMun//qp+peTxvYstA7ji0+Xff0yCldwWNAKA7JsGerOs18KE5IgcfI2YBW0E2o8RQ==","signatures":[{"sig":"MEYCIQD583SEQ0gCE9ISf3De0Jxpy9l2FhgpMP6OLy8j1MT32wIhAIGKskBoccs2keWgZHWvqzXI9zkx22dHTnAIjf1DNHON","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbmBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDbg/5AGF4CSb9yFFZA6WuCNbBrARAtWmKbj5Z4P3r6SwgpEScAOWf\r\nFNQHmCtum055bYAXsv/pPYQ6hjMn4hV2iedxqFy8DGisr4vnVbNKXkP72alZ\r\nHicneNtqUGnbVBSB3voWj+Tm82Uu3Npjv37aKfOJl1Hq3UoebC/sDbBJWCbY\r\nWpTIJSl1Y9HS8CBH9LGIXctu81LtUDvP37cThfKMz9ZQyTAlo9kvpRRt8Npu\r\nylUXTol+jol5bZk2VtvpHvQGl349Q3C21XkTex5X/QszNYnPg3sWnTgxqizD\r\n33QvLDsZSqf2F3853axs0+tdDYG6FZD/9HlYZqU8XVUdl/zckELKeleQYigW\r\nZNV7WhGu82NQzvv884KmmX4wyibWkceyx/Nf6zDPKxY8BnvrGmvDU7JvoVH5\r\nbnwEdEBcdijPBVVroUETflu3xBLPqcyuhWmfuTn3fBet8Lh7UvF3Ae33lv4F\r\nx6upBbrdSCww/0n4wKQJ4T7HiDj5zcQQKTjpkWEiOhCkTHiMjK/JKu4rKr/M\r\nf0OK3HH0uCk5jXqSTJ7g8nnjdhU9igTRTUc/JimwpADVYbv1TU4bvgVUVWJP\r\ns6rnIoNMkz2459dpvZ2n7uAcPoHRlJV5VD/fauKy7Hu65Zuq2m+uDMOGZEVB\r\nQRXPN8Md7YcMznN0pm8g54e3wqg+BfHCi5Y=\r\n=DsDe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c492898c2.0","@material/rtl":"15.0.0-canary.c492898c2.0","@material/shape":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/ripple":"15.0.0-canary.c492898c2.0","@material/tokens":"15.0.0-canary.c492898c2.0","@material/animation":"15.0.0-canary.c492898c2.0","@material/elevation":"15.0.0-canary.c492898c2.0","@material/focus-ring":"15.0.0-canary.c492898c2.0","@material/typography":"15.0.0-canary.c492898c2.0","@material/touch-target":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.c492898c2.0_1672853888849_0.9167561694474093","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/fab","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04ebfa6be97d8ff118a41b0b36b2536c45fdc707","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d7a2277de.0.tgz","fileCount":23,"integrity":"sha512-tGPdovWcSMN+sWc8+Fl/laMOsTCeCZULU7tcVxtDtMG/4JHFn/x+em5i7tfTS8Trzim4yi/ukSzlUyTwBMBUlQ==","signatures":[{"sig":"MEUCIEpLcHdamupeclw3Rsae2k9frZ23ZPPoCS/q9l/ZoEc5AiEAy79Q3y8xan84HW8hdvGbx4xQ3NU4ln7YojgqpeblOGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfFLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqv7Q/+M8INduZE52LLS3j7WxtTPPN+o9J7URJ/sFSXbukIEYr68d4i\r\nYF5D9/AbMdBMAuwrT45c72iDyT9Lz1yZC7EQnqxiJiblL6bBCcZkhWhPdvZD\r\nuCqXskFKi4vn5KUWDAEBnzS7eQeqDT1KV8CsZDFXP5EBbXnpA6xEJQBwu2y3\r\nUVkSoOujM9+lamvTjCGx5eOOs48KtUuAVPhSl1XXjImHYiy+XgnO+927FG4F\r\nqhvpOIwar4f9EA3CbujO1eLsloBA3e6RpxSNul3d0VKceJACMS2LyW/vjYLl\r\nG/6vKEOVIphAaIETCe71LWqM2vDBEB/ZWmbx1tkqj0+lnIK3dCiVpQMhRUS8\r\nz+v0OQL/9MkF0ZCnIr9y4yUUVc89GvVFzTX1KDAykyZKlHKKAIewsU0cjm9C\r\nd21pFwZ7LGpB5fe48G5DQfdPHPF/EQ/2zreeRN+eWSfeKnJ/h0snbFHrZpP6\r\n8MWbB+DozZysAdRV5G/ctvfCb6FfbdssNDavQsr+kSUpf0R8bE33kW56JVwE\r\nRN8e+SlcjoWUGtxIbWafTlZ+X6NUQ4FSGShBLr2sJYyZeTo9e6G/C8sUIzEl\r\n3tlRQuubgS7FHBvLYRfYA+oa2/a7U28jfynzc8SVH1VU42Ch5JyQnbF5+Mg8\r\nbnwrNaWlQgHzfA5uITlF/D8TpTglbXvPfXk=\r\n=M/N3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d7a2277de.0","@material/rtl":"15.0.0-canary.d7a2277de.0","@material/shape":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/ripple":"15.0.0-canary.d7a2277de.0","@material/tokens":"15.0.0-canary.d7a2277de.0","@material/animation":"15.0.0-canary.d7a2277de.0","@material/elevation":"15.0.0-canary.d7a2277de.0","@material/focus-ring":"15.0.0-canary.d7a2277de.0","@material/typography":"15.0.0-canary.d7a2277de.0","@material/touch-target":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d7a2277de.0_1672868171196_0.5002112766773887","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/fab","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cbc83289e1ee3729f09cf584bd0823f9baee236","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":23,"integrity":"sha512-f6RiL76LnjNchF8FscPVOwx/q7QL8pmE+He0oT/OWWF0BK88V7ZOjNgItR1dJAXvl0fkh9LssPNkmxtHubH79Q==","signatures":[{"sig":"MEQCIECkEtaGqiz5/yBI/izDvihVrTzLjoVj2bjDw8v32s9DAiB6hK9IwtSDolEOgbCVPBsGx1j2lLCJuC91s6DmQ8Xz3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiHTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpa9BAAoCUPYkU3Vzu6sZZ10Q+PRijUlq7D1J2i2H6a//t9n6qeEd/q\r\nwDlIwOBv2wXvl9hGos59t+byCTiB2OXLOjEvt5zCpDzeOmB32F4LjhSdePlN\r\n/1UU//32Iu3d+8De+BWKsYK9oVdzDxFeumHaXURsvZlEO7l/7t/I/2LkeQAf\r\nGWsR6a8hH0X2XfrT0QpJ1NqJcItJsF4Zf6J2JefJe+v04dxBiA2b6CxDS/2L\r\nbbJbExc/YdC8HBYsjMHDfSIthqrvaeuq2CMO23RiACgBrpAWoPk5VCakOoNE\r\n09qEofrn9frxjn8ZpgNDld/Giyq6sreM95KGPxDHSJDoCl5+vCu3902rtOlt\r\nF1SyAhmQkG6rsJldDqk1YGMWvXyzRCeUUKwELMm2eK7mFr+m0xAYMVdebtkd\r\njoKkdSm9bu/HQchR3xth7kWCBxSVBN3TCiBsUvscFeuXe/u+ZW5G8SeBDyNr\r\nEDCjQ82fMWSvMavwzk0ZzMWu8KrPtyP8UmZ68rNDYXW8sO2+PPgFS70h7Nsh\r\nWsNnfvFdadh6REYWNkM5ndhNhIPR4AuEJkx19bPxiMVFQkGre103jaZ/Mr4i\r\nbS87SlMWr3S9PraPU8TxX+WkMe+uoNRu+EtDCbUuWDBRCfGuZckhfanUbZo4\r\n0SRFzMdZDTJehtRWtWJzJNqfGFQzUnWVqIM=\r\n=4VOl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fd95ca7ef.0","@material/rtl":"15.0.0-canary.fd95ca7ef.0","@material/shape":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/ripple":"15.0.0-canary.fd95ca7ef.0","@material/tokens":"15.0.0-canary.fd95ca7ef.0","@material/animation":"15.0.0-canary.fd95ca7ef.0","@material/elevation":"15.0.0-canary.fd95ca7ef.0","@material/focus-ring":"15.0.0-canary.fd95ca7ef.0","@material/typography":"15.0.0-canary.fd95ca7ef.0","@material/touch-target":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.fd95ca7ef.0_1672880595023_0.7829325644019167","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/fab","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe451139b0ff1a10a0178e8bfc519f52391a94f4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.1eb44faf9.0.tgz","fileCount":23,"integrity":"sha512-L3dzDRtYHKm0HMwDw1I+uzVi+6yJe7u4OFWzUm/dPcionx0i6xGahAGwU8IudYjJWXfYVstPpoU7d1TOYcOLHQ==","signatures":[{"sig":"MEUCIAphD5XP4TevkJBqyNqyfi28lMfecX8uRCYKIAIZbwlyAiEAsTvZ5LRxNaKPZqT1qJropcvOyOWcVZUqwoigVnSxC1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpPeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAmBAAnNpXumEfNFyhD1Sjdsg699lYzpK6gb2eWBx/ueWzwIPugrxZ\r\nIZmoUMI9Ggh1NOO6VRIv4ckbJPWZwu2bDr8R56QprI1MnDMX6IucfBlOEZY1\r\nRr28vG2X5hW+5vM40c+vdYfkhkxRpdDS4RUJkrZTxkt29zxTVUCS/7puFVaM\r\nONJNEtiFwkQUT1R8C2lYolPzwd5KVcPN6aLwBDPHB9tij2ruQzb3sFCJoMJm\r\nIkrzTDiBpgrrfdeOADMfZ7rQSj7CUewjDAhvfRind9XxZvNJeLQNpcTkPK94\r\nZ8pYIHrq3xyFgbxl37dqS/3HzHWSYAqNJRaRVVtmqsvoDFGThR+U+3PzteWl\r\nBcjNALRSiNnMMFWNRak4XJ3OyDmuuMusz3Yn5lYJ21XIbrSkTVhHC3mk7ywL\r\nLhr4xHOP2TbpjaABlp3Rp9enpy0NNTPJCD7sxYmA/nRhphnbG7cGOMO+QWCh\r\nMFi1qNbFR6RVwm45xBOS7OAuLiP9AL/993gBJ1l5+yA8d61EfGYMhnXJyD6V\r\nx03w2U0jUNkxZlA+s8on71LGgEiG6OrhMosvAVLQKTv2c6L0TlCcOjWEUk53\r\nOGd6NeWlQsMoD2s4FVkfeli1wQFwQ3Rjeqb2LjR3o+PMyyJ74ia0MQ86ToHR\r\nc7wkCMY4hS9aP33CZb0Hbf1bJ20Cwl03dlU=\r\n=z8ro\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1eb44faf9.0","@material/rtl":"15.0.0-canary.1eb44faf9.0","@material/shape":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/ripple":"15.0.0-canary.1eb44faf9.0","@material/tokens":"15.0.0-canary.1eb44faf9.0","@material/animation":"15.0.0-canary.1eb44faf9.0","@material/elevation":"15.0.0-canary.1eb44faf9.0","@material/focus-ring":"15.0.0-canary.1eb44faf9.0","@material/typography":"15.0.0-canary.1eb44faf9.0","@material/touch-target":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.1eb44faf9.0_1672909789849_0.84188833902807","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/fab","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"571649df8918404c522284ef03560cd0f7f4ff72","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.adcdb7db9.0.tgz","fileCount":23,"integrity":"sha512-WjcZQ6NY+2Atja9HDg8QnBRNAjuV5JZhkNfDdD3U579a14FNiq0d0hbZso7t19vNmEUhx+gtIzB7XkWqytRWQQ==","signatures":[{"sig":"MEUCIQCPr9g4pBCfKoEVFoRWJE5hNh3A/BxRAmY0dyQ4CbSP1AIgIe2FHS6n750XDAJm/n+JYthMFzmoGaLv1UB4fZqh82U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvlSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqP4w/9G2AjYqvnVrzvyfIA3rxcQgL/RL/xLtIRT5VzkH54J9yCXQNa\r\nJqtrXjWitUjDyc5hG4siVtEoOJiUw8sX6ZcLZayIjpT0cfMJtu4EaN2i573Q\r\nyNQyFDdQvpd7NCXwHkmj7ebmcgfN/O7o7hWy41uVoAIZumYzN9cpuEvtCvsu\r\nTKs/TctRD4tZXhmnZoOWnhoZbxxmkuDDvF9D+AbgOYpTS0TmMY6nGy9LYJIm\r\nrzPDMIr8QZJXkt7hxr0Hfomqqc8efDj/32wiCyMrxYoHw8nYP7G75jkcPeQd\r\n29EMxUwvTO4yWMEpcNcBPFxjqrK5fcWhwzkRnilMXkI6Ni6P4LV9RsobsYVd\r\n7B0IJsJadBLM7YFBSmvF48k9GCgcDWE5KYnQMlLxHgrQXJXCok/XbrUaaROf\r\nb26gcR4fC3KOKTYt1vbcHjDy5X3UYhnwk2Dz+FLo6+VAycbq4V93zrZ7TS3C\r\nJMDHPYv5vRBlF9tv+slAQN3LRk8Kt8kLSOKNQ9qiIIKBDs/WM+zcYAgXikXR\r\n259loLuVIf//uuMsmY+gZnIi/LToDPGLxzFEuNDoooHzEUFl+/QRePLr377j\r\n5C02Xrm/IR+Uexorw1y4rO7n/0g6jaNpawWtfvSMopRz6MwMwaR38o650T0q\r\nvnu/6s5s1lMSTFSLoqxqvVV792m9iYrl7kc=\r\n=bW0V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.adcdb7db9.0","@material/rtl":"15.0.0-canary.adcdb7db9.0","@material/shape":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/ripple":"15.0.0-canary.adcdb7db9.0","@material/tokens":"15.0.0-canary.adcdb7db9.0","@material/animation":"15.0.0-canary.adcdb7db9.0","@material/elevation":"15.0.0-canary.adcdb7db9.0","@material/focus-ring":"15.0.0-canary.adcdb7db9.0","@material/typography":"15.0.0-canary.adcdb7db9.0","@material/touch-target":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.adcdb7db9.0_1672935762418_0.6351027971696179","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/fab","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.067af7eff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12abb8e52a23426739f94f4974a622745023eddd","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.067af7eff.0.tgz","fileCount":23,"integrity":"sha512-cL+Lk3aMhA7ZxEGJF3rRUBsoz2kdYvARfweq2+z1dIURmuQWJtyvBfbKOg2WL9brjOwCUyII6B9XMwz8bql3fA==","signatures":[{"sig":"MEUCIQDR/ixx1midXJqaOBaYT8XOs7Vkfo38RpTR7i9l33jACgIgTTfYABF9MQ2CoFuHg91SzUzkQmCHHpbRlbzO9JDUmZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKvTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr42w/9GrKMgptaXDBUxnFCp1cUkgYZmrIU0qZr4515m0czXcKLGhvq\r\npYXJXzkKtjIGblhRHa+Hed2FVf2dWqEJvrNRGA9CD1bz12f1MNT9tm5y7da6\r\nH+Oi3WN6rzbA72naYS1ZU5szMB0no4GAGmOBAUgsKc9f5ecGrhF9F9pvdQrA\r\nA6TsVdebAJuocEJ3+QSDKtkoqiT7DPydkMZll3PSjDbsDXvgWPCWyLYiiTVh\r\nan55JwkuH9rY47mNK5tAU2pSLzRWaeJSCDFnebZ+dy1D+AjopombRildKHaZ\r\nG1ZYGFwYMLFCMlPL30Vmm1HItyWbnkkYQ0UZ1ysoLopbUgDMVv6hN3m0JYpY\r\nKSkMjKOGcnLQ10HSoQw/DhxsbQzkIzUwXJDMz8p0kDDJmbfz/LDKjzU3mXQj\r\nRnLLm5dsq8zCeUI+61dglo5KKwkOQ+kvhWv430e2qBS3BDQIoFTIkOxsoWU5\r\n0h/fupmXY0GTJvptZEtltGwiDlBkZBeCpcGtHhU0DtHln/QRcda3K5uLB+zH\r\nwaWL5oyj8FfLkr08fSkDcx2OZ2o/wOkMYzbcUrsXxMI0LSySWquG40ftfyv0\r\nXWOXbIVdfns4COl7bXflKQdn+lSccAHUqFjPL2/LWUvpFXq2iSSchUbX5u0x\r\nAgPsAep7yxFeYiwfkN5LgE2RoF0tASyR/Wg=\r\n=p2Xo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.067af7eff.0","@material/rtl":"15.0.0-canary.067af7eff.0","@material/shape":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/ripple":"15.0.0-canary.067af7eff.0","@material/tokens":"15.0.0-canary.067af7eff.0","@material/animation":"15.0.0-canary.067af7eff.0","@material/elevation":"15.0.0-canary.067af7eff.0","@material/focus-ring":"15.0.0-canary.067af7eff.0","@material/typography":"15.0.0-canary.067af7eff.0","@material/touch-target":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.067af7eff.0_1673046994742_0.12557823509405308","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/fab","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"216dd9e990afbadb071e4391c0e263473a19c4b3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.21d1196a7.0.tgz","fileCount":23,"integrity":"sha512-stgqy+NvHGkYsZkbRq82aEaWhsqWtYrwr8b+uCy5gzExopy7V5azr/1qVa/uIZFlRn6Pre6EyPhBuSmBqJhh7Q==","signatures":[{"sig":"MEYCIQD4Z27g8VjnkDMFMiBq3L4JybK/7SdVI0n+z+hvHjRlTAIhAPwl0xDMKD4dShp31rb7y8aKByp6lWFgzZ2jTuXnTMDr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju+/4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9Xg/+LJIt/z/lI4qusjGGziU2lsSMvioNmYAL88kbMFpREcivDl64\r\nYqaxqZjKsGd5lpFJmXYDoBz3CzlS8oI+eWB+6ghpW83+nVU7SZFU1ZYKGlZc\r\n/dEXdHLQ6f8KujYxDdbSsLbOqpi75GQiEzzdzOIP277OGmsXAEyTm787MnZS\r\nort+HMLvtmvAD3KanX1p1rUfGXG7rKhUdD09AHx8TAs4G8TCAexyhfpl946h\r\nyftG6iCo7nKapVDHTuf8QFtrZ79tlgvtKMg1UZpS7XZ2jTtZgMdYN47jFe47\r\nvmwEH3xwv4mVPDfJFwCrjSZ0E7jxQbVLx/blKoUhOvf26xdcF4cm8f75IUjs\r\nQCaNBt9xzJPJzzYPaK++unstQZ73p4fqz7haob8luAjxam6pYE1Y8I8FVmnQ\r\n93O15RhAD7CgLgjae6QicTb6ykLi1seCtajOG69l4SJ9LxN/QAsXloV4GLsV\r\nBYtJlDpJtp4eaqVSQvuqCOwR8/Mp7bwDKoGMb31o1njnI5iBc5O/KLr3UICg\r\nkrzSOVWV3QdvakjzGWOU3R7ZI1qnjz3kAKojZEBfl3X/ZrhBqkzaqFv5kjwj\r\n0Pm3dX0tVUQoEt9pak7/r4eggIP3avDXuVZfTXr4cHQshIWicH/yno8u11J8\r\napl3ktsPUDgUQjaoPdg6Q3vi5oJQAhABzK4=\r\n=2DUx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.21d1196a7.0","@material/rtl":"15.0.0-canary.21d1196a7.0","@material/shape":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/ripple":"15.0.0-canary.21d1196a7.0","@material/tokens":"15.0.0-canary.21d1196a7.0","@material/animation":"15.0.0-canary.21d1196a7.0","@material/elevation":"15.0.0-canary.21d1196a7.0","@material/focus-ring":"15.0.0-canary.21d1196a7.0","@material/typography":"15.0.0-canary.21d1196a7.0","@material/touch-target":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.21d1196a7.0_1673261048465_0.21219418305660342","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/fab","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1032a5218d0dde22d5cce7ee9a81c437445bf6cb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":23,"integrity":"sha512-Pyj3u7BE9Qc/Pv2GDve9As1XDVEem1xXqWdYgIkDkcNsHBisqxNPYIIbf217oTbX3y3/RGaP9PGqAPMaEb7ZTw==","signatures":[{"sig":"MEUCIFpHdMyEpeYYN9uYOx578ff0rSSfsO29rJmstdVzrUm1AiEAnB6K04rHQNCFuSVNdkznN0xbVPL7uMxYkKhqDCV4Ra0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJQbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQ7A//VFE2L1baN46PWakq5h4pWB2GsuBR5R37seC/PFvb2cSFgbEo\r\neEqS/HJewKwoTZZVv5yTYy2ZB8IVsOsZXin9cfazNoNvI+JDsvAw104gPC/v\r\nk3eYOQGhZ37Hi0phY7PAHoIavrIUemi8IDcF4PFuE+jw9RFEbdizBLlOzOpC\r\ndxxlv/Pu8454c8q8ptNXnXDZs9H8NrrvFwuYt6ONXT1c4kYDRcCxCmWyU73o\r\nA62K5VdqWNz6RzrIBFRASca3bXvPtPrRge2Kpa14e5g8aZ00If9nHN/hlLMS\r\nu7/zFelmGfj3G8ji5EZSXwg8E33a7miKd7xgcydv0hlLhqBnkF2fZXdm1oI5\r\nFtU6EVkVXkpRZ4K4IZaZjUq95ifUm4ryRsA5ioEnxC0oBhFAqQiknIogds/f\r\nI2y/JiHGv13vXEmF9QcrL5iXjXyjIPIOPfrzcvdaRbtEm+aRCxz3kET25wSK\r\nPIw66Q+smTfZyoZkiiBybg031i5zQCB1p818PDp7X4lqvuSMtlfUHxc2Y++Q\r\n+Yw/wdZudDrEVB6YOp809gEY5TgrVXR2heR+y7FJUay0EIzmcIwloycJdZ+H\r\n4MiT9tp9X9FkhrBC4sgOn0VC6YEDZz6EONbDIeuvwFLN5Lb61JqZ7+NiVF7r\r\np41dWQ+cTssYrPHvOU3PAzB8+Y5UQfKY0BQ=\r\n=uVQh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d2d8d3c4.0","@material/rtl":"15.0.0-canary.8d2d8d3c4.0","@material/shape":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/ripple":"15.0.0-canary.8d2d8d3c4.0","@material/tokens":"15.0.0-canary.8d2d8d3c4.0","@material/animation":"15.0.0-canary.8d2d8d3c4.0","@material/elevation":"15.0.0-canary.8d2d8d3c4.0","@material/focus-ring":"15.0.0-canary.8d2d8d3c4.0","@material/typography":"15.0.0-canary.8d2d8d3c4.0","@material/touch-target":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.8d2d8d3c4.0_1673303067050_0.6071915832519394","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/fab","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ef126c4b907883aa0556df889196d89d941a8a5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":23,"integrity":"sha512-QoVWaSBmqQ3LoUj1NujMaQBVcB8BBv4OjJAkS7WP0Q8FyYOPb68YSVgPpnQbd0jQzyz8WUXQ5tdhlCRGLwSJJQ==","signatures":[{"sig":"MEUCIGx1OymwZmF2g5128rwyJy53ghTfSkUmPDHukzicjTOMAiEA5UJbOG+HOMOzUs3Hzo9co8HboDxrJtR6IbYbi4NLAzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZI1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrgxAAoWSrhwZCTUFxkVpyCGMY/8NZu+AIZwtlCEKw7fhBe2zN//NE\r\nN7KQjU6hOY3WG7nBwIzI2D1G2/KVji3i3yKGh83jq7aWX8PfCMvglqusH0fN\r\nvdC/hvRRv3Yhf+Cs0Tso674/+DRp18s6uDEotLrgtE9ktUgSzhOvkxlAbV5l\r\n7bsfdy5Ydz6PM+LXJ/Yys9iDkwsFHVvVe4OcUAP+YsxgrAweEQ1KJrEpVUmC\r\nG18WkMU1LiT40WDOoFhRVVY608dTgHvapBFZ9bPUFkEKMdVtWhmtxCPtV5S8\r\nc/IHERjaHDSGXJLxebVwxiBflGj5WHIycAYfylNNUzFAUAwWGzuvSZ0cROp/\r\nUujNkMJzp3bWrFgBf3AY7QOcA1p+a96nb3xyMEG/DUe9oTdlIfe3OZ/7E0pC\r\nY0s8QPm+YL1wme4qkq4waxqFfd87hbIP9wAOl1jlrymI1H/re2btn6pyrrxZ\r\n09/OpmltMkmtMttdsimrq2/kyFDbzOW4ME7jLhtNlveGFuiUbIUe2a1V5urO\r\nHlmE3shGaK6qMpAAX3jPO8+4hEhNeJEy7uqhkEHc6T64h/pjOQEvTgHomo2i\r\nlD2I5K2dLwpdhcyAKP9RBDvtqGgc0Z3U7H2BEG0j/x9e7UVDHWHKd1mzP8tz\r\nAhUUwnIK4SrDO+8+XZbg3EbhqiO0MbLrjlc=\r\n=MBIQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc6ee6c32.0","@material/rtl":"15.0.0-canary.fc6ee6c32.0","@material/shape":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/ripple":"15.0.0-canary.fc6ee6c32.0","@material/tokens":"15.0.0-canary.fc6ee6c32.0","@material/animation":"15.0.0-canary.fc6ee6c32.0","@material/elevation":"15.0.0-canary.fc6ee6c32.0","@material/focus-ring":"15.0.0-canary.fc6ee6c32.0","@material/typography":"15.0.0-canary.fc6ee6c32.0","@material/touch-target":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.fc6ee6c32.0_1673368116772_0.3075780905083869","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/fab","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64238817875f78e59f1dd3fa5549d0536603c23c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.73537ab0f.0.tgz","fileCount":23,"integrity":"sha512-FfgqxBUZO3P90ogxctUUs0iPmYGIH0zbS994t5+nnK2YpGJqH1HNl6Yv7xOOq0YYyreaJijGmF/tFyPe/mATNg==","signatures":[{"sig":"MEUCIQC3JIod7NNI06Lo7SepZwUDsOMwggGoFs1kd/WytHSCqwIgFsAHcKJ5u8AQGfvUS5Ls5UgH4pKorYSaqW2zvMPDCEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvapyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjGA//VYTgIKfcmcnGm4dN9X2wHXOvxLGBmcbOZ3LGTCreIxHSIk2I\r\nVeEFH4rSqfjbbZfVWZiiQFbS29NbdZHryKgmyN6FO96PG0IYcDk6dhTl5K5z\r\ncUJc9XgUNjRWwAqRezLSCL4eR5vV2JVjV9eSLMWu1cq468GbOlhwnhSxBJ5T\r\nLj0/fwUKxKfb3J/W9OpJBlJoYZ8rOld1z8+znLw0Etb00u//FFX5hFxG7quZ\r\nJcsCgNMbO0trjrfi5rru3JaBwiae9bErynPR/kP4rQLg0pgjvZ9zg6tvF/u8\r\nr96kgIv9m4pFJxE+Y3oLAw9AuC2Av+yNKWLU4yJDyohJCVBN4URX02o7xA+x\r\ntUq0eooSgFYPBwsoL4oZiBcxmFv8SfYe5nl0fjMjchsFSwhoF0o9E7KBSOEn\r\nLcupDAHq2lObODSD34eMI0/7jhZoc6eXKBdv7cK+/kFja8sagHIZS4tPoTHt\r\n4NupClHe972yu9O85K7Ws7xjicGMZJEp/cPzc7Mkqyf7WYxaptLaBLh3fkrJ\r\nahkzoP+MAi/+JJu+JJNW+9crOxBMk5J63FidXYjFvUu5g18MPRMObJuNb7Uh\r\nxEOVhNatX6l4ZxXFrAijteWqmHjhe730BZr76uIHhHH96YVqYVu/m+6KkqQk\r\ntA21tH9uKzYX2TOBmexwEy71u6Y1nmUajTA=\r\n=T2U+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73537ab0f.0","@material/rtl":"15.0.0-canary.73537ab0f.0","@material/shape":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/ripple":"15.0.0-canary.73537ab0f.0","@material/tokens":"15.0.0-canary.73537ab0f.0","@material/animation":"15.0.0-canary.73537ab0f.0","@material/elevation":"15.0.0-canary.73537ab0f.0","@material/focus-ring":"15.0.0-canary.73537ab0f.0","@material/typography":"15.0.0-canary.73537ab0f.0","@material/touch-target":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.73537ab0f.0_1673374321857_0.8034200089964005","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/fab","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.684e33d25.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12033d67712a04d25cb46e1646155a1a922e3cb8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.684e33d25.0.tgz","fileCount":23,"integrity":"sha512-KCu87rWOKEAe9vZcAm6K8XazYSWPNjMG+OhrbPjHW6bCO7as1YCgtmkBkhff7csY/rFmcVpIy884xtUfLmSudQ==","signatures":[{"sig":"MEUCIQCpw0OWmGFNC62aHzzQO5kZ2p1y4wSq5J5G/0Za6gdlkgIgVi7MQ3KjwpPQfk6c8DgW3Yq3XFsaoPN3c4FU3qgBR+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbokACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqONQ//ewo5ds8wkvBgSmzFYMG6R/9Ie63Qvq3YzgeToO56sc3BHbIn\r\nHKT0MQXDkbQC5j/dwCPmAv59FulOgU8nCArIBVU0UcP0CVJtuUFpS2ZhZWKf\r\n/4xxBeyvoEJREOj7mYi3cgGds9m3scDKfIlN5H4FI5MmAr+8Xs7l2gCp3Y/s\r\nh3aJxf/x4Ly7BmJ/bHzh1R598y9INCZmV3ODkLgayLDsPtTTQyhAVXL8fgWa\r\ngLOk8noWtTCiBSih2kyq6iZOLi8CV53SBNZDMpABgdFlzr05SE5FF1+y1Erz\r\n9cRtDWfDJj0qw+VHWn7ZYEobqKfinQSEkiNTkz5sI217UBKMgLSra2VmTXJu\r\naRW7MLdNtU/UDYvbO6+gfcoz7Gqz1otpLIhIGLogIMPGjFsUvGWWph3nY7UT\r\nH97j6ff8+Tgcs/uRdur577aHbRyCdTcPhqYQXp92DEHx/rQwqRE1lSytOOVp\r\nVg6pmatFWp6d+ohrdnFhEK9rSbXsAwNyM2yICXjMssiBetao0y7Mu51oZvSY\r\nMtcUPBYUMYThS/6oP4r2A/aWG60yErXvc8yRbQFRGMU5rZ1fi7EINjeGMohG\r\n+93hJ5xaqOxzxLfb370ZDVk/hYojGoxotyhSVV9/zuTfdOjM2J6sJFFOCsLm\r\nZospX1eS+eCkE0YFqV0PNCxmuMG90niDOZA=\r\n=LQW2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.684e33d25.0","@material/rtl":"15.0.0-canary.684e33d25.0","@material/shape":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/ripple":"15.0.0-canary.684e33d25.0","@material/tokens":"15.0.0-canary.684e33d25.0","@material/animation":"15.0.0-canary.684e33d25.0","@material/elevation":"15.0.0-canary.684e33d25.0","@material/focus-ring":"15.0.0-canary.684e33d25.0","@material/typography":"15.0.0-canary.684e33d25.0","@material/touch-target":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.684e33d25.0_1673378340556_0.2074619155484183","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/fab","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f6f9258a89221f3566affb22c0fe80870053276","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.0e89aab6b.0.tgz","fileCount":23,"integrity":"sha512-dJG64u0NtU/XV0cjwLN1UhCUncQxVt12saWzv6pVbhk15b3fmuJJI6MFmVFxsNtW/gR5TDGPSLKjhjOh6UblQA==","signatures":[{"sig":"MEYCIQCTxvfMHQ5jR5gnUdJfjBa+0dD/gHh7J+jdml3li2GgQgIhAPeldJn9aRupIr/ELCex4AgeBHVROp8QsP7fR9wzSaBf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuFnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqySg/+M2VXOCU5bnbeXBHz1OJQtSbmco3IaWj1wsPT/tHhFapYREat\r\nE8m4NC9d5EOlWQkUMHJOrPN9rXIPxiq0kshS1MjM8G9f4sqOXm8co/mVJxuM\r\nFQ8zb2ZaHlFZl8LLAx1RaovwPUgu/6gbfxV4p6kM4gv9y13rzrNMpFEDuqFs\r\nKxu3yEhkEK1bp5CW/E/MbhWuaBrl6fXatLG9DZOO77uy38HBPrT1UTFmgxD/\r\ndDrP/LbQ4Q4lcoK1/UOH/li7bZslaRnSN1ktMJTt3KFCYvXsRJElKgrGB3Pe\r\nRZwplrSdH3tNRU+HuYbJsGuD8ULtaq2pkdvgVvOkJdOv/CDW0z+oOgLZenbc\r\n68tzFF5kIUIbsySfIBGFm2QtJn5rimMizTMy0NvBJdre4+S5mZc5H8pjvZd1\r\nWXKIC2XhJoPpLfoxcWPOHS49sHYx+s8xoqProdNS0QB5EJH81ROa67UpXAYE\r\nqgiYPdriTdp073hEIWuMxMrLrcsH8YtbfzneJvno3ISTCTa+yZ8ld3QJb0rl\r\nwmYtNn3O1E37N9nJ6WH5ZQIaiVU9vz48n9A0INIdflLNoDjDCO/dMbJhw2EC\r\n4q/hJxodIoPTPC7GRRQrW4/a/QCJrBCHpguL7XWxpuH1JiRNZELv9VfVtQzu\r\n5doQrir2jQqWs8noH3mPD56IPlG9wHgvQlY=\r\n=2uJm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e89aab6b.0","@material/rtl":"15.0.0-canary.0e89aab6b.0","@material/shape":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/ripple":"15.0.0-canary.0e89aab6b.0","@material/tokens":"15.0.0-canary.0e89aab6b.0","@material/animation":"15.0.0-canary.0e89aab6b.0","@material/elevation":"15.0.0-canary.0e89aab6b.0","@material/focus-ring":"15.0.0-canary.0e89aab6b.0","@material/typography":"15.0.0-canary.0e89aab6b.0","@material/touch-target":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.0e89aab6b.0_1673453927082_0.49602879959991086","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/fab","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2f26e80598e8c3f652bd456f34bcbcc2ea7fffa","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b0103d10a.0.tgz","fileCount":23,"integrity":"sha512-w5F77oLs5do6AEuR4wFDYGC9M8+QSYyU5Uts68p1bMVTsdfMBcVGEfkqHT9nFfUChN4d2RRMZ9ztejgayPSgTA==","signatures":[{"sig":"MEUCIQCIwbVrWd1rGay6PRJEak0hr7AxphfjOU14WvyeePpyCgIgEWh0cbBVP/ng/rQw1jDuMLUHYNOeQ6gHW/HhXVDG5BY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwpQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPtw/+OR6hztO9VjOxfE7PvLux1q22eIzoyF/g91zqQ2fQMACfz3JQ\r\nO21E+UMKmuVrORxiOee1WKwBJ1RO72V5dKref2VG9cXSmjBggj56Z9DNV518\r\nMQcCfdNy3xv7T9Xeb5duEUJN0LLxSrj2svzm5Sq0tzyPwlsAGV/gbiAbSQ7u\r\nk+OSjDjPxqqWr65v4F616EpHcOCK4owJ+Mn4Ye8WXLPl/tOU1+QWBFAnR1N3\r\nSK/rbEtmhlg+rjaNEmAlZKC/5ZU+VJ0irhIP/hkI1AkP3G9qem+G/HDdNUHM\r\nWz3HGImDzGWNJ+ldlVZg85lHSbB/kG+1rkUtnwPYhf75QBeJReTOcpbl5oLG\r\nBTEkWc0X6GszN3yOp+qCXQ0sLvPZLBCS3jZVuRLzNO5/r+FYFrODMgUX6s6a\r\n1PFBjb895+XyqqyF1/rOymPUGfdypYw3bv1s9Id/cKVrNN3hGdHuSnAgAsbR\r\nMIWObCBSg0lY62tRQx7dHjt3Cx3NjDLW218hmzRJPrrHthC2cUQ67Q2vyjTT\r\nvUfVRtxARDjqyS+zmQoFxOnE0Y7Zw1x3IOChXF8cO6hlGvbyr4djcL4Hpopo\r\n95NrgBMSE4mk9nr5ifmgyEOAxZnWCCo/dualoc3GL4dnNqAQxuhn47bex2jy\r\nTTa0dhRdf819Lf9/us/ctgzX4ifwce1ZdK4=\r\n=IL3X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b0103d10a.0","@material/rtl":"15.0.0-canary.b0103d10a.0","@material/shape":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/ripple":"15.0.0-canary.b0103d10a.0","@material/tokens":"15.0.0-canary.b0103d10a.0","@material/animation":"15.0.0-canary.b0103d10a.0","@material/elevation":"15.0.0-canary.b0103d10a.0","@material/focus-ring":"15.0.0-canary.b0103d10a.0","@material/typography":"15.0.0-canary.b0103d10a.0","@material/touch-target":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b0103d10a.0_1673464400400_0.4505247492065616","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/fab","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"977415b8a7ca3cae2055480a2a2f2b4b3edb8718","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.50e7a5312.0.tgz","fileCount":23,"integrity":"sha512-wyvok0r6xsE0Oi1+dZ+9UJUP7aZ+6f8qnfY6Xe5nJl+XqfVhAjSndItfq0LX0pQGI2uPJoNwSoXY7z6D4AooDA==","signatures":[{"sig":"MEUCICbzfK93AmNEiX+fgWOpS9EhJ9zMx7RuJk6HQ8bm85r4AiEA0DqfWlGjUvN6pzZD4j59+WYZuHx02H+990RbL5Vz5yw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyITACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvEw/9GP1Q1GKqCeM8jKb64ygrRsQOrUKWKEUefU4YynxWAB3ugKJy\r\n9p2Zuv9uvBwnZaxl91FRkURpwHsI6bVyJGzr8YEV0Ia7ertFv6VD3dswVZlc\r\nU36A2bwZZlzlkfCJnq4mwk7OU1y1YTHRTX8hA+Q+jn/c2sSLSSL65qkCKLO8\r\nhKnY0MjWlPBhtxAvPda4Im8IG5kWbt4BgCj+gMpZwke0evdstC4zDzrkaVo1\r\nlE1uBkhA2w0TEaJGrNXiyrxMfUAUp5OuZeaQ8Uw/JRBOi/bvOMT+fMV9WKt6\r\nNEHjSKNKa8UhxT5ZgoMINNf1SIw2ltNFjSmk0iRFaMheV5kdxndJVce1Lcr/\r\nL09cV22jZ1zMm9OOwIEQRXoXAlbvWLG1lqm2ZvLp0NlOhH2OcKj2pH4o/vNs\r\nWoO39PKoHEiG/f1ayp41z7OwbtNjLD+d2ptqIcKNsb50A9qCn/9/MEU5voqW\r\nPRFomSrGcz0pg5uFe4DKEhO4OmBFonSXoIpbxtO9lw4DfBfLrxqeeXMOZGl5\r\nmSoDdV13JwXbf2ijVozzCK845Gwcuy07r9RAn5GZvxTJ0M9g0HwFKBeAgYbr\r\nJFmfJlrFbc/HXwg2xHH8RPXwWh7FcX+9bOPy655M3w5QL/We4g74Sa3T+9Sp\r\nluwlq7MZf8a64F4VhcnEhssSttiMlj1rFng=\r\n=0YXK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50e7a5312.0","@material/rtl":"15.0.0-canary.50e7a5312.0","@material/shape":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/ripple":"15.0.0-canary.50e7a5312.0","@material/tokens":"15.0.0-canary.50e7a5312.0","@material/animation":"15.0.0-canary.50e7a5312.0","@material/elevation":"15.0.0-canary.50e7a5312.0","@material/focus-ring":"15.0.0-canary.50e7a5312.0","@material/typography":"15.0.0-canary.50e7a5312.0","@material/touch-target":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.50e7a5312.0_1673470483209_0.8526080239547873","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/fab","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.202823f54.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5628f3f98df5b6eecdcaeacc980b43fb0c0e4fce","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.202823f54.0.tgz","fileCount":23,"integrity":"sha512-qsL2qgrv5OGVUeCsImYkJFiJUFLY65KrhyqBIJn3KG5fP7GeYWEynPlEN4sa6y3kyBo+WlhHkmg9uqONev2JQw==","signatures":[{"sig":"MEUCIDSfh3Cj9J2mRZPP+m2Rftgj2ze2vCuTkIFia/oOEmhwAiEA28l7zgGsTJHT/xNYMj2/rOzoTASNNNjj2Z1PzKV4RRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyvOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX+A//TrKIZwnvSj+wwnpkISupPR3IA3j2KZUy3DJ2HsAupVVWtS14\r\ng6P3kACnTyxyqYjQk0aPtNRMT6rJvzWGFGk9uP17XRIU9+EsRwx65VgtMuFW\r\nHFAtXvqiyEUTzy656ws5v7oA4C3RBMx8JTPJMC+g4E6dyNWnmTPLJktNgt5K\r\n/9rlJxxmIv1IiEGbc1AJQc+BwXhfdE90ryV+xGzyK0bKXkUeCtF4Ac7uFiYe\r\nCG4AIFac+I3Z1MZvG35qTGjqDZkB+sYK7C2aM3meiiBU4lX8x5RfObs7061E\r\nq4UQi6JD2y3GmLFt8hABKS98eS0Pcp4eScMjxfj775VMHS71qIp4Im+8W4Kl\r\nQd0jcZQERr8cpTLHVhaeMFjivt14KK4rgSh+RTv5PypS4dSAsFX5RL3//SWI\r\nAeCDitp7Hv9p0bc3k5CoPzwTCd04LgT4LVbwU2uCSaci0ye9S3alVMGSDXwM\r\nFdBFK3ap0Sxsw6iwIdz0/8yezbQr6c8kgNEFA5eVBff/+VcBLcnWQcCv+7EF\r\ndQW1IFSm5eQwlOCtQxECU8TDPji2goXC/c6g2sYKG8V34QcJuux25S15Gn2d\r\no+D/lX9KIx7eRr9D4Qm81rDianqCGwjytvrpg8vTHqJdYYL1QL66ATHxvbPl\r\nZV48Gl08vU/liqVW0sMtfABcmoyBQ9QEOaY=\r\n=JdkF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.202823f54.0","@material/rtl":"15.0.0-canary.202823f54.0","@material/shape":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/ripple":"15.0.0-canary.202823f54.0","@material/tokens":"15.0.0-canary.202823f54.0","@material/animation":"15.0.0-canary.202823f54.0","@material/elevation":"15.0.0-canary.202823f54.0","@material/focus-ring":"15.0.0-canary.202823f54.0","@material/typography":"15.0.0-canary.202823f54.0","@material/touch-target":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.202823f54.0_1673472974378_0.331303581905926","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/fab","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c31e17c4fd9f0832efad285c5c891fa81f2192aa","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.199fe2a2a.0.tgz","fileCount":23,"integrity":"sha512-frV++ONN473wjyx4EiRcBC6LR3FVxBHeYr0yqnV+HtepeMjCsTXc8EO+nZoIj55OqXuVFP9b/kkocOIBhYfQJA==","signatures":[{"sig":"MEQCIGrS9fitcaRShNf52fJ4gMgI15pviya01uSt6+yCvDXnAiAk0jIL2t1tsAdjhEvpuYytmz2aS4drpG7TObJ4wLrjNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzB5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtwA//XNwec068HSjJKyeub8tqbbZIBdyb0MkOWLmTXzFq6nmi3sHY\r\nlhLSNIREqgso23jDnadNrwzzWABbaKXIZVWZn8v+zEI/MAPqgll8dMON0Br5\r\nsEgljr/4HJ7W9DUutVYdFsGc3rC131Y5RnkMVe/uddLBhp7vANjxb9Ar1dPT\r\nR3xk2LtMgPxozvGOjrKFFOxPFagKp+BaHMzFlgvsGH5IWAklw2P3dyGGANCz\r\n9QgmKMV7BICtoexrkhxM+NbNjO9kYQu5NVYmZgy1PSWK73iToy0HYb+Gynr+\r\n2O/1PteROWjse9eS74bb+KkST7tiqAIVhyS2GGF+yMNWCkTDxYkQX0D9XyHD\r\n7SrUGytPYaPJ0P6N8VOmVhg+UrFiHtnjcSUxHTAjvqthLPSU9Al+B/2/UMm7\r\nzVjbIZ/nC+Gxs7AIZT0ZaO5v5QF7OGulfLkuHWkpLkijG/eY42IgcC3JV3dh\r\n3MVuUOr/0TO9x5cWCwTOEz27hzWreZelHO1wSvtsew2qcJV4LeiSK30R2G33\r\nRliAQ4NJ5DmHsgB31/fvE1/Rj4vsboJvcP0wMsTBzHS9Eq0T6tt7iFBCIJLD\r\nFX0RD4fa62ryPm8ZzDjxLbBv96WieyG2op4JT3SN5BLKPuogH39WPrE4wub1\r\nk6uysQTGi+dAQWvXQr3dXHwZDWleD8D+cf4=\r\n=tq+w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.199fe2a2a.0","@material/rtl":"15.0.0-canary.199fe2a2a.0","@material/shape":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/ripple":"15.0.0-canary.199fe2a2a.0","@material/tokens":"15.0.0-canary.199fe2a2a.0","@material/animation":"15.0.0-canary.199fe2a2a.0","@material/elevation":"15.0.0-canary.199fe2a2a.0","@material/focus-ring":"15.0.0-canary.199fe2a2a.0","@material/typography":"15.0.0-canary.199fe2a2a.0","@material/touch-target":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.199fe2a2a.0_1673474169015_0.8101455604001409","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/fab","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c6e19df5ebad2eebac0977b896105bbb66a9708","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.8c0786d6f.0.tgz","fileCount":23,"integrity":"sha512-/6fPNCEApcDOvXuSRr+Z0iQ2wE+t/314DYfFvd58QhqwyFxmhIzw2p/VY+NUncMLk7RSe62WTTemrox6dvRYSQ==","signatures":[{"sig":"MEYCIQDj6nFgQSdNMC2nD+JnpYzgK1BrSgHBVPbOzHs7muzragIhAJRBjDkR99Pedzmn+HvRUQzl/PW6vGTEfDDSkqIJ52wj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBsAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraTA/5AP6oEgGQsMktZHtmyn6VoU+ZaFjJF609lSY0LO0NWjM2VW8A\r\niveLc6cmLHOGzXrQ/zVITkmaHdjnFCcvkXcmzp/zId6b373S142LAWMhZm1M\r\nWA4XvtyuYy2HcZ9kTkANBVtQeAbxhbxZpwKPiK7NTdOPr6ikPb7Id4FopHn8\r\njLxQyi4XWtQDPX2QSHT6N18a0LFUXYMFv+Yesv7TJjml5WCHJq1bhA70o4JD\r\nchYYL4MIjLPeQLu9uOI5mIeD1jZVX33pCEdm+wTvtktZksSdgkcOWp6GH5hP\r\nFGfIVY2GoNLfqjxa0YhMI6l/nfq8JMoi0yQrKlPeNRP6/2jutr7OdxDVpa/6\r\n5Jrr1lg8Kpz949QzlBTFh7+a6npM4MqOvJZ32enrUy7c74QmdLdM8rfYJInu\r\nIG1aikV1i1LlNuk5UelPDg/48Z1y9oXWXEMt/144QoMLUoKe4Q6uvwJ41HP4\r\nBTjib7cKIA9qdMgbgMZBz0rcqSDE5YPzjlaFgOV9BAfQnqlgvtF7hymGPGgc\r\nq/Wgl0prT+0CAf3z2NWrEc6G8OizxLiWAnHkQR5dWAxeCtZHQCM+jV+1hdLe\r\nhzlQPOTpdVfo85/j1C44leqo/c+CbOIZpVC0FnQgHQ/h475s9zNCg5U5s4R8\r\nZ2NvMggusy0b3W69nKgk/YM8izoULZTD3g4=\r\n=eVhc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c0786d6f.0","@material/rtl":"15.0.0-canary.8c0786d6f.0","@material/shape":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/ripple":"15.0.0-canary.8c0786d6f.0","@material/tokens":"15.0.0-canary.8c0786d6f.0","@material/animation":"15.0.0-canary.8c0786d6f.0","@material/elevation":"15.0.0-canary.8c0786d6f.0","@material/focus-ring":"15.0.0-canary.8c0786d6f.0","@material/typography":"15.0.0-canary.8c0786d6f.0","@material/touch-target":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.8c0786d6f.0_1673534208005_0.6758819115440369","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/fab","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"886523d3ef60c3e82ac268d11840f2d1602b3eef","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":23,"integrity":"sha512-VVqoPWCsrE4oOErlQXzU2bT5fsaxwwByjdvrR4Bg63maPSjCHTRGbYftjpBb6HD2TdEWF5ZOs2pgxY1RQ73sfw==","signatures":[{"sig":"MEYCIQD191BPBBmyC/C9Kzfad4ryH8YPAv9HBA4uTpZRQ8fcUgIhAOvukgC+70KUr1enCNEJhGeyAjGmfJBjqRno1ShaeqB6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvYNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNxA/+PcIzMOHhlR0Sv7CjYG3j+xxQF8yFV954NQDecD0FmWexNXrs\r\nz1i/z5nrA7N994keV+NTZ1e0XsnvtMVV6z+8h9P0yiodAINo680FMFEyuHn0\r\nUaDkNtpXkNGACteXfD+bCpR72hRiKb05bvxLkdX+aLnoc4jYVG85sh7VgoAq\r\nmylrogCP7ob9fpJ4mzU+1ZXSt5sMJZAzKLQCOLfV49QqU90X6riEwhSZvNZF\r\n3G6nwZhayH3nzBo2Gh+li4do4+GM1iu/bNOZRAzPXM/ab2GG94nlBKxKs3Qe\r\nLLDXaK1Z8NvjELHeW2Bq4a0avLlXWrZ4KR+rXvHJ3xHp9LHvuq6y+TZkse3C\r\nc7ndcQu+x1fD13yIc1ijajYuHxyvnZ0nI0Onc1jA1f4d0iGsAnYCpLue38Ns\r\n76vFAexaY4NqCAkV0rm5ZY/77JyDbkNCYkjxOvrydNPKHpCLngpSNaq5FIr2\r\nHESfpL5m9a78qvMcy/rmeLraIPwNASthCs2MreXJRpJthIWAxETzYTeZ2EXQ\r\nn8o/gMpBTS3v1fbCv/I1kaA6h2/7xf+eUZLIBkoQvM0WVXHLHXuIltnO1nmt\r\nn4O4j9ATY059f4EmRk7QHGIUdv2l15VVfjMQ61H/wwWzOTtWK53MsWzw5T82\r\nzXdC0XlReMnC80oLmSutV5ZotSdPJCbguR4=\r\n=Unfg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8a74f7c6d.0","@material/rtl":"15.0.0-canary.8a74f7c6d.0","@material/shape":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/ripple":"15.0.0-canary.8a74f7c6d.0","@material/tokens":"15.0.0-canary.8a74f7c6d.0","@material/animation":"15.0.0-canary.8a74f7c6d.0","@material/elevation":"15.0.0-canary.8a74f7c6d.0","@material/focus-ring":"15.0.0-canary.8a74f7c6d.0","@material/typography":"15.0.0-canary.8a74f7c6d.0","@material/touch-target":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.8a74f7c6d.0_1673983500852_0.7285246461832393","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/fab","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dadab6015c71df91aa14010fe44f4380958ebb03","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b4687fdc1.0.tgz","fileCount":23,"integrity":"sha512-Y3NpVf7hy9BOSUcHUMecFnJXwfkZjVbUHa3TcSq/cl7rVvdf/8pxLrD1dwUrfG29zEA13bGZ2IMR4oY5DDmEYQ==","signatures":[{"sig":"MEYCIQDdV7J5m/iRLd8wpeCrM525fhI6zn7QxR54fgVYqA6NDgIhAO4YOWV5ncN9KZV77UlsPXUDsWN0u3lCqpnWee3pEAm4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ7ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5uw/+JQvku+XJY85fTACHf7DJHucRwl/kY+hHBaTJJJhj9lOuIwVt\r\n1f3x5N8B+gnitIPSbdOYm0g5QydZrJU8JU8qRsLEMLRQ2j8NuDK2yc96v3iO\r\nUGYtJF4a95yC/9V0L7HUKulBpjfrmS02+5qgoBHl6sEBsJmDnN9+BxKx1xi1\r\nmUwMM3fX27Tzt5pyoesQmLTI20D7WHPPwhf094BI7o3CaHDTdhuTXYVzKeN5\r\nOKYULVByJ4tFzLACyci/nqjVaDb2N05HuJFX+xxiNWfFDJrpM5AfNzGCvCRE\r\nwpc+OYgiuHr8kR7/I+Z4ftC7MSYLahhoykNqs43UiR9pOgQzUlObxWlFADw4\r\nuM28G1CZUR5oNYZBfDMgxfqWVUNPO3YHNt0TB7GG6uPinmeCxpg1cM2NlAsC\r\nRWup6hyBXNbdXfhclSGTGgCNEV+Y6LO6lXWyPO9mPdQmYsh+WXUkz/EqonK1\r\n/iBHD7yjrV3aS3DUCafQ4131rc4IutCUtE71r0Ea6KaW+RCRUwqBMMZRyqrq\r\nZ6loJladOrUEW0s+GeytO0CRaqsu/aHWgXCYS996NfVCydTNAsL6lotwi3cY\r\nXI4biWOnHm+0OW4Gw4Fb2zqbAn898T+VfF/OCBZIzFozSkm5CBmSKJkNI/F0\r\n6Dk0KZiFmhpeoyYmABNY81xRGSWrXHOxCwA=\r\n=eya/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b4687fdc1.0","@material/rtl":"15.0.0-canary.b4687fdc1.0","@material/shape":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/ripple":"15.0.0-canary.b4687fdc1.0","@material/tokens":"15.0.0-canary.b4687fdc1.0","@material/animation":"15.0.0-canary.b4687fdc1.0","@material/elevation":"15.0.0-canary.b4687fdc1.0","@material/focus-ring":"15.0.0-canary.b4687fdc1.0","@material/typography":"15.0.0-canary.b4687fdc1.0","@material/touch-target":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b4687fdc1.0_1674157785308_0.10412046804778496","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/fab","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b836b9892.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7e5961291d0331937d42aa0eaa73a3ea8b2982b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b836b9892.0.tgz","fileCount":23,"integrity":"sha512-jwP6gtmXEih7MLMelPnVDVkKELS49JnyEYak5x3V6658ix1UIB9dYL1Pkh/muRbI8OVgGeFT1qn91t6fWwamKg==","signatures":[{"sig":"MEUCIQD1YRv7a4fEW7d1h4KgGSYf6S4OSapXfVqN5kf9RjmeDQIgC06sDHIAP5APnjxYd7SMp9C0nBqsUls6hEzA+2jdpQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F4oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtcQ/+Kx9DxStJwrMA+SYD8BBkSuqrIaQTvdknQPrOk0JkeuBfkTPu\r\nQNDdmmm63HnmzIwhNAqorcFa+OO9dx4pPbyFZwqn6q+d7Mpy7L+bBVcfwnRs\r\nEuNcG7BG1i0EUOa4V/Z9Wb1xlbhLOOYSISGvqs7nMofnsAiJZiKuimEGgM9+\r\nRB1nA3qri2l/LNMjOJutPz3AFzwTPYOT49t2N3yMWQsHti/+aVuMq48x1hR8\r\newLu6GoJbLqKYiPoIkROh2yAh4NEbqjxP4sh9H+/ogXjDVEQjtD0VNXmGxOH\r\n0OQZhId+EfUmQj9dXCsU2hhwz5F2mZRztSFojJbdrwBph0iEUDh00HUQlUvR\r\nryrzylIjl0ulEz+DUu58LDRgX2mSR26gw1GAggmzaYFDTlY7w6JOQ8UYqMT4\r\nCtPNAOkW8oyBJJx6ZiLKsOYBEhKyuHFygsZrJsspMwg/yFP7TARvZ/J3wc/u\r\neils/S91oykRYV6x8rFyl8CE94jwA7imcg/SF8/uybo8reiTnvM21ma28vNG\r\nXMKhQVvkTiuHmVE8EgcH0OWogOLSMX5ygCHRyaMDkCr6OGKuWWt2ulLL8d4U\r\nUGL/nUwG1UK5uin5rcjgGPOpA5/6qevrspYQIQuIO5DemYCD6lYeqh+KKNH8\r\n8Z27XUSb1dB0K4knQBdGupeBKG/aMLuo+tI=\r\n=Cp3f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b836b9892.0","@material/rtl":"15.0.0-canary.b836b9892.0","@material/shape":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/ripple":"15.0.0-canary.b836b9892.0","@material/tokens":"15.0.0-canary.b836b9892.0","@material/animation":"15.0.0-canary.b836b9892.0","@material/elevation":"15.0.0-canary.b836b9892.0","@material/focus-ring":"15.0.0-canary.b836b9892.0","@material/typography":"15.0.0-canary.b836b9892.0","@material/touch-target":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b836b9892.0_1674599976461_0.5567553607163809","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/fab","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b3aaca5a191eb3fae53912d21ce3420196f87a7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.e8912fd37.0.tgz","fileCount":23,"integrity":"sha512-Qq2qeTO2W/k5CSsjOOnX5E8p/IZ9oZRLhlsy2kaM4RVm4lDpR72AUAyDitlZ+A41l6BBGtdr1JfhWTR8YEPbQA==","signatures":[{"sig":"MEUCIQC43YqUMI2e0np8O8d//nVDUSs/NDRda2yBBb7Z3AHXBQIgLQ1+pgQAWgXKpikgKa9zMg7apMsDV5lT9PNfW5k5upU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sa1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMcg/9Ekdt4RKTHnIL4YEdn/ZuhJ9cwsnCUMdMdOw+ItqdYCGU8Wmz\r\nqwAPGtoj3KNVUG1fBxMyDQtQ34mUpKviShOzTdMXAiwcCPmDNstib8TM77i2\r\n+ksCpX59WzztBPdYIEQcVyMx+WinK30o+pYFu6kgOkCq1dF5JxDRRcD6ZZog\r\nOUOscKQmnc+u6+Lnhbwz7BYjcBYQoJOYL1vCmk7Gh8ylKnCgSniUx4E81f4C\r\n1/B06cnwBtLUy2DPhKcyiwlwuqWSPTv7UeZhMLQjZ5Vl7O6J0xXa5TGdabDZ\r\npFSSLbuKB/6ZAc+wgbrstGDeQImBrxZf9PMRgKlD3gWWnp3sDUhQ0HvOQ2od\r\nii+5KeUwz2uDdfy3aBKxyDvU7AWGYdGMTfxZbY1BHWMblzAVtwyn7iyGU+Nd\r\n8HLtCsL96NrGofltA0Jh4p12FAZmTj5xKRJLoE7GYmcqcoj1dwg3ZRm7iR16\r\nuHdo89KR0t/GwGfFgVaDaN4eh75ZeiIz7IJHpqyBspiyr53fLX+5LD/XwUyU\r\n28E0Gw8f33vfrZpR5g83o8qWmG0byTiulRYfe0nwl1A/CGoITtYuYFoU0trm\r\nl2ogUPsQqf6PqV32ltf59NyQuDd21SeFdwuLwPX4LXVVlJIVBnfA5YkmJ5Zq\r\ndSFy4E/WwQhr2JS2TFHaL8gew7uxbZqxA7c=\r\n=itGn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8912fd37.0","@material/rtl":"15.0.0-canary.e8912fd37.0","@material/shape":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/ripple":"15.0.0-canary.e8912fd37.0","@material/tokens":"15.0.0-canary.e8912fd37.0","@material/animation":"15.0.0-canary.e8912fd37.0","@material/elevation":"15.0.0-canary.e8912fd37.0","@material/focus-ring":"15.0.0-canary.e8912fd37.0","@material/typography":"15.0.0-canary.e8912fd37.0","@material/touch-target":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.e8912fd37.0_1674757813699_0.3437607203073376","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/fab","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c60cc7577c8f6a1a646f4d57a0fd29c148a3582","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.16fbd30ff.0.tgz","fileCount":23,"integrity":"sha512-XWZHBjagY5hOg3BPUGf2n2i4QQtA+1tuA7MzwtZtjMcgNwKMm890S7G3FrPOzSpjsLiSAKpl/3zbICa5NydJQQ==","signatures":[{"sig":"MEQCIA6aaoKrvqrNwANbrjBEwt8Y9cETl4vnIPiS4eshbebrAiAmrm4i4rfb5N/nsl9NZSJyoL5zTnflkqTL3ZcWAUJUHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sf+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHaw//UavBNbQNKAqDDMRvP3AAJD2oWfpu12rj/3FFGXyNlsApt6jH\r\nYYHe/MhrM+JGF1jEuBZZd799nVflFqUEwz/uEsSpo5cuZpAaYgz3gLvhImwM\r\nHesTb4ff4s6VPvnhYd/YPoLpnMbo8JPF7jBuXVy9sjMGHgLkutXEMqgURZE3\r\nYo8TrnX2N4B8ZS6WtrrSBL56iZLBjZ3Wv45FylX3SA/cNqEGktcu4bcr7gMf\r\n6PevlM2SpyIJgZuQ4CfvIHfg0LbyDZv9VMfkt99Al8hRbhF3QzBDtnc8/vmF\r\nz72CCHnmVVE04hcvQtQnAE1tO0ApdLMtb8Ud0aw/UysZxfLMbn/qcJaJE094\r\ndMKrATjMlynmgB/5lMHpZxfPPMikOpmo8Ra2i+HvPA+3JQ1o6pH5meqD25IB\r\nqzh+2yjvG48/7fEXJ8v7LlCuL+jf2lBK3iFxVfkMjzi8Z38Vq+YVjvpY1ijs\r\nT76D5FLLkeQTNP1noT9CHvaH8GLJruHBrM3loHSHuQqgwbm2t3fLSNTscqMo\r\n7khqJgGz71fyMHf5SNSFnQZDWP//WggVixL3tmHvvNWrvrJyweDnarh715ln\r\nFrKXxQyQCuSPf+Bc2qnodIWP+I0UpeaonkliWmQmIx8OV8yYOBAzcRw7GL1R\r\ndNPFcG56KJDso4FXDR+pwhzMg76Ovi+iCGI=\r\n=t4aL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.16fbd30ff.0","@material/rtl":"15.0.0-canary.16fbd30ff.0","@material/shape":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/ripple":"15.0.0-canary.16fbd30ff.0","@material/tokens":"15.0.0-canary.16fbd30ff.0","@material/animation":"15.0.0-canary.16fbd30ff.0","@material/elevation":"15.0.0-canary.16fbd30ff.0","@material/focus-ring":"15.0.0-canary.16fbd30ff.0","@material/typography":"15.0.0-canary.16fbd30ff.0","@material/touch-target":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.16fbd30ff.0_1674758142741_0.5900748238160323","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/fab","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.033ae083a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51def8aa338a5c76f2efa9821299ea6e04d9e3b9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.033ae083a.0.tgz","fileCount":23,"integrity":"sha512-Ba9tHtjzkOsK3n5Pm+bPCS3uFozAGcgFmFpuAgq2O1RJ5Iodlwkmt8pkUThQcCCtfGPpXdb31gWsSJinurE8Dw==","signatures":[{"sig":"MEYCIQCybZXuIyYOp/b03MEGClTnj6vxZT2+FLCqGZlIcdHQUwIhAJUdppllC5uWqVv9NWH4sQqh6RJeFZt4KdBq+DIFGSXR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tQYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKqxAAokSyV7IZdFXgc62JehjByBRxwDjw51TW9OpZRFir3tWOMgNY\r\nNRJMvtBN7ZBlxUgYBEO1jt05nBR3VJixiPR8E+Uh2zI9ztJxD1YtA3kRmhbP\r\nXtvhEXCWHa2fmf3RAGAKys6ssu9P4WkZo2x0q1N9/4qsHgbgSPGQU2sX6h6z\r\nybS26D2oxqnJY0s+Pafg5kjlBDcyI2m+09ZG4ovK+sgyWEF0ioY7TuPhvwJx\r\nStkiLr7/sKQn74cnF+5ppjKg0SjcIotxccH93yNQegXR8CzJDqq7IAwuZhUx\r\nMBTVEizfhcC1G92PzVi0oITcFpKifoZSjkvo8dXIxcJsf/tYeqfhQOW+N2Di\r\nQezMo3TPkNRLpT25PTwcpDKCxHkawxYG8Ymud9FBFOUkdMaqy0qUArM/+ozM\r\naAADxLyhQSyah+YeKpJEiTmXNRu76LYxyHWtk+ymF/JKY1UIWxHkS1mI+mDb\r\nCWsOpZaRAx1Pi2LIlK+tY0qMs5wSgT1UHyolSNTK3iQvRV5ggBN4aE0CTlwr\r\nu4wXlKhIpTaKgWIlwXYCgUem3ZnusiQoHzX/So7kr0AKmnr1c7Uo9vy4x1Yu\r\nril7qMQCNcdeidkphQX5odQr4EbxQJeETCjdV0b92ozBbDuLvw+8siPXqXNG\r\nZywWmP4HQH0hksLu76Jfsn0ld625kqfzQpA=\r\n=ubz2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.033ae083a.0","@material/rtl":"15.0.0-canary.033ae083a.0","@material/shape":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/ripple":"15.0.0-canary.033ae083a.0","@material/tokens":"15.0.0-canary.033ae083a.0","@material/animation":"15.0.0-canary.033ae083a.0","@material/elevation":"15.0.0-canary.033ae083a.0","@material/focus-ring":"15.0.0-canary.033ae083a.0","@material/typography":"15.0.0-canary.033ae083a.0","@material/touch-target":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.033ae083a.0_1674761240006_0.717890929309297","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/fab","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae4a8659bc6cb151fb79add69f8670da4fe8090a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.3a705fa1d.0.tgz","fileCount":23,"integrity":"sha512-iSfal96uVMimLJk6FpBGS++CyorqZFetxzELIaobT/vj4BHwMrflr3+nj2jV/XSH/iyUaJtx1wETzVqweZimUg==","signatures":[{"sig":"MEQCIGAdCIwhqoRsvwkW7+LroayXZoGQC3Wfon0160KkmB/FAiAPxSxXjyOCF2eTejEfjLCIDm/vosdW5/dwxTIkvynIAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FOvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqChAAinD5QmNeLNaaciWT4qSBS5cxfl/6VmyADAR8Fzdb3Y6HZQHw\r\n0THocWYaBMb9cUpGgGDT+z36TWQYp7kENYCQywqj2sEnxOewz/HGaNSjdz1L\r\n6AYWN6YI6ppoNCC+VBTbp6qiIToShrr8qXIU6OrqV+fpwct96Q7mL7misY2v\r\noIB6q49E2ThG2RnFOcAP3EulRzB5mxSADIxhN4oK0KvzoBB7KHCQCZ5b5g7d\r\nFfjix2JZaetFoqznU6H75x4iCWzaFefwJ9Yjq44jMAJ9T8uVQn9/7rSpNlbv\r\nPm5l7wBxZ+/l28YlZW79tYAegRVNElmOz4Oyn13EkotpjGPFYeiq6wSAnktV\r\npWrYYCkv7kPQ5bTzNdLyptH6oI3/y9Vb+AQ9mwhHhHn/yGOFSrN1uhxvCOEk\r\nmcNfqIYMBzJadLkxkWOKsPhHyXY8E1vahkPNnFpAhYdfHhr8WzF3bwa9oBDm\r\n5YVW1iDaB/W1xk06vRjUC8mgPmMWxbidkMHzQdQsfRmdl3doFd42eD/5GEMY\r\nXai/fmwyMZc+NkAB5pSW2n9DIlSkUK+kdHOAm+/tt9AWNbqSDX31Yz07kKj7\r\niAYv9SdjsFXDaU4Tr24elOZEaTyjwHBe4MWYW7TBFSGurKQZoaQOUIWX0sDq\r\nxmpUDTjneF34nPw4DdAthVh8ixo0n4KAxts=\r\n=+vx4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a705fa1d.0","@material/rtl":"15.0.0-canary.3a705fa1d.0","@material/shape":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/ripple":"15.0.0-canary.3a705fa1d.0","@material/tokens":"15.0.0-canary.3a705fa1d.0","@material/animation":"15.0.0-canary.3a705fa1d.0","@material/elevation":"15.0.0-canary.3a705fa1d.0","@material/focus-ring":"15.0.0-canary.3a705fa1d.0","@material/typography":"15.0.0-canary.3a705fa1d.0","@material/touch-target":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.3a705fa1d.0_1674859439608_0.008377110523673625","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/fab","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90734f4665197cfe1a69f032027b7cba8ea4aaeb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":23,"integrity":"sha512-sdhdG0RLHSYnnoqzoUlItzvgf2u1sIlcISq5risgIXVlG2DsA/zrvTI4ODjyu8oVEpzMpjpUp0QLojHWO2Dy7Q==","signatures":[{"sig":"MEUCIHr1OvkpvB38pdL7jCEpxTcVLYxB/e8H5xsD0jsTqF/6AiEAoeEAPhB96+o5t9YQLHaFTtXSCVxlthV+pX10BFqLBXI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TQYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr92w//d+o18ZM6NaY4hBv1TUpgPd2L70EF63locJC3GdWD7GP6i56V\r\nF08djCVRcKVlP2BMhXnIMVukT00993qGEazN0PB59YVRlztiZwrxY98oqv90\r\nJbBLyjjjCUjBQlOOd9obHhGHnogDVLC/zOqYQvAUrzf4QKoQDCmCpzE4NXxg\r\nzo3FJcSwG4i8PyCAiR1W1R/w86nMZ4cF7883N29Vw3vlaXxUXVP7zhekGyYs\r\nnIeG1XnLG6n+JwJpETnnSNuRXVGr9Yk98Iiwjg9plBHghz1WW4tuNQqN60rv\r\nhvR0LWK9dmfarmouqPeRYBJnbhf6f1vkbthDCJLKCHt8gF+OMkmeq49a15N/\r\neo5GLysZsrBchy1JZE/DDqFu10x357f0Z+d249X6gWou1tFFlDhKR5/255ET\r\n0vjIUs9n7BBXuixsdS7tavs6BJw7Re+/6f8fZNV2tFc4rQBonZKC5GBvMF+0\r\nhsPRJO3RUFeAWP1aEVMg0XurSXETu16mT/oE7s0oklBcBCigz+BJsFugEjhx\r\ncDuEGUYEUUZvY3NjCf5v6qVUOQV8al85NeStF7drhw1NstajOnByp/jmTrCW\r\n4J6InSf3pSzdrCqmJ81AONSPsun9uMtDgSPH6amS9sVGZsftZgHsRMLy8anP\r\nPXAgGxjp9RaPx+2mYVXUYTYMbl6N+IRD6y0=\r\n=puke\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d6bea2ff2.0","@material/rtl":"15.0.0-canary.d6bea2ff2.0","@material/shape":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/ripple":"15.0.0-canary.d6bea2ff2.0","@material/tokens":"15.0.0-canary.d6bea2ff2.0","@material/animation":"15.0.0-canary.d6bea2ff2.0","@material/elevation":"15.0.0-canary.d6bea2ff2.0","@material/focus-ring":"15.0.0-canary.d6bea2ff2.0","@material/typography":"15.0.0-canary.d6bea2ff2.0","@material/touch-target":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d6bea2ff2.0_1675179032321_0.11588261394934851","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/fab","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7814a783e7ddfc1890850675f895e07f5a99b997","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.0c94182c8.0.tgz","fileCount":23,"integrity":"sha512-h6Q/m+NwrHksjuwUiB+ciuRvNpfxQNB++hhJluozqxq8bwvCi/gyBkHwWv+tknI2d1l8lgM9h0tJq9r3+HWJfg==","signatures":[{"sig":"MEUCIQDjyk0fh+rUmvk/uXBHUKJFummol7VeVne3yhRvpFJoUQIgDLo10jxxUPvYElOPdTt6gMtXKXCU8zFLx/8FyYk8znM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qUCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuEg//blC94MwuBFZg071dTvjY2Gr4bT+9RkX9hOenvSjqx5p0vPtJ\r\nGpq0mdlPW8DEnRI54ctAH052BEevJv5GDnUeQ7uKNuIDlnSAOwnaCmm4wOo4\r\nqTa418MmxGffpKJ4kj7CUy5IfdklUag6yFgAH8PbdViT5v/N58AZVEmAuv7f\r\n7cHmb4kyJTXQlpxIyQzsyk17UmJuWoNthzaAAsFwJkljy/8ZAxH9mb1gLx97\r\n0yniZ6B6z5nlM4puPj8La2wUZ3RZ4nGy74ub/kFoXzLyekfPrwlGCGTzigal\r\nYjB+f7DLgJVOvFXUsm+QazGKcX8+U6pF0voVb9IIqkhjK24HgzdcmSVxKOUE\r\nl3fH608ESdwb2DQpU58DK667mJY1hjXsnYF2RfEkCMAnN1v2qVPyGNMb/zNc\r\nC4A02Tggh6ZufUgfEAph9GXQfm1SQqrXD/6gDzC4DcQVuBld7PxzsAgdZo8O\r\nIl8tUQfoAuQsTj/tl7moZ/qtBOEIVp0hfebpIAI5Q0zJ/7hcJpVgZ5l4kSfW\r\n3UzMl2ii2Fwf7JWEbQ598LFe1y8w2ns6eOduZdBkbY8Mif4QrrbTMlqWGRRE\r\nZOvLISxlUBKzwZcMLa1IBtQmLeBwiCweaVqLr2PoAFYfJOQU0+vzjTO5Icyc\r\nTxH4LKBUwQwLsMWAPKs/yGpFl56hgBSsPIM=\r\n=T9dX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c94182c8.0","@material/rtl":"15.0.0-canary.0c94182c8.0","@material/shape":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/ripple":"15.0.0-canary.0c94182c8.0","@material/tokens":"15.0.0-canary.0c94182c8.0","@material/animation":"15.0.0-canary.0c94182c8.0","@material/elevation":"15.0.0-canary.0c94182c8.0","@material/focus-ring":"15.0.0-canary.0c94182c8.0","@material/typography":"15.0.0-canary.0c94182c8.0","@material/touch-target":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.0c94182c8.0_1675273474554_0.6603277487108761","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/fab","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.15b221540.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b490f633c405fa6f56c8e97c26ef157d17a701c2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.15b221540.0.tgz","fileCount":23,"integrity":"sha512-nB42wCV8S7zQ3bOVh3c8ZyaCZS6ARjae+LNMfsCAvKXWvW8UmU53rK2KBn4ZaTPupim8UPgEDMQbgjQNLFbhvQ==","signatures":[{"sig":"MEYCIQCj1w5yYExZjGZYGvrftbU5PsSJWhKm27PfLM27f2x5xwIhAOpjbIpjmyxcGaaJGaTaJnwfiDwqYn1/H4jg0SizpWxE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qb7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq79g//UQJ4IvSCjltaqRa45Ns2QIWEGsNfyWwjRfL+3QVa7RmcQLf2\r\nYExvhBEjBpU7K/2u4vExw26IcpY6BkUpniyAG6tWGin6crlYiSG9wkZNmfOq\r\nwPe8bAu0UJMe0GVAedDvSWqIZOA3CVbM9mNuXLdu2+4i24ilK7Dq66Y2rGDB\r\nVHDMk3j2I91Hv74v0QyoiYwtKkCWfRMJPQK0pRIE41M2fABbeQspCChx3ksk\r\nmkorj3kS28L0kOGXIrf4znOXbQkSet58ELMq+TEYjk4hFdX8pmAXb+Y46DHg\r\n5lSujLAVzPdUiZHtZV6E71hsvhSygzq/i3FJONb48hwQa2wJB1vffMxM0ONB\r\nJq7YYlXZV3J0BQlZa+GZGtKgdaETZYYNk3WMvVpsHs6T718YPC3FvglWdkOB\r\nkt5F+uoeRDWwAMb44TDraj+jcXmhKb2dcIU3+4E8N/O3lEqT9M+4pxjAkWCh\r\nmQcfCTFF3Cs1QaY3qGU6FKhX/AkJeRUJU5uq4YRvd2Y3cBT30ktwSOoMYxtR\r\noDZkICLHiq6rc8OylJzwDp45ELkf6j0+5c7qg2l9PuCY889Al/d0+4yRfTKJ\r\n7rwLaa8wvn8slDw4bIZqMxt3Q16xQTuEJYhFLCzyZKbPdZneiH963XRmVFQ4\r\nsgYZ/7j1TaS/zTicY9So+7sjFq4lmXBEai4=\r\n=xn/p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.15b221540.0","@material/rtl":"15.0.0-canary.15b221540.0","@material/shape":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/ripple":"15.0.0-canary.15b221540.0","@material/tokens":"15.0.0-canary.15b221540.0","@material/animation":"15.0.0-canary.15b221540.0","@material/elevation":"15.0.0-canary.15b221540.0","@material/focus-ring":"15.0.0-canary.15b221540.0","@material/typography":"15.0.0-canary.15b221540.0","@material/touch-target":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.15b221540.0_1675273979730_0.30475344820173267","host":"s3://npm-registry-packages"}},"15.0.0-canary.eeebb8bba.0":{"name":"@material/fab","version":"15.0.0-canary.eeebb8bba.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.eeebb8bba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"044ef8c13fa44bc50dcf7c962861ee4cbbd7922d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.eeebb8bba.0.tgz","fileCount":23,"integrity":"sha512-Zr5KaWamOixqtQVn/n6/zLr6IVkmf4ExhITClsATgbKvz0qI8deTaxOe63/iPveBC1lhw8uctmDnLg+2/TD/KQ==","signatures":[{"sig":"MEYCIQD5RpTbnDkcjNMGMNiMcm+OTaSd2diIuDyPi3VBICoqFwIhAL5hFweRz2F9seoBR6uZ1/J8+6L49b5mGr7FQH5yW6MI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2q3uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJPA/9HvAVKcRVfn4mcEOVat8C5Iu51pgM81K+FGPA1R1xWwSyCFsp\r\nN8z69bzZKC1Th56GFItn3cdEOKMmm0tyFbimteDOdxvdIY6FBI70PCTsQPsH\r\nftOSwNXoEhwxwikej0WphW8anChr43zRJ26hR0ST2EL2ghm5wg3SyFlZK9Ip\r\n9GPLdgy+Dy32J0CsIUXnHoEQQFytYsQgQQQW9jHnrX8iyhXT4FLWtaRLNOO4\r\nKyqZt2hfuYFYNSwbvi/U066eQJg6tys4TwOo0v0Cg4A7mdO+PSt1i7NVCPvv\r\n5l/PIsJ/jGsL5kLg0weKbyM/9+XaC9bDgbl2e+abGFm27WTZ2gGexU7kRJiF\r\n63cx21cMeo8HfoyyBh9NdN7IQXXHV0eSbZt4fIaoZsFgzLPbx8sHwWo4x5yV\r\nTiqNDF6Hs8ImSxcSm4n8f/YHYmfyXu/vS5TD6v6hj76xCCErxO/INqZ5GmSe\r\nDLWKbuQhf9AK4gV0BcSNiDDQ3oaAHkYjwLhYegia/oT9TtXMUfdlWYL/Khol\r\n/J0ncMwLybfo/ZzuFYyt7CDBllfcHPi61HCa0Wjg0qMUEpUyt0S08IbkcNyU\r\nKqNViT1c8bXLtDy7WDJjF0r8FBexnpnhTTNqHN7i2TYrK7rUP1PsVmJpogWJ\r\nBamh1krnmhYjVsyEFZ4z4yMUYqik/4WkGKs=\r\n=mrkS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5c8d0d2ef793b8bd564888fdde6b97e8a2502cdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eeebb8bba.0","@material/rtl":"15.0.0-canary.eeebb8bba.0","@material/shape":"15.0.0-canary.eeebb8bba.0","@material/theme":"15.0.0-canary.eeebb8bba.0","@material/ripple":"15.0.0-canary.eeebb8bba.0","@material/tokens":"15.0.0-canary.eeebb8bba.0","@material/animation":"15.0.0-canary.eeebb8bba.0","@material/elevation":"15.0.0-canary.eeebb8bba.0","@material/focus-ring":"15.0.0-canary.eeebb8bba.0","@material/typography":"15.0.0-canary.eeebb8bba.0","@material/touch-target":"15.0.0-canary.eeebb8bba.0","@material/feature-targeting":"15.0.0-canary.eeebb8bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.eeebb8bba.0_1675275758287_0.988609946188487","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/fab","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77ee15ff67610a57531e91dcc28aa8e9b3a3a48e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.6a4b3f834.0.tgz","fileCount":23,"integrity":"sha512-G37zyYJ39xQ2JH16rcUX0PvoE7AymNoIMSZLycdMFEVhKeBbRW9D2Wbj5ms18XyUR5mUVWScszfoHLS7OoNFfA==","signatures":[{"sig":"MEYCIQCBHgDhXuKNiWsJDblkqWMvWvp1v18w4ux8KC828YsRHAIhANj/nFT0T/kKdeI0ToNnHYtNOBmFWLHwukKdlCBFvraf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rZtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrU2g/+MVj3PLgRfoEEIF5WKRTGc3YIKLn5D/OsW2xeKRj/Ng+1HN4a\r\n/84XEEylmScrKXCKrrd1mluKSlpKIBK1o+ux5X3tZyiHXdFNQiOUaRo/kcF6\r\nAJJKKYAt1D+D0YgmCajfbKLcnuGiUKp8z+zHYbCJZlaH8d+sLFWvDJMLaceX\r\ngDpdgSZuB8W3oHMk/qEQ3he/P86wXh8d7AuXRJ42V0WxOTvMA3vwxmUt+jx7\r\nqE6ofjIZhbYWDjEJAcBQ4V6tJSGbcoLuqQtcrOdYnkrHA7qMe21i+fNocfSF\r\njMGfbP8nWbNHUDF+0ltlS+El1EjzEk3zjxuloTUVNohMmnlJsxqkNL4y2YV0\r\n3UP3U4uTl1Ww9RG+9tfYZVyG7nGzX1MbRU+2+/Q4cKCpQQKSW/hF1e3QSPt8\r\nCMuWlk+N70U3A2QKx/rtw2E5MkLnGuAPbeS23G2e7wnUEZymIPO15PBluEx+\r\nIMLPBSQcDPFBz4Q9WmPHhxTdbzwRCm6IoeL//I4Bi6l2RYv2MekWGikI08Gq\r\nZRnd6JE8pzWGNB8KovcMOkwiec8kgsePGSxgMMRMXGNntYmxs0cNNhJhew2d\r\njaHCaN51HYRiEF5vDYsg2/4TfY85ReMflMYJdXWl3hbr0r2tCJu/9CmoMOTZ\r\nFQ8hJdwPsxadEhApVAp8poVc/CBJmZnJ3oc=\r\n=n+8B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a4b3f834.0","@material/rtl":"15.0.0-canary.6a4b3f834.0","@material/shape":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/ripple":"15.0.0-canary.6a4b3f834.0","@material/tokens":"15.0.0-canary.6a4b3f834.0","@material/animation":"15.0.0-canary.6a4b3f834.0","@material/elevation":"15.0.0-canary.6a4b3f834.0","@material/focus-ring":"15.0.0-canary.6a4b3f834.0","@material/typography":"15.0.0-canary.6a4b3f834.0","@material/touch-target":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.6a4b3f834.0_1675277933516_0.2164072247951485","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/fab","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb02072061fe343393284f5e0abf6d00a9f770db","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b177b40e2.0.tgz","fileCount":23,"integrity":"sha512-GkBTxjKBDM3ZUlyHXwJGL1VrQ78uLSdhgG7mDKMzEXS6Xe/lQcyFute53wc3lYXmlyd/VbBSCCz6UBv4m9SbnQ==","signatures":[{"sig":"MEUCIB9VKCMP+MhLypofOJ7kNamWFr8UXklO67xfm6rNhc0EAiEA3Gt1ukt5WxHwpmZ7fRzYqgLJ34oUGAwOMcC66rDdQZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y9KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqK1g//aK26fmxGcKWvLYBRryT6sbl2kaoRHpbVkFL/KORr9AFJ5yEe\r\n+Ry9Hml573i9q3OdOshI4QhClrtC1mBfYLU1TSDQU52oR7CsjnC8Eaj4u2UW\r\n3baQDiZV3O4KPql8m6RLU585LvAaKN87zt63IFKLFQqbfM6wCwc1ISTBovPk\r\nFUK87Z8hFxmqhjuCxmFUlXJvR/pkRCmQb+Qe/RQ7BWJrEr3bizki5cgQp1GE\r\nQmlkKpIca2kIsa3h97AholDNeS+y9j170De73VSFV9mF6q2Sfk96pdpMvX/Y\r\nEd3mOkmvuyVx7o9gNfv24deNggquOCqwGc6s0RjU4QK71pHUwhPlYFj4PIkS\r\nYxc6KEipVLw99DAoqJHJnU0vGYZFbvd7ofqlHZMYEimE1KivQTNtX4NsTak6\r\nJmhJW2a/GZKNrgAoEmLbEsv/ds00TRVyMMxpxGMrtxt9/VPSRcvYBRV6r1Vb\r\nFDiv/kTACrqZvKClTL8Nx+lEBpENFbopErDFFbnOJigL2WwCRSKQxDCWlaQH\r\nOzvI/o6NnIHs9wkNsTdbchzNmdCa6OMN6lWBWGwwGoL/BbiTltE6YSiCGfz+\r\nF1fRqethqSNOOKMZaH13apOx0kwgg44dF17ZfgCkn4oUtrMzNaWU8UX45ygx\r\neE0VC5zpVL8q+xVdZcQ4itUif8wbp+32Vp4=\r\n=y1H6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b177b40e2.0","@material/rtl":"15.0.0-canary.b177b40e2.0","@material/shape":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/ripple":"15.0.0-canary.b177b40e2.0","@material/tokens":"15.0.0-canary.b177b40e2.0","@material/animation":"15.0.0-canary.b177b40e2.0","@material/elevation":"15.0.0-canary.b177b40e2.0","@material/focus-ring":"15.0.0-canary.b177b40e2.0","@material/typography":"15.0.0-canary.b177b40e2.0","@material/touch-target":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b177b40e2.0_1675308873866_0.3922505003077159","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/fab","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d9f821042.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12d3f05eeeccc2e27f8985496c924b5caa165c86","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d9f821042.0.tgz","fileCount":23,"integrity":"sha512-2JN/uzCrmCAcQuY5klZEQ8/qiB/mXOx9tnniqBslxaC7sQHQbNjiCWyToiIvEjoWVS+P8OdNqnoV4xknw8qYnA==","signatures":[{"sig":"MEYCIQC57C8C+M3g0ltmFVCFk9SYi7v5vpE6RfIVnnGrp0kksgIhAJqxK5j+pConfW3OEzwz6PBlr1g0tcjitdA1pDEskAs+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/UkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeAhAAldHoYhtTQYn6AmSRl0wF0qNj5kik50eSkeplKYN2AXE5P0vZ\r\n7cHj0v/e/qhs+RZ4w2YN9jNPlQwzUMXByKRie8FxPTl2s2HTUXaePRv6dv/m\r\nKlojQMqmqzVWlhiqva4teS5p3Vi9heOgUrRcWKho3tAWq48Yv0KfKBA3P+Gt\r\nHESjfUwHtevyRRAXdmVAlq7s1TkjAMEUwB8++p7jfr+RNZgDFVmBg3jInrqa\r\nRQk4zmIXdSIFrIA6F/f2iWkLctXFT3Cu20VnIMespJ24OufAnp1WyJwbjj76\r\naL9r4L4AVsuA/ouiEmIl5MYc019ya1TCU43sfChI3gb8j4pDZPMnnwWsixVL\r\ne0/N4aE2c52u6AZVxkYVdRQgrtkaO2HJXlVxQS38A6vbBxTGElj4pqx3vxVo\r\nMMU9JLfz9cEvah8EB0J5LkAqpIPTBhTMXEKTlJ1qkUV8LShqGQXGEcGF2VVo\r\nCLia+dge7UqWro6y+3NucBOIBJVS4IyrEoRUzjF1FF4AYDzKwErC+RLrPg3w\r\nKdQEl6m+v66tJ8/Zf/OlZfk0UZ7q1HqymJOY+Sc/SynYlzvz5Jw3aFyL7JF5\r\nV4j+9zIJQOhXRA8pxByTJHMVDtXtvPJ4IsrdB+sNd6Vqw3/0CEhpUw7kE4Hl\r\n70a7atvsuHGLCQJBeZe2hw60hM3nWD0NLBg=\r\n=TZ8S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9f821042.0","@material/rtl":"15.0.0-canary.d9f821042.0","@material/shape":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/ripple":"15.0.0-canary.d9f821042.0","@material/tokens":"15.0.0-canary.d9f821042.0","@material/animation":"15.0.0-canary.d9f821042.0","@material/elevation":"15.0.0-canary.d9f821042.0","@material/focus-ring":"15.0.0-canary.d9f821042.0","@material/typography":"15.0.0-canary.d9f821042.0","@material/touch-target":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d9f821042.0_1675359523890_0.40635451013050816","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/fab","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57a42c96416fa4eb4218431fb554afb8367750ef","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.47c7deb19.0.tgz","fileCount":23,"integrity":"sha512-WKm3a2owBd5yY19xjDRWknjXFluYQ4skdHknOAqYN559/sPbocwO49J8Tw+vUgyvpHAu0rU6oM3beeApJrXKig==","signatures":[{"sig":"MEUCIB14/X+sRiwqyEdzjUC4Kkakmn+mXnSeM6rIPoYmMNV3AiEAojhCfsoCD07JgiQ9sP+x9ere/1yTYU9CpGUiuwPgytg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M9BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqF9Q//ZuloV9HbwJcj5cZdqhkstKiFollBPHdK8GUQafGCg6uooGfp\r\nyEsb4bYBiZdLUwhcpQ9hn1dXSsnkXE7INm6+NGI0okVov2/Xndwwb4JWNR6l\r\nfbmLKB4+GiUmdLLRMHG4DH0PsquoKSz3chCw6oY1lUWa+qWaJ3HWu18IISSu\r\nt4Pb6sFvjnUomKrKXmlE0/0goAlYer8fanENQrCXX87gU6Pha9DCTlMG+K34\r\nGurDYMjGex8tSn051dbPZhfBBaiX0tzex7tWxSxWY4fmiefkhFHO/wWeXokH\r\n9N2ScQF+Fs7NqI80mcLcLm2W5MMIRMYw3beJUDPNwTVvWP4p5g3n2bV3PKn2\r\nr1b43aIVp0q+V0wR1sRu1Hi+TVRq3yuRqPAPM1FQwPZ8qteuZZexoIJi9O8U\r\nRUxogbAcelvV+vc0XYH/GVuvpaCZ/XsWztCNviLMvxqThr05TtcKM6kkzTwy\r\nXJvxpunaNcizuIrCbJaTYskAPxEuQr1MDFv6Kpa32CdrVOCFsvj+nt0l7amT\r\nFAkcG9y5wbJvQyN0BCTSkBXvAq0Kqt8f0L89qOCzN6oARX930VluaYdJg32K\r\nXONzmHQF3jIVKXlEGEhtYBcNbBqCVB8HEpc+GvPXdxHF21Svpgfy/vMU0oAY\r\nFKdCLn8z36P5oZK+JpGsoorFXmSThorxcjI=\r\n=0JUb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c7deb19.0","@material/rtl":"15.0.0-canary.47c7deb19.0","@material/shape":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/ripple":"15.0.0-canary.47c7deb19.0","@material/tokens":"15.0.0-canary.47c7deb19.0","@material/animation":"15.0.0-canary.47c7deb19.0","@material/elevation":"15.0.0-canary.47c7deb19.0","@material/focus-ring":"15.0.0-canary.47c7deb19.0","@material/typography":"15.0.0-canary.47c7deb19.0","@material/touch-target":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.47c7deb19.0_1675415360992_0.8655194436754217","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/fab","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd828486d0ce5d6f3f1710e1f66b1ef1e00fda01","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":23,"integrity":"sha512-GkDAxClhw+j+E8B1/lvs3lY8U2WTJqCwFqEQSa0wbcJXTNfBvPmzYCi5ctwB6U4sNv3MywLM1diQlBM7AXVOMQ==","signatures":[{"sig":"MEYCIQCMZ+cZ4w0+hefP4A1v6cp/Q8pWHMFHvEFVe9KU2GSN5AIhAP79pLgk3cQVIJikVdaDNhvWjmgmF6TRVmgg7PHhhveE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3ffgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpylA//WBLXNM8C9XvVQ9hUX6AkgMTTEnBkIhTJ16R6GUPHNqFJl/4O\r\nXX5yvf4k2fDe0ex0xanNfQ7czOQKdMR3IGTiT9sNCeikmJ+30TxxMLr/1LSb\r\nkwRNdd8IE0bg5EacCBjHUES6UBCCA+JOdF5s9NhXWfuxzxp//uMIlmGE7Srj\r\noqWs1VJE3GEnasexFPTDcDHlcUVTAbGCIq1R2BmJn7UiFK0eTkO3hDx5ILSC\r\ncsJH0QCiLKaw0qbk3qDW21B7EprRVD+UQxgD/25uVQGkrlRBURcguBf8msfF\r\nNDhE7rMnKzD+QToMrYEDeuroIM1K3scoFCKUSZD4t1j/HcuftUAfKpSFb66B\r\nKsbIqsi4mGBq4qProXYMe4C0yE2/9ZoMPUwbTHBh71bBll6FloBVdFJhqHgN\r\nl2KvFP/LEKBdBN4uEYNv1rfQQRStchsDPr9KhhYVuZCEovAxuGxNtpVfwW/u\r\n3OV5lrAFBDg1LEsxZPxhfd4nHAY1mu9oXpK7OCvpYCuW635NPWp+FCSCDg0l\r\n5Uj4qFJOrj76TmKDqp1FBRLnmmIVeRfslc973s/XRaebVl2bnGI8zyY4mDvm\r\n1G4SZUUYj3+8bTf3Vvnb7FQsKbyUczukaXd2hwCAs8QSZm9TxAiXxJOoXDJp\r\nYrdJaK1eFBgoJA/ZrDEgbzJV6634phV1Eq0=\r\n=jhWv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a16dbd1a6.0","@material/rtl":"15.0.0-canary.a16dbd1a6.0","@material/shape":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/ripple":"15.0.0-canary.a16dbd1a6.0","@material/tokens":"15.0.0-canary.a16dbd1a6.0","@material/animation":"15.0.0-canary.a16dbd1a6.0","@material/elevation":"15.0.0-canary.a16dbd1a6.0","@material/focus-ring":"15.0.0-canary.a16dbd1a6.0","@material/typography":"15.0.0-canary.a16dbd1a6.0","@material/touch-target":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a16dbd1a6.0_1675491296058_0.019542379944272215","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/fab","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.93416f87a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6865319318273cc40bb079e7465dae804df65a88","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.93416f87a.0.tgz","fileCount":23,"integrity":"sha512-8wpQG+iR+GuL8ebpDnSMIpKf9rWjZ2g5rjFwCm4ZPUO/BQdEmhOhvOh2CL5qftAudo0CqQX1pGf/Q6FQAGskuA==","signatures":[{"sig":"MEUCIH7Mr+kmPZ3nijVzYH7iP6HIAzrMUMsdL2plKNXWauibAiEArnQNy9by6OFsryD8FhZPzd9JnX46dgDEJSDpq69aJPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lEqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWoBAAo0d192HT6azNrDjDGcIC/yRcPSNGqHPvyZY8Yq5NOQvWY5ZD\r\nC/84pue7gD8e+lDoiR7YXbgNifyYTk9dO8ymjRVfRJNRtpPIepls/G8P2OXw\r\nmZygE5aJBlHtm5tE5ukXfUewcgDjLt+Aeqau2rKdrIIJwdzcm2yrTqZv2rBB\r\nXDUHH3oi7JSxpcS875P+IP0YSkkb6QwKjjaifd9Qx1xRfslqnLEVG0Rr/An1\r\nW44CZ6eCAj6cAzgJXwssHPKWfBrhv7Z3igalurZ937sUa73KrbQ3x1FJlQig\r\nzTwn0iCzy4F9qdN9OVlasbv8uQR5uSLd3WlcY9HSWwRWm1hxQwk00EkCchxE\r\nwkGCsDnajGYuGGIZ/pOKW2yGGj0h2W7IbDaAwNQJFpI5IyTOEMY+BXcTSt/9\r\nhmaQYjyycugHT8KTptmkHll+4pgVJKqp38J7246lR+RSoV7FIuXgfpIMo44A\r\nZT82aOQ+OYGHDujuDkBbxGyy5a81GTZ9YV6bg35B2BHmXVHYu40ZfqiDrvmD\r\nKbcvFsvAvytJCyWqYp0IoJWb4eiWW6bdVdWq6Ouy7GlTATxP4EXrNMvDOj30\r\nbMGCcpIR0N24C4xdI7ETYo1hft240YQAHRCWi06GmWeqsxnwbPP/ELd5cK3L\r\ncdwClfGE5QvOEILv+EBAIVeOWIJNRdhICrM=\r\n=qHXp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93416f87a.0","@material/rtl":"15.0.0-canary.93416f87a.0","@material/shape":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/ripple":"15.0.0-canary.93416f87a.0","@material/tokens":"15.0.0-canary.93416f87a.0","@material/animation":"15.0.0-canary.93416f87a.0","@material/elevation":"15.0.0-canary.93416f87a.0","@material/focus-ring":"15.0.0-canary.93416f87a.0","@material/typography":"15.0.0-canary.93416f87a.0","@material/touch-target":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.93416f87a.0_1675776298441_0.5147223363903539","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/fab","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22edf99bc8a0dcbad260055709eb9ef3084724ec","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.49b8e7442.0.tgz","fileCount":23,"integrity":"sha512-VkZecfiibd66JK2GDT8GFS97BEgtfs2JfKNPmYdNIXUjr5Ura5uHDhzVq3D0StNLTHnVp0IgXsguAoYiZemYxA==","signatures":[{"sig":"MEQCIDL45Aqsg/lGnu47BH42qiknd8GGhWXws3ZxtgyLegIpAiB1JcnIISZp2Wp+Gm9DbPw9rl4Fxd49m8XXtyKsIaTUSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tpFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrRw/+Ng2Z+HSe9SWIw38aOqfbu96wMESJwELLOuqCPzI2PMI0xncG\r\nB+pFjzXyiggi//M5r9wMbUrE/9fx231jFnRmxmXBKY8awkS3I1p4IHKTHghA\r\nTEq5Btmi1ewxIjOAZFCJ5I9ZvpsAzsamOy0XD3a4hdSAKeruFZPPKfp5ahwd\r\nYUYCzgJqCnhEqbFBcoLz5tI39vNOlThu0y6Njl+KcyPDp2/SEI9sr6/RRGZn\r\naQPhYHqADE38UZFo/AscMJtzcZRmRFrmSDp18oG06vIm5nMbjSkHa94lsY+T\r\n8+kHFYiH6b/rAvAgclQYnVp9PkeyV0vfRU29Jba1XUV2HhcAqhXtWNGhPIE+\r\nxBkEowE9iGE94dtx2BKEL+00MDEU9S/Avwlpj8SVe5FwyaE0SHq284xlmSVN\r\nkD5jk38VgCQADmw3nK+O3Aen/34UJDbdPzzXzcKMAH9MqpjZRiyMqNFbVyLR\r\nVbbwYESd66i0LlB/gHYTbYF6HckSaHOz/vZRknmNOyoPUIDZ9ctufFQPrVU1\r\nH8glJFRIDEkaGh6VNuKc9KtqONrP9+ODkYKbUTe/rBv0Q5WYp3jwxiPhoK42\r\n7pkRGuRRBLiECSGPVW1/ary8iDXTDTwG4MUxvwF/W6KxsL8KX20hj1TjD4h6\r\neX+GPhZfMnnK3KcDHlAvQfzrrSjUEOjRtPk=\r\n=4kdf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49b8e7442.0","@material/rtl":"15.0.0-canary.49b8e7442.0","@material/shape":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/ripple":"15.0.0-canary.49b8e7442.0","@material/tokens":"15.0.0-canary.49b8e7442.0","@material/animation":"15.0.0-canary.49b8e7442.0","@material/elevation":"15.0.0-canary.49b8e7442.0","@material/focus-ring":"15.0.0-canary.49b8e7442.0","@material/typography":"15.0.0-canary.49b8e7442.0","@material/touch-target":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.49b8e7442.0_1675811397054_0.8378435380941223","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/fab","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.de38de758.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1f86b8d1f7785b7ed8052f471dac5db56ccaf9d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.de38de758.0.tgz","fileCount":23,"integrity":"sha512-uj8A01N+Mp/wd7KxisV7cRNHC+E9LM3/wuF1eY2STOnZslKpqp7MrA+A/rKjRNcVtdi96AGZ8DaBL6w1gGR6nw==","signatures":[{"sig":"MEQCHyZmtUbCxEoANig4DnQa8pHoKCDGxwOUi/cY7O0OUsYCIQCoOozkn45hUeV1SQQvQyg//OjVhXK1NG3cV6kjSGV4Eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RR4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo83w/9ESLNsJ46xsSishmz9me/WrWicUtrOHCbs56OyHEFQO47UuBD\r\n9ZwmFbUPV0pW52nhy6cKM4HTAZuILSD07Cq4jA/qIIC6u7b8SDnHw8mFrr+2\r\nBuM14F2wxzZLLfh8MJv+ZkYBPjzBrXGmWN1lthCdV323KkOLElBM8Hcc7ToX\r\nYH62FPCP0AS8nXFln9UZvyx21banLD3KUNQaKlfGRCaz1XxSCUE/kUGvnSK/\r\ni8p3Y+gGRD43M1kWjOrPOS3UJgxHd0t5uUXTMPq00fNE6kBz4pXR1Q/40QN9\r\n6x9r1+PSU1Mify8achowSvyqnidvsgVT5I5Pvn+jCQfFMPZYpbzZoYzVj1Xy\r\n/QWVtinKDzntE2WSKHG/9mCJgEBeIV8sUCQAG5pZ2vo8tTy+HVB5Ax/1aQBi\r\n8uF5k3BiZYxGAQSbJpzH/xMwVaapzreF9jCrY/3uzQVuZfI7tLCAngItRckm\r\ncY7sB9ThDLAGIynKWGKrBQciweSHEv862M2JVAw4rNhofa9lnRptCm5PQMsk\r\n3c1+p5gyr+AQwtUbgphM4tWSDDBaRlPhAFGmrI+23fcVrNbliKS+XMWmYat7\r\nx4c/YIAuTau+lsH19zEIRUsvKzzb92uEugWbdYKgAHbRyzrmrXo5b5GQrmp7\r\nYbSorkNvGXtKgGTfPjXpEwxDEdpR+ATx4KI=\r\n=8SFW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de38de758.0","@material/rtl":"15.0.0-canary.de38de758.0","@material/shape":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/ripple":"15.0.0-canary.de38de758.0","@material/tokens":"15.0.0-canary.de38de758.0","@material/animation":"15.0.0-canary.de38de758.0","@material/elevation":"15.0.0-canary.de38de758.0","@material/focus-ring":"15.0.0-canary.de38de758.0","@material/typography":"15.0.0-canary.de38de758.0","@material/touch-target":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.de38de758.0_1675957368692_0.6343707768076161","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/fab","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ac857c9e0443cddb8f6852c06bae747e4ef5cee","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.4d62de70c.0.tgz","fileCount":23,"integrity":"sha512-6QEH2fjviDNpZBCWv0InAB/wD3gDmRmZceocoS6B0hcLJsI21r2GYOi6HgVswRh3h+V4hbJ6DjJrUIbD4aswww==","signatures":[{"sig":"MEYCIQDGOhMz0Hgdd0fvgiwAvhGZkSmUg8Cakyp3mSeAF9TMuwIhAMFTVC1buSsdaoUVdsk3d4LZDkuxbzWoLQHLYnu+muYw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W2xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3ow/9GTjCHdndido4nvdGtwwWy4TjPmFgSpwWMHHOWeCMP3tmZn7V\r\nJ6NOoYhLthKbGc24EddskB6la/pA3r8r5XK3h6TZ+krbyP3AC0jAdMrU5J7g\r\nIyi6E8XOnsqbqM7LdAv4kIKbHuegpHnj1UksbkxvTIG5zzG9rbVc1kmgLf5X\r\nfcZhijYlwl+sOcIiq/t0EQbGQGgFu78HkSg8UAWP7T01C2Zj/zWKw9BcuTZe\r\ntBUQ+OsvlrZ+DBTGzSmj2kzjE1JBZ5hqcKs0uYbyzL1pC5bX24hhzeDA1dEd\r\nY8qA49vl7effSdKtQ9P8PUh/93ysPTIL8EuXh2+/HYQSy6A4fpEjvIjpt09/\r\njtqMT3EFKWieBGAnnPTzu5Z4C1OYgFEJQJSuY9yzldtjoohIChJ2nmQAitDi\r\nH/BetHwLaTRZheOa9RBnk51IzbjBeARt4ljLUSXKjrMLvRpppqn+xkbqnZHE\r\niqKnQZEXajbCKM2LN1yoUG4qQXe7whkMiwnK5H8Jd+rPyekUbeQ3LpYZgusF\r\nR4mFZCbtMiVg+h1eikJZG8hR/y4PkUJoFbE1hvnTz7nvho3VDjmCFwMVbm0c\r\nfOAoLcA8N1AVZEftqNhc6MFZEwhoncxLl9Nu7J7xz3N41pgS8258geDTSBxt\r\ndSB4nXhMC6yIxVSUPxYkmN3TYa/6sgDkyu8=\r\n=9Rq3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4d62de70c.0","@material/rtl":"15.0.0-canary.4d62de70c.0","@material/shape":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/ripple":"15.0.0-canary.4d62de70c.0","@material/tokens":"15.0.0-canary.4d62de70c.0","@material/animation":"15.0.0-canary.4d62de70c.0","@material/elevation":"15.0.0-canary.4d62de70c.0","@material/focus-ring":"15.0.0-canary.4d62de70c.0","@material/typography":"15.0.0-canary.4d62de70c.0","@material/touch-target":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.4d62de70c.0_1675980209482_0.49923047032189016","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/fab","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1be2e91eb92bdaf01242c4592985dc1ac33dc0b3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.6fcd8d418.0.tgz","fileCount":23,"integrity":"sha512-T4GQyzfUjV+9RAM6pzHhJllCMEjg1npbFN1fxUStm9uyK9fYl64nrss/SX5D7eg4FFc9lMsc3flt0YvjBI1Rtw==","signatures":[{"sig":"MEQCIAjFWj/K+BSUPYhSVK/6Cn0WbMi++na2POIvd/odNvfyAiBdHacapyyM4eno9NtVBKSNdHS3OQRaCUfdlCTSWAxC3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iP3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrywA//SL8CqTW+CZ48f316ZqsKd9g01Q24k3/ltO/X2bMLaI/IKlAo\r\nSC+YzIBQaK90VB0MGjeRskZQsFaf02kQTEy8WnSLc8IJqkuvGP+gHAlCY4oD\r\nnQGZAJvID7pKifClxi1CRig9qSL7R/8M4UxFy397D4R35YpcckRq9VtwYg5I\r\nd4xnl9ufZeEzJeLzBNSDlQ1FdhjM1gXPSEuQ0Lc0T3sL2SiDX4gv4REdrQ7D\r\nfxnWnLNut11OmcplGZmeiq20BaZ4YaMRduQXYHepHCjmeVWz3zKa+wDP5CjC\r\nKc5yjhpeBRdMotIquo1duWlEFdDpFTOyMlQHaR1YScvtJu46IzPviIij2Ule\r\nljs66af3OedFoTaia47qxV6VBj9+ZEiSCCpUrEIj/5qNaSX/mElO0Y9EX4yg\r\n0BLKSJbef0ODE6qB8ORocjYT55hXC9YkiKDtbXVsyHqnmUIIEgeNcTQk8Pgh\r\nIlQpZJZ2+QZlrAjKFYaNLaEzRT/PIK0qSkjiOA/gWvIW3ASN8WWQ0mfobxYY\r\n5Cesd2HwF4YHto0EooBL2OAauExAUH9jiRjVHBB3TJ5lmACuf3m8rGMHLyss\r\nKiZGJXowrJfcPGk35/M4OjDUAIg0SkPLxm7VU/5iWfaKesnnuv7bh9FyiMJ5\r\nxcnffBgGSodI1EUD6IjXHmtTJBvkUfUfAls=\r\n=7HS9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6fcd8d418.0","@material/rtl":"15.0.0-canary.6fcd8d418.0","@material/shape":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/ripple":"15.0.0-canary.6fcd8d418.0","@material/tokens":"15.0.0-canary.6fcd8d418.0","@material/animation":"15.0.0-canary.6fcd8d418.0","@material/elevation":"15.0.0-canary.6fcd8d418.0","@material/focus-ring":"15.0.0-canary.6fcd8d418.0","@material/typography":"15.0.0-canary.6fcd8d418.0","@material/touch-target":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.6fcd8d418.0_1676289014994_0.18113183466869587","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/fab","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.066d9439b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"645dc61d7a61b63be9b898d6dd4400a7053f4089","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.066d9439b.0.tgz","fileCount":23,"integrity":"sha512-JZPmc32KUC6sIZrsGEEpf1TquFME+vsDGEk9filOCKGAiv7LE8ipMWqSIx/lmB/C/3JW/bHURvMofQUbnWSfsA==","signatures":[{"sig":"MEQCIGMKXEVCLPgVz4sVRrW7oPN7fGYIPCb3N9+YAuLOwQoGAiAF+ggnXoQGCgRMc34kgMASBHVuOg8R82sl+0dUNmtbXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TlUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/BA//abf/bfxC3C3KQrzFpkwepxYDJFz57m2QaZlyDc9+WMMlvxev\r\nxYm5aiSFVRR0PG8QQeVcUwc9frWme6Lis0TJH+M8S50l8yjuXUEJZu/I9UqW\r\n2UL0SMoCQQ3brZTMrwlcBi0yCqixdyOU3rc/v1PkGbYnHHjUXsc7QS8hxnQV\r\nPTgSdl4YEyLNP31Ax+APVWlAPtp/xhNrGIuNTsFA57MJTgEKpccoLkhgdD3T\r\n8DFjsl6BlH6NHGGqe88wsG/tR0fLdLF7atLFX6m/DVOKxAlAtBw8F5m6dgye\r\n+HjUH+L8/IJKlbLZ35ZCopD+nIJiD2DZWRhzBOc5yfNCdYlh3K2WFC4nEII3\r\n8to+ih4wh5328bX6Bk1yqtfmtssMzLpdDzs8nb0hRnociqzl8tXaJKVnNhqI\r\nyjOLmsu9cea6yrLC7R8jQt9fn7h6GO/IadSJHCRvgj93ZmAkEBwqLfA7NW7Q\r\n/zD+l2q0mH+K8ZRbPAMzMUDm8EFvxZ7u4NbmqycfoLdgWbh4jfh7z7IqKHRj\r\nZgL45s5VYkc8wn6FTy78VoWkMieqq0lilbY23EBISHEc/BGlDA0uSF4PTwWV\r\nE+7lk43QUKf1KOWZx6p2Na0P2ldcdr4YzdPiZV/xxFbPsvabkxWHGAaJtZqg\r\n66bd79M1nxJ3lng4F7y6TS0j9t9AVn/O6W8=\r\n=wE7+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.066d9439b.0","@material/rtl":"15.0.0-canary.066d9439b.0","@material/shape":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/ripple":"15.0.0-canary.066d9439b.0","@material/tokens":"15.0.0-canary.066d9439b.0","@material/animation":"15.0.0-canary.066d9439b.0","@material/elevation":"15.0.0-canary.066d9439b.0","@material/focus-ring":"15.0.0-canary.066d9439b.0","@material/typography":"15.0.0-canary.066d9439b.0","@material/touch-target":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.066d9439b.0_1676491091841_0.3650413508739869","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/fab","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78bb80f0069156fb1c46cd9f0d6472f3bb2933a4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7ab32468c.0.tgz","fileCount":23,"integrity":"sha512-zSsfBUhX+F26rcgeodDQJjPVQup2uGpLSeCc4VrjJ/k8dm5JD9RspT2Zm0NacmHTHqM+cDax6QmF6t3Pg1UobQ==","signatures":[{"sig":"MEQCIAn0JCJzlrRewYj9noCN/blZuUwqLRjM8W3DqFH6jly6AiBIOM94ZCEuDCep2lnY/Q5MHKNKUQG6pMPR65XRnDhTbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q65ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrj+g//Wimw3gmcUfLhAVxAc9HDQ5l2tn3OgaPeHln22WhJnWeRJNdO\r\nBdIvQe5XFfUr7a6pvf+1Ahc1EnAl9BrtGsYwJGdJpophd3C7yaEcVkgZNX+W\r\nhP8bUPnEB2CepHKDv6dJwgS/NSV/hyrmweEVrmALYC92NUOPEiYdr+oE0CzL\r\nh2gpGb5fveERW8lr9B14mmQiDUGTyAhyHcWoF+lxiUexJceOryVEhKTl8ybj\r\nJRwXcAS8GTpZZ8MyE2nL6E7Ire9m9nsyMB3f5xLdqEq4tRHOchdy8PSO29BQ\r\nCwe7Y7a/DZDZrlTuc40t9qqTWI9UR5JTo4dfj5WI+LkD+6DQsj16jtpS85Rw\r\nhA5OTlEK0Nh1oUkFAERYh7xvQiuqVQRTH4IwIxqGb4A2XYLY4FPfcoPggc0n\r\nXE0dqZiFgKwty16HXWQ+mpTOw8K9XQwJ8ui5PUP8cRR5ITTmq1XCVaITZSlV\r\nwxMfIZJ9gr+26EAZc9VrriGdukB053+WQgtraoDRp6pzfCUTDZ9DQ5QdEYYq\r\nWmObcyBVe5F/gnypwS3EhbmisxMf7lL6FeuDmrczrJoiXld1K+R5oAgkOrgI\r\nIFKlBkKDNDR7L2g9UkPqXeTl8bWCC4eN5XNFqjEreazUylBYuJRrAmeZmbXl\r\nco/aKG6YRFsnq4OIoaVbvC28GAGDOsXjdAw=\r\n=qlDs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab32468c.0","@material/rtl":"15.0.0-canary.7ab32468c.0","@material/shape":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/ripple":"15.0.0-canary.7ab32468c.0","@material/tokens":"15.0.0-canary.7ab32468c.0","@material/animation":"15.0.0-canary.7ab32468c.0","@material/elevation":"15.0.0-canary.7ab32468c.0","@material/focus-ring":"15.0.0-canary.7ab32468c.0","@material/typography":"15.0.0-canary.7ab32468c.0","@material/touch-target":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.7ab32468c.0_1677004473683_0.05347845667562168","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/fab","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"903a6b5b2a4e5b0ca929f5e75720ac5883bbc170","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.fa27ba61d.0.tgz","fileCount":23,"integrity":"sha512-EVo27fbQaSNO3GxOP14FM4W6JqwdqB553gY7mAX6Lcmlfw67MS5paRmYUwvoS1vPNMrT9BSZcGx0HvepD3nIVw==","signatures":[{"sig":"MEUCIQC3pW+SsWkEO8NlzWevwB1vNRx4QmymXd/yey3rvQ2xHQIgYGLvZQYUqSmBH2w9agLgNg6y5A6ZJtqksiUzl/njO9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NhaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtYg//e7OEABEMO8OFSJHvktWloEzNfGDsMfZSQ4LfO1/jJ0aVsKdS\r\neuL+cflHl1o3W4Lk0y+Za9eBexV8MBP6UxDyeXGXTxfXpMnbFfUhrFFr65EJ\r\nnI2vHt5nVbA4f1R7PF6FYgCnh49khiHVYxoc4Bv3XsmG0oThx2KIyy+xdTom\r\nd5Tn3L5lPhVBELvZ87rWH8xJX5bdW1UG3IhHfQOQ9GDrvk4iICIwrUcCHrk1\r\nm8jdlQILw5d1iwXUOOsKVjOmv+K9k58sAgOhnRXkQeMGsWsGx2aL3/SCnZ+z\r\nNztkP8A9wDs2cHqYFI1PW5f4OfqdQGy0qq748ScEW5DGsiV/erwpSvuI47n5\r\n64VJg3QPSsfVbaHlJ8mmP6ZmmLoBBRupUllUeoLpOXiFcQeDoPcgVwuZW+PE\r\nfuIxHHcj/J+5piixfNjfH6gXsV5QQsn7id+CX1Gh5wDiEctwvSfNA4N7ZZwc\r\nHUSRPN6w3NI70eA/LFfn7k7/wKCFEpkaKqMFcjFBF8irei5YL/q+Ow/CrIXD\r\nVijqObNoS33XsCGXd5gyCwJNpI8NF3d8osCWxBPUBPy2Hzpy7qpGHhnhAi35\r\nqrWe0ixGZNIuacFRmNKooRMvdZ5LTc3yVifpen8g4Jx6pzPuLZ1RRZft8QX7\r\nRKyGqkuarcx1m5InIOVh8dDGNKus/DNJPWk=\r\n=k66D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa27ba61d.0","@material/rtl":"15.0.0-canary.fa27ba61d.0","@material/shape":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/ripple":"15.0.0-canary.fa27ba61d.0","@material/tokens":"15.0.0-canary.fa27ba61d.0","@material/animation":"15.0.0-canary.fa27ba61d.0","@material/elevation":"15.0.0-canary.fa27ba61d.0","@material/focus-ring":"15.0.0-canary.fa27ba61d.0","@material/typography":"15.0.0-canary.fa27ba61d.0","@material/touch-target":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.fa27ba61d.0_1677514842605_0.1658904432494024","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/fab","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"382f21625828806836a84772130db31300310eb8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.311ab4d4a.0.tgz","fileCount":23,"integrity":"sha512-2oKPxb3UxhFMxBUcuRcgdEvQx4mGuQG08TGD/YdJnxG6eJNNieWKePJs9HRmIIj/L0ulESul19Q0QXBdyOu+qg==","signatures":[{"sig":"MEUCIHSOQ1cUUS0LA3CAcC80DeFI2a+bgD+hZGVaSEYHk0VLAiEA/eGDjApIddGaZHkgyCNGWKPR/ypFrXjajJVXWL5TE5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N1KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIQhAAgbVGsw3QQduzA2mSkY/xjWiiTRceHhmYI2z9qf+5Muxk/KEo\r\n2pdjruauXoticsJbMDjFwLj/F1t2yiWZNlYJia9u+52Eo5A+JEfYkAt8oc7u\r\nvhOBgltEXjO84YsMOpIHB/RgTscwc3YOKjs13hT8JsLsbc1QceQFE51wAjpt\r\n+oBlj26iVqV93XTCq0shviE6jzPfvLejeq3lD2Wedurp/WUds0+TrQGfONTh\r\nq/kbCLCeexUeGnbj9aQg+mLmnK7pnCHQZ8puL9BPmr0PhdnQmsnW5vKjNKnt\r\nloKlFJssAlAdVLnCZMYO0sftI5TPynAX3tecrVUoFnvek4y+AzPryn/inhhv\r\niImvfv8Hhr40Lfo33Tchj6ai8kJe36R6lvVrx14RSrxJwN/49SDMXz9jp6/+\r\nTYy79sMDsBRYwue5i8o93+ZZvZqNbZJHvuqEo3yHA4UCUkIoLS0DwROLoBrl\r\nCsCg0QQeULMc5r8QFRuTR+Q0W8cDZsu0dY7LaDqjyYnNrfH7ufcWyume3+G9\r\nQrkVrZoLulv9xaYMV8Ogf0HMNbqUwyU91uUurHhXZ0qKOxhhuHgiWSjWpSFG\r\nTZ9exRpWw7zqGDNJudiZKxDQ2cjQSt0q7MIgROXgfkUALa+SXsboLvWCg4xP\r\nDZPqwQvd+qWnIYKWiKOsRbqE8SggKSJfI5k=\r\n=FmWz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311ab4d4a.0","@material/rtl":"15.0.0-canary.311ab4d4a.0","@material/shape":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/ripple":"15.0.0-canary.311ab4d4a.0","@material/tokens":"15.0.0-canary.311ab4d4a.0","@material/animation":"15.0.0-canary.311ab4d4a.0","@material/elevation":"15.0.0-canary.311ab4d4a.0","@material/focus-ring":"15.0.0-canary.311ab4d4a.0","@material/typography":"15.0.0-canary.311ab4d4a.0","@material/touch-target":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.311ab4d4a.0_1677516106124_0.6315864092917469","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/fab","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31b62ba0210af5ed40470a51281cb93cba9db40f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.5cb8e2174.0.tgz","fileCount":23,"integrity":"sha512-Beawam8IRpdFthChoylDTWMMcFu/cnMzjeoakTvOoJz4m0Za+09WhS7/un26e4YwRjTn96lfmcv3bzQPIEcEwg==","signatures":[{"sig":"MEUCIEpchmQ5NVk2aZ0ceMeJKg28omO6zwga8hfWaJwLBnoyAiEAw4EGkY9gxMwclMHTV8cvk6XjQ1VgGcLthA9YWUmEo2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/377ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnhA/9HrGigc4sRExzY8juOJfJc4pCIr8XXHDF1tHXxFbaLBHXG/XI\r\nADWwXvYpd6MG3f6JMcMzVT/a8swWjyuXkPO+VEcrFXB5+lpCkDvauxAbZgy1\r\nit+Y95rSI54F2+2ykfu853PYAo6zpHhs5cbPqHevAY5cjV6fsOumYndVJ4wL\r\n1kK9fpxXaewces9GmP92nab9C3iu5W/2Dv4lFU6JjgiM3Fxtl2JWpZFfh/vk\r\n4XrkT6WuFNPRkrYEN7yrYGiXn93myifrS2PLlLnnmMf8PLwYF+12zgYS4XeB\r\ns9Mrapd46VuMx6CwKxn55/YywemzoBePS4W/AN/rHCXRszYN1k2ADli83UDn\r\nCMsd5KdKF+wpIGHwHAyUyWl5V+FMRJSXTrqdtt+JjOG6ZvCRatEHnEsJ1rS4\r\nEdhBBlD1NFSlKwK+TAAWQMGq2+1SxXNnB8Yf+wbvISvSE/nBbW4UPZWjDXSf\r\n0PWjx+2IYYxSBM6jk2Vpr3NItOoISTRJcsP3wAl9C1Ek8n9CkJiHjqFg5y2T\r\npHBBRjh9MGPTSDB/jDEeJjOmEjcfpsRU1TzyMMa6fIJYxX5KuR+cySBD/98o\r\nATSJlO5f3e42VKBWFBQC0Vd8tALEIXRZj/9b+cRx0EdpQvN3kSFUW/LIQHdC\r\ndo199uaPD/UtthOuRBfGaWYZOrkSzReNow8=\r\n=9QwN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5cb8e2174.0","@material/rtl":"15.0.0-canary.5cb8e2174.0","@material/shape":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/ripple":"15.0.0-canary.5cb8e2174.0","@material/tokens":"15.0.0-canary.5cb8e2174.0","@material/animation":"15.0.0-canary.5cb8e2174.0","@material/elevation":"15.0.0-canary.5cb8e2174.0","@material/focus-ring":"15.0.0-canary.5cb8e2174.0","@material/typography":"15.0.0-canary.5cb8e2174.0","@material/touch-target":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.5cb8e2174.0_1677688571104_0.45556384725912724","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/fab","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.f32339937.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f1bd216954230e16a2eaaa8ecc40dd9b866bb0e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.f32339937.0.tgz","fileCount":23,"integrity":"sha512-k7ByNFUCoOYtMAmynGjQbNCc7BshpUkyYChYsGJjuRMvFs9KmAPAYaGQgWcdrJxl3LK3qhCq56Jaxwe4vGy/6Q==","signatures":[{"sig":"MEUCIEeTVLIONhA3UeUtijUyxbmhhYBFAd6KMyaR+ke8I1kSAiEAsU112MjLZAlD1zaBAg0Mz4BfAynXZocrM62b50Xg4iQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgOtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqmbg/5AXXgRmZfzsOwdJzhz7fb7a1K4IgDERVEE0pW+L48M+HuGMSZ\r\n9WQ1PQGMGhqLq5zyJMGviGV1kJqWCmZ094GWzUdRduq9fA0vhyj1Yc9RwlCo\r\n2JeNjgQ+kGYPlrsf9ZKpqbSMU9iHFFt3tlXLnQcYv5kHsH3qLpqICVfa1G7e\r\nBsstdHx5s5/VwWLSRmB5PldaI6Sg3lRX+uev2W2FL+o5ScP8F0m4hIh+1l0j\r\nPdA0cgAqbn2dVT/uoRrfpVXTbZTZiJs6uD6/eGsXDk78sU9Pw7/1/xMevc+A\r\ndsqBAq7wtB5DsaB9dYs1i6aEzANi/dcV1RfXlZI9kfUesFgSY1v+hW/4dfpu\r\nHqVx/xVbQRXbhJcWXCWgXv3IHPD5EGeFFd/ICEUaoVtJ/Hl5JB4tHtUXNp0o\r\ntiMm7ApTvkhmIdPeNPUB0TwHu8+a7hqV/e/m2DTDXLQrSqFjs5/8P2CJ4qAL\r\nafg3DXPe5YzAHAB4kXo4usDhQ7C8zt/t6NKkcL0dU+yyvnlkp3KIZf4K98bY\r\nzbN5KqBfo5tp+EFSyQpN1itdqnN9dTFphm7sXz2y6k61iZSqBEZ1kN/OTvGB\r\nPUZh4RW6D0MzyYcrMA0Esi6JguzeQFLaXTWLWiliAyUbcYiJS2ajFUGdcuDo\r\n9MvSamLYV5ylCHaZNzphetENtp12bX3uWFQ=\r\n=zvt8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f32339937.0","@material/rtl":"15.0.0-canary.f32339937.0","@material/shape":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/ripple":"15.0.0-canary.f32339937.0","@material/tokens":"15.0.0-canary.f32339937.0","@material/animation":"15.0.0-canary.f32339937.0","@material/elevation":"15.0.0-canary.f32339937.0","@material/focus-ring":"15.0.0-canary.f32339937.0","@material/typography":"15.0.0-canary.f32339937.0","@material/touch-target":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.f32339937.0_1678115757543_0.9175527716556875","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/fab","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34312928b7c4e427c95bc860aabba43653c85138","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7644d63d5.0.tgz","fileCount":23,"integrity":"sha512-TB+ubrIUsZNSWkeWFAtNNh9JD6b/BxIjDAlUhrm2KtdOSUyefIhPz2XXSJwHbMgJLbYlh5RSiCrP+KMSPIAbkQ==","signatures":[{"sig":"MEUCIQCapPwZO/V9kJskxOu7mfODngnlczLm2NrkXQTufxctgQIgWtR+R2mNDitwVPQ5o82IG9ZgoSMw88FQ+q7wmd2mTsU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmjnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrc3g/+LtaC0arMeCjMs1iayZaBmqcB6dcC/GAKMZ3iQXOGIZaGkfmg\r\nwFEof4llsnKZYa0huL1h7lobmun+vxw8d8ODQFmsQ9irxLZTsE7kEBzHW8wJ\r\nRgyGI/Z7+iEdSsdnrA0H8E9WTihOvlcr3Drf3jFJFwsYd+aImF6d+FS3naOR\r\nyPySn2da5t9VYw8YAP016H59nGXd9SqMTgf/1jTZ2t9/uSUCvsvSdDjkotDg\r\nr2gHLwTLVIpCo3kIZFarihIu8GDXDLPpcL7RtVI45wyUG5PtRDvqSQyTAbdz\r\nCr0Ua/584btuOlp4fb1N5OG/129bJ8w527YbaKEMMK5H/jsyvJKEI4/jp42W\r\nUUzo4C0cyefDeYcEOf4yUTtM4Cdj4re6MW0g3oNl1cS77gVNKRaxFPmtLvyN\r\nIXKnw/3MXmWwwzBHjuVtawOfj2Ga3KfM2r0zVWpfWWCQvdJoqEp9NR1jhyjs\r\nw2qn0ydQLyzHe6upvHmow6SxG2CtZMTHWEFMIaNNvGadM5h/iDM98ORFcNPc\r\nD3E0FN+b9Iy1YMS2WErf07mSZV++yF3J8UeBX7RtWXk+hbIkJMTbb/hvf/9q\r\njqALdrA10UUiN64j5Z0h4xZR+r9qGc44XiVwJ6qAFVGs0hQLlHdDCN+4n499\r\neiwnH8ZqXt/A9gdVasVVDwRZhgiBXpqX3+0=\r\n=KsVy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7644d63d5.0","@material/rtl":"15.0.0-canary.7644d63d5.0","@material/shape":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/ripple":"15.0.0-canary.7644d63d5.0","@material/tokens":"15.0.0-canary.7644d63d5.0","@material/animation":"15.0.0-canary.7644d63d5.0","@material/elevation":"15.0.0-canary.7644d63d5.0","@material/focus-ring":"15.0.0-canary.7644d63d5.0","@material/typography":"15.0.0-canary.7644d63d5.0","@material/touch-target":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.7644d63d5.0_1678141671426_0.8954212835805362","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/fab","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d96330c08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f341a13706de3bf1fa996dfc72b56151056b23b3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d96330c08.0.tgz","fileCount":23,"integrity":"sha512-f9bdh2s328iWdVzcJI5VqsV4gigNezBDCe5R5LmzlytIQHTMgPOHI3ggtVBiiNEBAb13q1o+fArRtifasOB8uw==","signatures":[{"sig":"MEQCIB4XnjhQKqCrTt0yigxOnzhAw66bj0Kqr2KHtAwsqRm9AiB48Iz6MWyZgX8Wczkux/FQgn5UktxE1gd36SAFYV+7Ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHSUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPlQ/9E2oVyQfVV7HQWlMMFf3/+UZwhyIo+pT0DjB8XHPoudsLzTVc\r\ndPfN3BBWLJkYXsmV7G9kvF77JcDRxqTZC7x/q8UpYpfOgjXO4UCvbcY+2cTv\r\nKG8C6sHoghHn7wYUC+U+0DAh9ZsMsXKLJIWVNYmyOQarBALEd37GIj4V3f2R\r\nwUCMS+ncmbRzrAnvjnzkfd+5pg1TIqHBSmPI+N+Hj73HCRfxryR86mzxplEY\r\nfSQW5pR4ZJf2+ei9Fi2jFwn2aj5hfznK9GcXD2iTxm/GmrpFnFVrkZ1recEY\r\nNt8fimNzF82WIvucP+Pyzp6PEgK9M2A790T5OD/jE64yYSyfR/K2O7X+W6se\r\nPf/3QyPIW33nw81Gc+kDTpMKR3oA4niZplVf36a771DyFfZF5G315IDvsne3\r\nsWs7ZuHzFX7lI42cqY1UW+OX9Ogyrwklh3qshLAw1E16J6i16S85VHoTFkSm\r\ndphQ5IAgJnpYYjPVTppt6GTB3CWo2Hp1NQ+5Bx3KI/riEcWwJNdT1xhUjDDQ\r\ncG5hHSxBRwE2rofYfOKF7VJgZ2EqdILySoqjIOqiIrOMnpUFhlm2q6fDoZLM\r\ngjvlNCc7p0s5iMEyZUytqrc+xQXxBXK7dc2fBPcI5THOMnmfBMH0lxjumIJz\r\njaoBAXA//5gEyi1mtY2r2efQs+OO+SooRIU=\r\n=GMl+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d96330c08.0","@material/rtl":"15.0.0-canary.d96330c08.0","@material/shape":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/ripple":"15.0.0-canary.d96330c08.0","@material/tokens":"15.0.0-canary.d96330c08.0","@material/animation":"15.0.0-canary.d96330c08.0","@material/elevation":"15.0.0-canary.d96330c08.0","@material/focus-ring":"15.0.0-canary.d96330c08.0","@material/typography":"15.0.0-canary.d96330c08.0","@material/touch-target":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d96330c08.0_1678275731720_0.9579759026409647","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/fab","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bd9a47ca9e89a9d5600234c3556ef1981136021","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.c99cae77c.0.tgz","fileCount":23,"integrity":"sha512-0tasUr6MSusjQeT3NEr3voAHhkPQgVvv4vn8M3nu7gOj/zMQUgfo9Q8bcaQ7EZjN515ei/U4mFF/bk6GGp2eZQ==","signatures":[{"sig":"MEYCIQD6Xpgjbyx2uN2wnl3EfoJR0PXq6moknJAChasfUqzatQIhAOI8yPestziZs1aAYjUF1Jt5RKZIGsDK6lfVyiQKRgb4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR2YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvRA//b78svO4YaypN4UiSxL7qk5ShcmE1O5++Y5HBqvwPISvVyXf4\r\nTxjFeCPXux7+GIDkz6lpCyIrlg0c2ISS1SylO2BoPW6y3yuupGs9XMyM7XMY\r\nDoiOcAVMKvEwBP0/O/stCTiBC+2SVacTEUWtRDF63rOQqOEw7hDf1spjKdTb\r\nG8Bqs6jJoDGJ4sjVqeTW7W2bs7TgXUWX0zYc+bbhsLbSOZFuJlxRA8dH+tQg\r\nl4Oe+t+NV7corYBvruyi6mv7caw4XYcn8v8nPEpu8pbORbqIjUBbHW7AKReo\r\n5v3q130gqHRqkXeSeUJ/bapePVsKGAfsvcsRGQqHQyW3IBSaiXQW6A6dzvNv\r\nLAl2IW2L7YHpePKvC+EBJrj5Nc5MPEPvYBEdnyYKLIatZwzbfPTtgg56iyKR\r\nMuMgm4ak7+7FtfBUtAtNpuUHMYwW9tY2OwLcWRgq8cgIrreBNa7BW5/VJ8Og\r\n8rWzAYN8jwWCthVlKTlIrtWiwN5gAhvntBFDiOl3dHSh0W4neUX6S5pGR/p8\r\nX1SCqHgiXbLHexvaJzRsUsdfPgiO6hDqRDttPnPCz0dZLIXdx76TXo1xV1Xy\r\nlB43c3KO6od8CYKynPPevyC6DcjUJrDrUnICBXN8eyRk7QZiwi6YNayaiLmJ\r\nJIfrz3RHWeR/vlukrOm9w5eFuy4EIsn2nLo=\r\n=E9ZJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c99cae77c.0","@material/rtl":"15.0.0-canary.c99cae77c.0","@material/shape":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/ripple":"15.0.0-canary.c99cae77c.0","@material/tokens":"15.0.0-canary.c99cae77c.0","@material/animation":"15.0.0-canary.c99cae77c.0","@material/elevation":"15.0.0-canary.c99cae77c.0","@material/focus-ring":"15.0.0-canary.c99cae77c.0","@material/typography":"15.0.0-canary.c99cae77c.0","@material/touch-target":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.c99cae77c.0_1678318999949_0.9423706593081849","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/fab","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe07d49bca2ecbab3f02971ebda2cc2d0d4ea748","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.6023b1cd3.0.tgz","fileCount":23,"integrity":"sha512-ou/AUZ6t/1FcTFo1nmyQnRbulRtXoxpK7U0B/wnopHwhozwA1HkbRfkO3qpz7v45BsNd7ZXLBjX0b33sZ1/XaQ==","signatures":[{"sig":"MEUCIQCIGPDT0Nl7WDKookwCTEeQau5n3p1Qvvv49LAgzFQaSAIgS6xEQaNXrjzt3OMn9Jhr2Rq8KJ9wwhI/hp3LbSj6bms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCeylACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFyxAAhn54R770O/psTl1o5250xFcg8aTD98kfiKy0o1Wte6vajy2u\r\nGPO1Zz362pIYLL8e59xHMwp/E3H7qhWhO7EfkRQqUTEIHMTewM6a5GQho5an\r\nO6S0dT1ZHD/LrbrCwt3bfBiB1rtVOBW+UxvHQEgnNL4K9i8e+yKC7cLEX2bb\r\nDj1TvpEuFb4Da1EWhjYBLb2koQQiItI9E31ROpo4DseHrRC65+uxkAtuLyan\r\nu95TU1+hFo1hdbve8S3JH32b74yvWmZT5jefO8HaFo19P4wFnf/vCsanOLdA\r\nEJx4jH8OY1YfxQM/K+t0uCxxKtLJ9jIRpgpEeKWGG+BsHOFtNha2SMmVAOdB\r\nNdSzDTg/zTUJ2r0paVb6jmRRLjTejy9yBxXcy8JM8EsiRLnUODB6G4z4JWGQ\r\nnnp9VHZr6o8MN6hf75LZmKnEPmSZK/H4iuAOyaSGUuuXfH1fYRgRSUDtpxxZ\r\n+JlwmCF71f9L6HS+qKeQZz0/fU5ayiJSZkBZyiwnBp6uvAiWJvAlJBGdjJ/W\r\n2CRl2IjVmUhn5oiJTIC4txQ1jZKhDKYCBN+SDfXnoDa+ptzAsFa1tbavgYzs\r\nGy+xn8ttYiTC21jdYN6EzC3x8tH4EGxqHJKP+g5DFdsLgMOYs/7Q6wDCBMhj\r\nKKSMb/a0wxZaF0nsydqO74nPg9tTrdl1Zd8=\r\n=aT3n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6023b1cd3.0","@material/rtl":"15.0.0-canary.6023b1cd3.0","@material/shape":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/ripple":"15.0.0-canary.6023b1cd3.0","@material/tokens":"15.0.0-canary.6023b1cd3.0","@material/animation":"15.0.0-canary.6023b1cd3.0","@material/elevation":"15.0.0-canary.6023b1cd3.0","@material/focus-ring":"15.0.0-canary.6023b1cd3.0","@material/typography":"15.0.0-canary.6023b1cd3.0","@material/touch-target":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.6023b1cd3.0_1678372004931_0.3921279866148486","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/fab","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.274610c77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7414e4d3d11f506b785e07f82cb2083b05841be2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.274610c77.0.tgz","fileCount":23,"integrity":"sha512-WkkPvdzGKb94AIEHkObB8ynBO7G1lncO0+zTqFShy2BWZGVc5QeVb1C6oXdgpju3lUYtnJtqNIhz40KUjrMpjA==","signatures":[{"sig":"MEQCIBcmA52PdCqp97Lepu1ifLnbIxle5kcEbBBNcuEwOqFNAiA3XwoX6eQ0GU8B6/EfBMaRMdrNItYPQKb+lIzEdPqTrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfQ3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPnQ//Z8uZ9HXdDnLQqbbnmRc98XsXVg3rXckxjpABG6dc02gRMdHJ\r\nroYh5TzGsi9Pg320dPKveTPFTFB6UAHitSfBhEVFppWLZWqIXV6BY2xO62T2\r\nvYHXtX4YxhVbC+OWsvx6W8FrbOY+s9lF/FrPQTgUdYpiJBN7anrVYqR6zBjA\r\njWqVLy9mDmANbp40sDqnpmKr4Q40EYpsZMpOJZNZ0vJX2LlgWG/vEMWLoW//\r\nR3ZMyG+XEoKgMoxSrw29MsSSTUHdqiyKbDCqbpH41/iTgBW80PL5XthBUAeE\r\nXxEpj5yqvkzjfV5PMwx/w7CAsvags7pN9Lgx5cAPSpwOukEX9xeq+sPQhIHg\r\n4Sb0Tn3IE5AX5xFe6yzRUgkxqRmFXZE5DPx/rf9sq8Bv4xSQy3jf3Wq9Ytgm\r\nJVPrYAYYGTR8TYZoqgroyb9RukkO61N6OyM4GCOvFmVxT7CRIZfk8oQmZomf\r\n4WVssc5yYo3FtHpf9rDnHvUc2NMU5A8zNyp3DQeRn21X6RwZ80Akps4aw/QU\r\nwvlZSziktO2+VkPqd17bzBmH/IG7W5+fp2xYKllV6wmncuGByqcZpK048Ywm\r\nNAIatUuxrG2IfqaaSMDS4w46SZHb8nLdNc1VVPTgp45tkc7kXNDurtIrzjeY\r\n1ISH29aPUDm58Zt0n/3WOeWfHk28qAI8Dx4=\r\n=Hn4X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.274610c77.0","@material/rtl":"15.0.0-canary.274610c77.0","@material/shape":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/ripple":"15.0.0-canary.274610c77.0","@material/tokens":"15.0.0-canary.274610c77.0","@material/animation":"15.0.0-canary.274610c77.0","@material/elevation":"15.0.0-canary.274610c77.0","@material/focus-ring":"15.0.0-canary.274610c77.0","@material/typography":"15.0.0-canary.274610c77.0","@material/touch-target":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.274610c77.0_1678373943254_0.6718118307607899","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/fab","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a274583b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e2273c7e058c5a1f1c60eb7bd42ab078116ac07","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a274583b9.0.tgz","fileCount":23,"integrity":"sha512-80xBEe/2k+yJD5XJ86BBwEHGHVFMrXl9d1L2ERgTAC3p2VYDgjySc/hIi2iYriPL1BfooTkAVgX3479lXqzWWA==","signatures":[{"sig":"MEYCIQDySeL/wEk85tUH+lafyGtzGPxuchoIstu60E3FXr/TbAIhAO1xMuhDxrRwlB5TaslLpwMu4MAftLJHx5fObIeDIXyr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjkdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAeA/+NiAOfHeg6cwvwrwNQ+wFPj1sF8v9cKVPm9P2MZBMeAUxEOt3\r\nRek3ZavYiogMPb/ECcP68LVFWqUj0eNRstqMndYP96HuEpzvDQiaJjMuC2XC\r\nHVnBIGP+PVIeI3/jqj8pTZGR8RgZAnonij7MosxvlHtdvl8FO4yMQWOhJ/13\r\ntiUKMp1Phijgs/wf3ojkX+5uoH3DFE4n2ClxHQ94fg5jtvhwE3cZ5scDaQ3Z\r\nTRFo54dgN89lpoeANnROXD+cVsCF27wEocJdMchLmWkCQbc7//zFuh0OaGL5\r\nidzZ7XMW8c3a5M0AqqU80IixPygOV3h827oC8VTgh8J0wY3DM2zWaIIFFua/\r\nwl917ZIgYpzM4+UQKKhAa5nV4yMp73wcalVUZFyjyhxdz0NnGm4+NCL3Z/Of\r\neVgHPUkwpcLawMDPJvg+zTR+NyaMkD6MbvaPrLA0Wy0vSNE4a5i0vCYv2BoZ\r\nJ6c7eK5EaAEyTyjhldZ5rZ1O2fspjAyXeJYp3bvKhxpETimVLbGG5sET2Cgm\r\nVSDtDWJ4szeG4Nss8IFVHA95W4Dl8gQRqems2kCdKwrDi38KCB3TLvdjK6B/\r\n6fK6asc6y1S5YxBIa4ozFEFQ1Gr54AsJ+CnbvwzqWCkn1BQiFpoSi6RSP6V2\r\njMacYNMSF3nKRNcBulYiXKYrhzXcmGTJZbA=\r\n=0DeT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a274583b9.0","@material/rtl":"15.0.0-canary.a274583b9.0","@material/shape":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/ripple":"15.0.0-canary.a274583b9.0","@material/tokens":"15.0.0-canary.a274583b9.0","@material/animation":"15.0.0-canary.a274583b9.0","@material/elevation":"15.0.0-canary.a274583b9.0","@material/focus-ring":"15.0.0-canary.a274583b9.0","@material/typography":"15.0.0-canary.a274583b9.0","@material/touch-target":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a274583b9.0_1678391581717_0.19578274481381386","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/fab","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.da22ca960.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bed5294f2c13657f0f3c823e4b7bc11ed54bdfe4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.da22ca960.0.tgz","fileCount":23,"integrity":"sha512-QPfZg1ena1tIT/pSAtzTcXtDjfsiXmP2LDC4r/gSJsIoBx204kdbr27uKOXItGlNkWSVX+fYFMrE5oQe5Gf4WQ==","signatures":[{"sig":"MEQCIBiTOfWZeimfkt5i0LubhyIvhfnxmYDZy1jJFXT+h/RKAiBlo4ysXutTUnK3Idv4GifSnw9+yCp17B7o8bbQnoIOjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj8fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqShAAnHXLobrgxXiNin8mZg/x0EzOLMJRbHJgy/p4s3xc7O39KhMS\r\nmyEte00/RSUUn2Qm3/i3/Va4UacTM1wKT8UHdP4APsBKE/gsuyEtAavbec07\r\naxt+7rfeHdNo4YbFw9NfcHtt/WpGof+67bXfwgBDWkAlq1fyJMRQkePMKL/1\r\ngOyNkZPWec9QBML0OM8eYcOzKtihUBq1wx7+/95muAE59wJWVfYVxh+QWXhN\r\n9Eku+vN1lL9WDwXzOt/Jtvjf17z2tLshtcTkxW9g28emxH2HiSU3GOHfAKbt\r\nTEB0w2H+mpyjZy9gtKTVcQLjzESY/ArzbNE+nyRazj6DKjHTAgtwnotN+Vh9\r\nRnl208ubTlLWMN4mUnszkEtomN/qCv7IH6uxRLZJ/fOLMqEINiPhGpUcRvpD\r\nxWyl585nUXD3vE493MJ8zarojr/S/E3gUaqrAopQhAE6aNuCrjRn1TONR1qU\r\nqsLSb16Lb0Cs8FoYerDHUFsGS4rfPb0L1gtYxi21hpICfVIfpVEEwMMknTFC\r\niDJlnARiXfTEZfkPLsUZae7qMP66TliASWyiYUiZRcDEyRJuXAufFaZ2EGeX\r\nUCj0K3FSq05k4KSc3nJl5hXSv+a/va+/vbz9yEeQVxJ/aFCSdCiMDAqusW1Z\r\nS9bDpA/F2HlW9gvdDC8q/Y5en8LH4Hs1Oyk=\r\n=gnkL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da22ca960.0","@material/rtl":"15.0.0-canary.da22ca960.0","@material/shape":"15.0.0-canary.da22ca960.0","@material/theme":"15.0.0-canary.da22ca960.0","@material/ripple":"15.0.0-canary.da22ca960.0","@material/tokens":"15.0.0-canary.da22ca960.0","@material/animation":"15.0.0-canary.da22ca960.0","@material/elevation":"15.0.0-canary.da22ca960.0","@material/focus-ring":"15.0.0-canary.da22ca960.0","@material/typography":"15.0.0-canary.da22ca960.0","@material/touch-target":"15.0.0-canary.da22ca960.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.da22ca960.0_1678393118961_0.7994315040791362","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/fab","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13be978a27047ed91b5ed81b5ecae02f62d2a289","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.304a94e8b.0.tgz","fileCount":23,"integrity":"sha512-Uv6+bcn3QB03aeyG9hDpZtDMqeIMNvmCU+qZueausdLT/qiga581RtpO28cACZJFjE33tVTEgycJT5hIWzXDTA==","signatures":[{"sig":"MEYCIQDTcuR88qve4pyQizg47yh0PGyy/bshlXisfnnclMvb0wIhAPHcBi9NhIzLvq+IJZ8b2jEMyTImSIWGYRDwbVNmGF0v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkViACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKzg/+NvrrYgydxzAhp1tuyLZ7BxGNBKxxUCpFcgYR/8tELlRf3hIR\r\nqIGN+0F1z8BEzHRi2ddzMsCFsDcT3vHH7Io9gUsKIx/mgxucsH8sUP4erehn\r\nctdy1cfthQboylcw36r5GbTnGZ3vm/Ju/yxmmDsvlUmNtM+C9TxyTsIvAGp/\r\n9cIvnoKq/Xb6zUwbvKX8ThjhVF8vwIbU7lBgq6r1KtrYQjvucKhTszrXLUH/\r\n5rcgdNBXvjHiHjmpAu3UVD35aaQWraPkjw/UgldL7pmBLFAveTN5vRdAMDNf\r\n8kbaa6gGcCak2qTaabCEZfLE6xTvc6lLqQKQ4kH0+9pYFIritewwPwR2+tyB\r\nngGZXSyxB11aLKCrJe05ePCmUuVZt3eyN0RQJ/Pd/zJBHNFgeCtS8NSV+jet\r\nDEURTStSbj7e9eFabNz7tovy9KW/GpmtjiaJWDKT6mnlalXrV6ybW1RyRJMo\r\nzpWFbNFTRTyCa5M4pfp2KGuq5tlSvhyWVWYp0Gf916PgXAPVrnQh1Yg1FBGg\r\nxSf3HjC1SAefYRckyvLoT3maHQT39ZGJ1mq25CS6taDudgX/shyT0CAMSqOr\r\nbse8UZOPJVK035YBncsb3mmmgNkGa/aTfyn7Bm5VPnSlspS450ZIEL7oKByZ\r\nLbyvHWtNWFg4GPZsunmsK1D+fbqHosUyBXs=\r\n=Kdo7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.304a94e8b.0","@material/rtl":"15.0.0-canary.304a94e8b.0","@material/shape":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/ripple":"15.0.0-canary.304a94e8b.0","@material/tokens":"15.0.0-canary.304a94e8b.0","@material/animation":"15.0.0-canary.304a94e8b.0","@material/elevation":"15.0.0-canary.304a94e8b.0","@material/focus-ring":"15.0.0-canary.304a94e8b.0","@material/typography":"15.0.0-canary.304a94e8b.0","@material/touch-target":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.304a94e8b.0_1678394722142_0.7423191337740831","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/fab","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.6c265915c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46bac2b957abb37740a4b36e4495f32c9576468f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.6c265915c.0.tgz","fileCount":23,"integrity":"sha512-fF/jmPyh0XycKWPmp8mzMdxFVAVuaOAq8DeMDRCHlFg6rsY+vTEAi3nl1NQeOglfgJf8RvKVY9quU49AeUHQCg==","signatures":[{"sig":"MEYCIQDBBAypvuqJNjPuFDBkgjdIRehGSLu/k/J5jr7DPuE7iQIhAL7xxq57pkxCr61/0hnfMczZ0eZm/2kDZaS68qEBFe/b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClP6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9dw//XWvk+JxwEjxUUeO8HKuNwB68L8d/hcW1ldDG9RTv4qsclkZt\r\nbMUvEo6JyXoRdlJnJ13g9ZmjQPakGsiQjopdQEo7iFeefcwwywvdftv4AvjD\r\nTNJuJ9wn/1KySp2YWbLmqTin1x7aWmyjNxMZNaxGGrwuhR3Rfkd8FclG90tb\r\nJjk3LiojxzWo/ASG9HH/TiSaQ31VmMnHhkPiTQ1wXAy/aKr7hCOs3VMhpO+6\r\nsZdIJuEaDep0I3q7iI4hYBxvwBLxu9pTM09VKTMe7E1pNOK01hBRqS16q2RR\r\ndlFfkfrrFeIOXY54/Jb/eYXKkJ+cn7+uqSqrTCS1XtCtT/G//OCGk4EPLdOY\r\nVOmW+O5qzcEQB94vgmPPW5kLuq0NNJXPDlimGv/rgDvrZX6Q5SMkRsNbf1pS\r\nYKLi2hdS1Mfe9ENMRDug/ILTB9A7xiQdwUOt4X/PuhxYpaCOE+uA280HQyzV\r\nDIzSGFV0Z+TnyxhI6kzI4JIDU0NS4kUTmVS3ESOdA9pRiFRUt28miRn9gEcK\r\nUC5La4nuzEI4lRtO3Rr6TpNQeiDBHa04KMeXr548JmF9Fs0SRQ3hXv/0KTw/\r\ntzIUgbyWeEUB1KWT0l89RqNTjO2bCxxa4BN0JzUPJU+xpiQnGleYNoke3X5d\r\ngE5Shv3vYDjzRbb8+7lKBrkV0u/FNM7+pu0=\r\n=dpa5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6c265915c.0","@material/rtl":"15.0.0-canary.6c265915c.0","@material/shape":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/ripple":"15.0.0-canary.6c265915c.0","@material/tokens":"15.0.0-canary.6c265915c.0","@material/animation":"15.0.0-canary.6c265915c.0","@material/elevation":"15.0.0-canary.6c265915c.0","@material/focus-ring":"15.0.0-canary.6c265915c.0","@material/typography":"15.0.0-canary.6c265915c.0","@material/touch-target":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.6c265915c.0_1678398458047_0.6661345422272598","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/fab","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.de5224633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a3aa1c850f970c693601ceea9f335d5ce6b9cd1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.de5224633.0.tgz","fileCount":23,"integrity":"sha512-fII5+FpUKamztEyrsTMev6m4UGVp1fy5b9NwlqKaO/IKbr/1VcnhvKr0a9/1zdsr5Or+f6xVOoHZoicrc02/Nw==","signatures":[{"sig":"MEUCIQCLjX77mODeAsi0z8Ti2xanise3TtZ95MDh2jg9LPdsAwIgdhtkMQMvpuod4HtQKh7CCrIDAlFH7nGBMvDsj8wK6Tw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnIWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZgQ//eaFpJzB884rgQ6+jaz35IjI/kr+AhF5447VHH47smrxNfgXf\r\nQ7iSo81MjdU4GT95GD4Iip9cleRYg2eGh1RHWABZbdWsS5s+9AYVHoi0rLGM\r\nG1ocup58ku1737Fjhuph/Vi+cQUMNqxZAxMJFUeabK3yNc99CejhZLgRmoX+\r\nNezhHHASHuuIxuJ6jl4lYoMW6M/FLeEgcKLd0lRyQASzyPP/3tjCT9JE3u/r\r\n5POjWH4ComUy06JXDyfOCOZipbRX25K8XtqXYzVtldwGZ2QF9tiNquRln0ff\r\nk0hDWMLrTjLsun0h+3mazbdtVl0FaOKbWhSuKvjizjhLoy/47Gw0IVNurVNU\r\n9m8otsgyn5TC/YMH3Hbw3KoxXvmkS07g1QlVgP+Njft2nxtrnGMlHAf3VPG5\r\nYQm7xdcteARJf5p4yYF38C1468azgkiUuWwUlkvAWSgzXn+bNpt0HLPrWhV/\r\nKNWQADiaH4X0cDF38ANuMl7SMvkx6919+BCf9ny6BHHAhD2UtGFLGGB8sSYJ\r\nYn50El0grWiDyIU1zSS9eFPcDTCOWT0b2qgRIrbXr7DCYc6d3oRA2gVweZLG\r\nnW9fd16K7Byfz5uldieTvx/8sKrzexZj1MQYvLlAIgTsapkn0BIUASJaRZ5o\r\nqv0UC1K/PCXyNfo3nqCAcot2c2oS5AMxGYs=\r\n=Qwap\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de5224633.0","@material/rtl":"15.0.0-canary.de5224633.0","@material/shape":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/ripple":"15.0.0-canary.de5224633.0","@material/tokens":"15.0.0-canary.de5224633.0","@material/animation":"15.0.0-canary.de5224633.0","@material/elevation":"15.0.0-canary.de5224633.0","@material/focus-ring":"15.0.0-canary.de5224633.0","@material/typography":"15.0.0-canary.de5224633.0","@material/touch-target":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.de5224633.0_1678406165836_0.20302574486516445","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/fab","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.8879557e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccdeafd224240107292be3ab6754330b3d909e42","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.8879557e6.0.tgz","fileCount":23,"integrity":"sha512-qSBUjlN4Dy1bN9nrAfw8ulzi8Za1hXaYxu223tFdXfch1toFC8I6c8EqgJXFvUAWFZZgW27HlSFB3W1RozD8Nw==","signatures":[{"sig":"MEQCIGDWIxXHABTFl1gl679tHdDevoFt8XZFXQNvEPyJWmiDAiBfudq/MW6ign+eg3IesAaXLjtP12DzGtUxpulYasDOiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCznPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqKw/8DRMYSBX6WOrqPaDgpbCNGJKCRsBtlgmy4trqjsGluwfmv8hP\r\nUS+QyDC0xdjyXbBanjvt7MUTvlKFwWehATRF8se3dArP/o5+dtenwaLcWp36\r\najunnotq60QmqUZQuIaTpBL42F+AsHIY/p+cWt7116XIxV7NgEQkUZmkT0mY\r\no6GFvuMuOj0Q+F6coZ5GOIbepOjVAlfhftYBKkCtYo4NEP+Jx+U3d/0d5mGd\r\nWf6jrYGc6MIQIyhrQe0teuoLGvvtM92gfahzlFjj4BHBCVAll9XzkMOi/3Qt\r\n/Nb7Yf1P0SUFrKD7NDBAnxe7onYlQLiysNe7qAhRUIsvyYXGkgl+vQFIoXOw\r\no0857/BXiTE2aQWzEqowMrvMljFeCjh9ohyLviRIJ4xjyxsRVtTgDdTkytV3\r\nObxYWkqF756sDN40rsGNQ8gb11Efkddl5klRRAhTYCXXU9ssAJjHOpCJWU99\r\nMXJ+YG7YFeFYq8c//Md9sPqyS7jVExfq0MdnwpSOuV+6kyiALARaLP3GIAv9\r\nCvA/pcOlolUlk2CHqgwcnONJYVDXwxxbzWLK5VXeFkHgYjLIRZTTvrYMAfft\r\nCqurGgVbusF2oyRgPPM1km2uez468/TGASypXYzq270LK86jELX+TFpR2Hac\r\nJPKvSA0w1Ad4xN/fvRQ8tCfHyX/OaIDV5lA=\r\n=0LiA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8879557e6.0","@material/rtl":"15.0.0-canary.8879557e6.0","@material/shape":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/ripple":"15.0.0-canary.8879557e6.0","@material/tokens":"15.0.0-canary.8879557e6.0","@material/animation":"15.0.0-canary.8879557e6.0","@material/elevation":"15.0.0-canary.8879557e6.0","@material/focus-ring":"15.0.0-canary.8879557e6.0","@material/typography":"15.0.0-canary.8879557e6.0","@material/touch-target":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.8879557e6.0_1678457295048_0.1805049984267899","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/fab","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.23073a303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82bb4410a313022cb3be42d079527896ba937709","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.23073a303.0.tgz","fileCount":23,"integrity":"sha512-g3P7l+n7Hv9NXWG0FMj3Azz7Ir09O/X7mxGfhxij1ttZU8ri/vIz+RyzWBDgNEAz8yRLPdpG1rM4bCy+C0PpPw==","signatures":[{"sig":"MEQCIAEnrEAOCawImnoDq2nQBGk/9f2vheFQhQdeeJaM5cDMAiBZ9hBZgLDa/cBR82ckawA+/tYxnxRlpZkru0rrQSDUIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzt3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0Fw/8CQtS8l2iS+wp9eQsf2iVMILnkm1L3vX6qQWnXJ4XidM+RXx1\r\n2BBvq7v9wlWrGI83Mzn46qS7mnE0WEiHoRbpr2pIFtUx8neY4KZV2Eh4d2W9\r\nVHA9UxtJhFYCHb9StRdl+cA1PWC8vPkFS2rZOhax/hCoBxUyH2UpbWBwq98c\r\nGHrN3sSZl7ZUbdfs0H+IVjiYhsbmiTXmj5pgChLzsHB3HmXYWHvwAzjEtxR5\r\nTQzaNkJPDk6bRe2xOBzOHi8JUXq7F4SWCdlPFlVwPlprmgwYTSkqs9tK5pYN\r\n0ThOMNAWL+vfKB9G12FebnjXAcGk5FBkXlTyAgCT0sdKPmk6poWjpLlgMYnc\r\nRg9kr61MAeIkqdKwjGKLEHt65u+xotGdfhJCUNQBPfo/wmBVlGElISDlUNjy\r\ncAEgPcV9zcGgNXxoL1giQeiV/1nKfBVRWw859se3ByaIiZzn9ipxrIb/fwmN\r\n+3C/3ZBfI0du4ZqBzHVQfpXnd9XEYXsjPFfCeF9DE1g8b1ueO39maqLNt9a0\r\nCWQejZ7fCs0D9iIt3pj6gKr+Xueoxq0A0Jm3tu5/JQfMk0tvbWBCBFH3XCsN\r\nOd3v61KSHh5R8+CULRMXDZ5L1U24bYSmdj+2jgvs3xeQckXgWwWlZEJ9R9g8\r\nzVhTcIRwbXsjQcCdJLFihEnjr64Lj+uMOxA=\r\n=cFvD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.23073a303.0","@material/rtl":"15.0.0-canary.23073a303.0","@material/shape":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/ripple":"15.0.0-canary.23073a303.0","@material/tokens":"15.0.0-canary.23073a303.0","@material/animation":"15.0.0-canary.23073a303.0","@material/elevation":"15.0.0-canary.23073a303.0","@material/focus-ring":"15.0.0-canary.23073a303.0","@material/typography":"15.0.0-canary.23073a303.0","@material/touch-target":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.23073a303.0_1678457719091_0.4083431450152504","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/fab","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62a65a5c946c706a05fd02102535936fde9f312a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.51c7d4014.0.tgz","fileCount":23,"integrity":"sha512-Jt31soYLqKsse0Gk90rV8ZviMm3SsgmY0cINtbeitmB5wAD9rfo1hgYp66yoJ0qlsJev+ln0kBmZ6P6vMI8IKQ==","signatures":[{"sig":"MEYCIQCYGg2tV57vzSFWAG6x55JbSKK3g+jhFR1xMzC6TQiuagIhAP8EszvJ8xWL+LRJqHHsn2poZlMZKCz+GYuH89np3z9Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC18zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTKBAAhtTjS3AuvBkpA522kucoRLjaUV2t2nbe9qPaCcxtc3A+XPkj\r\n40Yliz6cSIEy3uwefHDyqn26A4vPdWoedj5S4gue3GZwx9W3U/aV3ZHRI0G7\r\nNBcfCSx5+hZEx4IyaeVQMkNLZQoAe0i3OP/YqmSSuUNwe1ZqlNImOkr817Zb\r\nWG4vVdG/LTW0ASCAe3+bnFeQOvk1Guqg8PbYTzGA7tZ/xCldY0yhfETV3GkP\r\niw8FN2w7v7y09YldunxkuDcBZPVSk631cuxr3vzc5MANKNabF+t4X0+WS7Yf\r\nImYIkmbHCkCeue9Gt8a6X+4eUL+ccpvAcy6TOBtk7AZt+HOl+7QA5qnU4OF7\r\n2EX/CmHX+hksclZ4uhLsQ9RZWlTlb+VfgpnefUfiKgtLb+vD93+Chre0LNbq\r\nO3daHjLV+n/3LtgnT86XQ1YlcWttjTpBnVglvUNk1G3c/Blbki2aYX+9PyOt\r\nHskhAxikFc9150otiocqpbU0aQTvvf2mDhBB6qkbl5KIVeg7wvIb0RrwjiVG\r\n0vnq5pVgeUKhjdGBWugnJ/3aCj7ZnCslX+HzjYmzHs7KgCECAFpYqCvC06za\r\nXcKtEWCV+wGMHBB4NGcV3+k+CfQu6bNdM/mClWHjx7qGibZbDrKQunNgl9K/\r\nNrrwr4MSbHyhkOJ9SsDTc1kV7pdQqnOKeU8=\r\n=ijEC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51c7d4014.0","@material/rtl":"15.0.0-canary.51c7d4014.0","@material/shape":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/ripple":"15.0.0-canary.51c7d4014.0","@material/tokens":"15.0.0-canary.51c7d4014.0","@material/animation":"15.0.0-canary.51c7d4014.0","@material/elevation":"15.0.0-canary.51c7d4014.0","@material/focus-ring":"15.0.0-canary.51c7d4014.0","@material/typography":"15.0.0-canary.51c7d4014.0","@material/touch-target":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.51c7d4014.0_1678466866951_0.8971405262436294","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/fab","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df33b731afdbac56698961bbe68c288723ec163f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.1175a5be0.0.tgz","fileCount":23,"integrity":"sha512-7UgLb6VQ2t5Nf+y4dO0PHMpoEDZLQDA47REGfg/6B/zIlsh1VZC7Fq4/m7AfRDIiz5GNKVNG/d6T9CL6HWG/Rw==","signatures":[{"sig":"MEQCIGNlry3Crg6AUXQoSwKHcYiUOFaREYDHZ4K5GH1ShWCeAiB5nJgKZWGnfxtNkxkE5kQTXyGrwSOOW2bAC57eN/I9sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5eWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBYA/+OBco5yAcl0bO+LU9RpWX+9PAP6V96MBpwsWLwMJWJr8W/c4A\r\nn+/WgWLaP34GI51NaH631QHlYGcT3WNUAWm+bg1IsI1XvaE9vidsdDJQ7JBe\r\nJG/Boaa3EWWZ/Hdr0qNvQoLTMlL/eTbrmPaK3aJSkbotsX+RffMVIUjsNBOv\r\n/mXNK9QkXCzDkzLNeX33MYpGqtkHkSNqR3Lh0BRzSW2OmgvIF4TTBLJoQPgK\r\nzsbv2QSzKshEFkRih8uEDEoj4dWUh3gLfbZ25CItfcOCyFWc5EzjgeqKZc5z\r\neyD4dyguvYxBxfjLh9XWJd2h2a3rJjZB0K7fIlny5M/tXhkf0rnvpXKLdcw6\r\nsKdG8Z9j77mmqBck9jJvd7cyLMWnBAEHkZBcgyn54btgFrKLqR8PcXwY3XzS\r\n26eEzS3C7be/ZdeWVu6RxvaGHa9NzRzZdjeBxQue52qN0Jds+Al46uUkUaFT\r\n1bFdDMpRMw9R12WcFRUx3KzaJOw0vg599CrGs32pOntGMowAaXhsgrA/rDBp\r\nBZcxnRd/QM85KsteVItTp5qmu8V9gsL1MrFSxYZj6o6KtF/g3j3wgqobpD1+\r\nCiNEIFm08P8FB5MJIsPEGnjY7xZG56ag3ovNwu1VPL+7PpRW/ae2RhRW8qmU\r\nh8UIoqthOLSUtSce+bmzkntT4HJ02WHKzo4=\r\n=QKHZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1175a5be0.0","@material/rtl":"15.0.0-canary.1175a5be0.0","@material/shape":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/ripple":"15.0.0-canary.1175a5be0.0","@material/tokens":"15.0.0-canary.1175a5be0.0","@material/animation":"15.0.0-canary.1175a5be0.0","@material/elevation":"15.0.0-canary.1175a5be0.0","@material/focus-ring":"15.0.0-canary.1175a5be0.0","@material/typography":"15.0.0-canary.1175a5be0.0","@material/touch-target":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.1175a5be0.0_1678481302697_0.4082482199723214","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/fab","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33d57f8dedb77b2f0a281f62947fe875074e2301","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7adf3af80.0.tgz","fileCount":23,"integrity":"sha512-8I3qUy/tq0+env1lfbEbsu1Q55/D4Urj60SMP2CbL3Li0WvqgXGSIuXCPReZ+jpC1kEF2aozbdVquhu+to72/A==","signatures":[{"sig":"MEUCIQDB7PiQSKwvnNZjtDYFRSxByo9uwRVZD/UqavFqIVOyBQIgJuAW2m3y3YMa2IjRvt0nGgOIUYw9alcNOc5/wDm+DIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9iAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqB+A/9GxwBMU7MhhXvSArQ9SJjAMH6zIEj/N8YEvhSSF8FeuXYXGsh\r\nmpoMJWWEzW4G2hs+PZVQslLtkxD4fvBtMPKcK3KnLanUK8uAXJaIF2EpC/ro\r\n81mUKeeGXsKAVY25qSeti3cuMype2yCN3QvemqRoJi+gBV0Y60QgzbGA4981\r\nmBERtZByUeGYXiEBZKiYbl5avpFB2sW++MWGuYoP3b8O8hDJ+BTL0mLdQEWK\r\nYfxN8yaSkzI01BIl0Nb3x7iLtRNoIS3EkEo6hBzwFwfrYUhwHC6F5LJjfT07\r\nslDJUd9X1rD7OIynkGogcTLPqqxADA1RU9VlrXA6emrl8L5xJRkhj6164uwh\r\nMpR0DFwHgAH+Jh8lNeSi6kex/+BUs6IE7IQRViok3wdatwz58YxsTMTMc596\r\nYDyblFQm6Todm7b1osaK5BpzTpOJJEj7ZFNjGAiIjvigFEiFzrJu0YU93ncO\r\n3NqANV8tdfQE52mDCXY8Wg7J7x9WpNo6NgeL7hbuQHDf+D2/HDP8BMjJQG4U\r\nqmixFx8MxKPKx0M0d/gtg2Jb+K/epdMm88Q5noQhdjAD4nl5O7S92Xj5ivJ8\r\njTLoWwUggCXQ5mHJYVYlblDsEOyg08lpfhf0zDs8CD2wDdnBRzHxAz60yyYT\r\nYpFUE88Bwnsl0Fm4XuAnvaAFjnIeAyDV1Rw=\r\n=mwf4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7adf3af80.0","@material/rtl":"15.0.0-canary.7adf3af80.0","@material/shape":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/ripple":"15.0.0-canary.7adf3af80.0","@material/tokens":"15.0.0-canary.7adf3af80.0","@material/animation":"15.0.0-canary.7adf3af80.0","@material/elevation":"15.0.0-canary.7adf3af80.0","@material/focus-ring":"15.0.0-canary.7adf3af80.0","@material/typography":"15.0.0-canary.7adf3af80.0","@material/touch-target":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.7adf3af80.0_1678497920586_0.41032023411518703","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/fab","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.82554d770.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21c530cd6d77068636c2ff4a00987da94ad55bd2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.82554d770.0.tgz","fileCount":23,"integrity":"sha512-hwF5C5TJZ6Xw7ONpndC8nTSGgfBZnRrMngSioZgK4JScAPXk14zNKJxDsFInynJWmXSKAvww+q09HlaypVnHRA==","signatures":[{"sig":"MEUCIBUWbDVj5aLIn/OvYbnmOyVDPgpdownJr2FsJFFZmAklAiEApzYW7ksdjeVZ9U4NGhZT+Uiy2TnozMIE19D+bBY0vas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9tfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSDA//Z1rXSMZPLMfZKmXY/6fRWX5qidIs+UPEncRepHeSdM1IYhc7\r\nO4ab1gNQjrHrrMIbzTBPPfmI5UJseZghh2O4kPM6fITITHSixyZPfwzn4mxQ\r\nmW/+4ytulkgto4n8ZMVrlnlZW/8JnJrGgNa5JYjnRz4V6ictuyN3AlupX3iY\r\nUx8A/QRcyfT4KKBv3+AT38e4Qty+XCtLUmY/5b+xHOLr1V+NhsINE9kiBv0x\r\nMNkT18yuzSOWVnTQ+G5eI7ng/Wawrhh7pCbapqDsXWWw7GVWZ0oQcItgsp/W\r\nC75BYGst32rE/wuioml8D2TEIjJ0pNuoSzCI4xaxzBnzwNQW83txbt9hx5XL\r\nWBorAAjSYPlSBbZpEjuTtqBWGWDvbl7cwuijr+G7ymPKK5C1R5f6hqcx7ly0\r\nNq6AM2H1vGcgQgeDybMgmHEqy8cYxTd7dI5nwMRgjiHWxrdEDwRduPpx6R57\r\nFDlcIkoajgwnEyFosv+47qKw+v97aaqhmHK2s+rrytkXs7oury0Lv6HGYl9Z\r\nEg+lKSFOd+KA+/Z+hooWpmlOlHAekGyGHTTkPMTZJbodcgBR/shVHFuJm8iW\r\nZqRkwOej52bDFvkkvw4ix7PxufCszb4HrrMzMPnhxcDqCHFiq4325WuGRX3L\r\nb/IyO3+PG8lLbwRiE1PevDSg6rStJ+4ropU=\r\n=vYYp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.82554d770.0","@material/rtl":"15.0.0-canary.82554d770.0","@material/shape":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/ripple":"15.0.0-canary.82554d770.0","@material/tokens":"15.0.0-canary.82554d770.0","@material/animation":"15.0.0-canary.82554d770.0","@material/elevation":"15.0.0-canary.82554d770.0","@material/focus-ring":"15.0.0-canary.82554d770.0","@material/typography":"15.0.0-canary.82554d770.0","@material/touch-target":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.82554d770.0_1678498655743_0.6454858374315888","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/fab","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aad781ceafedd0189dccbd326bbd8e01bb1cc393","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.93fc524b7.0.tgz","fileCount":23,"integrity":"sha512-F76KojK0RS/nj/NrRX1vgxsWpoVKKrpTpLJ1bhDSqMH75MtAKGsNUbJpoW8XHeXALmIgiBaQ9O2c5doaxHLQmw==","signatures":[{"sig":"MEQCIGe0Do2qb0N23NK/rhAcFs00Yxr5lIeps9emX5uf4s/fAiBEcwVgW4+TH5Ajttdn0Z6WK5MtcEDJe8+aRc67xwnBPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuEuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrj4g/+NxH1Qzfwl3GvzedWkzjxr6IRLW/2Y3VTxb03Bu4cLrbv0mom\r\nuGDCIJ1YHC00ILzIpLCgq0Ms8dqaomk0fKh7O8gsOQxAWfWW6AQ/6W/YNcuk\r\n+TY4EYaVVlVf8FVuxjgYOeaR9bm0X0kMlvREN66jsp8mWyxt3cNhlor8gwBu\r\nBH/TLIS5OPxYwwPpPv6yiIltnr+H0y8LhgyXAaKHSNYnbQeX9wZ2BKS2Qjwy\r\nKslIW1BE+pIF3MtOpWjc6v4MYJb0H09hoT7LyuWo0AXKmHq4Dns2m+FVU1S1\r\n6bDfck4RwpvKMNWZJRnPlozuPwH6N/NVtge0Icy4UV/xi4pBXbWrel4xKD7J\r\nIfsR0Ed9iw/A8uhpINzUvVcBNFeyjRtzy0Bnqe7VP4h9Pxd7UIKzhetrTC7R\r\n38nCIKqnRY6UnRW4CjorI+DqI1QUMWwX0aLJez+KnsEULRTEbxQCYKpetJil\r\nLpsyf7t4XV/tEkVc5YTCjpSJB318m11TDXM7P3pjC/tdwPp5eiryDuQqNPmg\r\ngAm2oHjSKwwQNOA7/l00hfHPvnBq33X1sYTl4luybqtMxRMZmP6nDkg89Xv9\r\n6TgUSt/xlgIcJFggpHjJNetPgo02PnhWNT3elKitaZYr6ggUMbfBoYrLbsiR\r\nCjwnka127FWUSWQJiN9cxKUQ4fKMjVZ2A9k=\r\n=P5Hy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93fc524b7.0","@material/rtl":"15.0.0-canary.93fc524b7.0","@material/shape":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/ripple":"15.0.0-canary.93fc524b7.0","@material/tokens":"15.0.0-canary.93fc524b7.0","@material/animation":"15.0.0-canary.93fc524b7.0","@material/elevation":"15.0.0-canary.93fc524b7.0","@material/focus-ring":"15.0.0-canary.93fc524b7.0","@material/typography":"15.0.0-canary.93fc524b7.0","@material/touch-target":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.93fc524b7.0_1678696750379_0.11287336356999234","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/fab","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5db0cb9b8ccde3472bbd76a7231786ce623b7695","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.50be0fbae.0.tgz","fileCount":23,"integrity":"sha512-0uEa3boVi+OCneiQTgAQt+B9phhbsfH8LTFVwCyx7sCPXfH/mL83QQ6Or1swLyNOPvqfnkRjQNbGNd7bR97BSg==","signatures":[{"sig":"MEUCIGRZIXbEcfNWeA0mOmesEG+7XC0dbSR7CA3dqiQ0d0TKAiEAmCMJgfStS1UgNOhG0oe2KcDd4YVI+Qzmt3ayWeg3ydI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2EBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqI+A/+KBioslVUrocFkj5RqLMqQPVLEEj4KIGDud6qq6MrnfIfFR7G\r\n6ALbM7Nsi5rk0IbvmSXQXjx/TLi+kR7gYej5/cLZ3H0r3FIJpkYLtYnBd8oW\r\nDibBD2CBIlPIRCY9x4DNlHtQW1/izgdMb/u9B9d+twTRtDIjZliszfbQ6LtB\r\n7jEWZy1cu6hx9J70o06teN8+vQxJzG588UneZMOl095cAVOZtOdpAcZF8gSv\r\nwQCRyPfmqNUll8tFEXfj+Nge0zqgbvkbRSWKJzi0JuaDCdIarMKxHSw5kQfi\r\nU6UVLrfPIEzSULz8EbCCkoX53yzZNTFpMyr0Mij2TqQRvaIoLdefPXMpZmqq\r\ntBtCkoWelMnRTSCsb6iJwtiWdA19Xt6MfN63qvys/2xKXWzsUbb9p+sJtLUD\r\niUEHlNLNg4IYPJXB5/QBniQPOyuHVJH1G0cEbmw9GZbWjwvMiWSiuHJuOdyf\r\nPgkZ3++hrqu+WXEqjsckaZcqfVfWa10F1IxlfF7DDCCr0X/wlmrsGOYuMPpm\r\nzRfXm5xwVo/X6Wba0MvMsX1/V8fZ9rj2KL1kuq2S88k7uTVbsto1nTO/xwuj\r\nh06+Zta4EV2fVtiRP9DNPWC/VfnpwKyq6p2yi1Ef71qMMD4FVnTkh/UnQTfy\r\nDI9yDStyAMmO8J4u2pjjN9rCj3IAMl+P2Vg=\r\n=100A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50be0fbae.0","@material/rtl":"15.0.0-canary.50be0fbae.0","@material/shape":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/ripple":"15.0.0-canary.50be0fbae.0","@material/tokens":"15.0.0-canary.50be0fbae.0","@material/animation":"15.0.0-canary.50be0fbae.0","@material/elevation":"15.0.0-canary.50be0fbae.0","@material/focus-ring":"15.0.0-canary.50be0fbae.0","@material/typography":"15.0.0-canary.50be0fbae.0","@material/touch-target":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.50be0fbae.0_1678729472884_0.8215222779494862","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/fab","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1650c0a66fa18639b099b80c2961a96bfaeadf1","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":23,"integrity":"sha512-VJ5cvt3r9xqEp4OZEc6vQ2SKJHrRIMqHZMSTmBpNBcbCSxKBhubhWuxCtZZsHWvcmtB9Qt6UIqhsPXqW/szujQ==","signatures":[{"sig":"MEUCIG/8PU8RbQ/GhSTyRLojNzHK2nL1XSpyHblqMq9ECqmiAiEAp2jD1GRfjBs6Zk0gfmFyIGgV38dBMWW3wTYfPH87/Yg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2HJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsJw//T+mumoDdCWF6ZDXr9vvCguXqv57AtKFrZlRE8PGFrc8z7cNu\r\nGq7lWWVjhqLHpAiUn6TNODvNdiZGIgRj2MgEtSW1G6KFeAeTRq1VUQqZ1Q+a\r\nXQnz226z3syBa6yMBIbIdTN2dBZIBHzrumpduWI/mKslQusHXquqnxg+Vty7\r\nYm+jEvMaWm1NY0pH2s8BvVf7tAsJKRdhG4vDGQYdsLqhZIWUUNBXuaq0e1PH\r\nf9roNa9+teCnNSnwvtGDKe6Gxx1T10S2wsPHVbFz6XJ5FoxspqT/fXUr++5k\r\nIuFt7tSYICn08ln42ucVw/HNPbubhHSJD40yvzpMtRjUQfU5I9qbudHzvxqr\r\nmDMlZD684LEGiNPncIv01jmM9Ut1CCZRrPtRk7LqyggmF1Olngoly5pfv8W0\r\nokb3rk8GPhP/8Txui+WozTu4XBt2x4uhuB2uVBBYm4Jn6rFZXN+o4u/0gLJv\r\nfbJpv/RhXkLZHqtl/ur0j9EDcVBRAzwZMCfS6oGClWrIdq/HHYUNYi8oESvr\r\n2yWKY27tysTnOdq547wyGOwFby6jB6xDhrG6C6iYY3V/vj8dnno2OVsRbb6E\r\nYupSnN8Nc+M4C55BKcs9tY3U6PSptv9M/zxnwZ1PKhjMzWiNf8hB7vL0YGSy\r\nvwfr/RslFPDTCioZdmGiXDTtgu949od/OiE=\r\n=YLf2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6b5ffccd9.0","@material/rtl":"15.0.0-canary.6b5ffccd9.0","@material/shape":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/ripple":"15.0.0-canary.6b5ffccd9.0","@material/tokens":"15.0.0-canary.6b5ffccd9.0","@material/animation":"15.0.0-canary.6b5ffccd9.0","@material/elevation":"15.0.0-canary.6b5ffccd9.0","@material/focus-ring":"15.0.0-canary.6b5ffccd9.0","@material/typography":"15.0.0-canary.6b5ffccd9.0","@material/touch-target":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.6b5ffccd9.0_1678729673669_0.571977615496692","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/fab","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"294fa112f62e5d14d8e1dd614ad46a8d955e7dd7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.1c8013f4e.0.tgz","fileCount":23,"integrity":"sha512-QIXeriwcvYnpU/5Pc+xTUg5BH+BxCyU9lkYNaeFizwTAf/62TaYL4pFaXQS4KbPOwm++j31LaKfPO2+au3cgVg==","signatures":[{"sig":"MEUCIQCrgWKP8zy7vrCeaDBVrj3PzTjMoaLQ78Hm2neaC8V/QAIgToMm6I/+Axe/0suF+WMO7WrTiaUJG+/0kI1xWa+Fcy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2VcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoweg/9FwWBFKJhtz/Xm64GR1GSnPYO478ReqeTf5nCNWstPsI+vCjH\r\n54Bf93lz741mXhnRQxJFFBXaysX+6Tc4l13kgZcTmpwNIqvCUP48JEYDu7gP\r\nHY+9GewOfZNJvPuPLzveLSv11EbFSuUm+N9oR2NDPYrKuHZnqAA7vqFil6A2\r\nR5OQPy8lVVy6IDuzo2doYKLqCA8rX0M+jzp5/6R1ieDRIcrpTji9CoJzvelR\r\nDEq9cPkLbJn7rZWD2xMGcnx0feZ6QGX97/TY+1afBdRvPCl4GsOiYcd5EGmx\r\nOSqpV6uCxOzACUvVoHr0Fe54lCngfSHQ5RAmXN7I2K1ExJVf20LQNRF7gLOr\r\nUCZQP0TRATGvG9c00FXrzXVIta6OBC08kFEfpFiILVZlFmOBNxGw6o1GQl6E\r\naOZMTZwHt9NUnldm2t1rCTOvoGCl0w+9yydQ72ITHYseAdmbLCzWOM73XkmY\r\nKlBQtpZYq1rpLK6oibuLrr4e5w3G8UPTtYEKoWWucyqXPvS1uE0OV3fiAcJw\r\ndB9qgYFv3xXy/HX6q7Z8rCDHy/nyjj0z46SuOM1pMIdfTjiy8vaBrv06WIlR\r\nZG5x5XNn+6fdiz12LRFjhi2zGrCVXV5L49yM9FY/pQ/YX8sobwLpxDkb9srj\r\nmt72q/T6tScUz9qBFTJWD7GjIBfljXX/cEI=\r\n=C633\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c8013f4e.0","@material/rtl":"15.0.0-canary.1c8013f4e.0","@material/shape":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/ripple":"15.0.0-canary.1c8013f4e.0","@material/tokens":"15.0.0-canary.1c8013f4e.0","@material/animation":"15.0.0-canary.1c8013f4e.0","@material/elevation":"15.0.0-canary.1c8013f4e.0","@material/focus-ring":"15.0.0-canary.1c8013f4e.0","@material/typography":"15.0.0-canary.1c8013f4e.0","@material/touch-target":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.1c8013f4e.0_1678730588509_0.8321138525512615","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/fab","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.112715df5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5a6b673a56daefca9dae9602519096cfbfa9f0d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.112715df5.0.tgz","fileCount":23,"integrity":"sha512-oEppScrDOUPkRKV5kdDL8C/y3DYigS4GvAagKJF0QHIdcFUuVSFARSzm7MAX+iUwQVh1/6FiOFjoRzR0AHl2cA==","signatures":[{"sig":"MEYCIQCuTNKraN3r4pCz9slIumjueNFxiuqadxaSTQybyS/BCQIhAPef+rXDue0F+vJUmXZpKQDX9zvdgmghzexCFxz6ACaP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD23mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCtQ/+JckMw3s64E21AF8UXQk3kttlcWyCSDUcd5VCXQxVeGrCsm6n\r\nidTp2mlK6gR+yb0CtgVSsgEkJX1ZSkeNJIGQA/hLxSPZM1NwOeBFBQcAlz3d\r\nziOpVll7zlgvaGg6W6OzWKoLGy5Awh9aABX4oGpVgznpGKyGi0Sy/8UhPQqT\r\nXvjKn+AzrLtmhdZJ3cdKtFxRHdYtKLHwHBfmlka4stH59H+bSUS87aWJhcmz\r\nzcWyo0zv5DWabjvwF9srIrdSsyWM7Q70mvitnq20R6/8ehZ3VQtD6bvvZzOH\r\nydhgBElocrztkcjpVUt+LmRfiTkvXl7IMXem+q60DCmAX1m3WJyK+YEU5YnY\r\ntEchr3IebEjyegGkzB2drQkXMbZk3s2HTvZeXoNa2385miOWwACwfiAicqel\r\nw6CTXpIcYSmMdO5i/rwJfH72XjzWIigTJ7KmxM4uS/s5wqEe8KfQ2Jcf26VG\r\nPI6uI/2nXUxebFZnr5/I6iqs/Yt/YFt3yhL9lWq9Z1DgE7upaz1TT3OMp+ro\r\ns5kG9KbmaFQ1v+IqRG5quTzOop8qg9XVQPDOsdbddHf8pbJIhzVnwb+NskFm\r\nmckxuYKBVJbMOCY0hYkIpfC48Kll1t5bAxk7q14uds0bvtAQQdgTIJGGaCD3\r\nXsGPUo2LMtrSJyXR2fnfyZpcuPq8Z6KTQsU=\r\n=xrQo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.112715df5.0","@material/rtl":"15.0.0-canary.112715df5.0","@material/shape":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/ripple":"15.0.0-canary.112715df5.0","@material/tokens":"15.0.0-canary.112715df5.0","@material/animation":"15.0.0-canary.112715df5.0","@material/elevation":"15.0.0-canary.112715df5.0","@material/focus-ring":"15.0.0-canary.112715df5.0","@material/typography":"15.0.0-canary.112715df5.0","@material/touch-target":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.112715df5.0_1678732774605_0.6701586852703723","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/fab","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d250911f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"027c962e368844643c1e0a9ce6478ac8be34350f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d250911f2.0.tgz","fileCount":23,"integrity":"sha512-t3hzAlacT71DGPGIzte4RBElc9nyFsSJLUlefDBK4I3hfCmzMm0G/DpBg8gXeAw28ltXWAhbONc0gRr4GqHcTg==","signatures":[{"sig":"MEUCIF1t+ZGR4RZHtKWFyF6nrO6ts9U5L0W7t40Tjbq/XtmcAiEAjsZ8xOy0FwXBLEozpBGoiE4VTc9zPPDiI9cut6F/a6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3olACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkFA/9FaPpu2CuiCCSya6dqso5xEN3a16HTLNVTvYLprxqw+wNK57s\r\nzYssSHSb+iVgLxZp2bugcRVYwmsl3ddKjAun+NqpBbv4T8JBdKka1AC2ktpd\r\noz7s9r/kwY8jmu70sB3rNLX4ikQGaa3toHyz1gnF8LsP7UpdDzJrmgFZKbjK\r\nKHyq62ytc4/PuVfJO4PEnLAvVYL+04rG+qmeHxB2f7K5yVwNLZI0lwrMx4PZ\r\n4zUq5lVIkmlcnxVHa30NxMtFNDHxNdEKZZ37wlcW1esYZ7fHjQA8TSc3M+zA\r\n1QqnqYCmsWeMpS9isPRNzD/W4BoJZB4ffGbs3RAQg9HIKfK/25RmBohm6EoA\r\nvQoVVx20PMAhSYiI1ksXDAkj4BtVVhROyvsWBenSdfm0rfMwnso5tSHuuJj/\r\nsBwsNOYl2ZUMh3XiMYGbFSLGkaMPVtSnPuTrN9Myc1Jp6u7eFD0kdk0cdpGf\r\nYikW7r6e33dI5Q8davAK/hP5o6E2krYeAglvt2TRJ94iMObqj9eTZe/eNVa3\r\nhFYc2wDTywlOLyIpkuip3UP4PIa6XwDaycwWhzR5071UxLuSOwj3JqH1X6Sh\r\nTgL9bfhAq4e5tQm9BHJ8hYrgufuY/iksrCSOvlEBjYBf0ISaT4m/FraN6ALu\r\npIEo11ZlvXgLxUsRWSkFvHbxvw08EFRh+4Y=\r\n=QwLK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d250911f2.0","@material/rtl":"15.0.0-canary.d250911f2.0","@material/shape":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/ripple":"15.0.0-canary.d250911f2.0","@material/tokens":"15.0.0-canary.d250911f2.0","@material/animation":"15.0.0-canary.d250911f2.0","@material/elevation":"15.0.0-canary.d250911f2.0","@material/focus-ring":"15.0.0-canary.d250911f2.0","@material/typography":"15.0.0-canary.d250911f2.0","@material/touch-target":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d250911f2.0_1678735909577_0.24694516087809415","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/fab","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"981e16f6f7ad47fb28b12c343201540973fe443b","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7cd925c12.0.tgz","fileCount":23,"integrity":"sha512-g6BxbUG2Z8S/UyM1uYjKAyUrDR/PaJ9HgvY/Pms2b2/lGoPC/6njgNbbZoPSSJ1V2ZydDb+vU2zcDnBdAf0Yyg==","signatures":[{"sig":"MEYCIQDZI23ptjXSWWDB4pxcW+t04a4UgCj+NlnRP4NKBSCXdwIhAKy9uTon2vuaBmCfh+S7DUF9mLL6lM0B9HdNwfKZtrIY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3vpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGrA/7BIUF3jlkrODBim+ya5hAO9/1/XEV+ZddGpJ+8Qv3Gwk9e7o2\r\nUtzJjhK/cORgEM413Va9puvbbx3A2DbmjLh2XpV+IiL2/9/WbG3LxCF8mu5T\r\nqPBWgKVstX5L5L/mRrKFxi5f4g4lPXgXYS8aYvi9tbJpiM3ibQQC+kABXK2v\r\nyX1fpuD2qVFtL4gf1S9dkLJBqv4PexrtMcC6WPXGlylkRPk4YYy5Ixn5VxRW\r\nhkc/MpzIW+9Sb5mhrubT6m2qH+DubMnDt4QLYIUS7p92o9FLEtjZReqtb63q\r\n6t3Jqzz29VCeJJUuozcUDbX2n8ikr9UqwXz2wCHFkOpiV/G4C/hNyBF5e40W\r\n6hNmoMlBsRqB4VoHtmrIiXbbEoJ8VUBGOzbI8KiuRAv8Vp7L7bGcHopiuluF\r\nnPwQSGXza95Vyk3G51PokQ6AJ3s3RJXlvJnSZeu7cM6SNyEIfuo2rfgo22/Q\r\nfm05hYaBb/W04OVO4FjYoG1fRp2e8T47Wk2NK3ku6R9g1OVdf49U8EcZlfVl\r\n5BQ+tuZG1USSvudy7a3xyVAkdSUtbjNivA4nwqfMRG/mSBceNslN54TRz4Bc\r\nknJDnfLomPYq3sDSOSwsM1De/so1vmgOKDdOn5+yp4vOnyuMlb+Bgs4Rclcx\r\n8JtRptJpfdn+D1L7c3a1vNXBIVI0d2V+ztY=\r\n=teKO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cd925c12.0","@material/rtl":"15.0.0-canary.7cd925c12.0","@material/shape":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/ripple":"15.0.0-canary.7cd925c12.0","@material/tokens":"15.0.0-canary.7cd925c12.0","@material/animation":"15.0.0-canary.7cd925c12.0","@material/elevation":"15.0.0-canary.7cd925c12.0","@material/focus-ring":"15.0.0-canary.7cd925c12.0","@material/typography":"15.0.0-canary.7cd925c12.0","@material/touch-target":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.7cd925c12.0_1678736361736_0.133857119529597","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/fab","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe47398f1641d987878236e1430df05798f34d5f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b2ddacf73.0.tgz","fileCount":23,"integrity":"sha512-X+O+WOyX930E5q+JZVu40iWnFl6OMa4SlujuiT2gUdoTgrxLSUmHnovAUgHGPvxgb7RX4SKXTsCHslvMkW/T5A==","signatures":[{"sig":"MEYCIQDM/9TAuwIj1oo2H90DdEt/BKEiWLkA3JdOXxbg+rUE8QIhAOEJWa/LoylUh8ndBR4rrsDNk9J4HdgwMJOnrqizYOtZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3zyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcGRAAoS9A2XW+vFbSgiilfrm+Y1FmB2Q07YQmkC8np9bmuK80PwaV\r\nOZKc2i1d5ndcaW0Ex0gqbkywYjykSRlYvVNkCdsxgiZUudA1ZmP1WqouSqR/\r\npFyXELppUlXucCNY7/zhrLRm7wWY3AWeaxqXqN4KPEazYGlMPB1fNcmby9Co\r\ncuEkuxyDdZCf8cBlRf3zcy5D7KhM3L4draMVvAzwQ1M5rK/auBnHRgpv3LRu\r\neaaQ8BcHlUptYz6OkcGypoPJALIz9BmRSd2Rt+gxPcdnWhyUGJIBCUREKinP\r\nvWTcA9lAUd1Ut1Q8CcBdqU75R67P/pcBZP3uKw4dxqWw5xqZga5R5SlgEpqm\r\nnLhltLKx0CyfliHk6oz/hOoPLps0l5C4FnGm+ojr6Pa/f2F2PfZ330Gxx53j\r\ndw+a7DnTnQYhS4ZWIl4dWk8iy4IPenA4LSGU8/rZuXu72mk2NNk0YtojmFWZ\r\nQoFb20mkKj3qos28bYKaLuEuYWssnjEs/9KBT6ZajZHAIuDy942UcNtowXVF\r\n2Ev9M8i/7p71IGNi/NMCj5HDGwb3zmK0sj0b6UJ0t16UjJkRl6wZBz+kQeXb\r\nAoBGo6rCYf0VPVGoNedwxTlcHFobrfQFfI24IuE81kDlaiXw9bkFOVpH0QcV\r\nwaP6JhgqMXqz0+y375YGenbiddJAY7liVf8=\r\n=rfhf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2ddacf73.0","@material/rtl":"15.0.0-canary.b2ddacf73.0","@material/shape":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/ripple":"15.0.0-canary.b2ddacf73.0","@material/tokens":"15.0.0-canary.b2ddacf73.0","@material/animation":"15.0.0-canary.b2ddacf73.0","@material/elevation":"15.0.0-canary.b2ddacf73.0","@material/focus-ring":"15.0.0-canary.b2ddacf73.0","@material/typography":"15.0.0-canary.b2ddacf73.0","@material/touch-target":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b2ddacf73.0_1678736626524_0.051932339988414844","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/fab","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b38e5554b4e9cc0da3cadfa54872b6672d09eca3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.989ae2ecc.0.tgz","fileCount":23,"integrity":"sha512-pTH11oWChsXGO/kjP7SoD0/vvejDaR+3fdL2obly3gQFl4l8tDc2S7kefbTQ7IpoVtT/dKHYq4TrCq/k+e4jdQ==","signatures":[{"sig":"MEUCIENj6hAaWNS9Re+698JagOWOBL7b1RVQHgI1ZQzehdgMAiEAmi3wBmKIJ6fCK+RJpBl04YiR+n+62wbcipU9fLngvEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD38bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBNA//Vv7A9Oz72R3z6DVKYC/1u5p4KIID8LDxsThNJxjZfChEZIlX\r\nzM5qe7V42ll2+GCQo2YiD3dK9OcMXB1QmPszI4lXT+9a0SgqAkiJDfrlzoVC\r\nd1lju57tCT/oJfhC9SVMFCYu/4xg/7Y8APJoB+Jo28hYslvbcURsa6D3ZLjs\r\n/2cleyWkm03bUsgYnyL9QNocLmjsL9K2bRLg1Vw004FpCVrNH9OzgmPwxOzO\r\naD370zhW9U8JdUYxeXHqqsnK5A87k0E6w7uLN9I6FNHps8bdy6RV1wmy3USv\r\nkkUsIWmvAACUW6mTVE5Q6blRT0K+GFbvk/1NxxYi6HoaSgrJnyPqT5ePDfo3\r\n6D7zrX9y1CFQPa6E5fLxpUkB4eO7aQUWZ6Jrx54/XNziauy5S9LYyDWSsPXy\r\nGJY08tUd1TBeIjiy2n9xtmSw2b+YLY3sbNUDnB3J3xa0OpJAwgITnwt4p/fm\r\nxTT+2sL1IzF9EjOqT45dsis12+RflG0xkY7M83B2CPURj3OzLYptKGxgKuij\r\nWguLnSymYfnd5jXQnfOGzCwczOoE61NsEKpIzvoQnC3ZuRuBUffejCrIK9r8\r\n8jSWvOc9iTNG63cFpIJauM/QEC3saxIUKUO5FevJvHUb59CL1Kn/bdIeiCZd\r\npKxSwzsZ2pYtCCjYoZ82URxdtaRmhdUtxp8=\r\n=FT+Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.989ae2ecc.0","@material/rtl":"15.0.0-canary.989ae2ecc.0","@material/shape":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/ripple":"15.0.0-canary.989ae2ecc.0","@material/tokens":"15.0.0-canary.989ae2ecc.0","@material/animation":"15.0.0-canary.989ae2ecc.0","@material/elevation":"15.0.0-canary.989ae2ecc.0","@material/focus-ring":"15.0.0-canary.989ae2ecc.0","@material/typography":"15.0.0-canary.989ae2ecc.0","@material/touch-target":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.989ae2ecc.0_1678737179124_0.02024712150292496","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/fab","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.89c66483a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37a9c9d6d02cadb71f212491c757e75159d43603","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.89c66483a.0.tgz","fileCount":23,"integrity":"sha512-9FCsx+bVjE/1Ea99R66OzC6Yh5Vsxav/WjGidY6JqflpRRFsCRmvnr93KxeakyCNfORejC6Vp9d2w0i3zc9fmg==","signatures":[{"sig":"MEUCIQDGwKWMRGeLzmhwcUCXi8syGG+TJRdbMvV6KxSXmzUfmAIgCL+Uh18YVa4vhP2AgIJ10ZBLWmvXpOWYR+bFcnWWBiE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4SuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoddQ/+IN5XyYPh7KmCZHnoqkjhCzLRPDtsofq+ObWs72z42LgrFTJB\r\nGfd2wo0Gmqvs9L+TA7HWAdlJEpKRAObI6/W6UWpr9c3Gln2Aar7PGefRiCn3\r\ncix+hK4OkjZs8PZP9T5EZbYGETej+T+tr9AYOezM0ucXsKUMX8iiXb1X9SYI\r\nxIF9h8nfaenXO/+9cDg63gNdcqrtYWFbCtTSs262bTQkQElvUJ57kV/z94X2\r\ntVYgoGZwB4VKvJHQv7cRdGPLRhKYt7lbXCcHZl8Nr4FE2OWa39PmdDaz3fBP\r\nBJXnLtvreMdZWTXqxQt8/ww08H1k8rcGMMPbT9Xp6YWj2vYArITg5VP7XjxJ\r\nO/l0BwMyScCchbsdtVsH7skf1pzuScEqkdYOVoDmPR5pmfWTeibgy4RRZ78e\r\ncXi5urQflrdFDCub6OHKaWqNsyvtR143s3XXHCrYM02FPmU6P6yK2ongMwjD\r\nVWBTHE1/U5qxnes8bdJg74adSbDYalHS8WBm2zplz+zCV3MlS0s6s41mgOFq\r\nYzKRwEefgWlMIQrvxzTuZUuOB02gOrYwvgBNCq04ztcsvULIF3qoWg4NEIUe\r\nCpFtqtXveEmL3gTTFyBfzGDm933Wxox2Y3Kz466nAlboSVYswAaBWlC+wM9P\r\np6uU4tkH6PWlg8MDYQxXQJ6nlHn/BNx5oSg=\r\n=GcdX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89c66483a.0","@material/rtl":"15.0.0-canary.89c66483a.0","@material/shape":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/ripple":"15.0.0-canary.89c66483a.0","@material/tokens":"15.0.0-canary.89c66483a.0","@material/animation":"15.0.0-canary.89c66483a.0","@material/elevation":"15.0.0-canary.89c66483a.0","@material/focus-ring":"15.0.0-canary.89c66483a.0","@material/typography":"15.0.0-canary.89c66483a.0","@material/touch-target":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.89c66483a.0_1678738606219_0.9489457797132184","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/fab","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6bb687b4c3aceac2159bad36093bd22117984ec","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.6a85742c2.0.tgz","fileCount":23,"integrity":"sha512-i89bIVPRpx2w3IdyG1NfUv3yAJ44GLA4LDQqFid//nRcPgDfojnNSyvyhRe0KrFzujURSeR75b8tueaVxlwLYQ==","signatures":[{"sig":"MEUCIBLx0P5yiJ8DrPdDylnCSK5KnxM381tVK4/1FyyGEwN/AiEApPxwPZQz7hj0QD2AFXK7vKQqvt5F5bF/KyCfVhiPgj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+BNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNgw/+J80F13eAqWZBsQ0A/n9p23wayhCobavwmj4dQusqLBSmqoib\r\noF3wbZsrtvSZpA3JODpCEMUDVZtzGznLCsyYkWGMNMAxNm8J1cEWyUafD8eL\r\nM0jHAX1OokCtCQXx+Y2jVGWF5V57v9GFXcYb6e2MCwwcCQU3vi4dBtPHykcr\r\nIJYheHIxfX9X9RYu5K0dleAq/XXEn19hvjIpYamUat/CKFwFaAKRPi5RtKyg\r\nCPFGAnq9z3uM3rGMEMvPg8FCzyjH82e+YHSI0HhH9hMmTIYbU8Nz3ZW+7/V+\r\nJc5oMmb89B8yXjPzm2CfA18NSjkpjxPumu0WhYhzSuoIImF6T4IKAQ/FcDDd\r\n/9fyCbYPKmCSLJDavAlzZ5qSFl339c1BATZjb5X28k10F9rulDc39OT+vRYf\r\nE7GOBGS3DSd8V7pj/+m+1CqlsaLM+WVlS2LqSIQVF8HiMqRKN+/uLVLFGzHB\r\nSQOJYxhJJNWsxOvr6AXV1ooBkW1hRbCzgVCJE/uoUrl3zr99LgmPHLXsI2sm\r\nD5id7atTvlJ30CM2RmmSS5dKp1sDujph1l8zo/2NVVWxB5hm7G/aHE9Uxhr4\r\n8l8a5VUvzbOAqB07+EqXVr0ZM+v7ZgFk3oe7f759gPeQ93xmt5khQxwwBr6N\r\n3hm6BYJ1k11wDKONstzn0RiHn1qCLU6mTkc=\r\n=8xQr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a85742c2.0","@material/rtl":"15.0.0-canary.6a85742c2.0","@material/shape":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/ripple":"15.0.0-canary.6a85742c2.0","@material/tokens":"15.0.0-canary.6a85742c2.0","@material/animation":"15.0.0-canary.6a85742c2.0","@material/elevation":"15.0.0-canary.6a85742c2.0","@material/focus-ring":"15.0.0-canary.6a85742c2.0","@material/typography":"15.0.0-canary.6a85742c2.0","@material/touch-target":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.6a85742c2.0_1678762061151_0.9608925919218503","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/fab","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aae4b941fa748d3c6c6c8a31c6d7e164dfe8ad76","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":23,"integrity":"sha512-9OUnG/2bEGpYcOTzT/0VbNcU3Hzmg4yeBRYumdEmPEVfWsqgG7JehSOsH642nPvxV6JRcpZGcLKe8z5sKkOcMg==","signatures":[{"sig":"MEUCIF208fX7Urxr0cTEUr7dWv8fa4PVC2lJ256hQEoTa3owAiEAkTaY+Rs2qvF5L4+QQ4y3Os41PxghnZlM64RVRXz3oSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELonACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxkA//ZB8YdNwkV0OaFmOPvc16L3Zd8FRm5tICeALJqw0QUXTxBGGq\r\n1uwC35T5U3nkbVV3NYXU+wg7AwsAPbEIKlq9mCdLt5HcoGMt5BMjYCrO/48J\r\nJ5Dg4hkz44g7tgeVHak2CxyxaBfqk+u6lIwrgqHx02QXfGHD0/nPqbYzJCDu\r\nc7/Il73C+O1ZawZV6/V2bCyoIvDLMmsblnek7tve80AhHBeAbDBxxIiCy1jZ\r\n/k0Ap66Tq7OdcElcaaKtAkEIetQ6dGec34Iz2jJfCUiFtswtidhim4OsAH/E\r\nzfoUvJyehGqkzhhlU4Ks6DUcxc5gN4i9BAyZXtfAKxoCZr+mt5dPYblRQ4KQ\r\nveamcWNcBA3/rS6DnnE2AHC1WfsX5S667z9prP3py1YohdL4PDBZKsjv2kKr\r\nNi0Pn11b3s/OgWz9KCG3ZlxpBQwQrVGMuJ3NvhZrNK/9vt7ya4ectriysiHZ\r\nbBXZW1BHkHI9P7S6zRWIW2YjCC1hy0m8mdvgXVsZslviPBrmS5i8ykCcIuh1\r\nrGx0AmrFk1H4uxHEphbxBF31BMRBHA8v+iNsRhl4ngqFHjkZzBNc73vwVbxz\r\nAUlJ2ZLZSmVIXc9nP2WelrvIemeRGxAiv6W+PF7l4DirPXwJA7B7+N1E1Xbb\r\nd6PtXSa7T2Rzat/rIld5EymsSPJqX1XYnI4=\r\n=CPtY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb6cd78d5.0","@material/rtl":"15.0.0-canary.bb6cd78d5.0","@material/shape":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/ripple":"15.0.0-canary.bb6cd78d5.0","@material/tokens":"15.0.0-canary.bb6cd78d5.0","@material/animation":"15.0.0-canary.bb6cd78d5.0","@material/elevation":"15.0.0-canary.bb6cd78d5.0","@material/focus-ring":"15.0.0-canary.bb6cd78d5.0","@material/typography":"15.0.0-canary.bb6cd78d5.0","@material/touch-target":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.bb6cd78d5.0_1678817831104_0.8998298516156773","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/fab","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e34035b3b07b19154032bc79447c330b7a360fe","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.5f94aa37d.0.tgz","fileCount":23,"integrity":"sha512-F9Lvb9cYT/O2nwJFT3QINBIn9xyi7q903cXcSvlo2guIV7otpDYIoDNN2iSOPPoUzh1tnQ+xTRdQ6AD4USM4pw==","signatures":[{"sig":"MEQCIG4kbpUGBBw5UQ4BUk2xs3+QdnvKbt0Gl1dH4nILQkTpAiBBdEM7Om3gz1Cb0O1Nmjs/fRTMLhs4wc0+L484Reuvug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELrtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTCw//cTamStnB0DlJ5currtqfxiDeUIeTcUR+NYmbwJ0p1EcNwB+s\r\nKFS7s2YUiA9w066Ofsc1+CTlban7QeFelwNS44MJJ/1ACmVCQEqb0B7wrfcB\r\nufcG+HDHx4dasuB5Uqzb8eAuIECh5N5eZ5VRLUIklSIsnr17qXpvCA1+LMhu\r\n8nJ+Ts9CY0p1cn1Np/aUjKfvRfl7TI8+b6RCmAOxQF+v7TGFp3gkKcnE+P4T\r\n5XPTByC2IxxV4DyFm9B4tpldUg7aCK3g7/tx8IgGfWKcArs5mz7hkhZI+iFy\r\n32YiqUArTFk0A9J26VY8exYk7GNlQZ8zf/NJ/wvy3yhNGAot6G81qwGm/ktR\r\nrShYjsL4kJwn9+Y6YdcS4zaVxFf+h7XY9FrgHZZP2Kam6ZPYHeMSdTbPZIUS\r\njhw0v/yGVa1vTfUug+NqHZxjSW2RtPiUYOSWN/PqVApHNR8wp2I6A2yjqxdL\r\nYSv33llCrJQVuCU7EIscGnUTPLBlh2TkrrDLCFSgkDq+fKxesuYQuVSNZi6P\r\nzR2EesbNXfgRNhoKDiaKZZUWY4CEg2OPnXcKa2BS5jKvJBixSfrgUSop7nkc\r\nqwtQx+o4d7tSxPwjA/CIqngofohOMc4NheQwN2CKXK8g+RItujNh/iG1igmU\r\nIZ4QvJAwyHgMBrmnBIP7O4lAiN6RC+2TJNg=\r\n=eF5e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f94aa37d.0","@material/rtl":"15.0.0-canary.5f94aa37d.0","@material/shape":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/ripple":"15.0.0-canary.5f94aa37d.0","@material/tokens":"15.0.0-canary.5f94aa37d.0","@material/animation":"15.0.0-canary.5f94aa37d.0","@material/elevation":"15.0.0-canary.5f94aa37d.0","@material/focus-ring":"15.0.0-canary.5f94aa37d.0","@material/typography":"15.0.0-canary.5f94aa37d.0","@material/touch-target":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.5f94aa37d.0_1678818029338_0.833018449751362","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/fab","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.1bd317240.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbd82e8e34979927e425fdc8617f8d5c7bb2769e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.1bd317240.0.tgz","fileCount":23,"integrity":"sha512-e7Wnpojw7HIvknoy4z5WY2NnA5Yf56Jsuvs5vlk3tns9vtbNxifqYk9Oo9UyLX+xDdRM1X6RLrv24g/rRkuppQ==","signatures":[{"sig":"MEUCIQCQvh9XqokxiCNzpbb1RDWP/1LAKX8340i2WIvBA3NaSQIgGUXX6RdAHDTHTMxmcWGJFAAE/gKB3+Phz3rHO+fbr78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELvWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMEQ//YztmnJwFw/y0g8Yy/uhek6Q3dj9fguNID9xEdPd7Wb4Hxgth\r\nAjSkOXH/d86bwATFb08Aj8INQ5KTaMzG/GQIOvQnWgmmbaxh1ef8oPzbcPCQ\r\ncDOJ5uMRTv2pp9AbAlX4vxMtudw9p05XnQhw+bCccDNcYeoWcKJU2SeIQZ1B\r\nMWIPMY1iqJT/bxV4MT3cBHaviNvziZayo7Pt2sCzqfdxU0a1k+Ak1zuOyqWU\r\nS+ezTZl6YhuIl22wJV8jSn3Pf/MyZS/LShf0BunfgNlUqwgQK/3sCJ150DV4\r\nYgDDqo3VmUDjVacwe9G0KPMqzESd0ARUwSGVKaEu7O9JPSeYILAooZRS4Tto\r\ndhYpsdO6PxcKZG6HJmNPoKPnTSRAOlszq3rXxeVRummmYF+DzEDeVsiZ8aqh\r\nr4yWjuzspy0s4AcimiuC4Jf3+fXiKlgii9vJnBGclpN4pQdtWhy0qgn7GYhj\r\nCPkblPbz27/8GbRmcxrcnIvmIbYW+owkUiMgCgII6s3dbeqq9xoB0t2wYbln\r\nS56CuuVZEKftJqR0QDcSnZa76A8Pn3k24F5sJ7SeBndaeaHfOTCD0nVBB16u\r\nWTNpPiWtuOQN2Xx7sHx9iUw6+WwNZg/aJt3uNO61xpVv7e7fEVkARz1WeyQL\r\nZen+9uJdcHGSAYmFZCSGaY/qNawqwMmUvC8=\r\n=nYs9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1bd317240.0","@material/rtl":"15.0.0-canary.1bd317240.0","@material/shape":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/ripple":"15.0.0-canary.1bd317240.0","@material/tokens":"15.0.0-canary.1bd317240.0","@material/animation":"15.0.0-canary.1bd317240.0","@material/elevation":"15.0.0-canary.1bd317240.0","@material/focus-ring":"15.0.0-canary.1bd317240.0","@material/typography":"15.0.0-canary.1bd317240.0","@material/touch-target":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.1bd317240.0_1678818261818_0.15978582399032693","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/fab","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d313e002238602852c23b4f6f5cac3d5e7c7ef84","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d441d2a2a.0.tgz","fileCount":23,"integrity":"sha512-r9qxmvZLb7ZIUXdcBsH/mt597ZOAQh4rFdv2CFJXaxbCnJZqUhFhBZFBNzTeILqX7Wgxo9q0AOpEz23FxTMuFA==","signatures":[{"sig":"MEYCIQC6X0MtFpqLj0O7auxMw4YNYKmULvSq5b1iyQV1fietBQIhAJJi7EBc0RM97k6LzfYePGT1AcdPhPg0Wm5CENV2um+Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELx1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpK2g//aDDhGCafzK/6Ow2J6yFoO1wmTLKkqyvCZy7+gwCb1f4maxTf\r\nyMqhHncXDydD68E9ZP+LgXqtoHBWbdwzb2BRKpUA+AXunPTLw9go/kUeRJ3i\r\nY/unMJTlmeFEmUccKU/VnYJltI6GlJ0ZezljtUQ58Tp69bgkkcNObiQcIRUq\r\nwJjruXcSnps9qK8iUIvBeCRRaPm5fReTsSKg4tMozPN8F35tlevkd/nE3o06\r\nv01ugBCvVglzFBlDINWBk2br2n5PVu+fw0EaH8MsOAyDBGgDDLZ8qxclizpH\r\nmbEGf+l6YeuPInvEH8qvYTfnp18IL4i57cZAoxTy3sziDhjXVclr/T1hM+lV\r\n+57mNwAI8cdlu6DhFbXUZpSg/5eQytSwRak/I8fumc/dhLBcw5TEYNPW3Pb9\r\nu5NgBIC9AObC7sMxUohpL2/oEAcmig/GrEQwJJHhdSaDfOUVGXqfvRrS5NX8\r\nS2dHSmVgkXsEoLmF3UoxS6YItRFwZGRo670Qxja2Qz9KsK2Buclcsp7zx8PG\r\nEI2YHJqYWMvVoiRCxNqH9xpXKM1RB2UfgF1iRLj3TJlIdSyQ/8nC1zMMCIEm\r\nR7R5kycJTkzEkXW27slCFjPORxISqhEEOYwN4Fgf28Ya8NqKZG0Z+zDKbQSg\r\nRvZQLdHxuFNxvaWQ7R2EuGelMpp+a0809sY=\r\n=7I4q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d441d2a2a.0","@material/rtl":"15.0.0-canary.d441d2a2a.0","@material/shape":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/ripple":"15.0.0-canary.d441d2a2a.0","@material/tokens":"15.0.0-canary.d441d2a2a.0","@material/animation":"15.0.0-canary.d441d2a2a.0","@material/elevation":"15.0.0-canary.d441d2a2a.0","@material/focus-ring":"15.0.0-canary.d441d2a2a.0","@material/typography":"15.0.0-canary.d441d2a2a.0","@material/touch-target":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d441d2a2a.0_1678818421380_0.14193372912244717","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/fab","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdb0e39f57f3f6bdbd1ea3e20cff4c1630b1e5ac","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.fff4066c6.0.tgz","fileCount":23,"integrity":"sha512-rFoRsdehqcPvWYWFL96CJHTIc1griHc9UkoeE7hIBnH40zx5ehvJ9mS9ZPnwjJrxkgAiIpcb58M8h+HhSyHxBA==","signatures":[{"sig":"MEYCIQDOKj0vNTX6Hhe5ElJZM/XgUItBdGgxNHh4ST+kUtSq5AIhANu2jqJcBm339atuJWIyK8endVNGelbQLq+mhgXWZcVF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELygACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNWw//R7Ktt/W+KDPYA2Arzs4y/JDS16+RB+sqKBwaYh2HRp89rrOg\r\nE4VHuyRuuWyH4XrRClEUWOQ+eIOlUY1UjG6HBCxAFepmQKkorcgWWODYdu+3\r\nphAG5+R6uN3vIg/c1fwUJl2n3zHEdk11fuFfK7uom3QHsKUDL+mrkYM8Y+/x\r\nFoMHx0LvHugRC2VZTRsEN4KgtTnFBEn6QhP6qX72la1X+BS7KcV3lZfQJOnW\r\ng7AsZ58Kmv5itff6sR507ZpmOsb9Zutn+L7WKnuHOrVLYJpY2WQI2EXoRhMo\r\nJbAeyh61fo1R68sy3quAx5JvS+Ecdjhe5hI1iWcYZZp+T8/sl+rdvYCSHj+p\r\ndFIvcjlU2yNLqWAqAKEjwI0dt+b04fUPsGrWTCGJHjIcTPz5+0jc5fUvueVR\r\n7VaMsgQoIe3QSgb8KensudGjyROuNbs8NqCmcZRWywr6nEpGCN7FquZkDo6k\r\n1El7gKKgcWt9OhfsWdSGb5bUw0SbUa4X+/Fsp2nnZZeFDiCe3CDdDGe6BhyF\r\nrn1/v+hKyn+iiLpgh/3LPwLuGCZnSto2nKJy56/ieOfj3UjjQkI+lPheDENp\r\nirXwcwpFvODXgIq0CiKZ3wKqXEg2VDVejurhh4/FBmfJ+BmYijjxbHbzSw7L\r\njY5VsZkxF/MTAWBL/SgO2w06k5kiKcVZxdI=\r\n=Ohsx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fff4066c6.0","@material/rtl":"15.0.0-canary.fff4066c6.0","@material/shape":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/ripple":"15.0.0-canary.fff4066c6.0","@material/tokens":"15.0.0-canary.fff4066c6.0","@material/animation":"15.0.0-canary.fff4066c6.0","@material/elevation":"15.0.0-canary.fff4066c6.0","@material/focus-ring":"15.0.0-canary.fff4066c6.0","@material/typography":"15.0.0-canary.fff4066c6.0","@material/touch-target":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.fff4066c6.0_1678818464049_0.8019066584828218","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/fab","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.87809c710.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e1f2c7b623921025b4b063cea556e704fca102a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.87809c710.0.tgz","fileCount":23,"integrity":"sha512-FI7biurnv8s1yg+9V49PcGqO83RFKUziN/2ol/ddUnNsYR50l3QRLLSk0LpME8yDpkQ2+A24H0i7z2iGUV+2Vw==","signatures":[{"sig":"MEUCIH4PCX6oYWpu6kzfj3iXO4Ez2gbj/dzgQOf+qSx4tFD0AiEAlteSGvQHSnwBFRAzSfIlRz7R+AV1XBbu73sD4F6apVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMBhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphWA/6AjvueMDmEbzgoYCaXXgc0mqy9vx4ntzMvsaw0tc1zkOIqI+C\r\nxGnDtyoohWCCfoWZDecoiGOS4NQhV90YzCljsqlX0TWVY16DVPZ/VMcMBb8D\r\nbb7G9KK1tbduQRmjylBeJjH1ShyB2RfBTgLq+gNoz4kZSnepAsmzX1tHf9SI\r\nkl7o/yT/5j9Nzh7jshjEOoauFvywQLt78AKpOHe/s849jZ4smVc5B4fmt6eo\r\nz+D3OauoHoEBt9n/d8EV73Btjglf/dfwPkpI2GmOV9EReT6SCk2MOj9+1FIh\r\noqK1o2sEzQT7gwvZw9EvBuHdkxzFl6mX7IQ/pp2dUywZO8XHcrfAvmUeabb6\r\nnZOHHOlQbPXLleAxkvBIYzb27cPY1cVyAQRq5vTDeh2Nut1iwbvBYaiTVz+k\r\n6j8v25LjIYQA3vNoe+Xmuc0nqHBZ6qB7rsMOwV7+xpnU5sJ6bUjUU2VPobJP\r\npIyA0hMfEvB0j9b7+IKJ2/aivZS408PuSrNbprUAJEd6d/paBPjqMosu3g+f\r\n2DTnl+l/K97BPs1Ixf+eeGNVz8iXy6TbP4SddI9oqTQoDU3gnKkeK9PbXxW1\r\niglwHa90kER+o106iYfquQHu8oSuSAc4Iz6WlQ4kesxCBVUQ/oDKPo4K6FyB\r\n4yOV47maSJdfY8dnbAiwEaFyz9X1KtNiI9o=\r\n=RGec\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.87809c710.0","@material/rtl":"15.0.0-canary.87809c710.0","@material/shape":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/ripple":"15.0.0-canary.87809c710.0","@material/tokens":"15.0.0-canary.87809c710.0","@material/animation":"15.0.0-canary.87809c710.0","@material/elevation":"15.0.0-canary.87809c710.0","@material/focus-ring":"15.0.0-canary.87809c710.0","@material/typography":"15.0.0-canary.87809c710.0","@material/touch-target":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.87809c710.0_1678819424941_0.23141521436856238","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/fab","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.48d30012d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d07ef22da9b535eca7817663b08528ad629674ec","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.48d30012d.0.tgz","fileCount":23,"integrity":"sha512-HQvmUhCXsY6ltB8HbQI+3Rom934FMkt4wQgHJ9CoT8SFKiYL30oYpIcQpamDH2H+uQse247YMxMj+o6Uv74PqQ==","signatures":[{"sig":"MEQCIARtBB9UE7n9K8or61MiTnCUdMUq0IzDQHLDVaegR2thAiB0eakbaGtkx3EIUT9yw+lDdDlJqGuhTKBYRIm2radU2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMFlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9cBAAm11xzCgOLTA6oPt2cI2IsHg3tLcD6z5ZDbjNPN6EVTpiH4XS\r\nahgHhqTUMu8E8qkEPm/4GoMoG29dKPkbs5wP2GsCWTSMcLfbdc6R3q3FCKTr\r\nmGpsNxfXK+9E27r5YEV7Y0pYWjeCnbWll1Trcgw1CjJRVhX2OmGJqZGTVu8A\r\nzhmRysx59TwOFvJj/URUuETbX7wx3ucjHO1hF/ufk6WRbR+EE+ZmUfdO24pA\r\na3mh2VFyfVQvQz0xBbffyTjof6xH67fUb5pl+FPNTUx3Kr8cZO8T8xmFswFb\r\nScdGGPolPi2Qk7BAXT3fJrd4FeAvQGkuGuDYketYFixKdvy2tgQLB5q3Ji1n\r\nF4nhgph2KlyXs8kykAuFboVdiULNunX0Ofrm71gavY0tPuYlJyFB+tPGKlxr\r\nbzDxW36wHatp1TriwW+JukQqgSvTCw0oYH2ZiypMMZE9oWKvcPw3y4FGPGk1\r\nZmDb95+OAI55LqtZ7oUvmj+8oYRh60IIMNTeFY/gGUneNhA4I6NtcyHkABjY\r\nZ41nu3fMKk9PGDCpE9E9HEjhb9dx3kIT0jEfQ/4VzbM5qqa6NwvIFggbVAvP\r\nxE2aTYjNiMVOYFIhSG4AIzyTbMt9qnSUhd3CY7VOgFb10bR4KeXXsV8lNaOv\r\nXJNSmPYllulDZ6Yp8JDlDBFMtOnDu1TxU2A=\r\n=if8p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.48d30012d.0","@material/rtl":"15.0.0-canary.48d30012d.0","@material/shape":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/ripple":"15.0.0-canary.48d30012d.0","@material/tokens":"15.0.0-canary.48d30012d.0","@material/animation":"15.0.0-canary.48d30012d.0","@material/elevation":"15.0.0-canary.48d30012d.0","@material/focus-ring":"15.0.0-canary.48d30012d.0","@material/typography":"15.0.0-canary.48d30012d.0","@material/touch-target":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.48d30012d.0_1678819685502_0.4568209447381384","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/fab","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a0c0e02dee5f88eb7ed7c544ba7815177601cd0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.419b23cc6.0.tgz","fileCount":23,"integrity":"sha512-2Pa7Hq3w9qY4oX8tvKIh0vTZ3iAcslRcygawi55hGGo5yt3AeuAUwNIaZFHjdYo2tB17AOOVXaSVC2iRkc0iUQ==","signatures":[{"sig":"MEYCIQD6WQUAdnwoSEmjwzFxyE9CtH2fx13taVDpN30DE3ad/AIhAN4WJBjJ+22XVL0c+MyGtwUyrNK7M+jZ9OiIej+yA4Wa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMP6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpulg/+I8d6GN3fQ1ptMyV5Owm/7y35b6N6u3fCD8yNkjOrcg63AxFe\r\nI+OAxDZBEKDKB5gv4M12gIcWlHtiMDQwkBf/LnEO1chJtPnGXV49TPWHH1GM\r\nLk9Ee7mBwWyi9T4C4z0qzn2MtI4JXZ0fRbjblP4mliLyP5HGAOJbVKD3Sn10\r\nbKxCTG9PumC7vE1vXU/jAznH8RHbgm6jN508MmjoR2lqTN/fsp07Q7PhlIG0\r\nuJ/TFu/mOQzhJyTVXenkWTytlw5V5PidmBamEwZ+Gnb5xBNcpuFJXKqqdodw\r\nmZ70sV+/NloUXpfaNYNtMm6CK4P3eM2J5x8yRu+RCOG8AQE+nBXpWfaZMoO0\r\n26ylq8Vo4YigYz3mm53VEJcnqMz2Qz2mKjnY06rr6daxg9BPxbXOvLDiT49C\r\neJ4sVLndQCTNbY8jIT1nG5G5JLWjIcMP3EF3TpkFML/9RkR46CwcB+GC7iBe\r\nVy8kjOoU+Z1rTJgEiq10cT7FZ2znFJBu4eFcAoUvj3pOmWsyCSIfRiYz560p\r\n3PZAb6SDrNLHY+ObWowshvioIjRCClf/6L4bBI97WotGErLVu8ycdEUgq5t0\r\npiMe2KgpF7GOezvQw96765UK8RHeiBb8vyHTjVuHwBFbXuXDEzOfIJVckOqg\r\npopaEAQ1p8oY001mSP+xfK4IdluynAfcBoM=\r\n=h2SD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.419b23cc6.0","@material/rtl":"15.0.0-canary.419b23cc6.0","@material/shape":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/ripple":"15.0.0-canary.419b23cc6.0","@material/tokens":"15.0.0-canary.419b23cc6.0","@material/animation":"15.0.0-canary.419b23cc6.0","@material/elevation":"15.0.0-canary.419b23cc6.0","@material/focus-ring":"15.0.0-canary.419b23cc6.0","@material/typography":"15.0.0-canary.419b23cc6.0","@material/touch-target":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.419b23cc6.0_1678820346736_0.24263987847407087","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/fab","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26010c591795604e7a88c845b6c944612dd2b197","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.bf86521f4.0.tgz","fileCount":23,"integrity":"sha512-sgM7EhXqQ175608q3SoGKVQM0yAhg26lQWxa/ZmNl2VVZKtoZj/A+BV9llrvzJt5u90qygHpiIHW3DynVrN+2g==","signatures":[{"sig":"MEQCIC6ljC4FYfy3GzFl2Id7i4Q7bhZaJcSIOA2qcUQ9h7zdAiBlPFmizEomm/JkI5ZhmPO2tnb7IhwoEODo69aggFm7dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP+oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoA8hAAmHLGPR84+8Xjtm8gAM9EQBI4gR8YVjw44ykhevihIxxbVpM1\r\nwYLh33/v8NdzuNCUp0tSpdmIkIt5wSR9UnAXyuMu9vYBnhn9H2kcHlrHygtd\r\nQp9Ox9JHvNctGyBW2ztH+Y1awNa+IGQPVjjK5oZEUTqoxo73knPC+HamDDiw\r\nc3NcE2JKQAuNA0SfMfVYy3omuXa1uGPWald1ElVtH7srTcdy5mhTUKccXJX4\r\n8dPBup5cn9IKG9sVsx/+dSzElN78vVqMF0cYQjQiV4tik6FarniWZKzLmexr\r\nhiuPx2WysrxB7WrLDzIrYP8Hia7A33o7OkAIo8PsTRQSWdfi/jrcBGpJj9Bg\r\nIs6VnD/tUiwkpV4uRkeknlm9TyGM0YbRVL1ZU6aetXmGMnFqzwUql/OG9FI7\r\nkmmJjtosz0WqKnh1IklxErS87G5+a4VlFLku2K2jpVUqepDOdPLPyTmb6AtD\r\nPNcNQwvek0fgd7SzjH+WnZS2af3656KlrCvnewR8MHhwhe2ddF5DAYatcCHP\r\niFIuRLxGPCyugAsz0OJt8lydLR0AujvRSo7F0ZKGwr92rOsddcQWPHbQFzSt\r\nuGL43QNa3XeLL8iQbJZNSWDVEkpJVsGtr8JCTzBpehgww1Am72NH4Dhtsrfc\r\nur2PZ2dZaiJ0tNhWl9guGwD3j9lCCykMa+k=\r\n=e/Bf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bf86521f4.0","@material/rtl":"15.0.0-canary.bf86521f4.0","@material/shape":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/ripple":"15.0.0-canary.bf86521f4.0","@material/tokens":"15.0.0-canary.bf86521f4.0","@material/animation":"15.0.0-canary.bf86521f4.0","@material/elevation":"15.0.0-canary.bf86521f4.0","@material/focus-ring":"15.0.0-canary.bf86521f4.0","@material/typography":"15.0.0-canary.bf86521f4.0","@material/touch-target":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.bf86521f4.0_1678835624328_0.08345973670478579","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/fab","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"741ce08185371b359d4dffeb65eff767506236b8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.11f3d280e.0.tgz","fileCount":23,"integrity":"sha512-zJMPyyZcjYROPb+/9GgpQ6Ds/5CiJFdd/tqRRveBXLNIyXjrvOB49mxsttaBk0kpMNFto/eTmUlYkfz5KL2a1g==","signatures":[{"sig":"MEYCIQDvuqOurQh5hxl+YDDT0VXzD+rKoRRHxEaZOnyHfOyDywIhAJXMvBgBwCOsSgiNE0WHo9M6sGF5caxpFkhVAdAuYKmj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ03ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqg8w/+Ob/UkdTc/44xt4iX/lirHd3DsEQng8+4v8wKIF6TvjuoH0//\r\n98qbqxpuSTGdepK7CO4AHrUUSGYmzKjRf+FVEcx/n/jsn/j8jQhrmvsh37B8\r\nFlZbIigzuaCV/hIJZ29swakplGfgJV6aPzPIrAWC+kpFxpMYXSRUe46naoIm\r\nSwYBvBgnRrZnYKMvsGIo44WSA+Gt5txbAsyVbTb6SRLgg74PeR9afx5aNGLS\r\nb65gG/VT9KkU2GwwmruKCTeWtuplgkMY/utZmWlaAroRON3QzPNOm5PbZwTY\r\nHdZyQzPmhKXV+si7eTRwUO0F9Fy+TcJrP8Me6eVjcdf3KjyFPDnVBKKeeT6u\r\nQsCaKBq0LQvuxAmGfmeiXlesZqtjSLGwm1ix4sXZrF39vkDc4RWn+nXy4U0y\r\n3ixA+8GZxqLehkV6VRdaZfkrLmDjxwTCkIshbPG5pJTWy5y2f9jIrnZdqqNl\r\n5o+B6YBzEgqAWnBwwT09MWj04n96H5bWbwZ6JRTY6pcmPp/W/Tr+Hf99l0F0\r\n+/vJfCzAzLW4Opke9e0sHnIzPO/aqnDGCBJt8ee5zDV/Roeqs5kJN/xkM9Jv\r\nE5B+yKaLu5xrNAYKSSTrfQPB9ENiRU3RkqNIVQ16cSQDPcsBrMDpzQxOOR0E\r\nlTShuR7ZiXEpJwtFux/l1XI2sxFrKPIu/vk=\r\n=m70k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.11f3d280e.0","@material/rtl":"15.0.0-canary.11f3d280e.0","@material/shape":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/ripple":"15.0.0-canary.11f3d280e.0","@material/tokens":"15.0.0-canary.11f3d280e.0","@material/animation":"15.0.0-canary.11f3d280e.0","@material/elevation":"15.0.0-canary.11f3d280e.0","@material/focus-ring":"15.0.0-canary.11f3d280e.0","@material/typography":"15.0.0-canary.11f3d280e.0","@material/touch-target":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.11f3d280e.0_1678839095290_0.4885059557196594","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/fab","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b281a409a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3df80b2d29cf2f0d994f7fd0c1b1dae6dd82165c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b281a409a.0.tgz","fileCount":23,"integrity":"sha512-HmKCBLDseaTzsA9t9sb6gpG5C43XYvnrn5AVuqsCFkpayXA6a72SazT5ePgwCNAM3o2CfXYfKr6BlueiZbMhFg==","signatures":[{"sig":"MEYCIQCx97r5YDaDSoaUPwEmyQ1295PSQhnEA+RT3bogQTV7ggIhAKdPTUSlIK7YHfQcP26Y3iZJWCvaQWh7nmg91EJmsEMb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdApACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwuQ/6AvYpfTB+QAu9+mmq8Q8hpfiuDsZZrvvbr7uNbcmpo8zk/Nsc\r\nC6jGVaTAE+Og76dqiOTUmdrvDt/cREx0Am5N3B5O6QgPIOsT5/ZFOFclAKPz\r\nlzLfidA/kOGymey5OQG3gIEzQhjfbgkyDoo262PtjX5R6LikA8NeQoFoR5p+\r\nvQjPwvzOvis1a+ZXUal+gXf7tOxxHrvSB38d73/3ol8W/dy5HOZFgTjCD5G0\r\nHdMqLbWRTpdqfwWSleWYoARQMveYic1toygsvmAiEfewbjazGq35lcsRfNgw\r\nMMk33RVx45cj4ZmzgOh0fTCZ3iWO1HGP4gUc0tpY80idhAvnVvYoIA5VTEOv\r\nCDZnPUpCJN9daT2vvOFlku0M7CeW1LsmCzfyE+z51ysPBgrwNUHOb7lWa+SA\r\nx1J62mRvlBKP5V43k6py8BVS5MLM2q0VcDr1purr0kc2/dgvK573nCD4E7nd\r\nxowvS57R4qKm0ymXVVzQmOvAf4rudQR1iMxZTyOhcITuIgo/Sz63XxWb8WH0\r\nnhbgsE9ZhMxB+MBXZkAyPnln8GxEPVuwFji/OzWtM34hAdAj8j4qc/HTpg76\r\nMwBHwXMUlnVWzqXl2kiT2CTHvt6d3wHADzfwZagOW9uJ6bQBX6vFBs6Px70+\r\n4cm0SG7cR9gSep0LNdWwsXWTAD8HpoVHBds=\r\n=6TXI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b281a409a.0","@material/rtl":"15.0.0-canary.b281a409a.0","@material/shape":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/ripple":"15.0.0-canary.b281a409a.0","@material/tokens":"15.0.0-canary.b281a409a.0","@material/animation":"15.0.0-canary.b281a409a.0","@material/elevation":"15.0.0-canary.b281a409a.0","@material/focus-ring":"15.0.0-canary.b281a409a.0","@material/typography":"15.0.0-canary.b281a409a.0","@material/touch-target":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b281a409a.0_1679413289054_0.32171510617915344","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/fab","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.39e473690.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03e547ec4eeb8ac1efe72771147c338c22027619","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.39e473690.0.tgz","fileCount":23,"integrity":"sha512-BybbbKx1wgxRsblC5so41FLCGFto6c10VnYp6dwbaWUtwQcC7SeSJIsO5I9uofEC3TNCpl6X8zeOqmDky6qsag==","signatures":[{"sig":"MEQCIBQa/Zdgq3p1MsGN2MGWyOLAMTm370FZrsC83tu0iL/SAiB0pMVHnzZJiYwVSS7b96OQvto3JV0J3jREDfGxvZyGIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe61ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS5g//XuCq6rug9jSCkJxZkxsqNHoBwu+0a5uvd2S9yOKEbgIZhe+o\r\nYhlEu1/df0e2J0nHEFcgkZeemxSVkykibf4BjgC7EJ3LoFTqJ2yEVqAy0PvT\r\n+xCLZ816pUGTD2wezeT4G3AsDngXfdDUixOssdDRJAycYp6Byq0f/3K46vDs\r\ngdNMcaf+7wo9xgb1nP7u8A08Y+DGoC4JF3QOaE6e89p7fTRatHB7vPuVx7Rp\r\niDl8k+OJxfFj/QqnBQYz9oJGPCMR3Lit7JMF8miu2h99C0DXlz8rgAKsZB9q\r\ngz6wasaG89U+zsBLaEedB8rlCTdGWfdPfJwy5201vT53t4RmzD4XiFiXuOYB\r\n3dznxUVVRHOUs5eEIblLSQMHwSvtSb9CvJCqw/C4U4J3/V4/XV6YZBj8iaQ8\r\nrIbzrCIq2tZGaGacgWH+i5tf4iI/Ml6x0v2yUNWOpOnL25z8aDhQCBX2g8Qa\r\njGkfamR1K7sb4yCOR3LA0rMThd0tLt3AwTTs6qGvm3LNUBLtqjaKjxDSyfAH\r\nXWE7AkYvaNwC6pZvceb7N+7gka6kaiVtuzlq0qzThMHBLAWjreQjasY496zJ\r\ni9HMbmKmnXlx2+OK62P6diRCOt0hMKqM42VGkq9DIrlCB6mwPfVxDuURA833\r\nqgOtxQzg/r0jHfXaHrRfR0+YzYU4mDNE/00=\r\n=+USa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39e473690.0","@material/rtl":"15.0.0-canary.39e473690.0","@material/shape":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/ripple":"15.0.0-canary.39e473690.0","@material/tokens":"15.0.0-canary.39e473690.0","@material/animation":"15.0.0-canary.39e473690.0","@material/elevation":"15.0.0-canary.39e473690.0","@material/focus-ring":"15.0.0-canary.39e473690.0","@material/typography":"15.0.0-canary.39e473690.0","@material/touch-target":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.39e473690.0_1679421109028_0.2492627328080026","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/fab","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09752964272289a0ef8f922dd3e10153d4a44432","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.cedffb44c.0.tgz","fileCount":23,"integrity":"sha512-LHURaUxaPtSHMEaNLfzqsi+oKs7+ZtMAzU12U/vrIwF2mkWq4W+AEOiP+32VCEsNt9tH8hDAa7i8rOvyQnC0uQ==","signatures":[{"sig":"MEYCIQDJexC5+4j1vDASqdCZX21EauUyJ3C1BJgn6k+eXhfOTQIhANBz4j1+SLvx7T74HSjjMf/Lij1NtMXDfcNhboRYmILM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfBTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrndA//epI9APs5AOyxmEPTJVfQtJlVhPDetHENfirxCvm/sPZchWge\r\n31ehMYa+/bRSUYx6W3UO5UtuzVn3u+YDq2o8yyOf2RiNRPi6rsJNvnNQ+79y\r\nttWgQE5p+oX9DEpIV07LfYuJ+4cW4u3OFzN4R96su4fYta/PkzGvFhN1ELrg\r\nyLWXXdsbwJi1bVbDs5LHxiZ3VYh9+Hbzj3kzz+0d6s7E87z1UAQ3w/TKrEtq\r\n9xPpEKROecrqaujoBpdINF9ukHiW/iTdn+ROIZVj4qJGd9xv2qEbRLX0t/tR\r\nnL6Fmh9SAst6PgG18gQsU7D1PFHs3VAOjjSrprZ683YYhBTA2fnnxnq53DQt\r\nEmPDvTAwe1Z3I3bmEAD87o+mLeEUI3Nu/AjSXGpPDwZPKVJnt7XjE0xLG4cn\r\nZx0OM+e6YMg14Ji8AKLqkQrF0HCjBP8dUBerXeenL4hcEQTs5QnklzGOdCmi\r\nBkqxgR+RttIO5iFNTMf+RJ0N0C+ddNYDBy+f3GRlT8hUgeBB/aq1pBcLMhbR\r\ndisxGd+5sM+3In6lOnkDHarOwHuyrJ5L+LKJ46DTRi9PNV6OA+1OdStWAc3+\r\niU1HTzUJXeRtCqb3XG7F7hc2gUwlnwCnTvLjcsmmL7BMOSjcWpO5UuKs38kR\r\n5owCMmL2EyvzYLH3+VnBOWQJxCqwpssU++M=\r\n=K0HV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cedffb44c.0","@material/rtl":"15.0.0-canary.cedffb44c.0","@material/shape":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/ripple":"15.0.0-canary.cedffb44c.0","@material/tokens":"15.0.0-canary.cedffb44c.0","@material/animation":"15.0.0-canary.cedffb44c.0","@material/elevation":"15.0.0-canary.cedffb44c.0","@material/focus-ring":"15.0.0-canary.cedffb44c.0","@material/typography":"15.0.0-canary.cedffb44c.0","@material/touch-target":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.cedffb44c.0_1679421523279_0.9425887820271655","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/fab","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"569aa0772902c101129b81781603c365cb0e4261","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.36a4cba99.0.tgz","fileCount":23,"integrity":"sha512-+6iSbAiskg8l85Ug6l9mHfGeiAj34Gjla07xNFl9OsPcK9g4cKSHdrnwcvjxYRCBanHeKngQut5T7BIQRwRgSg==","signatures":[{"sig":"MEUCIHK6JlRU2sGTXtf64iG1eLgaVGE33iENr7E7iWkxjIWmAiEAsZgRyGpmFvB/7yQ7lUsdWVCBC3RtrS8ZYNBNfGtLGHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyjgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtKw//VzFLpISrFV4TDSi1HAEnDPIILetVqecvbKwulEn3FpHOrSZL\r\nn+HJBTrpG/ZgxASwYIG+yfWWZFxER5ok7rPFpnglBs+3dWNTGEtU6oP57SBQ\r\nR1WvMm+dsGH+0K7Ctf0BU9HkYQiPYyORMdzBCOC9FCqQPOf99FlWHYPBIcfn\r\ne/aaP5WWsgznWOg6lroInCexWLuUhlCbxgHrgVMhJKNRN62cznZWEEIbfYXC\r\nEt2reseta+sTILsKhKl+fLQjiJNNmQkZQ4SZCJclEQ4CdMjNBIfFqW+dJSUc\r\n34kh3kpnrZLRjYep4CAvX8ugKk8NRWCC5a+oo7wS4boknADP8Yf2XcHXoM5Z\r\ndQTdrLNBzox9XGmasXVB/eyD9NrsII/cnv+hlHRmUgDjKSkmmB+PI038XNZt\r\ndDVhkxNFpI8Y4H+ccti498VD56w+frvPu8Nx3Vyx4p3c39eaL5HIQO2dolc+\r\n2VibDgRnxTR+WgslghkP1JDK/PCMylJDizPBK8I4Hyq+SgC3arxjNRLxoxQp\r\nGouC//jYsERSnia6tgBpWlmgD33MDlNr2L3rYFEyMWiF+KAYviT5FXbN/NoG\r\nqCezOrBbTbIJCSBD4oEQ32UZhRbMCqodK+TKAomlRVC3LfjlnW2rWH4nzNej\r\nqLo3KUPX3OBHr8Y5B0aKIkpDLg589ZVtPlo=\r\n=VegE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.36a4cba99.0","@material/rtl":"15.0.0-canary.36a4cba99.0","@material/shape":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/ripple":"15.0.0-canary.36a4cba99.0","@material/tokens":"15.0.0-canary.36a4cba99.0","@material/animation":"15.0.0-canary.36a4cba99.0","@material/elevation":"15.0.0-canary.36a4cba99.0","@material/focus-ring":"15.0.0-canary.36a4cba99.0","@material/typography":"15.0.0-canary.36a4cba99.0","@material/touch-target":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.36a4cba99.0_1680025824543_0.6722949170849097","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/fab","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a19d5e0cb38ac5109f88ac7d41e54363374fb32","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ed7e82ded.0.tgz","fileCount":23,"integrity":"sha512-dNPT6P1ZrHf10oUeUFxb4fevusQ7JtLgWMIv59gOlZ9yWwQEahLHlwOKwxURC6g0CPFzBU1heFE3BdJkHTUwPw==","signatures":[{"sig":"MEUCIQCrCG2awi3u8LW6xi//YvVpRfjiux2azHjvByz03teFewIgezppNObWISnJZGNhEC2lbf1MBOfg34qvmTQsWO8WJYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI09xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWnhAAnN4QLGxTJY1fhIFmx7oJV+6v4+WZklKMsjyaj6VZDr69ORW1\r\npfUa0WZ8QBIEzJ8hZiUiHcdG9FwQy64UaZK3ckjwz/WHgGfClnm64hWncIMQ\r\n1soWNvQb9XorghI7a6oWcWZFAMUImyUina4OZN037vpQjIZ02r2HGU7x2MoI\r\nOSk+xLFRXxoIcJU43meRuFiEiuEGRXX4eexFfFzAjRhIARzVBsCGlX8eeYUR\r\n4KCpeyQ7KPXZoVz8z6PxzgR8cdn+P7Ijo8ZoQQb/zp0HUqtHL5e8qCkerYH5\r\nupb7R2BmW/Z3cW69ucmOgQpHN2s4M7X/x1fUjoq9BInUwwdWvOqMzxQ4UsaU\r\nPFvSeNlA8Q7NHeuo4jUmEN8TJCvBbpaO2N/Wr9UIUDVozTRCB9llXNodKXDV\r\n0pUL9Ky5aufFhfeA94+oFcdD0/nfd3Ug8W2IqN8SyGuiwSDvS3w0qdxaUX14\r\nskGnfBdzcpFkoPRgAHRjNFQiNQT0nVBp5YOKmW0EXqPvUKuUYxTgoE3IaRB2\r\n1Ep+ph4wX7P5zkQg0zRfJPJM+sdxr5OBQcQ8lOkKQB/13VLMI3NmnbjI8g52\r\nc+nzmsEsEIuTWUWbe6lJNhb2xQzqGZVpC/nRh7RvdDG2DOmiGvpszzd6sBVW\r\n4d9EDJqvMqOM5tp8G1uZ/VhnF/yOcqUKtKo=\r\n=5Iyo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed7e82ded.0","@material/rtl":"15.0.0-canary.ed7e82ded.0","@material/shape":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/ripple":"15.0.0-canary.ed7e82ded.0","@material/tokens":"15.0.0-canary.ed7e82ded.0","@material/animation":"15.0.0-canary.ed7e82ded.0","@material/elevation":"15.0.0-canary.ed7e82ded.0","@material/focus-ring":"15.0.0-canary.ed7e82ded.0","@material/typography":"15.0.0-canary.ed7e82ded.0","@material/touch-target":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ed7e82ded.0_1680035697020_0.07098364235817045","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/fab","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d2a0c1c23917a3e21aaaf020aab3f8357aa6d3c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.55093ee1e.0.tgz","fileCount":23,"integrity":"sha512-b9acUUQunMZ6RcIRk+pYrnmw9ZDwT1kgMMxbAJ58KQmx5dKVxiIDTNQ7zf5aLAvklbAMZCY21sFNuYmbSOcj/Q==","signatures":[{"sig":"MEYCIQDPOGqpRHNWwPHGBENNc3pIz8WYc5HqadZM+H0Xcb3mzgIhAOhrF9ZIHZs6y21z/Hp+unTfpg8Fz4ipdvozU396UxMs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIglACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2PRAAjrW+L1p8aCcdGXZoEoRCXk5S+i8g4UQQI0nl3LecKll1RrN0\r\nfTFKwfoEUBKH+Px7Jun+BCNdDMCPHX0Ee1DYYYWqEgrLQkFicfQPw1L+Y/wc\r\neIcprkUT6eHtlgJjTbkcnHfUW17UelcXVBGL8atdzt0w5ySJCxa47PVN3Dvx\r\n1F5MTcfd7b+v9VlZ8k8HwDMbxRILleV7UMs0A7BAhNw1/OgVxTkmCqCeRrj3\r\nQi8g56APat4xSQ98/cy9lKPMTXgZQwCWwlwzqGRWJfItlOlyt1Pi7qaCPtC2\r\nw5HOkgQkLX+O80wvVNB5A8qVWjkVjtVcZIWBWvya8vV6QgXBEH+2YE08NqmF\r\npo8SQiohWjgempZIaxgjkTXzDMYz8FAbklcl9tGX0iNqeQ0c6Bf9DUT/NlsA\r\ni5Cm96DVgAIIJ0YlLglOavvBcm7kpBHxpEbkR7CopJT8aO+RwXkgD5R02ABv\r\n3p9ODgUiUWxLQcfcrX7aTjBvgW/O1Yaz77Z3fGXYkCifqGiXp7sqeBOn6wUe\r\nOoAnU79VdnPPOk2WJIAt10b5elxK1igc/Hzo2UZBGDQ/7R5aXesp7aXRJ+q1\r\nigiDm0nKnquoH1aDQzz3umW31VpDl/tpoLiDCQSkOY4kRoJ1pMApriEFHOpe\r\nAjS+1mUAhuNY9alX7K4KSJK4ELt520JuhyY=\r\n=H0ww\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.55093ee1e.0","@material/rtl":"15.0.0-canary.55093ee1e.0","@material/shape":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/ripple":"15.0.0-canary.55093ee1e.0","@material/tokens":"15.0.0-canary.55093ee1e.0","@material/animation":"15.0.0-canary.55093ee1e.0","@material/elevation":"15.0.0-canary.55093ee1e.0","@material/focus-ring":"15.0.0-canary.55093ee1e.0","@material/typography":"15.0.0-canary.55093ee1e.0","@material/touch-target":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.55093ee1e.0_1680115749606_0.5920576791348175","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/fab","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50dce16ef663120b67a7d8674e7c7b391df93fbe","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.0c53abc81.0.tgz","fileCount":23,"integrity":"sha512-8yN7liZyxi27zxJzM6HpCj8BZjlVDqj1Webcc7fOdQaabhgywaTmO02UipbLCqjzs1zyB/zQU6zSFLczCZcKog==","signatures":[{"sig":"MEUCIQCANTN+Rgt2rGa6nfXIC9BVulEB9lg8PbHA/pGGeH1F4wIgWbCxLpEj52K5fPE5ywJxgpdaO1UXJcnynT9qEADOl8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3THACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofbQ/+L9bNQI3+NnRY6dfIXx+dhk6RAMifRdPGra3utHtjKXWh83pR\r\n6Pk0HFHjD2WwfD1doVbK3VgFqdXapFKam9wSRkUWFEUuVQpWjr+YBVCFjvHw\r\n0mA8tUCNCSmUWdmdHTzJiS7I5QmqJL6U5H3iDwNkGvdr8Wa19bJSl/3yX/aE\r\n5woZH6e8C5XlZXgeFHHkMZdjdfNYnAjpxeB2kVaWzUkliK3I8AgG3xV9kBPk\r\nvTZA5eLA64qnttCBQPZ+JbBz4eUb7GvcWFP3lYilDcjrda4GBLHAs4A98gHN\r\nyAvbOkEvHB4T66bbJZhPTs9i8CdTGKhjTdhoFqYc4aO7iSEeydu8bFJpJQ0A\r\nrHwxyHG6/Z0k79gY8OHKJkBma9i1UpF7Xp8/j9yEXzRlpwQJOKEKgUPaSSfg\r\ndaI4jX5sVdWmcNEzIO9xpCxZbfncO1JYsMzoMMG3syrEQJOVNCRfMLrZGjCd\r\niIWYBYO3URgpDldnOHo6KPT8ZQLQ7w4ulVb/dBKoYWDm6RZQ269I/lkx3NNo\r\nxekt6W4zDLokVpJQlb9BQ2m6X0ZFKp93s2o08X3y9O7Fxn94k3e6h2f4VFYr\r\nglp2NNEtasSfRWBf0/mAJJbOM3v29kLjN6FO8D5R0IsNmXzBDF9aMgw0U7ST\r\nygRLy5dIXMoZ/dE2IxXYleGdoCndZ9S3rCM=\r\n=2wSW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c53abc81.0","@material/rtl":"15.0.0-canary.0c53abc81.0","@material/shape":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/ripple":"15.0.0-canary.0c53abc81.0","@material/tokens":"15.0.0-canary.0c53abc81.0","@material/animation":"15.0.0-canary.0c53abc81.0","@material/elevation":"15.0.0-canary.0c53abc81.0","@material/focus-ring":"15.0.0-canary.0c53abc81.0","@material/typography":"15.0.0-canary.0c53abc81.0","@material/touch-target":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.0c53abc81.0_1680831687331_0.35757622124070365","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/fab","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.51311e69e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e4fd3c51bf747d40f4a62b574b1393b19fd669f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.51311e69e.0.tgz","fileCount":23,"integrity":"sha512-RAbakMVtGkHyfFiziMvfG7YaWzGsY1hC9AEa/LswyRHbSV0EFRdcBNSng2/j26w45WwPCSMHKljqz1i7qP9UPA==","signatures":[{"sig":"MEUCIFVBFIY92V+Gdo8ThMk4fxRBvzBn1YMq82xaAdcW/k3XAiEAwLfGhJ5gh2dyxDE0K8hWDHmA/KCwm/ThJxUCR/Olodo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFwLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpnmw//bSyDssyuDwbehkdpYOoR2AAz8cTeKyL2JaqGu80pDNygRl3n\r\nKMXQilgneAS8aNGH72teSW0xZVEVK8fHlrA6o9tYPu/KdG1ldJi85DZDb19S\r\nX3yIyPwvhksVcLkLp5lrR3n0zpl+N5ngniLJE4dY8Vh1Ca7kOcXP4wmLpxZL\r\n9m7zCst2A1LnzkDXD28QE8X8/HiP8qPLPHUen5VMOgLqfMaApSSPsIEtEqw7\r\nQmIOUdvKSLk2eWdqkCTiv9BLOq2SLwUOWAJYjB0P0uL1MXBu4l3NKPRygU70\r\nqcpBey2SYhU04O0BbVZ6e/Q043rU02e3Mv2Av2RaQZNPfhbRupQsTEV/oWDN\r\nRrw6tvpHRKrJbE168+zlorCHGrCWqC71fn/OxxwbpjU3MBdrWWvQWQh/5gS+\r\nMX9J9ipmvV6bdvahmXmucIp1ttwJbTW3We4mz9mTYk8TXpxoMkuiThkGwKFg\r\nmNu81BjWtC9rXc7LONnV6CIvCgty1eT7/TTUl+uAWslDBV0SDkkJdeRAC83I\r\na0eZPFTBhxtXTkPH+omCjwOcIdNHT49bt/AI5+/+fXIXEEulZRVEzsoG2BXq\r\nhtYuzyfNwTBYAjMBits0e2HJ7ppsRdcK6e36Qt4JhERSOjq25Y11Q5sElanF\r\nJkUn4H7IGfNfY8Qd4xo3Bc7rm0rESYBrx2Y=\r\n=htBL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51311e69e.0","@material/rtl":"15.0.0-canary.51311e69e.0","@material/shape":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/ripple":"15.0.0-canary.51311e69e.0","@material/tokens":"15.0.0-canary.51311e69e.0","@material/animation":"15.0.0-canary.51311e69e.0","@material/elevation":"15.0.0-canary.51311e69e.0","@material/focus-ring":"15.0.0-canary.51311e69e.0","@material/typography":"15.0.0-canary.51311e69e.0","@material/touch-target":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.51311e69e.0_1680890891637_0.9590419584582313","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/fab","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52ad0591eb8eebb537cccca4cdc647685168ec10","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.113b1a38e.0.tgz","fileCount":23,"integrity":"sha512-LUy5qLiT7lYE2ohYJopgRSrU7cVWSgt9aMkIP5cfIJoL9yCsVYuEYn3b5ca+7neeD0a2dBoGAx7WVpyjJQiIqw==","signatures":[{"sig":"MEYCIQCDAEoVESOfLK1CixTP6jA3393fs7vZiPl++bAKMFM6ZAIhAI03Z+ZJNgT5ztU9nfAe0Sp/p7suHQDnG9flVNpHEslY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIV9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraxQ//b4CU+hvQZ0vGHyXXV2ZIWJA7CD1eVs48FWQzwyDsIA/hpNC0\r\nbAUqWFkiVtUtVl4KTZVpko/t3H9be3NCzbg1tkwhd2CS5wPUVSQo6Ah2ibbO\r\n5rprMQ0AvAXHmcrBiffukkwaKf0Yr2f0EI2zvpVHiAuAMhz1RqIJEtknFTLW\r\nuCTyFADbfWihIOk9QQMyuUnWFH4b1nQ284m0wTLx71tHxOrehphlTxnOwRm9\r\ncg7wCLbbn6wJe3YvPPI7VEFfgtmmU5tTS/RRWyShkfxw8YU8qf/BcfVARR8U\r\nLShfEf2QQyD7D14er3/aE0CdlBXwEGlykYf3F33uWNvZsT4FBlTZwRhq9PN8\r\nX8K437DHoUuFt79QEF4WuXNZM/gDTD8nH491xeWISQcpZC0hDKlHNWB/RtRy\r\n1oHzXzHJTzLS4kKrWMiQG0y7Ek5dZ3ym4y1ALqOCVevj2eyju1wxMZl2EAub\r\nmjCMiuWmBcNl2+inu6gCV6GxnllQZ7LJOe21nqzyrrDNcHTWvyBsW7R4M+mS\r\nkZ0f3gJWIqY5bwTVnmf3mcW60tjSx/ne/CCJLO6kdMsFKCKhDu+vEu9LspiW\r\ngg963oGlbZa00gtIE9ewovbliTvY9uI6JRcMKi95ZP0iHFzaV/D6UNVWIBnN\r\n8JME3zaxbSHS+9GwsS2qVP/B3/X/eQ5xp+k=\r\n=2Bi9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.113b1a38e.0","@material/rtl":"15.0.0-canary.113b1a38e.0","@material/shape":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/ripple":"15.0.0-canary.113b1a38e.0","@material/tokens":"15.0.0-canary.113b1a38e.0","@material/animation":"15.0.0-canary.113b1a38e.0","@material/elevation":"15.0.0-canary.113b1a38e.0","@material/focus-ring":"15.0.0-canary.113b1a38e.0","@material/typography":"15.0.0-canary.113b1a38e.0","@material/touch-target":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.113b1a38e.0_1681163645238_0.8804179028550219","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/fab","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ea2191426.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55f029122d0d2ebb154bd5ebd5d605d8cd6f2fe8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ea2191426.0.tgz","fileCount":23,"integrity":"sha512-IPKtx9y5frxwiO9TEsSrbaa8f4yL1y91uQZMbPRMJzeXFuTmYjADuqk7xXY9gtUtd2WT99u53O1cV5jDzN/40w==","signatures":[{"sig":"MEYCIQDiCPhewbl1lTaFNkrUNVDkUoyK9wluL0uGIMqO5C0PcwIhANT8kO01Y8edDfTzibJ8eppiqsWZclPl2K8XFCJ0yjoH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdeHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXeg//W8bRz43RxQLDJI4aGhzLSQPzciQNHmjAYBg7JYRJek7Ov/wk\r\nZpHWTOOw/tFWL9ZwheQueNM7PIcMz3soZG4bZXYKKeXY5RwR+73LvhzfMQ24\r\nr+TbeiXtO2gsruybSWH+7zJVtALO72xsV1Ye1SMOl/+0OlJNpRR00D0+L109\r\n+3aoTZoEazTjbLSG9V0QfY5lK2Yws97ARw76smOdBDgQuZSiDlPzUmJ9dnsz\r\nHviiZOoWDH/1HX/fKxusATP261bkZlu++SJc5Tpj/k538gRuaYiDLQT3rlkK\r\nZjfu5LcW1elLdOR+VJDPDHs+ldbFZwKlX9urSBRKCn8LE29Hfkjx+V+L0S/Z\r\nkx3uT26dUyRU9vO3vNSApU3KjvqcAilutPmSb43VLsMfGU3JzjoXGyjEapOJ\r\nGGAzYR0jmPT+8F5XQOXy4aSQAwRkcjeiKZ4LbpUVFDlMzwAmYg+CpsEX86x0\r\nRavEtybhEkmF2epPh3S0kC4KPBQUYUHArd2wgD/+ZQTe5T3jDi7fYpxGVAER\r\nFo+j5k5jNPP8BUuribsgYNVqRI6ZohQAhBCflgBhHGQiagRc8hb4bH9RUeTv\r\nzUGhTJIdwCx+uqqhEEJZjbVaSH1ZKzeCJGC1Y5AYgclcJXrA8Un6Rq88C5Zp\r\nsCV1287jBshXCu8WeBGvUTgkkE2cmmQAvbg=\r\n=+umw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ea2191426.0","@material/rtl":"15.0.0-canary.ea2191426.0","@material/shape":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/ripple":"15.0.0-canary.ea2191426.0","@material/tokens":"15.0.0-canary.ea2191426.0","@material/animation":"15.0.0-canary.ea2191426.0","@material/elevation":"15.0.0-canary.ea2191426.0","@material/focus-ring":"15.0.0-canary.ea2191426.0","@material/typography":"15.0.0-canary.ea2191426.0","@material/touch-target":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ea2191426.0_1681250182651_0.2198558457244455","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/fab","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b3a34a649e345ff97344df1be72b6bf686d0469","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.5a5c38538.0.tgz","fileCount":23,"integrity":"sha512-3pt9TlrtsMOG8HGvTMAamx0G/fMoMbjijCumxddM0dSFrJhpcSNr+j2DFgVfZr+Z77dUvcVylF8ghIjF16skGw==","signatures":[{"sig":"MEYCIQDj0gFG3rMt6CvS9+bfRi5f4+TnH1mWc8soeQ7Er54jZwIhANoVoYXo51PiakEZ98ijjbcpXH0Q5NuzwLCEv18d5ehd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd+NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooWRAAgee3rO4/1tP+0BUJi6B7IjFnvRtIdiw3fFLVZpSbIVOybHGB\r\nJO1jiuraaFiO+ig8Uj+fLXmCFg6natUwNhpYNbnIRu4YqHQRJJyT5JPDRYIw\r\nXTZ9bLjhexeMA5xfRJRU2hB4x004W+gkEdVxBUaPP7mFpaxzzFgkhWILWceN\r\ndXFkICVVEJ9j/pGk/wLFoAeXZN2RzsO1nVuLNSCTnF7n5uWhSpElcgI6T+M+\r\njX+63h7Kd1DmetSmW5T0Ub2wBY5zUh6tyvzJn6b/pd6BOckR31EjQgDppQW+\r\n+bh6CIB4zWv/EsQMA4nk7ZVseGMFggMXi6tW6gnOuKDYB2rWh9MqS29OLNKG\r\negq0CRZLdbJNc3L5SMCpdy3vVD9PON0f5z6oofZ9mEoyDllQIbF7XcoRfNZ+\r\nVDrXyTdyMNCFnYzzv+O+zBPhXZf5wJ6iFz+8C6VUMgtuqdBtC6ihaSI2T65X\r\nPjMgDFtSF8xAmQwJjyCACcjVf26JZ51DXZxg3074I1yHrAzJrLS4cb0qyaTa\r\nMK7DnQlqNmu/ehj7eaGdZ9MUzoxnLTmBArigZs4/szpKOLxsrTuz41SgqjOB\r\nG8bt0s32oLnvzMQ6lxu6XAsNuAD3hzK2OaqfcI0hNGPNdyUBGdDFrgIQtH06\r\nzOe4UIKU+d1aDxcfoSYx3skVz/hD8zRknpc=\r\n=9zZq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5a5c38538.0","@material/rtl":"15.0.0-canary.5a5c38538.0","@material/shape":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/ripple":"15.0.0-canary.5a5c38538.0","@material/tokens":"15.0.0-canary.5a5c38538.0","@material/animation":"15.0.0-canary.5a5c38538.0","@material/elevation":"15.0.0-canary.5a5c38538.0","@material/focus-ring":"15.0.0-canary.5a5c38538.0","@material/typography":"15.0.0-canary.5a5c38538.0","@material/touch-target":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.5a5c38538.0_1681252236988_0.3242358834385446","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/fab","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24b0dc70dd1bbff1ba220109afef768ace3e3b41","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":23,"integrity":"sha512-51flj3vkykML9QwhoF1gvRZGp8qzB1+ZocN/M8oUAECHqaiSwoIomojey7VeAVGZTAtiZMWDU4rL7LPc99HWTA==","signatures":[{"sig":"MEUCIEzdwi9ad2p3adk3i1iIOh/I8ujUd1DkdqTt5fn3sF4HAiEA5KEe6Yj9HSseNi9zYjMdVb0mlXro/8CgOd3WzT6C5UA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNeeEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEOBAAnLe+hqTcfZdFeWfxlzuvf9FTlOVTPpcoCwwHFZS9dc11eJkX\r\nkQX1HE7P3IbujQUzqgL5Ttdj2FwlhW/RcACn6Is33hWsPHBrZRsSKnb5MYJs\r\nxik8WS5jU5SKejJK3ELp2dtoXi9weaAwey+83EfQOqzX2xsjeAYHLbsZ4G/8\r\nk5vwWHPGaRQwOZ63v3utvXih3+g1F49hsGa70uSc+cd9FmMcfRXEU77tpz5X\r\n3GMTJozC7pGTIeq7Trp5zwkWmtJWvivmTfanhbbCsA+dtVn4hpAvFzQifm8q\r\nW6FvykrzeWTuNIadr3oIqk+1MXVGH5OOO5D2/8AXuFQa92FQCtA9mXZyvIjg\r\n1IqtGQF5AdZXijXdimJBKiDj2lmH1iE5y6Mjw6cf1P3gXJwjgvJeNI640u59\r\nBwS4jAOqXkbns4wPpK5f1bfiw2o8+lWrsvnN7mgISs4mFdp1d231i8GJXYFw\r\nVOvlrEpWTgfYCLiQF2azDa7SnFEI7uouzpPiAqN/NvDUqqnZ6KexujeqV5R5\r\nFBL1sRpimUeR1lA2HzRDT6zGchjKkpluCzfzXWb/I2GbRZeLfMfSixh8Ap8G\r\nBmi1QtuM2GRw/D2q8dFZhhIJtIzfyhWolR5n7Ww7NJ2VxoZML3diXwB9CDBI\r\njYSWzak+XV+t/sZgkhp871nbK1ECSiBfQKM=\r\n=ucLa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4b5ea7eb.0","@material/rtl":"15.0.0-canary.e4b5ea7eb.0","@material/shape":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/ripple":"15.0.0-canary.e4b5ea7eb.0","@material/tokens":"15.0.0-canary.e4b5ea7eb.0","@material/animation":"15.0.0-canary.e4b5ea7eb.0","@material/elevation":"15.0.0-canary.e4b5ea7eb.0","@material/focus-ring":"15.0.0-canary.e4b5ea7eb.0","@material/typography":"15.0.0-canary.e4b5ea7eb.0","@material/touch-target":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.e4b5ea7eb.0_1681254276092_0.03554869488287049","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/fab","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcd8cabfbf5d7ab3b22287dd4dcd440644d81a67","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a094dd9c1.0.tgz","fileCount":23,"integrity":"sha512-/t9oiIJ2BoPA4kkSAgUxC5UPYIgpcwKuysG8RmWrny1oQ9UfNfMflOMBZi1owZvfrNteHKWB0xmegQ+9re0fxA==","signatures":[{"sig":"MEUCIG8TxHsUEeUtR7Mm+xpYjqR6fHenK7398cjdUWjmHVIVAiEAnZrvqVMinbhxRi1q79btQnZF6BNHW1g7z6Lx8zsIPYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdboACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQvQ//QUZCNkKtM5ij3c6ve+jSV7XZDFmWvzO4ACxEBVjKulrR7ZAu\r\nEjxHWdgaHqBLDNBOithAJQdHMOZ3MQM57y21xk/Gfds52T95950siv+r1oyw\r\nHK+bimYzacRykbEB+/yxwKl1Q/11eIN+cSITerPJbKgW4a4yTj6WZtJCXDuP\r\n+ENTxw/16dB+pghQ0zgxlCkN0Pw/gISbNw1WwgtnOQdW/Dgzvmn4U5hXNICC\r\ndxJKy7dNcEZGW9iE92nUr7mOIjMMpBi28j/qlhj8fUVOsxWmB4Yaudkn9wsx\r\nNWfzDajZSvtKeyjJ+tcHVfUteqm8wcwL8/bKsKUT/I/dfK975Q5sxfbFoV0Q\r\nuj1jEF+zE0dx6Dh15z54Y1/V9cedwbLLsfa0iOMPRF+KJiDD4nJpw7K1bHMi\r\nMa8Vf31iG/WH4PTAlWnB/437JEfo/sjGoDFEMmX/jjn4iOI3HAhUVwWrOC99\r\nQPzFsCJ5kwogbO4UuPAHw8vhNXodlTkbrcjjLBz6SPrXmo3uW3XbdcC5shZ0\r\nIHdPkJ1vO0P75SFLa3XSDY1pPyjEyEqaEgHjhQkpKw9YXK9CEQuhK2zsOfex\r\nYw3+4LvgSEZ2lwFMUmGURZO8fXTNXA8FEiMVIyxfGMQT/QoSCYsFDMJkO7R/\r\nCPqe9FGty06SHZsCrwSzsqd2MVCbrT2vY8I=\r\n=lnil\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a094dd9c1.0","@material/rtl":"15.0.0-canary.a094dd9c1.0","@material/shape":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/ripple":"15.0.0-canary.a094dd9c1.0","@material/tokens":"15.0.0-canary.a094dd9c1.0","@material/animation":"15.0.0-canary.a094dd9c1.0","@material/elevation":"15.0.0-canary.a094dd9c1.0","@material/focus-ring":"15.0.0-canary.a094dd9c1.0","@material/typography":"15.0.0-canary.a094dd9c1.0","@material/touch-target":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a094dd9c1.0_1681512168219_0.36585457622049544","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/fab","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.f771b091c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edd4e085519d914c028a13b07b37f19a7b690562","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.f771b091c.0.tgz","fileCount":23,"integrity":"sha512-qvGnEVRvMa+lMsDoIRmcttn1JV0rvKP9QYfigRO+Da5GJSQFvw5L1pKoNQ7XyMRsYOZ7OAt/TO+u9o4CsCA15w==","signatures":[{"sig":"MEUCIQCU2aOgMj0s1koj3isp38b5sh8jGjBkLhEn7NSUfuPZAQIgQYb3emZuqaBZoVY1aPFwkViyyCtojZuX4nXvB0mHBmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWf3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplFA//TWIjVNBHh62/DiqSjivZfH7FnoXMLoUqXKdB5JPtrfZm0BVA\r\n5cvHW9BTthiunbnxH1mlFjtrVN9cVFBQvXRZkJwOH35btXcE7aQRScgXAe9Y\r\ngZi8iesy4p6myefzVAMXVX9nIEWCwmD+HCjWvgFX+U5LxTkHwt+NuLD+I4FA\r\nDp+lK5JPIFpN4tRW7j+jHfQJRLXfe1bRE2IgVpB1W9MKr6UMuBCSvCfOkUkB\r\nLGCC4ipawUO5piTwQJDe8TLBAr3RwyB7dM9pn3h4opcjvWXWlTUzmjvvjAJE\r\nS38AfyqaADvILzcrK0CYKuCYUsytHuf3TGWu1ujkRnEk2BUyWZcoSp3GZSVz\r\n5BHSNMDmieUokQ4OS2O9tfZvrRlhy5KROr0erHKFSra+PAehQsAxkCYkPhLC\r\nAwjVlwUZ2AC6tnLyN00JvQgadlyUxKhqU0R0JWz8oIPrInAluCe+8laL2HLh\r\nNu4dY8HckqCk7RwGwKu5Ppk77tsMo144UfiHPy1fkdmY71ZNh2lCZMr/zvaQ\r\nzMeyN2GtEgkhWG0nMZg7HYLGZ+oF6oTN8BDYgOn38kvRAZsZTMZw+j35gg43\r\nFmoLLlKSnj+ITB85U4voTN0gXq/Up5MtVJNYO8bkqyit/Ey7hnt/19BJqOzd\r\na3tXOdbk6Ad/es+5Ulf6Bzkob/p+w6g6CHs=\r\n=KvmZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f771b091c.0","@material/rtl":"15.0.0-canary.f771b091c.0","@material/shape":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/ripple":"15.0.0-canary.f771b091c.0","@material/tokens":"15.0.0-canary.f771b091c.0","@material/animation":"15.0.0-canary.f771b091c.0","@material/elevation":"15.0.0-canary.f771b091c.0","@material/focus-ring":"15.0.0-canary.f771b091c.0","@material/typography":"15.0.0-canary.f771b091c.0","@material/touch-target":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.f771b091c.0_1681745911238_0.9388913767952782","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/fab","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a49b09527930915a75a3b6633703d52748bff205","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.79b1b612b.0.tgz","fileCount":23,"integrity":"sha512-4NTWUid4RcYdIu9e4cyFzlDzuuxwXMCH4DQdc8PFkl2ng+/0rLzxsNkRL8jpNAgTy9u3kt3DmJGZjEoBnLEoZg==","signatures":[{"sig":"MEUCIQDu8WDLw3GLN0fHLA/HUwbSJpno4jOPjV5K6b+o6lq39QIgPvV0OFPzmjr1mY9MClQhMEfPAg0tt1M+b0s7mrbTFow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHwGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZXg//dfsyCkFiKfxwn7Op/wg1HNZvhuq3RTkXlsKVCWDiC8FiL2Ww\r\nHPYVUwqGe93jqPecaZycygUPXkArkRoLatJ5cMiM5/7SaKWxsZPIAh2Dqyo6\r\nvPi+oWJ54vq8/diicX38sp++Y58JCemc6/C5bIAK98zGGdOV/j3JW9Oj15E/\r\nUSgCtiEqzra7AuMbW7XMNdwwj1iYqTGdGKCe0f82xl3uXcHHSZABmxlxZZjv\r\naLBre6eLG/WW/del3rxOCt31SuQhUFuJER2b2jR2YVY8YgXGuqSHBtWwXOcE\r\nats1RLUVahqU5fLHLehicZsNCwzKkAxoqK+mugN+xNfo9kdks8U3QGPGzk2k\r\noc6fTBv9oglEE7DR2R18GMmn2pXVjuEPXRSe1ch7zbeA2/5gp0eZ40Xmrp7t\r\ncRd5S5+YL+spAwEEmnv1eEkFRb4e4vI3RGLI+vSeo52NMQh9YeHf2Std/cit\r\nPVGDdKK9IK1Grl6Ivpwsx9Nq90Qphq27+vlBvu7eHV1NIDAFom5+e/h8kGjC\r\naVKrOuD6hfJTXekyg6gM90YrDPE0cu12PlEvBB1m9MUFnKE0ey/4bBWys/+o\r\nL+PZYko9rKftzRuDS/h5AcpcLzbLUqqtMTG+NWhTuP5Q3QFkJxJEVjXqp3I6\r\nvbCmA/TV49HlsHJQ8MqitdIDryPs1c6gVnc=\r\n=gv2j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79b1b612b.0","@material/rtl":"15.0.0-canary.79b1b612b.0","@material/shape":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/ripple":"15.0.0-canary.79b1b612b.0","@material/tokens":"15.0.0-canary.79b1b612b.0","@material/animation":"15.0.0-canary.79b1b612b.0","@material/elevation":"15.0.0-canary.79b1b612b.0","@material/focus-ring":"15.0.0-canary.79b1b612b.0","@material/typography":"15.0.0-canary.79b1b612b.0","@material/touch-target":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.79b1b612b.0_1681947654590_0.8439216713424287","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/fab","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee435b77775dd9e42be61ef31e5eeba4269f2067","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.6f50071e5.0.tgz","fileCount":23,"integrity":"sha512-jKJyhT6SAC0pehaZpl1LEe60OTgHMsnOt46SNehcpC1/QQHa/s4EDp+xW8846/qEsLTBeEcL0XSc2cVAbhrz0Q==","signatures":[{"sig":"MEQCIQDHwX017Cw+q+XXeDHcsbBunGhelisRZakNm0IWsSGK2AIfBzGECWeGQ9GKUtOWNc8VPPfzuWRen7mxVd+jnGWt5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX4FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouFw//XsQCvTc2ab0rrXhlItaQdAaaOOYHZa8uSG1C1ZNgljxJ6PqW\r\ncY+LZF92QWXDCG3cgnZY54pGER6y8hAzA5TZcjM8jc5nvzPPAB3rolRpLOFy\r\n0Owp0M/5PlpsjcbSkFXQQFmbYlkCWck+Pr/5NSRNaJmPPuds3afEi3j49Dxa\r\nF9j+uwAUe/7KpdlnF8RUerDOl6udFFHeFM4xcsC4aSB4vpe5YEkpSw8QVHuC\r\nQSRGFRieEnB6SlfLDrjZGz7jXlYr2V324s0ts1bC+ZiZCGzRKF3p9MDvBIVZ\r\nhpzmnWfSVesi++WnbKnwvuU/TTd0G3amGusVjt5yy4ku81bl0+xSNxbIro2B\r\nIUP+d4tEJTR80jXCkyn10woIXKZQAaihlZnXR7c80uJlQoKHmymKdklo3G+c\r\nktF+0F+jvzsWg9tsczE98gr7tHIeWYnX86moNs/B+jo7XaOd1qKhQehEuxxD\r\nJZJdZEXP3MDJKgO+QAuTHqgqibRVzJY7Fi62wHosPH7PexrhHLYq45Pf7reI\r\nVW8VdOCtf4iYFOF4Ww5T4wzDWiXXYFnNQOkE7AEqIPK8blZ0spJ9BMIbF1qc\r\nAxjonWYOhWmcvjFSDHz510Dkv30phh6dLqfDpMYxJHgcHJ4Q8xPgWgOc1N/7\r\nzg/7KWLp59rNGqI9rS5Pm0NDEoLJn4xdhXc=\r\n=qZ0D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6f50071e5.0","@material/rtl":"15.0.0-canary.6f50071e5.0","@material/shape":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/ripple":"15.0.0-canary.6f50071e5.0","@material/tokens":"15.0.0-canary.6f50071e5.0","@material/animation":"15.0.0-canary.6f50071e5.0","@material/elevation":"15.0.0-canary.6f50071e5.0","@material/focus-ring":"15.0.0-canary.6f50071e5.0","@material/typography":"15.0.0-canary.6f50071e5.0","@material/touch-target":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.6f50071e5.0_1682013701742_0.5695856029925579","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/fab","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ef754381c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e3acd2a923cb876798037e42a13574eb2032262","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ef754381c.0.tgz","fileCount":23,"integrity":"sha512-oLa0mDYnqfWmxcN+PRvWLhtevhn5yiFNZhaoe75Pa/UA/FzMTy/GTsWY+rpUd8AzwUltm9JzlktwSP3zNf6Ymg==","signatures":[{"sig":"MEYCIQCVQU4PEfQSOEubXqYs/kS3ptiROU0SvNmKNZZK9AqaOAIhAMfF4pGy0mCBhYjm85WePyhhQTIILFSohP5I10cTvW3w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuvDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpznw//XgVKEpiSPTb8RrF5YbSIgrWsh0C4944KOo+p7b/ntf7FFYLx\r\nSxcFIXwrlub52e4Bkb+BG6cWnmcHV5/Q7y2XPKErC54SEH/hR255JY1IeV2s\r\nDvSjCjwanoosmscdL6i8t0IW4syugPbM+7uoMLUxwAVi+7QH5rA8fQVs1TnG\r\n+hpFn5+e36XNP3I3kcGxwiVurt++vRY5aTjGRgADuNndXHSL01S/OCMpmMa6\r\nLBoJIdb4U3SH4Kcg521wg7GqzL3K9hjbNy9+yvV7j3iJqQb11WZavyGm4kw9\r\nlvU0E9tpAulNDNDUgZrmw/ZELy32EgNZ1Pd34wPnBulJOzSD0rPujQf7fpKk\r\nU91uq+zuizEviCQui+WtLn3prDsPjph7M/R0uGmhpiK+wnF6LQPvugDxot0l\r\nu5KkMmPpRg4ofx5/F1ap4nRbIDdDdVjmnfU1aHNJtWgb5BQOAGle6u5TT0aT\r\nQ0enXhWzk5NZ2f8mFTzLsNvSiJ7rl74d0G/ZZ8N5Y9YbIGIh9z/oFOv+cyNw\r\nnAmNJg93ZzBRLgRjXlXFIvUa4iNW4UnKwT9wzGuxFPH8vR50Xh8OulpMDR1L\r\nD2eGHY4xZgvjnMaiesJMY0NMH6JE3v5gcT69UWGUi7or8KWgxoYHrp4pS66S\r\nJ/vOrGtQG9VpatnL+4V+74kv8is4DbHDuu8=\r\n=lfnP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef754381c.0","@material/rtl":"15.0.0-canary.ef754381c.0","@material/shape":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/ripple":"15.0.0-canary.ef754381c.0","@material/tokens":"15.0.0-canary.ef754381c.0","@material/animation":"15.0.0-canary.ef754381c.0","@material/elevation":"15.0.0-canary.ef754381c.0","@material/focus-ring":"15.0.0-canary.ef754381c.0","@material/typography":"15.0.0-canary.ef754381c.0","@material/touch-target":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ef754381c.0_1682369474822_0.8289783158019353","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/fab","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"663ddfc562bf2cf756d7f89afc3cb6402e5135ad","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.69ebf61ea.0.tgz","fileCount":23,"integrity":"sha512-Omj/tr/rvvNmFhg5JY0TJSdERYLzLesDhmBkLfHu5+Vj4jkf/JhyNH5fgy0qqq1eOc/HBilG8tIn40NXYoM5bQ==","signatures":[{"sig":"MEQCIES7SG2FRiYP2e2OU5V7MpgTRAEHXKE6JP9uYHvYc+72AiBR8vZbxufWjKw49bSYUBgcuD9ChrDwN9j/CaVLKYywcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq8vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKug/9Hmal6KxaUzoHroKigzQXPMLGsVYcorR6Tj7PKr1lE5DLK5f2\r\nANUPSksWUyp+TH93OrmxtJs8DM4U55hGS1SEKpBWniipSeLUVyq6slVuheRV\r\nSAA0Vy4i3Yz3VaDVfVZGZg1/bWKIX9/OmaMdF4l8p7A8nAXn+BECodoXe3Ku\r\nPy2I57FviDltwoxqIPf2JKr26qKD/fU0lzxijO4o9sMZP82h3CrYkTj3T1V5\r\noDjRRFJOl+tq8yFL1XvKenN9KsNHQtEvdhOrz9aC069SKywWBN+kgk8QX/CC\r\nUnYGmiOG+b1oCBvJ9fPcrS32TdQCg2DePOlEdQ49xq6krl0iF9/EsDO03zpk\r\nsdTUfEPQv5/tWVM1QFfPaF3fHfYpC1T2/e67WC4lqKHW0xc9Ur79pi51rTHi\r\n7j8m1d8P2RZAWl4N6J0M2ppqH9xyOhFh3s1zE0K/vq6gXKAWIpl3nCm7Za3Q\r\ndbBdth/Kr8aPIi6VBDD4UX/M6Wn4WR9+Tb15ZedGICUOW8uaHh8KYTlBinyZ\r\n78vTenyXeUPw4PD1w9Yl5T2YJgWgPEEhENzRpcaSllmbbjK85iRoLm/MShAL\r\nkfxKSxl67fVIK6ZTiov0gMWh/NQ8iWGVQifyFWoySwk68jkBTpkFcFHiCStF\r\nMvgeTH3033Ch4jVMianOxN57LATJPlvHvmA=\r\n=bBvD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69ebf61ea.0","@material/rtl":"15.0.0-canary.69ebf61ea.0","@material/shape":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/ripple":"15.0.0-canary.69ebf61ea.0","@material/tokens":"15.0.0-canary.69ebf61ea.0","@material/animation":"15.0.0-canary.69ebf61ea.0","@material/elevation":"15.0.0-canary.69ebf61ea.0","@material/focus-ring":"15.0.0-canary.69ebf61ea.0","@material/typography":"15.0.0-canary.69ebf61ea.0","@material/touch-target":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.69ebf61ea.0_1682616111441_0.5583993955247928","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/fab","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b90be86de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"693c871ce5622f88f113e2e655cd04e1a95133b7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b90be86de.0.tgz","fileCount":23,"integrity":"sha512-95XncfGcSPRMUovjRchO8UJzH+0YTAZeh4UDWgFVawTKiTIOm8U5R4RaOWL5QE2+3amA9ZhkyFhKQLrvkJUdsA==","signatures":[{"sig":"MEYCIQCWhA8hQAkAR+couRUaI7Tdhtpt+KRyTkrro73ena6UZQIhAMHVV3kfFMCjzENN18vAuCvy/bTxgJPAynmyFhjGKTij","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGMkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcVxAAm8rxrgmFy3Ce97Zdneto5hIRK7iUC7oCCrx+hMUSbHpqR2X7\r\n2AR/HUDqpOAgCcoeIOsnTHiGI6auHNdvBk8vfXO44sf1t/Y2bNnCC1y6ATu/\r\n/QPZXifzGZ/mbN6WeTBOIlvkqwt2BHmZ8eeWHkf6KiKRvhWA+n0TiOyedV8F\r\nf+ZvDBw7snXCdKK4ZDpeNxcM7aPVVDn7G9WLgdACkDFcejOWSpFJXWMjysQ5\r\nI52GpsTJW6nYgy+EaQJsi1QRjs8yjsD9V3FNNR57ZkJ/jM9gSndlRWs4FlJO\r\n0+eBdAcV6vllZcxKxNUDskHMCLGtYFC5hDju1oxsR1vcV+HG3pAqsIA042GA\r\nnwpAIXaJVHA6ZsM24DGamxNLECIOfU/aK90ZQYsOLjk118NwWNQr112CAbN8\r\nRhAagbce71o6km6VjhmYg7+5WZiTPutwV8lTHo/TCGbTwuA06UqKiwdLFXwT\r\ncU4sEC4xRn1at5GS7K6EKEuD01d7YiZvtSQDl1HeGavxATEvJ7ptMFu5iMpn\r\nvA4GBCKiQHm2nb8k9qOuvRliB47r1pPeyqNpeDVJv8r9BdsG266lT/l7pg9F\r\nirGhmxyt8v1am3lNg5HKRgeK+dZTIyo9yhxApCsDXvETKCFFc1yynVVdvuiD\r\n9WF3hCWiWFkbnGh536oDYKKq2BVKhK9ddZE=\r\n=aPAg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b90be86de.0","@material/rtl":"15.0.0-canary.b90be86de.0","@material/shape":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/ripple":"15.0.0-canary.b90be86de.0","@material/tokens":"15.0.0-canary.b90be86de.0","@material/animation":"15.0.0-canary.b90be86de.0","@material/elevation":"15.0.0-canary.b90be86de.0","@material/focus-ring":"15.0.0-canary.b90be86de.0","@material/typography":"15.0.0-canary.b90be86de.0","@material/touch-target":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b90be86de.0_1682727716033_0.5777710964102034","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/fab","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b14f9f93d892e3a90e6d72ea836ee11950ece9a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.51f9c0c28.0.tgz","fileCount":23,"integrity":"sha512-QRanDJSZDMxMXcIyXWfspSXb31iusve9fB6D4SgeJ1/bZsvy/I3t9wXyl06sJBYJhRzIXOiORyoVUjal/OPCpg==","signatures":[{"sig":"MEUCIGJ6M2FzR7CcBMT6x/rgMcetvhlXaLGHVTu1dvQpJWpPAiEA/LcVU2W/V8pr4lkN5ee0CukWhN4Qq0THRnS1SHjltBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGVuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHew/9Hdt7Nac+tP7PJJiNUBF9IoCK6JLcgEdM1W+4vQGo90QK/KmJ\r\nEVENJdikZ5xYU5SZiiiU/rOP0N3KtuVZFgJygyGnT/qsQearmQPvcNk035wC\r\n+cETk0xSbEJfLJm/lRxTukZPwnH2AO/ZFyIrotuT2Kl6TvQ5tiPFrN01AR7A\r\nskyJUBPwXYusQpea2BxB7WnDSwZaeL0/3jTNnqDFd/uYbkD8DTlmNlWSWAmG\r\nQdS0cUcRsooGeHrGwK5fC3CvTlDKR3sK1RRBYN34wPhooGzKssrnXklDMrMn\r\nfEgYrOwcaeTrIxrT5B8iB90u5NxOdL7RZxi1uRDclV/Y7jis+IWWh6/K+bAA\r\nlAp7tMVMa7q2/qSeyf81Dl6Hb6yp7HjT5kjKriQbypqyG1t39F3z8+Jzcn10\r\nXL1YC7+v/jl9vHrsv6oUOVonk6QDW+J09md7aviPYS9dKy3ZB8EQdSfY9/9a\r\nSvccXYvqoSUHjKYGqmZFHWva+SYetByjceGHZlfSJ1JgzAohhohCmSHANQKT\r\nQ3+B0uDB1WS86sscjaUJGzTwmhsnN3a7MPcXDyhxKpQZ8LkMY+u4A44WV8Ct\r\nLVUTM66fdZ+alIGJ1R+qdBsrlfJaNMy8QV1uYa50vAGdz42mMAHRpLtrtY5G\r\nRQ9AVbfcjq28PmJAKgTlPimz9z6dC9tCn/U=\r\n=O51J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51f9c0c28.0","@material/rtl":"15.0.0-canary.51f9c0c28.0","@material/shape":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/ripple":"15.0.0-canary.51f9c0c28.0","@material/tokens":"15.0.0-canary.51f9c0c28.0","@material/animation":"15.0.0-canary.51f9c0c28.0","@material/elevation":"15.0.0-canary.51f9c0c28.0","@material/focus-ring":"15.0.0-canary.51f9c0c28.0","@material/typography":"15.0.0-canary.51f9c0c28.0","@material/touch-target":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.51f9c0c28.0_1682728301915_0.7559569630554164","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/fab","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.4e840d685.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68097a654a9bb6752be71bc20d09cb04f07bb463","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.4e840d685.0.tgz","fileCount":23,"integrity":"sha512-K4hI7h19P6SwGg/KE31EkTiS0hIYjDif7pDhBGMfmu+nO+1lax5kOTiIDMHCYHs8IX+OGS1MrX+Roufc6MshvQ==","signatures":[{"sig":"MEYCIQDcgNH2SZ1qcV9WhkLwRVonahVBnPTO+2B5Kwq+iRRfeAIhAILZJbCWs1Mu5UnBHgjMAlTY95mKWjgDpU2Urmr91PGS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4e840d685.0","@material/rtl":"15.0.0-canary.4e840d685.0","@material/shape":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/ripple":"15.0.0-canary.4e840d685.0","@material/tokens":"15.0.0-canary.4e840d685.0","@material/animation":"15.0.0-canary.4e840d685.0","@material/elevation":"15.0.0-canary.4e840d685.0","@material/focus-ring":"15.0.0-canary.4e840d685.0","@material/typography":"15.0.0-canary.4e840d685.0","@material/touch-target":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.4e840d685.0_1683041633742_0.4574762842338207","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/fab","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff8d327fd840afdfad7390a1dc4f9172c82df29a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.10b8563e4.0.tgz","fileCount":23,"integrity":"sha512-Lxeu4rNpxFdz9P4Uwar2+hmz/5A/mVfgvqV6KdarXNf+yrY9m3qMiV0xORj8eGAIZG8HHHJGYh2HgMmpZlZYUg==","signatures":[{"sig":"MEQCIEog/hUscOOU+SUubRBCkZrnL5QIxpp6TVb4SODy7XlmAiBj3YQL6izSuVwzxeVVmWWrXcnZNcpjqkt3RFyErh6WaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ/QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIHxAAno+axxGA2/6F/ivLaEkbeacigzxwll/KZ7VTD59az9ZKwC4v\r\n4vuWQP7GnJQPk1SnSam9nkKp2eqMP4ykpMZfL7DqWoDzKnwoL7RoyrJ/L+is\r\n9hKeb8eHUBzMSMVWEI2z56991O3Yu1iG1T/fbmhUUOnLg3fsb6nRxDQrIBhM\r\nRhyj0hyREhatDXiCRn9zKxUce12B6Vy622b04+Q2BxyzgyS0kK3vYaLWYBpy\r\n8qPj+It++juvfqS+r3KLczAR7Uvtku7pQN/k9y6BA421jtgqg/12x2x88M5p\r\n7+NjyS4xlsjtO38CMjE5ZRtncmj5mKOxSeo2KbejkFR/FvtgYb9byqst+V3P\r\nrvhkR0TbO5A1g+nRWDj9EREswJSmKY3bYDVQBbpqEA1Kmbjeh0CcbVV5b9SB\r\n7HJ6ovmRhOfTZcQHmJmLS9nPSwBxXM/FjA3eKLYPpp19WPdwt7CK0DASFFMg\r\ndAFxoN0z2nmZsDiNGXL6ES6qSN3pnoPHHcPo0gKvTXVKxsNs5LZWB7mu8oFu\r\nzLacF2AQ0ileM9UV1LjrD0kxw/bun3zKmRT5fdSEwzLcftwIoijNyFM7pYLU\r\nCgOXlpyUAOTMGHV8U2PrvyE/OGOsk62lAEzDKCfSy0shym8fNtywT2i+kojB\r\nZ5QR7HTBNpiRANkSVpb6PrilasFISHcDO3g=\r\n=hwBy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10b8563e4.0","@material/rtl":"15.0.0-canary.10b8563e4.0","@material/shape":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/ripple":"15.0.0-canary.10b8563e4.0","@material/tokens":"15.0.0-canary.10b8563e4.0","@material/animation":"15.0.0-canary.10b8563e4.0","@material/elevation":"15.0.0-canary.10b8563e4.0","@material/focus-ring":"15.0.0-canary.10b8563e4.0","@material/typography":"15.0.0-canary.10b8563e4.0","@material/touch-target":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.10b8563e4.0_1683070928060_0.9702217479629895","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/fab","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b93ddb2794a00080e11aa74cf2a1141cbd06d31a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.736b7fda4.0.tgz","fileCount":23,"integrity":"sha512-DYi4youOW2qvrz/8MqoRJWOukWWyiJqWmG0t0PEZHk2dEDkT22SQHUgPVtwZYpko9egrRd7kppY3TrOmEz3SoQ==","signatures":[{"sig":"MEQCIFY4sGCK5nxjw6lK50z2xL/vwkEXheiVQWRH4kzp0HD1AiAY7Q4sFOkDfavGeMJFtAguMhtAsjmR4i5u9/bG282lEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnk2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWVg//XcElIjfMDtdjtqhzw6GfEvvNGVJHWEXnPHaKqaas/Hgx1uSH\r\nSDjGf205v6JLJhIXSIgT46wf/wg7syqtuwpYRcOclMfLj0289/1vctD2re2u\r\nsi7NUtU8UL657l1x8TGA1R3Ta9eZEBfEcPqXaWJKAydY+jRJ4icL/ztNx/oz\r\n69otyt4ZrKCN8wlpetfdgqFL28NPKU52icolOORQbVV4tq58AwpUFi8jLXXA\r\nuIUKkC0b5W1gKEXZ4YEbanvAf28B2d5ZN/eCAbN/zzvzsWOJb+dElzOkkJNn\r\n66X4wRz6wXUK59kyMKC4fjoNEhf+mzFZQolXu1h3pyh6Q0uR2awF0FzepTQU\r\nIeB7VSxrB8ZvhAcxvYt9/xVt3YG4pha4MIxsFNdKGjART74bfJswmdW4MYO/\r\nOIwzBh2rtJHSyaY/FJE9qyGeFt8t6JJGvwNPKYzatUE04dseui39Eg0+rci1\r\n0nOgwnyXtz44ouihLB1753jqtmfm6lF4Rrj2VXZ9Zh6HeNEOb0DzSId7aZRq\r\nnrC0/zbi1oTKCyiCx7xvFngbCI+VLt/9csY3JK9qhOrEUhU+4rzJBF+W98uX\r\na07yStQwAH8Ct8AiZP2vphlVYKDeFBQU0VtBNpnRIDHRjVfNni+hTzg9PYV4\r\nu9aV5SiWeZqWWKgyghFZgSHF55Pn1ufg5cE=\r\n=ik6I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.736b7fda4.0","@material/rtl":"15.0.0-canary.736b7fda4.0","@material/shape":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/ripple":"15.0.0-canary.736b7fda4.0","@material/tokens":"15.0.0-canary.736b7fda4.0","@material/animation":"15.0.0-canary.736b7fda4.0","@material/elevation":"15.0.0-canary.736b7fda4.0","@material/focus-ring":"15.0.0-canary.736b7fda4.0","@material/typography":"15.0.0-canary.736b7fda4.0","@material/touch-target":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.736b7fda4.0_1683126582504_0.10152478429323786","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/fab","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c9d1dcc3f03080bc2dc20983f503f799f212b7c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.0e533c5a1.0.tgz","fileCount":23,"integrity":"sha512-ydiF6R+IdgDztdj6VbJQAxRbxd+Xm1TQIEb1ZSFdAoCpWcxNQssQzp/T6Z0c8W28S9O7FfZu5gZ2hsfYbYghPQ==","signatures":[{"sig":"MEUCIQCjWybuhZqHt5d9hw2zRa+l6htyOTyMTb/idNzbiW2qhQIgARIK+HpsuQQws8wO4VtUT2oZSewHfwwVnIfiAP2kUS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e533c5a1.0","@material/rtl":"15.0.0-canary.0e533c5a1.0","@material/shape":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/ripple":"15.0.0-canary.0e533c5a1.0","@material/tokens":"15.0.0-canary.0e533c5a1.0","@material/animation":"15.0.0-canary.0e533c5a1.0","@material/elevation":"15.0.0-canary.0e533c5a1.0","@material/focus-ring":"15.0.0-canary.0e533c5a1.0","@material/typography":"15.0.0-canary.0e533c5a1.0","@material/touch-target":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.0e533c5a1.0_1683305796669_0.7718928025565268","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/fab","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4936cf5c682723c2f830d6545a18be16fadf7a4a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.5f01c15a2.0.tgz","fileCount":23,"integrity":"sha512-gPssHwUHFFvD05YZb9aU+cN9usiQ+GMeLQ4Xf45I5dvhpTY3ldh+xKfMD5uiDWUzt5TldnYa8UvK3/oiYzU90Q==","signatures":[{"sig":"MEUCIQDm9hyK8H9NLPUy/8DJaod3dCvk9VznBUc3BG21Nv2ErQIgSWNnwgj8itsQ5oYxed8hhZOnbD6DyOG5/8Ed2Pv3QjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f01c15a2.0","@material/rtl":"15.0.0-canary.5f01c15a2.0","@material/shape":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/ripple":"15.0.0-canary.5f01c15a2.0","@material/tokens":"15.0.0-canary.5f01c15a2.0","@material/animation":"15.0.0-canary.5f01c15a2.0","@material/elevation":"15.0.0-canary.5f01c15a2.0","@material/focus-ring":"15.0.0-canary.5f01c15a2.0","@material/typography":"15.0.0-canary.5f01c15a2.0","@material/touch-target":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.5f01c15a2.0_1683307594692_0.05160924745915452","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/fab","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63e0da5654de4b5cea0d4a1cc13cdd9b40978913","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.3b5b55e31.0.tgz","fileCount":23,"integrity":"sha512-i4p05wgkgUj7isE3Hvlq2Q9knG75AR4GG4259qQNgmcUYJBdmV0vro7RVQL4/majo99rQbhdi0fMzgacJllZgw==","signatures":[{"sig":"MEUCIQC3rheMZSZO6qCmIdUS7092J8pBNrXrQqIcwVuaAo4UngIgQ8I7MErYYTUgMPNDGGDz6sk1tymG0cE8Bb9IH5o4ptk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3b5b55e31.0","@material/rtl":"15.0.0-canary.3b5b55e31.0","@material/shape":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/ripple":"15.0.0-canary.3b5b55e31.0","@material/tokens":"15.0.0-canary.3b5b55e31.0","@material/animation":"15.0.0-canary.3b5b55e31.0","@material/elevation":"15.0.0-canary.3b5b55e31.0","@material/focus-ring":"15.0.0-canary.3b5b55e31.0","@material/typography":"15.0.0-canary.3b5b55e31.0","@material/touch-target":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.3b5b55e31.0_1683311972593_0.024322560460392717","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/fab","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d0788120f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4794f30d79445f2b2f7869047803c02911d337eb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d0788120f.0.tgz","fileCount":23,"integrity":"sha512-DnAiit8gq66XmnovhYjC6dPjwZfLxYyNJdVhG/VGrNFN9leSyZWdc/CP1u2BnhA0DqnRoSYgk/sFMYZGowBjvQ==","signatures":[{"sig":"MEUCID/1sTnxHMYUMcbA2Yb7vZwjGpE0pY2efW78T0mH8EWpAiEAnPENJ9SoFJ4Pve/TVcJVoSbc+9NKHJKnnf4zHm9OqYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d0788120f.0","@material/rtl":"15.0.0-canary.d0788120f.0","@material/shape":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/ripple":"15.0.0-canary.d0788120f.0","@material/tokens":"15.0.0-canary.d0788120f.0","@material/animation":"15.0.0-canary.d0788120f.0","@material/elevation":"15.0.0-canary.d0788120f.0","@material/focus-ring":"15.0.0-canary.d0788120f.0","@material/typography":"15.0.0-canary.d0788120f.0","@material/touch-target":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d0788120f.0_1683620605940_0.07694075005785761","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/fab","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb36f5e553168ef522846bf9846652026d6ba7e2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.f52358dd0.0.tgz","fileCount":23,"integrity":"sha512-BwgITUxlWca56r2uEr5V34AjoSj11qfCFB8Sy4s4tZSfQuzMDHVjwEIbeHUMLCCj2BBdRg3LDzwNr+laJBwK3Q==","signatures":[{"sig":"MEUCIQCks1xVVNCgSMhmA9wZE7gLayRd8h+qLvzZ9+f1OtyuogIgK6wmOKrA+NtzjmLz/R1AaUK+lwdn9tWcAF6RttrF40s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f52358dd0.0","@material/rtl":"15.0.0-canary.f52358dd0.0","@material/shape":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/ripple":"15.0.0-canary.f52358dd0.0","@material/tokens":"15.0.0-canary.f52358dd0.0","@material/animation":"15.0.0-canary.f52358dd0.0","@material/elevation":"15.0.0-canary.f52358dd0.0","@material/focus-ring":"15.0.0-canary.f52358dd0.0","@material/typography":"15.0.0-canary.f52358dd0.0","@material/touch-target":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.f52358dd0.0_1683901846525_0.841943014463447","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/fab","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d3c3fbaa3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f1aaec6c5f7b4494485a93869bfbb41d9f8baaa","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":23,"integrity":"sha512-oNK96p3k+MJ6orfXWKdOf3vOBWJ4TFyTqNzHcRc1V+C37pssUe9g9uBVzLqeA+ioa/ZFZrfy28iEuE6B37ZRRA==","signatures":[{"sig":"MEUCIQD0I3I7mJtZfLNoVbSAtSaVAhVKhPCh+eqgnrvxS6r+MgIgdkCZbd1IXg/uS3sRPXud0bjlEUd4YI8zA2A/s3XEcFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3b7f31c254605439f8fef56301c46f7bcbf3a9fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3c3fbaa3.0","@material/rtl":"15.0.0-canary.d3c3fbaa3.0","@material/shape":"15.0.0-canary.d3c3fbaa3.0","@material/theme":"15.0.0-canary.d3c3fbaa3.0","@material/ripple":"15.0.0-canary.d3c3fbaa3.0","@material/tokens":"15.0.0-canary.d3c3fbaa3.0","@material/animation":"15.0.0-canary.d3c3fbaa3.0","@material/elevation":"15.0.0-canary.d3c3fbaa3.0","@material/focus-ring":"15.0.0-canary.d3c3fbaa3.0","@material/typography":"15.0.0-canary.d3c3fbaa3.0","@material/touch-target":"15.0.0-canary.d3c3fbaa3.0","@material/feature-targeting":"15.0.0-canary.d3c3fbaa3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d3c3fbaa3.0_1683914475940_0.8100743959655554","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/fab","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a08045eaec552824fb73734b2387f7feefe4c4d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.576d3d2c8.0.tgz","fileCount":23,"integrity":"sha512-5t8QDhDbdRelLiQbPHWh/M36Q4LNPMRqBnoA3V3r2H7+zOVhA5msqi8GLp2zx+cW6oAQjrs6QF9fMLOkXX8qgw==","signatures":[{"sig":"MEYCIQDaaa/dZX8JSdcELKeKnG0L+FLEY1PqItKL5r427Q9lLwIhAMgHzaBg4t+ZOgvs1R/GNI9oX6es7ZcvwLvOjhbDH+sn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.576d3d2c8.0","@material/rtl":"15.0.0-canary.576d3d2c8.0","@material/shape":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/ripple":"15.0.0-canary.576d3d2c8.0","@material/tokens":"15.0.0-canary.576d3d2c8.0","@material/animation":"15.0.0-canary.576d3d2c8.0","@material/elevation":"15.0.0-canary.576d3d2c8.0","@material/focus-ring":"15.0.0-canary.576d3d2c8.0","@material/typography":"15.0.0-canary.576d3d2c8.0","@material/touch-target":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.576d3d2c8.0_1684202418999_0.465194792070456","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/fab","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8ded56337b2a141eba966a741eb1dcfa498b7d8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.19bb36a46.0.tgz","fileCount":23,"integrity":"sha512-2wvVkdAx1CTywSqkLorK8lJdzNRbfHqFUO0Dru/zt3ib3444H8GXE69I7h7p9jmjSQTwveJ97iytR+5vQAIFSA==","signatures":[{"sig":"MEQCIEU1SwiVe7mv0Comt8XyLV4xq0L9+4heSpqP3ol0FtBPAiADsEVzQoASllcXgx8Zs2vilKHWoUV0AdRwShgDR7wyew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19bb36a46.0","@material/rtl":"15.0.0-canary.19bb36a46.0","@material/shape":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/ripple":"15.0.0-canary.19bb36a46.0","@material/tokens":"15.0.0-canary.19bb36a46.0","@material/animation":"15.0.0-canary.19bb36a46.0","@material/elevation":"15.0.0-canary.19bb36a46.0","@material/focus-ring":"15.0.0-canary.19bb36a46.0","@material/typography":"15.0.0-canary.19bb36a46.0","@material/touch-target":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.19bb36a46.0_1684266859285_0.18197857689100672","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/fab","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d1427bf651845ba7a9bda8e28576768cd1c8110","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":23,"integrity":"sha512-GGw7c1ZG/2DRw8FTGXQI9WOgyWGOGRU6yZtcD9Yh79hTOeEMqechPfq8IkTl9yQwdsI5bMgjVkfIBncgIe6irQ==","signatures":[{"sig":"MEUCIQD1Nk4EOeuDmfmzbtwZaLCaREwyxvtxFNzttGAy86o2pgIgWAi1Ch3/rK3oTzH8Bycf6XuVuxuwVAddmvF/WotnJIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa5ac7fe5.0","@material/rtl":"15.0.0-canary.aa5ac7fe5.0","@material/shape":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/ripple":"15.0.0-canary.aa5ac7fe5.0","@material/tokens":"15.0.0-canary.aa5ac7fe5.0","@material/animation":"15.0.0-canary.aa5ac7fe5.0","@material/elevation":"15.0.0-canary.aa5ac7fe5.0","@material/focus-ring":"15.0.0-canary.aa5ac7fe5.0","@material/typography":"15.0.0-canary.aa5ac7fe5.0","@material/touch-target":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.aa5ac7fe5.0_1684776366965_0.32390836864316497","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/fab","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b8e171f8c50a24d97757d23fbd083e610b90f8d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.90291f2e2.0.tgz","fileCount":23,"integrity":"sha512-YJuJRdqe57DnJ4qyc04flknuGeN+7Nc9ciFZE6snPn84wD6J1khscb21yRARbALDki18kbfnJNrNbzHkYaEMZg==","signatures":[{"sig":"MEUCIFvTAQiIYlVEo5oS+jfwumCsPeKobidoPdZ67RWXVtvuAiEA+APmkPMJnuzuqpBhq4MtrTyWImg6lhm3JbyZEYU5kUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.90291f2e2.0","@material/rtl":"15.0.0-canary.90291f2e2.0","@material/shape":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/ripple":"15.0.0-canary.90291f2e2.0","@material/tokens":"15.0.0-canary.90291f2e2.0","@material/animation":"15.0.0-canary.90291f2e2.0","@material/elevation":"15.0.0-canary.90291f2e2.0","@material/focus-ring":"15.0.0-canary.90291f2e2.0","@material/typography":"15.0.0-canary.90291f2e2.0","@material/touch-target":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.90291f2e2.0_1684863778166_0.16201214463120728","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/fab","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.446734f27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a389cae62e0e51bce821c674d23c928a91864ec","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.446734f27.0.tgz","fileCount":23,"integrity":"sha512-rnuBemGzV5DtUYjWWiIv/Eq80HbPqARsmfTr2WJ+AFs2A0Op9x7/y5fO9wS/lig0bZDQboe9EkAlRJaTRfy0+g==","signatures":[{"sig":"MEUCIDMvJ5u8MeoT5aUIwx9LJLLHNWDG4FiCWQXvL6Tj58nUAiEA8f7sJ4n1p40g2EBSjR13rWO0RVr47FVnN+PLdScNZfU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.446734f27.0","@material/rtl":"15.0.0-canary.446734f27.0","@material/shape":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/ripple":"15.0.0-canary.446734f27.0","@material/tokens":"15.0.0-canary.446734f27.0","@material/animation":"15.0.0-canary.446734f27.0","@material/elevation":"15.0.0-canary.446734f27.0","@material/focus-ring":"15.0.0-canary.446734f27.0","@material/typography":"15.0.0-canary.446734f27.0","@material/touch-target":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.446734f27.0_1685483312143_0.30817701445601964","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/fab","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.19de312d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bf4924972c73c3e8ea626ef68efc6cdbb26c5c8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.19de312d8.0.tgz","fileCount":23,"integrity":"sha512-AJDfjZIg/cf7DraJOeFfV1QKAMaIwnTIEvmxlqn6G8yWcGcHjJaEhvSq6+f2Fdu/poH67ur1B2OkbUMT9D9xzw==","signatures":[{"sig":"MEYCIQDZNMCXJBYkz5J24KkKRa1u7iZxCoq0iiatk2iErqYECwIhAJaVOjgts4YD8zis9rCNOM4DAwhuMPM7dZKdcTdzmWEk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19de312d8.0","@material/rtl":"15.0.0-canary.19de312d8.0","@material/shape":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/ripple":"15.0.0-canary.19de312d8.0","@material/tokens":"15.0.0-canary.19de312d8.0","@material/animation":"15.0.0-canary.19de312d8.0","@material/elevation":"15.0.0-canary.19de312d8.0","@material/focus-ring":"15.0.0-canary.19de312d8.0","@material/typography":"15.0.0-canary.19de312d8.0","@material/touch-target":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.19de312d8.0_1686071925202_0.5069480791748378","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/fab","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.6081d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"409c8ceb65fec8cb582286699b0028fa6d3674d3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.6081d829b.0.tgz","fileCount":23,"integrity":"sha512-jkNwoGa6qiek0M3tK8vfJKqZT7BRk3Knz3TKg/ZMX4kfIA3ooYDMLjsBt9oUYS/oc5FHopeu/Kqxmkk9dtw1JQ==","signatures":[{"sig":"MEUCIQCmes0FM3Wo4q2Re+Qq8NgWd3C3bvKli60/VTDpgq3/ewIgPDfBfCtEuoyaeNutMJ20D41BOJ4JJQryq6J0wPl/KOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6081d829b.0","@material/rtl":"15.0.0-canary.6081d829b.0","@material/shape":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/ripple":"15.0.0-canary.6081d829b.0","@material/tokens":"15.0.0-canary.6081d829b.0","@material/animation":"15.0.0-canary.6081d829b.0","@material/elevation":"15.0.0-canary.6081d829b.0","@material/focus-ring":"15.0.0-canary.6081d829b.0","@material/typography":"15.0.0-canary.6081d829b.0","@material/touch-target":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.6081d829b.0_1686100457792_0.8984942369535662","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/fab","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54b8703a90e7745126d784f967db2b1c79299099","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b26c34a68.0.tgz","fileCount":23,"integrity":"sha512-S/DT+YG/vBJikfhrF4xO3VyRa5QA4x8cjEhdmtsoxeUxvpzR66P1PkdRBRcGfv1VbC8Ta/1hW4MbyM7epBk8Jg==","signatures":[{"sig":"MEUCIDLLgbAg+nEz3tLtG6Iq4jqVDBCfgYw/92JimunQk7z/AiEA+HVsepUJm3RphgrqjhO5YTIo0jSJHKQZYiITxZNEkYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b26c34a68.0","@material/rtl":"15.0.0-canary.b26c34a68.0","@material/shape":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/ripple":"15.0.0-canary.b26c34a68.0","@material/tokens":"15.0.0-canary.b26c34a68.0","@material/animation":"15.0.0-canary.b26c34a68.0","@material/elevation":"15.0.0-canary.b26c34a68.0","@material/focus-ring":"15.0.0-canary.b26c34a68.0","@material/typography":"15.0.0-canary.b26c34a68.0","@material/touch-target":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b26c34a68.0_1686169115078_0.9360160532948285","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/fab","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.4fe911371.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"737f181bdfc43e49f30b10d6b79c226fb22c5fc6","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.4fe911371.0.tgz","fileCount":23,"integrity":"sha512-WHQR9M8VnEroytiuuA6auYmk/g33qfYuC7x71+JHm3AezZHncM/qaSsjWqWzWyRJsRcnF9sV9Yx4xTFAyVbK4A==","signatures":[{"sig":"MEQCIE0tkGOJJY/YMItf8suIb/nx/zm3pzUZI386HRCmmNqvAiBcBaTDUnU4UaUqOc2xkVXiAI5wZEymK9dWVyKC1men+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe911371.0","@material/rtl":"15.0.0-canary.4fe911371.0","@material/shape":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/ripple":"15.0.0-canary.4fe911371.0","@material/tokens":"15.0.0-canary.4fe911371.0","@material/animation":"15.0.0-canary.4fe911371.0","@material/elevation":"15.0.0-canary.4fe911371.0","@material/focus-ring":"15.0.0-canary.4fe911371.0","@material/typography":"15.0.0-canary.4fe911371.0","@material/touch-target":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.4fe911371.0_1686179181796_0.4124984403785539","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/fab","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a9b87e5855a8497e668c575c0317c6e62117e55","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a9ff9866f.0.tgz","fileCount":23,"integrity":"sha512-TiEE8hVHbSENoWlagXyutLy87Zw3yf9vDu4hizJEmUbBzvXaogXWZ9NBkJoxFuNqxYy8RbETTpesCErZQv19DA==","signatures":[{"sig":"MEUCIAKFqmTqE0TZw0tDE4uS94qadQQuRMIeFsD2cmDv3WriAiEA2xA5yrWmh3wE+hHxWUgMlxXrA5E1H2QJjuZscui7v0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a9ff9866f.0","@material/rtl":"15.0.0-canary.a9ff9866f.0","@material/shape":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/ripple":"15.0.0-canary.a9ff9866f.0","@material/tokens":"15.0.0-canary.a9ff9866f.0","@material/animation":"15.0.0-canary.a9ff9866f.0","@material/elevation":"15.0.0-canary.a9ff9866f.0","@material/focus-ring":"15.0.0-canary.a9ff9866f.0","@material/typography":"15.0.0-canary.a9ff9866f.0","@material/touch-target":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a9ff9866f.0_1686656313538_0.04427850654562393","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/fab","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b994146f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"620a8da7223d6df314f0423b38e42e3697eae924","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b994146f6.0.tgz","fileCount":23,"integrity":"sha512-ExyDVkNWINpns41Ahj4u8I/OhiVkqI0nmcqjFRtgTJMmKEd4NhlvqIxE7gakAlyS68riJu5UleqTSTVmt8mv2Q==","signatures":[{"sig":"MEUCIFgMlZTRqLhwBFSsdkjc4bEp6QLFsmMCwqHQBNjvbdhBAiEA1M0w5CYMWy9yrfu7kHApZnJkhzD0hU49C4njqQnBW6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b994146f6.0","@material/rtl":"15.0.0-canary.b994146f6.0","@material/shape":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/ripple":"15.0.0-canary.b994146f6.0","@material/tokens":"15.0.0-canary.b994146f6.0","@material/animation":"15.0.0-canary.b994146f6.0","@material/elevation":"15.0.0-canary.b994146f6.0","@material/focus-ring":"15.0.0-canary.b994146f6.0","@material/typography":"15.0.0-canary.b994146f6.0","@material/touch-target":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b994146f6.0_1686776647461_0.8514339986226687","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/fab","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bf0042e316c855a62588cdb41d1f5985b322c5c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":23,"integrity":"sha512-htQdWwptFHQgB39d2QnmH4icmNGTfoZG3wOISwOhx9DeafaDjV5AtzBmFEShYtmSx0v2OSanmuV3DM3/54Jw/g==","signatures":[{"sig":"MEQCIBMreSA91m/2EytCR+/gsRXBxHqaGAa3ET1t8cHtGPIeAiB4R2tJrhGJfbxYwICNc1ANYu3N9Qx+aSKVSf/5Xgj16w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1fb4b1a06.0","@material/rtl":"15.0.0-canary.1fb4b1a06.0","@material/shape":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/ripple":"15.0.0-canary.1fb4b1a06.0","@material/tokens":"15.0.0-canary.1fb4b1a06.0","@material/animation":"15.0.0-canary.1fb4b1a06.0","@material/elevation":"15.0.0-canary.1fb4b1a06.0","@material/focus-ring":"15.0.0-canary.1fb4b1a06.0","@material/typography":"15.0.0-canary.1fb4b1a06.0","@material/touch-target":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.1fb4b1a06.0_1687892252608_0.010206698822597948","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/fab","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d517120e89742bfb415a722df53c02db921227f","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.c64a2776e.0.tgz","fileCount":23,"integrity":"sha512-0v77MddNQ4gUVdpJvYHcH2yqTOBVteSZozmdlkry/WKd63Ek1cmTefmsyPgD4JQy5hP38UB2XWnZKuQ0Uw6wuw==","signatures":[{"sig":"MEUCIQCQJOSrcJ/aefrZa5PZ8sameTaI54C3VXv0pxHgm7uuPAIgIUd+8CHbWLpUFfpypOl0yLGdJpYWuOLKzhTvrGD6t/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c64a2776e.0","@material/rtl":"15.0.0-canary.c64a2776e.0","@material/shape":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/ripple":"15.0.0-canary.c64a2776e.0","@material/tokens":"15.0.0-canary.c64a2776e.0","@material/animation":"15.0.0-canary.c64a2776e.0","@material/elevation":"15.0.0-canary.c64a2776e.0","@material/focus-ring":"15.0.0-canary.c64a2776e.0","@material/typography":"15.0.0-canary.c64a2776e.0","@material/touch-target":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.c64a2776e.0_1687897020808_0.6898875359913152","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/fab","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12c4e56aa6ea778c14d7d11b8b3cb2289d589244","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":23,"integrity":"sha512-M1lIIEUbj7HXpcsYkx+188dN/E9chy9FsPiRe8DH0YrxWwi6q6+R+ApXjXk4ePtG2/eRwdCcsSrLGAvco5FjNw==","signatures":[{"sig":"MEUCIQDzwOjBjb2nPgxRcgZkpayEfECRK6uR5cmsrSug08Cg/wIgOBdcAWJ+1D9KxlmrOeVuaTZ1U/9UAyH75is+UetkxVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b05d9eb7c.0","@material/rtl":"15.0.0-canary.b05d9eb7c.0","@material/shape":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/ripple":"15.0.0-canary.b05d9eb7c.0","@material/tokens":"15.0.0-canary.b05d9eb7c.0","@material/animation":"15.0.0-canary.b05d9eb7c.0","@material/elevation":"15.0.0-canary.b05d9eb7c.0","@material/focus-ring":"15.0.0-canary.b05d9eb7c.0","@material/typography":"15.0.0-canary.b05d9eb7c.0","@material/touch-target":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.b05d9eb7c.0_1688055843000_0.21137353659960545","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/fab","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c52b5dfda64f9351684f5061641c36292f65ba0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.2a9697dc5.0.tgz","fileCount":23,"integrity":"sha512-PBhzJT/N3/zVhgefAKUqBXx9q0X9zogseKvosSBBfj0QOqkPwZ6pfBf2d6clqrpyMAtwwAx2qkMI0NWgoPRi3A==","signatures":[{"sig":"MEQCIBppaJrQPWCS/OkFy1H0RGXPe4ZMRoNZeK2KwQv2yQtZAiA3Az5idZQnDLpTzmQ8W/nHcov9cakQZT1lshjYUlNn+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a9697dc5.0","@material/rtl":"15.0.0-canary.2a9697dc5.0","@material/shape":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/ripple":"15.0.0-canary.2a9697dc5.0","@material/tokens":"15.0.0-canary.2a9697dc5.0","@material/animation":"15.0.0-canary.2a9697dc5.0","@material/elevation":"15.0.0-canary.2a9697dc5.0","@material/focus-ring":"15.0.0-canary.2a9697dc5.0","@material/typography":"15.0.0-canary.2a9697dc5.0","@material/touch-target":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.2a9697dc5.0_1688163251934_0.5402280781394935","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/fab","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b27ed1480fa88294e439845a8cf4697cbbfb4425","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.0c52adeab.0.tgz","fileCount":23,"integrity":"sha512-zSBraW80vvaXeSBU01hYCC3OxSCB33R/vbrYK2C7BybOwEnKt2B/hXkASv1hGDNXis87ycZXEsrfcositH2fUg==","signatures":[{"sig":"MEQCIDsYaQWMNIRqi93yTRXAUhMutRY91IyLCgDS5D9U3/arAiB0lEbX9nycEtgf5fGfVvyPDh14zXbblE0qbteLZBDpEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c52adeab.0","@material/rtl":"15.0.0-canary.0c52adeab.0","@material/shape":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/ripple":"15.0.0-canary.0c52adeab.0","@material/tokens":"15.0.0-canary.0c52adeab.0","@material/animation":"15.0.0-canary.0c52adeab.0","@material/elevation":"15.0.0-canary.0c52adeab.0","@material/focus-ring":"15.0.0-canary.0c52adeab.0","@material/typography":"15.0.0-canary.0c52adeab.0","@material/touch-target":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.0c52adeab.0_1688574369777_0.9360937364563748","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/fab","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.83355c322.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e66b6665b46af13fd242516804ed882bc4b75f2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.83355c322.0.tgz","fileCount":23,"integrity":"sha512-TtNF57yHTjWCh5k5B+ad6u07Ix+IBF8PKA/etYoyur/JZsA3M5Y+1MOzaioo6go2IVTlzT8C+XMLSsmzwu0fJw==","signatures":[{"sig":"MEQCIEh78rfYinmuwUXl1Lc4ylMihuEhoRPagDpwzBWPB10iAiBnxWRx78a5slgh/o7ItGCXByR3k+iLODgr+w3TMNmrOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.83355c322.0","@material/rtl":"15.0.0-canary.83355c322.0","@material/shape":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/ripple":"15.0.0-canary.83355c322.0","@material/tokens":"15.0.0-canary.83355c322.0","@material/animation":"15.0.0-canary.83355c322.0","@material/elevation":"15.0.0-canary.83355c322.0","@material/focus-ring":"15.0.0-canary.83355c322.0","@material/typography":"15.0.0-canary.83355c322.0","@material/touch-target":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.83355c322.0_1689001561403_0.28907941098850376","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/fab","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e75ae184555a6568e882e854657ad1515b34c00","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":23,"integrity":"sha512-dvU0KWMRglwJEQwmQtFAmJcAjzg9VFF6Aqj78bJYu/DAIGFJ1VTTTSgoXM/XCm1YyQEZ7kZRvxBO37CH54rSDg==","signatures":[{"sig":"MEUCIQCtba+hY3o4il/OxgyJG+2iDqPwOmC+PW4/7geZwJ6EqQIgSQGQF8eAAM1RfzL8UzTe8laVLFgnMLSMk+WASlWxzTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bc9ae6c9c.0","@material/rtl":"15.0.0-canary.bc9ae6c9c.0","@material/shape":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/ripple":"15.0.0-canary.bc9ae6c9c.0","@material/tokens":"15.0.0-canary.bc9ae6c9c.0","@material/animation":"15.0.0-canary.bc9ae6c9c.0","@material/elevation":"15.0.0-canary.bc9ae6c9c.0","@material/focus-ring":"15.0.0-canary.bc9ae6c9c.0","@material/typography":"15.0.0-canary.bc9ae6c9c.0","@material/touch-target":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.bc9ae6c9c.0_1691097680129_0.511953606839491","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/fab","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab65be18c2a89e3e54e28119b03c05e97bea6321","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.3c44cd956.0.tgz","fileCount":23,"integrity":"sha512-N3CUaKSZXtVly6FQPTAHqvVfUH+o+hhEJ45VIl+wXoO8jpeyjAvQ78aLvqpv6y6WYyIDhGJ1sNk0zZhkLQNRdQ==","signatures":[{"sig":"MEQCIGGzA+/5PZaE6zQ6tOIKjSW/45ezB8RgtOcTGuFsWoKDAiBN6DSb2t8r3w6rD83jTTBUFGh+8GUb9lTSjft2eOOHkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c44cd956.0","@material/rtl":"15.0.0-canary.3c44cd956.0","@material/shape":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/ripple":"15.0.0-canary.3c44cd956.0","@material/tokens":"15.0.0-canary.3c44cd956.0","@material/animation":"15.0.0-canary.3c44cd956.0","@material/elevation":"15.0.0-canary.3c44cd956.0","@material/focus-ring":"15.0.0-canary.3c44cd956.0","@material/typography":"15.0.0-canary.3c44cd956.0","@material/touch-target":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.3c44cd956.0_1691430459431_0.766406022147379","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/fab","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.02702296e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e40f3e768a48c8dd95b0184f2a6665f1967354bf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.02702296e.0.tgz","fileCount":23,"integrity":"sha512-hiBljiy3CPJ3ceo0fxaZ/NK+mI7KiCVROQG/UKRO1S8oYe6vYq8YTX1wxSevEhrR/XM5hp/+CvH6yaNIJTCw2g==","signatures":[{"sig":"MEQCIDLb42UHxyP8fMmqNVTBcwkm8FtnIidBhnQmSjago86iAiBlnbR7RIULU10Ksu/bBZ5HY3a7P9u3xnPflQN1VOw7Cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02702296e.0","@material/rtl":"15.0.0-canary.02702296e.0","@material/shape":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/ripple":"15.0.0-canary.02702296e.0","@material/tokens":"15.0.0-canary.02702296e.0","@material/animation":"15.0.0-canary.02702296e.0","@material/elevation":"15.0.0-canary.02702296e.0","@material/focus-ring":"15.0.0-canary.02702296e.0","@material/typography":"15.0.0-canary.02702296e.0","@material/touch-target":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.02702296e.0_1692965117084_0.9849541103543344","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/fab","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.872b65832.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d712009ac094925e6d17711332dba29016e141cf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.872b65832.0.tgz","fileCount":23,"integrity":"sha512-XnEazS9tCIpPZtrnq1HKt5pct+6DuQk+HYjuM1LcUJPEQu/V9Wwan8nchPZhu43M6ETy3Cp5TYoe35AjVkx8Ug==","signatures":[{"sig":"MEQCIG9pfHNM8wCJwtENuYfm74TNg4rfj2dzaM5FvXZEXTs+AiB0grphReLI2i0VR9XRlPxAyOXyh1BbY+mwu6BhrMePKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.872b65832.0","@material/rtl":"15.0.0-canary.872b65832.0","@material/shape":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/ripple":"15.0.0-canary.872b65832.0","@material/tokens":"15.0.0-canary.872b65832.0","@material/animation":"15.0.0-canary.872b65832.0","@material/elevation":"15.0.0-canary.872b65832.0","@material/focus-ring":"15.0.0-canary.872b65832.0","@material/typography":"15.0.0-canary.872b65832.0","@material/touch-target":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.872b65832.0_1693397620810_0.9921114336528893","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/fab","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b586d20b9cadba5ce0f766dd046a6991d86d8acc","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.89b2e4122.0.tgz","fileCount":23,"integrity":"sha512-EXMwJ57lDWRlcnsqqlz9bMLV3BswmL57ORoV7Xhb2pE4ywHjaoUqXaBHDgcqrKuDk4izoBhZwEY4efk0bgNXGQ==","signatures":[{"sig":"MEUCIQDVVJD1Yk+V0X3wesVhN3QHlHlt4BLu4M5JwS6nP80XOAIgRu1YNLP9xmDGwFtzihpPwBzx9QBs5kk5mT6gbMVl0WQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89b2e4122.0","@material/rtl":"15.0.0-canary.89b2e4122.0","@material/shape":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/ripple":"15.0.0-canary.89b2e4122.0","@material/tokens":"15.0.0-canary.89b2e4122.0","@material/animation":"15.0.0-canary.89b2e4122.0","@material/elevation":"15.0.0-canary.89b2e4122.0","@material/focus-ring":"15.0.0-canary.89b2e4122.0","@material/typography":"15.0.0-canary.89b2e4122.0","@material/touch-target":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.89b2e4122.0_1693498028008_0.9394157175109279","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/fab","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"206b15d09be343e95f7980f621b46d0ca93b5142","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7a3942e7a.0.tgz","fileCount":23,"integrity":"sha512-WQqK8sTszWI/8L9XqlJTbZFw8SRKl7d1Vg7XuaKv1oyqc8s85zdXDJ8ubUUcSglv0e62e8Zg/5A1biVLEMaFhg==","signatures":[{"sig":"MEUCIHWlX7iq6jUYAVoGr4VC/Qr0JXN0Db6L8JX03glLT1s/AiEA3oyovVc5WZFKhBXYSyejZhGNMWmV9wM22xmDrKdjNTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429730},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7a3942e7a.0","@material/rtl":"15.0.0-canary.7a3942e7a.0","@material/shape":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/ripple":"15.0.0-canary.7a3942e7a.0","@material/tokens":"15.0.0-canary.7a3942e7a.0","@material/animation":"15.0.0-canary.7a3942e7a.0","@material/elevation":"15.0.0-canary.7a3942e7a.0","@material/focus-ring":"15.0.0-canary.7a3942e7a.0","@material/typography":"15.0.0-canary.7a3942e7a.0","@material/touch-target":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.7a3942e7a.0_1693507206856_0.554445685563147","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/fab","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.54feb3020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3109c4b5ee57b7181abf80eb614810bab1875400","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.54feb3020.0.tgz","fileCount":23,"integrity":"sha512-ZQFs1eodp3013SKFLUu0nDq4vG9AlY6PI6C/qeh/ZVXrobgOVcFhlpC/rdD60IxtE230gHNBq22+DbdzdWNdlw==","signatures":[{"sig":"MEUCIQCKJpsazMgXAkQS84Q9d/hbw1vD6YWoSxSoiCrKxuSZKwIgX19iSCWTtmpD1hPzp1NTW3Ah2GT32v8es9Od+BPSvxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435480},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.54feb3020.0","@material/rtl":"15.0.0-canary.54feb3020.0","@material/shape":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/ripple":"15.0.0-canary.54feb3020.0","@material/tokens":"15.0.0-canary.54feb3020.0","@material/animation":"15.0.0-canary.54feb3020.0","@material/elevation":"15.0.0-canary.54feb3020.0","@material/focus-ring":"15.0.0-canary.54feb3020.0","@material/typography":"15.0.0-canary.54feb3020.0","@material/touch-target":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.54feb3020.0_1694466326808_0.8092374876072623","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/fab","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f45a8bb54202da5230e34e65d87d1c4c7ff7418","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":23,"integrity":"sha512-bPke6ZEmjoJAe2EQGsJ4/m8Ed5T9QUhjQlJ79ihdzNamWUTEe4RyewaHs96+8GEV2dUnzNC8/3AXzPqkMXvspg==","signatures":[{"sig":"MEYCIQDMZKC4R+dK2Jm6dARSgf6ojfb2X5KFQUUn+y2Uj9Pf1gIhAPU5TujVyjh85qoU485sAlleuDolz9p2OX1QFK5Y6rDz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429730},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6cda3ce8d.0","@material/rtl":"15.0.0-canary.6cda3ce8d.0","@material/shape":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/ripple":"15.0.0-canary.6cda3ce8d.0","@material/tokens":"15.0.0-canary.6cda3ce8d.0","@material/animation":"15.0.0-canary.6cda3ce8d.0","@material/elevation":"15.0.0-canary.6cda3ce8d.0","@material/focus-ring":"15.0.0-canary.6cda3ce8d.0","@material/typography":"15.0.0-canary.6cda3ce8d.0","@material/touch-target":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.6cda3ce8d.0_1694483136510_0.07139420084510784","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/fab","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.205b20b36.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77ec36ad84c32ae9748f30e0faa5a46a302b221c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.205b20b36.0.tgz","fileCount":23,"integrity":"sha512-DPsjdCrASVeA5Yq5YCrnzoV7mMD51ZavCoACMCHUnL9FSVqXO3JK68CnjWMm2iF9U0tmylA0AGGk3praeX/2Rw==","signatures":[{"sig":"MEYCIQDykgGEBGLbyGHlmJ84sd2mV/L9P1SoOOn3AC8BlJV3RQIhAOXKMhS/Lwo7e1Cql5PCMZQwwMtNGGHrV/rBo+JaZaO/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432441},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.205b20b36.0","@material/rtl":"15.0.0-canary.205b20b36.0","@material/shape":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/ripple":"15.0.0-canary.205b20b36.0","@material/tokens":"15.0.0-canary.205b20b36.0","@material/animation":"15.0.0-canary.205b20b36.0","@material/elevation":"15.0.0-canary.205b20b36.0","@material/focus-ring":"15.0.0-canary.205b20b36.0","@material/typography":"15.0.0-canary.205b20b36.0","@material/touch-target":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.205b20b36.0_1694625495608_0.4223780611415635","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/fab","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.22bf82024.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba87b36b9b5a7bf1516ad7a2500d59de8a52f79d","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.22bf82024.0.tgz","fileCount":23,"integrity":"sha512-3tLfau8DbS96tuQTbFKAIONVle5hTpqmZzcPTg+flY5qT0UFGbqxy0vKY2Qm+OjsnXaxzzdDETfKUCBfGuHHiQ==","signatures":[{"sig":"MEUCIQC2dtGiXM9fQ0kRGKOsTzO5hk9g6H8I3ermrV2oX+o4JwIgHZVq6rS3vp+pR6NC3dYQq62iOdSZp4BtZrM+cLWPucw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432441},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.22bf82024.0","@material/rtl":"15.0.0-canary.22bf82024.0","@material/shape":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/ripple":"15.0.0-canary.22bf82024.0","@material/tokens":"15.0.0-canary.22bf82024.0","@material/animation":"15.0.0-canary.22bf82024.0","@material/elevation":"15.0.0-canary.22bf82024.0","@material/focus-ring":"15.0.0-canary.22bf82024.0","@material/typography":"15.0.0-canary.22bf82024.0","@material/touch-target":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.22bf82024.0_1695028334604_0.6582586794013143","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/fab","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a246a4439.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f37666a4f40b80a79e36f2b2e369a5f4b792bd85","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a246a4439.0.tgz","fileCount":23,"integrity":"sha512-XUex3FNqxPD1i/4jITucB/RWTNkkdv52mbNmwrvbuThZlhuhyH9GzOQYTDop/b2783TPcv++xr8UUbuh8GWYzA==","signatures":[{"sig":"MEYCIQC1p3BCG/3+DtUz40d7OwHqIv88E/gyLlwYpHgn+tR3GQIhAP4Mp3YO1M91FsWbxCsWER0XuP7WaKd3GLx2NWPAGwxF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432441},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a246a4439.0","@material/rtl":"15.0.0-canary.a246a4439.0","@material/shape":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/ripple":"15.0.0-canary.a246a4439.0","@material/tokens":"15.0.0-canary.a246a4439.0","@material/animation":"15.0.0-canary.a246a4439.0","@material/elevation":"15.0.0-canary.a246a4439.0","@material/focus-ring":"15.0.0-canary.a246a4439.0","@material/typography":"15.0.0-canary.a246a4439.0","@material/touch-target":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a246a4439.0_1695059181986_0.3509249375366452","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/fab","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d153db62b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"243836ab78410a865a845b41e018ccc3bd3af6d8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d153db62b.0.tgz","fileCount":23,"integrity":"sha512-U+UgUNy+x5CZ8B3CqmBhRROJYd109EDJUQnkD2dni6hF6nAgZxQx/7tlqzg9Bs/080jQg1//0vaL5GVt24NAMA==","signatures":[{"sig":"MEYCIQDinjT67+PnFbHOR62sDEl4dnluPmh3qeSzryg9MHWYMgIhAPyqpdP5ydbt5HLOlZXqpyMUewMeFtfhMnVH2mbMdj5X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432441},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d153db62b.0","@material/rtl":"15.0.0-canary.d153db62b.0","@material/shape":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/ripple":"15.0.0-canary.d153db62b.0","@material/tokens":"15.0.0-canary.d153db62b.0","@material/animation":"15.0.0-canary.d153db62b.0","@material/elevation":"15.0.0-canary.d153db62b.0","@material/focus-ring":"15.0.0-canary.d153db62b.0","@material/typography":"15.0.0-canary.d153db62b.0","@material/touch-target":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d153db62b.0_1695150923032_0.16066840112285763","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/fab","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e42cfb3d625a476c3a183cc4d42d1d05e6ed5ebf","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.2528c1c3b.0.tgz","fileCount":23,"integrity":"sha512-AtP4Z/9gA6tKSnPgJWH6sTTX2FDDoBgBhKxPwRjyaRyNBGhOUjag5HBUiHPd72ddP7cjghQwSR8m5aLxWVFMMQ==","signatures":[{"sig":"MEUCICVD8G/nPrfyaUMXm/rzadBv6g4iugK2XkM4LJD5fYUCAiEA3IrWJt05q3buTcWfgLC5VAjf5vkWnRabpf70keBUFLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432441},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2528c1c3b.0","@material/rtl":"15.0.0-canary.2528c1c3b.0","@material/shape":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/ripple":"15.0.0-canary.2528c1c3b.0","@material/tokens":"15.0.0-canary.2528c1c3b.0","@material/animation":"15.0.0-canary.2528c1c3b.0","@material/elevation":"15.0.0-canary.2528c1c3b.0","@material/focus-ring":"15.0.0-canary.2528c1c3b.0","@material/typography":"15.0.0-canary.2528c1c3b.0","@material/touch-target":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.2528c1c3b.0_1695233209764_0.4552634665505364","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/fab","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cdf58cabe6ec4dde8f1f43788b9fa7ef962d36c","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.1728a6dcf.0.tgz","fileCount":23,"integrity":"sha512-hF1ZCkCNhfxCNeq1pig4W6CY4W3OqIxeqDbmiT1IAqXjp7Wx3gu9Or7p5/H3AwAWT7ubfmDm2VO3SYJAWnLNnw==","signatures":[{"sig":"MEQCICOAqKnPgrIgxp/iq1jYWocyb6I3OwftUDcsJx6oYHK1AiBnueUif1hUkOItoQjBkdJzxU4dWEJ7BMh5X6D5ldx8ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432441},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1728a6dcf.0","@material/rtl":"15.0.0-canary.1728a6dcf.0","@material/shape":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/ripple":"15.0.0-canary.1728a6dcf.0","@material/tokens":"15.0.0-canary.1728a6dcf.0","@material/animation":"15.0.0-canary.1728a6dcf.0","@material/elevation":"15.0.0-canary.1728a6dcf.0","@material/focus-ring":"15.0.0-canary.1728a6dcf.0","@material/typography":"15.0.0-canary.1728a6dcf.0","@material/touch-target":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.1728a6dcf.0_1695691408025_0.8900123868169838","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/fab","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4011e3897901a66eebab9883eaa1c4e2bae1cee","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.ebb636f3d.0.tgz","fileCount":23,"integrity":"sha512-axZcYLVFeeA/L7CW2ojq7l1skAEOgYM4DL65q5arU8KvvkSMxoM4FxZUtes7RITh8WakY3UVvJS8zAv1l2L86Q==","signatures":[{"sig":"MEUCIQDU6WmvIcHocFx9W17tIjOp5HTTPMMQ4vl3OMv56X6jsgIgMCErcBb0Aqm49PkSROFo7Dw3T/8+JGUKPOYB0LNe8F4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432441},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ebb636f3d.0","@material/rtl":"15.0.0-canary.ebb636f3d.0","@material/shape":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/ripple":"15.0.0-canary.ebb636f3d.0","@material/tokens":"15.0.0-canary.ebb636f3d.0","@material/animation":"15.0.0-canary.ebb636f3d.0","@material/elevation":"15.0.0-canary.ebb636f3d.0","@material/focus-ring":"15.0.0-canary.ebb636f3d.0","@material/typography":"15.0.0-canary.ebb636f3d.0","@material/touch-target":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.ebb636f3d.0_1696016679928_0.40910731901929887","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/fab","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69b3127226af71bf0c3bddc153b7a5274f9d1cea","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":23,"integrity":"sha512-etxmvs1xEZbjJDcGjoCqWNdfmYKzCEy5HYA1XpEUI0eUFhnv20H1COxaLRtScv8R2c8A4ig6G4uQ8gQhF95WAg==","signatures":[{"sig":"MEQCIEJltNc/mvUsL6UB5qp3HtdNPrNX9+uEi6e7uAe6FmfjAiA4TVMuo4BeJslUW80NobVyO088Z6BHTwmrKXqnLfconA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432441},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0d21ecc9.0","@material/rtl":"15.0.0-canary.c0d21ecc9.0","@material/shape":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/ripple":"15.0.0-canary.c0d21ecc9.0","@material/tokens":"15.0.0-canary.c0d21ecc9.0","@material/animation":"15.0.0-canary.c0d21ecc9.0","@material/elevation":"15.0.0-canary.c0d21ecc9.0","@material/focus-ring":"15.0.0-canary.c0d21ecc9.0","@material/typography":"15.0.0-canary.c0d21ecc9.0","@material/touch-target":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.c0d21ecc9.0_1696880222269_0.08519345860491523","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/fab","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.127a44b28.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abbaa1f3e2c41681d5ebb2cf2e93e77f7068dfcb","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.127a44b28.0.tgz","fileCount":23,"integrity":"sha512-qORs3B+Acyi40M6mZsJchDnGF1X+cJB3Ffuq6ddCXUIInyjr/XIlV6hnVy90MJVQUzviV1XMNBLSphlT010mjg==","signatures":[{"sig":"MEYCIQCT6vgF7Vguxsx74Pq7Fco28pG12EyM2Ur9FuTGFelvFgIhAOcsJ9VJ+tXyNabYUg6wEM4l+Y0q4rAhOhTlT44/H5Ep","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435074},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.127a44b28.0","@material/rtl":"15.0.0-canary.127a44b28.0","@material/shape":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/ripple":"15.0.0-canary.127a44b28.0","@material/tokens":"15.0.0-canary.127a44b28.0","@material/animation":"15.0.0-canary.127a44b28.0","@material/elevation":"15.0.0-canary.127a44b28.0","@material/focus-ring":"15.0.0-canary.127a44b28.0","@material/typography":"15.0.0-canary.127a44b28.0","@material/touch-target":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.127a44b28.0_1697140844408_0.4198743715906432","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/fab","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.0ad128337.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2449c89e9c6d56caf151475679735a5be03558e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.0ad128337.0.tgz","fileCount":23,"integrity":"sha512-49FkrhFOFSvDC1i+3IFeEDRSltgYxOOo9TdcS70/Bo4eFwMzBmO2QNN4jfDxXZED+/m1QQpr4mQO6d9aBWXICQ==","signatures":[{"sig":"MEUCIHC2tu4w+qkCQT1dFGIa+rHTYWg+CRsmSlIbm8mqnqPyAiEAtww6td+z6jaUSDnNJcNad4zAl3pVuHP7MX5KTFjqS90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435074},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ad128337.0","@material/rtl":"15.0.0-canary.0ad128337.0","@material/shape":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/ripple":"15.0.0-canary.0ad128337.0","@material/tokens":"15.0.0-canary.0ad128337.0","@material/animation":"15.0.0-canary.0ad128337.0","@material/elevation":"15.0.0-canary.0ad128337.0","@material/focus-ring":"15.0.0-canary.0ad128337.0","@material/typography":"15.0.0-canary.0ad128337.0","@material/touch-target":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.0ad128337.0_1697741534490_0.7500521514133083","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/fab","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.9cec94097.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2fdef4c054f242d6d0c8275b106d55c7508374e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.9cec94097.0.tgz","fileCount":23,"integrity":"sha512-UXyYry3JNaeLMn33+7NJuB1jjdC+i4QQujpA03LIZE+JPfJYqOquTVT/tUMHB1p6Ue7QEGmcawMJq/6Yvm2/jg==","signatures":[{"sig":"MEQCIFmdT/CswudOIpLmYs1Xjjcx2r3BneqvEMb20B3zkGuEAiBls8rlF7co7YWtFnAM70hgwoWPzTlTN/8x4gVGqh9FGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435074},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9cec94097.0","@material/rtl":"15.0.0-canary.9cec94097.0","@material/shape":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/ripple":"15.0.0-canary.9cec94097.0","@material/tokens":"15.0.0-canary.9cec94097.0","@material/animation":"15.0.0-canary.9cec94097.0","@material/elevation":"15.0.0-canary.9cec94097.0","@material/focus-ring":"15.0.0-canary.9cec94097.0","@material/typography":"15.0.0-canary.9cec94097.0","@material/touch-target":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.9cec94097.0_1697756974629_0.08740242064187664","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/fab","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"790a3b840d333b685fc1943b29991e8856cc8da5","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":23,"integrity":"sha512-x1V96z6IUaoLL2oxVPTXJFWe191WsUnAN5wt8JP2MmLnFpOth+Xotdw0G+6+8nUBHN9YDlPZpIR0OoHBomkGzw==","signatures":[{"sig":"MEUCICfkTlMyoC7UO62ZWBXuGC4gexSn02kp6kDcWSmi6cQSAiEA3etVifqzjuPMvZ4H9EnKJHSNTDVMZLdlgKqYvExmzvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435074},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c51a0bbcc.0","@material/rtl":"15.0.0-canary.c51a0bbcc.0","@material/shape":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/ripple":"15.0.0-canary.c51a0bbcc.0","@material/tokens":"15.0.0-canary.c51a0bbcc.0","@material/animation":"15.0.0-canary.c51a0bbcc.0","@material/elevation":"15.0.0-canary.c51a0bbcc.0","@material/focus-ring":"15.0.0-canary.c51a0bbcc.0","@material/typography":"15.0.0-canary.c51a0bbcc.0","@material/touch-target":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.c51a0bbcc.0_1700081920829_0.6366221675680332","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/fab","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00c5c2288f27b43a7f5f644868cbda7fa5b41ff3","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.d76666ad4.0.tgz","fileCount":23,"integrity":"sha512-m+6W/QQ88um5Mlur2U8kvp7Nauo2wcyyJFTwsC/sagw6OOWcDAYGEi/urf02P4RP3+kBbeZhWfhWqopoqHghQQ==","signatures":[{"sig":"MEUCID53EJGGnSWIYLKRQbx+SU4YvQGwqpw018OObbpauqd3AiEAh5OBaZAFBroeb5pTpve6JYSL5uGHLjCcVBpOgBlbybg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435074},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d76666ad4.0","@material/rtl":"15.0.0-canary.d76666ad4.0","@material/shape":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/ripple":"15.0.0-canary.d76666ad4.0","@material/tokens":"15.0.0-canary.d76666ad4.0","@material/animation":"15.0.0-canary.d76666ad4.0","@material/elevation":"15.0.0-canary.d76666ad4.0","@material/focus-ring":"15.0.0-canary.d76666ad4.0","@material/typography":"15.0.0-canary.d76666ad4.0","@material/touch-target":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.d76666ad4.0_1701123185199_0.8897566774686627","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/fab","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cc2b4ef35241a3ad028e7e93cce56f8a612da7e","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.8656bf0e0.0.tgz","fileCount":23,"integrity":"sha512-Cbu47xvsIhQZsIF6eBr4WWHdMKSSKvlHV/5Ogfl1S2PonT1lcrMgdxgkPYTQGoZwyPa3DqCGzvl9PGwQMBsAmA==","signatures":[{"sig":"MEYCIQDMk0lS97m1gscfR7pGn3YJ/UYO8j2s635h4TNiWyu4JAIhAP8AdoooXCyATIHQ3VujR0d+7NeGyi85zTZeyaPYiGPd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435074},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8656bf0e0.0","@material/rtl":"15.0.0-canary.8656bf0e0.0","@material/shape":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/ripple":"15.0.0-canary.8656bf0e0.0","@material/tokens":"15.0.0-canary.8656bf0e0.0","@material/animation":"15.0.0-canary.8656bf0e0.0","@material/elevation":"15.0.0-canary.8656bf0e0.0","@material/focus-ring":"15.0.0-canary.8656bf0e0.0","@material/typography":"15.0.0-canary.8656bf0e0.0","@material/touch-target":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.8656bf0e0.0_1702415916795_0.39336453522948833","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/fab","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e99acd7dc990e81ccb0deb834e6b6c3bd1747ea8","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7f224ddd4.0.tgz","fileCount":23,"integrity":"sha512-4h76QrzfZTcPdd+awDPZ4Q0YdSqsXQnS540TPtyXUJ/5G99V6VwGpjMPIxAsW0y+pmI9UkLL/srrMaJec+7r4Q==","signatures":[{"sig":"MEUCIQC0qbz232H3IE4ZOk9x4oK2okZ/kuC2r5IouJQcsq1HLQIgZIu0SQJr/JAKJZfHamT6MEt54HUyBXSUygSs+1/FpFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435074},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f224ddd4.0","@material/rtl":"15.0.0-canary.7f224ddd4.0","@material/shape":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/ripple":"15.0.0-canary.7f224ddd4.0","@material/tokens":"15.0.0-canary.7f224ddd4.0","@material/animation":"15.0.0-canary.7f224ddd4.0","@material/elevation":"15.0.0-canary.7f224ddd4.0","@material/focus-ring":"15.0.0-canary.7f224ddd4.0","@material/typography":"15.0.0-canary.7f224ddd4.0","@material/touch-target":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.7f224ddd4.0_1703743745679_0.730091985760053","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/fab","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72f2e9420fe217d982c886c1ace671b77fca57c9","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":23,"integrity":"sha512-FoJFAk+iopK9OS+ZqtAzTtLccn+sCqEcK9qecWDCLIVaBieTL5MqW1bdmwN1oaOVdQSrys7VNiskbrTuUDA9RA==","signatures":[{"sig":"MEUCIQDZUCv1MtDI0L6qCjVCWXkddGEqlx8QAWbKqEH/uwA/IwIgAsHCaFS1SGjaLYFnXVcyF1APo372JxfHAW40GSTsx3k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435074},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0b8a90c0.0","@material/rtl":"15.0.0-canary.a0b8a90c0.0","@material/shape":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/ripple":"15.0.0-canary.a0b8a90c0.0","@material/tokens":"15.0.0-canary.a0b8a90c0.0","@material/animation":"15.0.0-canary.a0b8a90c0.0","@material/elevation":"15.0.0-canary.a0b8a90c0.0","@material/focus-ring":"15.0.0-canary.a0b8a90c0.0","@material/typography":"15.0.0-canary.a0b8a90c0.0","@material/touch-target":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.a0b8a90c0.0_1707333568266_0.6660831499517295","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/fab","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4196f9a47da8d213fe0ecef0f462bb1f0cf341c4","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.e50b478eb.0.tgz","fileCount":23,"integrity":"sha512-zrmdhqUhF5TYEneEimHpMBerei7sjXNYNWHKv22fgWTAQv1LEsqnq0e0vI9xJ2UxsDavMqPKx3Z4ErwTkq+1Tg==","signatures":[{"sig":"MEQCIDo5POviyYu8b0ZPr6sJmisZqvpIyL1SorNWUcX/r2N4AiAELwh02cmEmDBkraalnCwxomQqdSZJg4bGTXlebpjlqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435074},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e50b478eb.0","@material/rtl":"15.0.0-canary.e50b478eb.0","@material/shape":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/ripple":"15.0.0-canary.e50b478eb.0","@material/tokens":"15.0.0-canary.e50b478eb.0","@material/animation":"15.0.0-canary.e50b478eb.0","@material/elevation":"15.0.0-canary.e50b478eb.0","@material/focus-ring":"15.0.0-canary.e50b478eb.0","@material/typography":"15.0.0-canary.e50b478eb.0","@material/touch-target":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.e50b478eb.0_1707415677422_0.2752444226461741","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/fab","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"807b4096a78e4e7e21be3f8368aaf3eef9e9cb23","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.c43b3438b.0.tgz","fileCount":23,"integrity":"sha512-pisWa4S4tJmCItgq48QpR6MxFiMTOUAuAkD5U4gzKSTJzQlUpyZeOfaFMfwGn073EAR6++cr/G/t8RGa1xcV8A==","signatures":[{"sig":"MEUCIFFmF/XXEqVVe3dxD4iX/PSl+v5ISPszmuJgoYqoT7DRAiEAzzic5QImBfMkBhsoimKwpFedXYn3J9T1ID+HzVRsR/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435074},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c43b3438b.0","@material/rtl":"15.0.0-canary.c43b3438b.0","@material/shape":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/ripple":"15.0.0-canary.c43b3438b.0","@material/tokens":"15.0.0-canary.c43b3438b.0","@material/animation":"15.0.0-canary.c43b3438b.0","@material/elevation":"15.0.0-canary.c43b3438b.0","@material/focus-ring":"15.0.0-canary.c43b3438b.0","@material/typography":"15.0.0-canary.c43b3438b.0","@material/touch-target":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.c43b3438b.0_1708719453445_0.4748454079087807","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/fab","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.819498d8c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d4a83a97c363780ab993c5a536db237a592c653","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.819498d8c.0.tgz","fileCount":23,"integrity":"sha512-K2IaL8D1C8M1uAphJG4oB+NJwCVYF/lPhf5V8Xd4FMs53y8MknT2y9Xo/LOVOEAHSSxlKqt+JwDbv8rEXWM6Pg==","signatures":[{"sig":"MEUCIQCdNmbeDkMUZGKeIelqF3DIpze/sxDmwXkpfSe1lD+NuAIgQ0COVD3E85RUGwcD0BHuLdhkleWMyjsoQXn84C4BLtc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435074},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.819498d8c.0","@material/rtl":"15.0.0-canary.819498d8c.0","@material/shape":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/ripple":"15.0.0-canary.819498d8c.0","@material/tokens":"15.0.0-canary.819498d8c.0","@material/animation":"15.0.0-canary.819498d8c.0","@material/elevation":"15.0.0-canary.819498d8c.0","@material/focus-ring":"15.0.0-canary.819498d8c.0","@material/typography":"15.0.0-canary.819498d8c.0","@material/touch-target":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.819498d8c.0_1710515697620_0.8350427057990966","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/fab","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.453a6248a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c1e29249b01368c1d94c9ee342ba274e6430ea0","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.453a6248a.0.tgz","fileCount":23,"integrity":"sha512-y0W3ODg0hlX+3punLo8y0qwJEozbjBRI6EnL5UF/74XQuL2zR0sOu2WuveS6AF9YyeunSXDCAk9ZFGArj2DDmQ==","signatures":[{"sig":"MEUCIEpcAUU0CjfzaJpeaTFKC8VD+DKZPdA0sWfT9Lqu5BkfAiEArCt3j4JYmmc5iv4mrSa3MawB8BV5WAKtHXi5SG7m6xE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435074},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.453a6248a.0","@material/rtl":"15.0.0-canary.453a6248a.0","@material/shape":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/ripple":"15.0.0-canary.453a6248a.0","@material/tokens":"15.0.0-canary.453a6248a.0","@material/animation":"15.0.0-canary.453a6248a.0","@material/elevation":"15.0.0-canary.453a6248a.0","@material/focus-ring":"15.0.0-canary.453a6248a.0","@material/typography":"15.0.0-canary.453a6248a.0","@material/touch-target":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.453a6248a.0_1711386812502_0.8332604994446264","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/fab","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cee6b1b962f202e96f7a9e4a407ac9060cc51b7","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.68edc03c6.0.tgz","fileCount":23,"integrity":"sha512-JKlh84Ee2a0trH3+q0hkt1a+tQWhrwz2VTu1xBYLbgTzrb2PnAJhan9z56cAVTMNTTyYNm8phXD8/wzuZZqOSA==","signatures":[{"sig":"MEUCIExvNSlXfV2/5kB0E931GLVY2cyJ4IJ/JF0e7aGZGrAwAiEAlkBCKHxf01ChLLIlCIl5MI0jF2HK7Msy19dRTBhTnfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435074},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68edc03c6.0","@material/rtl":"15.0.0-canary.68edc03c6.0","@material/shape":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/ripple":"15.0.0-canary.68edc03c6.0","@material/tokens":"15.0.0-canary.68edc03c6.0","@material/animation":"15.0.0-canary.68edc03c6.0","@material/elevation":"15.0.0-canary.68edc03c6.0","@material/focus-ring":"15.0.0-canary.68edc03c6.0","@material/typography":"15.0.0-canary.68edc03c6.0","@material/touch-target":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.68edc03c6.0_1712603163850_0.853462760441974","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/fab","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7eaec7486547b7445011b337f22ca2b968a74178","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.5bebc0064.0.tgz","fileCount":23,"integrity":"sha512-u8DcYLXU0y9yQl5i0Xa6QrDOOezSbOGJEn0DtsP2m9s8ArONtRtkNmHgJp+k1xLy2Dtfl7HDCbtUfjj0k7keLA==","signatures":[{"sig":"MEUCIQCmUiE3v1nv7YyO3NO/wbwcgWKVtYmVLNFeIP4WtEn5KwIgNVp698L2m74iIk00MjZx7ki7wGQtZjc/dJ11cGY1o0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435074},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5bebc0064.0","@material/rtl":"15.0.0-canary.5bebc0064.0","@material/shape":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/ripple":"15.0.0-canary.5bebc0064.0","@material/tokens":"15.0.0-canary.5bebc0064.0","@material/animation":"15.0.0-canary.5bebc0064.0","@material/elevation":"15.0.0-canary.5bebc0064.0","@material/focus-ring":"15.0.0-canary.5bebc0064.0","@material/typography":"15.0.0-canary.5bebc0064.0","@material/touch-target":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.5bebc0064.0_1712871648745_0.38556793902606357","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/fab","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.311f29a60.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"632a32e4e9ad31876e507f398ac462925b563f30","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.311f29a60.0.tgz","fileCount":23,"integrity":"sha512-4fwB/SEpry9y/iYXwCkvQYKOBe9w5AEtQnV6kCGj/m9lR1kJluZzk9Ar8gw0Pgscb1Fk+IslkssCgZxf8epQ/A==","signatures":[{"sig":"MEUCIFw6J7ByGU6WEUro8Z3/h1WAg3f97oON/y/w2TWn806RAiEAjFpC9fcGzgJMZ8aGO3PxF8KYSpDXtnTWqjtYLbBjakc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437456},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311f29a60.0","@material/rtl":"15.0.0-canary.311f29a60.0","@material/shape":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/ripple":"15.0.0-canary.311f29a60.0","@material/tokens":"15.0.0-canary.311f29a60.0","@material/animation":"15.0.0-canary.311f29a60.0","@material/elevation":"15.0.0-canary.311f29a60.0","@material/focus-ring":"15.0.0-canary.311f29a60.0","@material/typography":"15.0.0-canary.311f29a60.0","@material/touch-target":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.311f29a60.0_1713895204145_0.743970862695406","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/fab","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.65c10a622.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54fe9b59afac3d58e996d7adb34a184cd946c906","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.65c10a622.0.tgz","fileCount":23,"integrity":"sha512-phlzlF33hMgU4M6ZN17lePAyPLk6Pb4pAFviIUVZyuNQ2N3DFFoahLlM+28d8OYCTlIZfgyjSI4F5OXsnePEOg==","signatures":[{"sig":"MEUCIBMRAvdfa7v5mAzVCE+vTS74eVzofMHmMKu22rE2RvheAiEA2LIUiIvc2JvKnnyyleEwfgBZ6RbEWdLZjrcdr98+f5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440019},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c10a622.0","@material/rtl":"15.0.0-canary.65c10a622.0","@material/shape":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/ripple":"15.0.0-canary.65c10a622.0","@material/tokens":"15.0.0-canary.65c10a622.0","@material/animation":"15.0.0-canary.65c10a622.0","@material/elevation":"15.0.0-canary.65c10a622.0","@material/focus-ring":"15.0.0-canary.65c10a622.0","@material/typography":"15.0.0-canary.65c10a622.0","@material/touch-target":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.65c10a622.0_1714070932038_0.08346804882389325","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/fab","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32b375f5da5d23b8b7e9f78e6ff97c1738aa5145","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":23,"integrity":"sha512-D135IQwSxCBUfzDUrXvyYNHQKVqEieUbVEfBi/NzBlLR+VDWdqvo5S/0/DJP3X1lvpGZZImrU0PmExZNtMA+TQ==","signatures":[{"sig":"MEQCIDHjzYmNWu0YcEtsZy8+duicZBXJiBw4FBaYErbcGR33AiAqszlJKoEMRsJiLlScCFHTZQ0+G/tKFrH1CjrgrenA6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440019},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4b35cb7d0.0","@material/rtl":"15.0.0-canary.4b35cb7d0.0","@material/shape":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/ripple":"15.0.0-canary.4b35cb7d0.0","@material/tokens":"15.0.0-canary.4b35cb7d0.0","@material/animation":"15.0.0-canary.4b35cb7d0.0","@material/elevation":"15.0.0-canary.4b35cb7d0.0","@material/focus-ring":"15.0.0-canary.4b35cb7d0.0","@material/typography":"15.0.0-canary.4b35cb7d0.0","@material/touch-target":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.4b35cb7d0.0_1714651374243_0.6721287680638428","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/fab","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6a2706214b0e5216600e5dc121479efe45ca42a","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.f80ac92b0.0.tgz","fileCount":23,"integrity":"sha512-/1NVuOqkO9udyZh96dgtAbkdzqiMWddAJrK22nvIssakH3/ylHSTZaiqkpI8hAEAxy5s4h/U5scuzlv+kIg9uA==","signatures":[{"sig":"MEUCIE1mcDNFaM+HE8oxlMcc7sCKHpX6R6HriLSLF9yRUNI5AiEAo7o5rUKnWItCJE8u33Wj0bQitnexJRBazI+KmhvnDHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440019},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f80ac92b0.0","@material/rtl":"15.0.0-canary.f80ac92b0.0","@material/shape":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/ripple":"15.0.0-canary.f80ac92b0.0","@material/tokens":"15.0.0-canary.f80ac92b0.0","@material/animation":"15.0.0-canary.f80ac92b0.0","@material/elevation":"15.0.0-canary.f80ac92b0.0","@material/focus-ring":"15.0.0-canary.f80ac92b0.0","@material/typography":"15.0.0-canary.f80ac92b0.0","@material/touch-target":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.f80ac92b0.0_1714651989271_0.9214643290230145","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/fab","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5ae7356b729caa4eb68a71a1507ff51cf1e4914","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.2f5b899bc.0.tgz","fileCount":23,"integrity":"sha512-QwVb0f0rA5DMVP0fTj6tCvxoEch5FNxbi9+GXBuaKKfyWfuVd8FQwWWqDECu3co/4eu8C/y4I5OtRtaRF809sw==","signatures":[{"sig":"MEYCIQCqckgKiWGp/NQCDqu2qZcr4ugfwUH2xOb/kHiDljGQiwIhAJK7suG9tiMvo5f4SNSvshslKwG4MycP0Wkh/zYPPN6M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440019},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f5b899bc.0","@material/rtl":"15.0.0-canary.2f5b899bc.0","@material/shape":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/ripple":"15.0.0-canary.2f5b899bc.0","@material/tokens":"15.0.0-canary.2f5b899bc.0","@material/animation":"15.0.0-canary.2f5b899bc.0","@material/elevation":"15.0.0-canary.2f5b899bc.0","@material/focus-ring":"15.0.0-canary.2f5b899bc.0","@material/typography":"15.0.0-canary.2f5b899bc.0","@material/touch-target":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.2f5b899bc.0_1716213389717_0.6348558322908353","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/fab","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","floating action button","fab"],"license":"MIT","_id":"@material/fab@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09f97f01d81231f083ec52977cf436f4c07c80d2","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.cfec83c74.0.tgz","fileCount":23,"integrity":"sha512-e9rBWt33KyMulKbGZv6IePGCA5MVUJHRQh86fmbM//8/V+/5LXAhaTtK+1RPcq0WaSgBHSn8cAjPOWfSJFLX9Q==","signatures":[{"sig":"MEUCIQDuCcX3B3+Jewx/E1XdXVNl8j3X6b17tMd3ernv910VUwIgeREFwke80t8ouxy8St32ML5weQv+UIrBjfU5AJHqxsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440019},"readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web floating action button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfec83c74.0","@material/rtl":"15.0.0-canary.cfec83c74.0","@material/shape":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/ripple":"15.0.0-canary.cfec83c74.0","@material/tokens":"15.0.0-canary.cfec83c74.0","@material/animation":"15.0.0-canary.cfec83c74.0","@material/elevation":"15.0.0-canary.cfec83c74.0","@material/focus-ring":"15.0.0-canary.cfec83c74.0","@material/typography":"15.0.0-canary.cfec83c74.0","@material/touch-target":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_15.0.0-canary.cfec83c74.0_1716231400854_0.09168716346187522","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/fab","description":"The Material Components for the web floating action button component","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","floating action button","fab"],"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-fab"},"sideEffects":false,"dependencies":{"@material/animation":"15.0.0-canary.423edc3dc.0","@material/dom":"15.0.0-canary.423edc3dc.0","@material/elevation":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/focus-ring":"15.0.0-canary.423edc3dc.0","@material/ripple":"15.0.0-canary.423edc3dc.0","@material/rtl":"15.0.0-canary.423edc3dc.0","@material/shape":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","@material/tokens":"15.0.0-canary.423edc3dc.0","@material/touch-target":"15.0.0-canary.423edc3dc.0","@material/typography":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/fab@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-vaHeIQiZadX5xB0yQHcHsFYJBbvKENsrxAhM0LUlaK93RveDDtqb3jwbs0Bp8w9pM19hQhvsLIFSXGtgaE/ouw==","shasum":"c997acc80fbe9191290991e1e3d8f5505b954414","tarball":"https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.423edc3dc.0.tgz","fileCount":23,"unpackedSize":440019,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmQNLlf1fOFKEMpT0t045ZeJY5f0xoEO0N5kPIOdUBwAIhANqYTf29+PozOUyIfiweAw7h5reByW1P1uCUvljGHp55"}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fab_15.0.0-canary.423edc3dc.0_1719425528476_0.5867814794199526"},"_hasShrinkwrap":false}},"time":{"created":"2016-12-15T17:52:17.971Z","modified":"2024-06-26T18:12:09.144Z","0.1.0":"2016-12-15T17:52:17.971Z","0.2.0":"2017-01-09T15:57:17.960Z","0.3.0":"2017-01-23T16:49:38.416Z","0.3.1":"2017-02-06T19:04:44.106Z","0.3.2":"2017-02-21T17:27:35.662Z","0.3.3":"2017-03-06T17:02:11.823Z","0.3.4":"2017-04-03T15:28:02.844Z","0.3.5":"2017-04-18T14:51:20.422Z","0.3.6":"2017-05-01T15:43:08.044Z","0.3.7":"2017-05-15T16:26:04.136Z","0.3.8":"2017-05-17T14:28:22.352Z","0.3.9":"2017-05-30T19:04:37.952Z","0.3.10":"2017-06-26T16:10:54.282Z","0.3.11":"2017-07-10T15:58:50.869Z","0.3.12":"2017-07-24T15:49:17.844Z","0.3.13":"2017-08-07T20:48:28.816Z","0.3.14":"2017-08-21T17:27:49.838Z","0.3.15":"2017-08-24T14:46:45.497Z","0.3.16":"2017-08-25T17:20:56.509Z","0.4.0":"2017-09-05T20:16:07.598Z","0.5.0":"2017-09-18T18:35:42.288Z","0.5.1":"2017-09-20T15:21:15.370Z","0.5.2":"2017-10-02T21:11:46.248Z","0.23.0":"2017-10-16T21:02:18.958Z","0.24.0":"2017-10-30T19:11:22.508Z","0.25.0":"2017-11-13T20:02:27.391Z","0.26.0":"2017-11-27T22:26:26.658Z","0.27.0":"2017-12-11T19:35:32.774Z","0.28.0":"2018-01-08T18:55:11.259Z","0.29.0":"2018-01-22T18:30:57.286Z","0.30.0":"2018-02-05T22:02:47.923Z","0.31.0":"2018-02-20T18:23:00.433Z","0.32.0":"2018-03-05T22:08:42.459Z","0.33.0":"2018-03-19T16:40:00.352Z","0.34.0":"2018-04-02T21:51:54.137Z","0.34.1":"2018-04-03T23:39:46.636Z","0.35.0":"2018-04-23T22:40:16.560Z","0.36.0-0":"2018-05-29T15:22:16.056Z","0.36.0":"2018-06-04T15:37:55.184Z","0.36.1":"2018-06-18T15:40:36.883Z","0.37.0":"2018-07-02T22:13:54.389Z","0.37.1":"2018-07-16T21:19:20.870Z","0.38.0":"2018-07-30T17:07:06.961Z","0.38.1":"2018-08-13T20:39:01.123Z","0.39.0-0":"2018-08-16T15:16:08.127Z","0.39.0":"2018-08-27T17:40:33.077Z","0.39.1":"2018-08-31T21:36:26.476Z","0.39.2":"2018-09-11T16:55:06.775Z","0.39.3":"2018-09-11T17:18:54.891Z","0.40.0":"2018-09-24T20:01:07.033Z","0.40.1":"2018-10-08T20:54:36.328Z","0.41.0":"2018-10-29T20:22:04.991Z","0.42.0":"2018-12-04T22:54:45.759Z","0.43.0":"2019-01-07T19:49:09.185Z","0.44.0":"2019-02-04T18:23:50.546Z","0.44.1":"2019-02-19T23:02:47.347Z","1.0.0-0":"2019-02-27T23:59:37.000Z","1.0.0-1":"2019-03-04T23:33:30.949Z","1.0.0":"2019-03-06T21:08:20.957Z","1.0.1":"2019-03-11T22:07:24.874Z","1.1.0":"2019-03-26T19:25:59.927Z","1.1.1":"2019-04-08T20:13:59.533Z","2.0.0":"2019-04-29T17:40:09.002Z","2.1.1":"2019-05-10T17:25:17.857Z","2.3.0":"2019-05-28T21:23:51.044Z","3.0.0-alpha.0":"2019-06-12T04:06:57.445Z","3.0.0-alpha.1":"2019-06-12T19:02:19.817Z","3.0.0":"2019-06-25T22:28:00.689Z","3.1.0-alpha.0":"2019-07-16T13:29:16.993Z","3.1.0":"2019-07-22T22:02:47.832Z","4.0.0-alpha.0":"2019-08-07T21:09:35.354Z","4.0.0-canary.0":"2019-09-05T04:37:59.386Z","4.0.0-canary.1":"2019-09-09T20:20:52.970Z","3.2.0":"2019-09-12T21:53:38.017Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:42.572Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:28.482Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:16.062Z","4.0.0-canary.199534d61.0":"2019-09-27T18:58:01.761Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:22.861Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:46.175Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:42.540Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:04:48.251Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:08:55.079Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:30.964Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:11:03.895Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:24.615Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:20.422Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:08.217Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:09.686Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:01:50.414Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:30.599Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:01:39.960Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:11:02.836Z","4.0.0":"2019-11-02T18:11:51.884Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:33:57.503Z","5.0.0-canary.58500806e.0":"2019-11-08T15:36:01.454Z","5.0.0-canary.66299b646.0":"2019-11-08T20:33:58.953Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:31.013Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:32.909Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:40.827Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:38:03.200Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:58:59.270Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:31:07.593Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:12.981Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:08.329Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:48:52.761Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:43.744Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:10:05.233Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:10:55.828Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:19.950Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:55:25.907Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:17:05.389Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:48.690Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:27.664Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:20:13.594Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:20:43.831Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:21.019Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:23:02.410Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:25.486Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:13.422Z","5.0.0-canary.50f110a6c.0":"2019-12-10T17:00:00.370Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:38.055Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:36.421Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:38.299Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:10:20.195Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:37:16.009Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:10:27.735Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:36.674Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:40:53.847Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:17:18.274Z","5.0.0-canary.391674a26.0":"2019-12-18T19:17:32.823Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:31.125Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:20:42.099Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:24:27.448Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:50:12.784Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:25:16.047Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:41.436Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:26.421Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:26.409Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:10:08.349Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:27:06.667Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:48:08.645Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:20.307Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:54:58.251Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:45:59.048Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:03:34.375Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:26.765Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:38.091Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:09:47.730Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:45.424Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:20.340Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:38.870Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:55:53.713Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T15:00:05.930Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:16:55.755Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:10:38.836Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:49.468Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:35.193Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:23.600Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:39:57.755Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:17:23.900Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:35.490Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:10.743Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:28.481Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:57:13.985Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:09.541Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:41:49.596Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:35.342Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:11:07.892Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:22:38.380Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:42:55.019Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:58:37.097Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:16:33.218Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:28.354Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:40:39.147Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:16.988Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:01:09.806Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:10:33.870Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:36.041Z","5.0.0-canary.426913342.0":"2020-01-10T01:44:35.258Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:38.981Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:11.148Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:27:19.056Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:19:08.985Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:32:46.043Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:13:54.761Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:39.497Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:53:17.039Z","5.0.0-canary.60354c577.0":"2020-01-14T22:46:13.058Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:39:04.880Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:20.287Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:10:39.963Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:18.832Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:48:36.761Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:46.625Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:09.435Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:14.857Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:07:16.979Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:36:59.737Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:35.672Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:17:31.522Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:21:01.763Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:13.258Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:31:04.189Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:40:02.781Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:11:49.651Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:50:23.079Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:37.297Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:46:36.011Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:16.152Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:23:00.376Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:55:49.000Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:57:56.657Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:17:16.465Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:09:43.158Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:12:55.088Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:55:29.765Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:26.379Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:47:50.846Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:21:07.147Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:46:14.636Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:32:37.877Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:56:14.372Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:24:29.244Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:29:37.873Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:43:35.714Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:12.856Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:09:54.724Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:55:57.434Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:16:54.044Z","5.0.0-canary.45985457b.0":"2020-01-29T23:33:11.246Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:37:34.917Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:25.312Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:23:26.585Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:15.762Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:10:28.032Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:12:52.293Z","5.0.0-canary.535398572.0":"2020-02-03T18:12:50.987Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:04:00.948Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:00:50.028Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:03:48.959Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:33:24.438Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:30:03.513Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:28.260Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:55:40.289Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:59:37.160Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:48:57.782Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:25:15.078Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:11:48.930Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:43:36.337Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:43:23.524Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:51:40.627Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:44:16.661Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:06:23.958Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:23:51.359Z","5.0.0":"2020-02-14T00:09:06.472Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:48:22.434Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:43:53.794Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:22:45.023Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:19.705Z","6.0.0-canary.765caef18.0":"2020-02-21T17:33:19.763Z","6.0.0-canary.949562303.0":"2020-02-21T20:37:54.995Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:13.909Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:00:54.611Z","5.1.0":"2020-02-25T21:38:18.229Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:38:56.659Z","6.0.0-canary.781434a92.0":"2020-02-25T23:28:21.568Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:03:42.888Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:12:20.785Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:10:49.822Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:25:56.085Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:18.717Z","6.0.0-canary.98b843417.0":"2020-03-05T18:31:13.169Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:22:27.375Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:47:02.499Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:22:18.422Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:02:34.690Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:37:19.947Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:58:31.896Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:05:38.031Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:33:28.996Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:25:40.277Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:38:13.233Z","6.0.0-canary.bec065920.0":"2020-03-12T20:20:40.795Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:21:02.875Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:25.278Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:48:08.705Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:34:56.453Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:36:04.823Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:53:40.294Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:24.412Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:15:26.145Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:43:41.694Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:47:21.204Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:18:34.318Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:05:09.027Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:56:40.260Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:19:45.719Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:56:32.106Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:56:08.609Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:09:46.371Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:14:11.714Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:04:16.908Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:24:54.932Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:36:47.067Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:41:57.499Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:32:44.084Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:30:09.109Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:47:33.242Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:23:05.061Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:46:43.879Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:31:16.770Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:52:57.367Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:34:13.807Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:06:14.923Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:10:37.570Z","6.0.0-canary.c02642273.0":"2020-04-15T16:17:42.582Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:43:34.432Z","6.0.0-canary.490fbdc09.0":"2020-04-16T06:00:00.320Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:26:57.660Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:19:27.918Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:54:43.223Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:00:18.244Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:33:11.619Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:41:23.532Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:03:12.539Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:21:46.652Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:18:14.666Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:58:38.775Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:56:20.230Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:20:36.332Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:15:11.394Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:18:45.062Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:42:16.585Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:07:33.177Z","7.0.0-canary.8540808be.0":"2020-04-23T17:26:19.096Z","6.0.0":"2020-04-23T17:26:55.813Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:46:01.018Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:21:27.825Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:06:19.491Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:19:06.889Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:44:11.927Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:32:36.063Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:07:27.969Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:17:43.890Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:44:18.876Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:29:55.822Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:28:10.513Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:33:03.774Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:42:42.729Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:26:06.303Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:22:57.420Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:36:05.896Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:47:49.927Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:19:21.373Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:31:30.142Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:34:17.354Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:59:32.853Z","7.0.0-canary.09f591967.0":"2020-05-05T21:04:42.764Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:09:47.357Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:08:08.722Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:55:24.747Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:18:58.214Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:49:44.689Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:38:43.966Z","7.0.0-canary.119e21426.0":"2020-05-08T20:22:48.786Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:07:45.165Z","7.0.0-canary.e84444387.0":"2020-05-08T21:31:50.364Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:13:24.408Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:29:25.170Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:32:48.915Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:27:33.015Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:25:19.232Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:18:26.049Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:47:37.296Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:43:02.930Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:51:44.158Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:53:53.735Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:44:20.974Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:18:16.349Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:51:00.968Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:09:35.920Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:38:27.195Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:37:06.525Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:50:48.167Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:03:05.018Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:13:03.599Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:41:26.396Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:02:21.043Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:14:56.788Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:18:27.328Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:20:21.225Z","7.0.0-canary.740860e78.0":"2020-05-21T17:26:55.626Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:28:57.204Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:29:21.169Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:32:02.289Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:33:21.290Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:48:17.981Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:21:20.158Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T21:00:09.092Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:04:12.749Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:28:51.047Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:32:16.884Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:33:13.557Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:46:36.586Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:45:37.060Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:07:49.844Z","7.0.0-canary.01de07011.0":"2020-05-26T19:52:49.830Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:35:21.111Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:13:57.194Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:55:08.236Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:59:33.400Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:16:45.254Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:21:04.955Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:30:12.693Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:38:29.079Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:37:11.012Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:51:31.538Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:55:38.983Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:50:33.851Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:15:25.146Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:05:17.016Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:40:54.357Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:25:46.707Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:44:30.464Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:49:16.146Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:49:03.351Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:26:21.551Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:02:58.945Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:23:49.801Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:52:30.992Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:46:53.365Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:03:37.028Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:57:54.183Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:09:24.295Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:12:51.195Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:14:30.516Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:14:48.919Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:04:49.956Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:44:36.876Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:42:14.380Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:57:24.700Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:54:17.923Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:26:30.628Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:16:55.537Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:40:09.025Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:47:06.254Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:08:52.633Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:31:09.817Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:49:48.374Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:21:52.092Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:16:09.283Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:04:48.690Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:16:49.922Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:21:50.021Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:28:15.614Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:48:43.148Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:11:05.097Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:20:23.822Z","7.0.0-canary.10b505785.0":"2020-06-19T20:21:53.091Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:38:05.098Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:40:19.323Z","7.0.0-canary.c20727498.0":"2020-06-19T20:43:08.795Z","7.0.0-canary.4e360ae94.0":"2020-06-19T20:59:54.028Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:02:21.181Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:03:27.846Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:28:37.191Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:30:50.881Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:31:50.712Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:34:31.108Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:24:10.852Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:15:05.180Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:17:44.133Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:25:41.481Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:53:53.432Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:57:52.692Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:29:47.674Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:28:40.443Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:34:07.901Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:40:24.525Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:48:44.353Z","7.0.0-canary.080965f39.0":"2020-06-23T15:18:04.937Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:00:32.677Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:25:30.042Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:48:26.178Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:00:52.989Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:03:28.317Z","7.0.0":"2020-06-23T19:11:23.896Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:12:15.688Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:41:38.244Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:56:24.151Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:32:04.408Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:57:31.024Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:53:45.235Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:39:03.006Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:02:16.462Z","8.0.0-canary.38197b443.0":"2020-06-25T21:23:02.836Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:39:11.650Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:17:17.750Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:48:43.659Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:24:04.984Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:15:46.964Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:31:12.075Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:52:03.422Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:06:01.031Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:14:47.430Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:47:27.028Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:56:44.007Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:27:39.920Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:39:24.485Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:41:58.207Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:48:39.194Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:16:14.510Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:44:37.003Z","8.0.0-canary.d850de590.0":"2020-07-09T18:06:01.004Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:35:44.994Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:36:33.688Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:52:13.237Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:21:05.491Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:12:56.110Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:43:18.140Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:07:42.927Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:34:48.499Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:20:42.936Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:11:04.176Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:13:29.621Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:15:34.580Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:34:59.971Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:09:53.629Z","8.0.0-canary.01db89053.0":"2020-07-16T16:40:06.062Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:20:30.077Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:56:09.382Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:50:42.394Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:47:42.768Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:23:46.601Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:34:16.873Z","8.0.0-canary.12a109680.0":"2020-07-22T23:04:02.317Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:53:28.087Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:50:12.785Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:47:39.777Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:47:57.976Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:59:19.136Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T21:00:10.839Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:24:11.556Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:24:31.605Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:44:11.922Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:11:15.942Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:57:19.310Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:13:54.872Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:07:05.516Z","8.0.0-canary.75553837c.0":"2020-07-27T15:13:02.986Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:38:38.098Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:47:40.740Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:59:47.797Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:33:08.310Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:09:05.819Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:52:08.257Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:58:43.206Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:58:54.762Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:54:36.940Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:51:00.282Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:39:51.605Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:53:06.117Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:16:35.423Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:36:59.775Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:49:47.377Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:21:17.879Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:35:32.381Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:39:20.815Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:15:31.890Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:26:03.778Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:02:01.781Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:11:08.748Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:15:51.468Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:28:10.445Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:10:49.923Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:22:03.352Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:46:43.034Z","8.0.0-canary.005e86a9b.0":"2020-07-30T18:00:35.480Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:09:07.536Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:20:58.689Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:32:03.619Z","8.0.0-canary.f041a48c9.0":"2020-07-30T23:00:16.196Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:50:59.873Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:23:33.585Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:51:15.548Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:54:23.853Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:55:05.665Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:55:14.455Z","8.0.0-canary.72258f898.0":"2020-08-04T01:17:57.000Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:48:57.965Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:24:48.929Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:49:23.159Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:54:35.569Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:20:34.232Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:39:56.938Z","8.0.0-canary.08090126b.0":"2020-08-06T19:33:09.669Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:50:37.143Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:27:20.067Z","8.0.0-canary.96a640534.0":"2020-08-06T22:42:04.275Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:51:55.102Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:21:12.552Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:49:12.287Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:53:07.995Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:31:25.824Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:02:33.394Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:08:45.127Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:04:45.590Z","8.0.0-canary.760873445.0":"2020-08-12T21:43:49.513Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:53:50.542Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:01:19.892Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:29:14.305Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:12:58.191Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:29:42.198Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:50:31.640Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:18:01.726Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:51:37.003Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:16:45.915Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:30:28.657Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:23:01.332Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:39:01.273Z","8.0.0-canary.000d64815.0":"2020-08-17T17:04:53.519Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:32:28.138Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:37:23.951Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:42:37.272Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:24:29.660Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:21:35.344Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:33:37.903Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:38:16.109Z","8.0.0-canary.546277d32.0":"2020-08-20T16:44:05.980Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:00:31.689Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:19:04.656Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:15:41.977Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:58:16.242Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:07:04.446Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:53:09.441Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:29:25.485Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:12:18.925Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:00:55.054Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:41:24.346Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:04:24.492Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:56:57.329Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:49:57.609Z","8.0.0-canary.911014711.0":"2020-08-27T16:08:38.774Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:56:19.455Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:56:42.858Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:57:25.553Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:13:24.525Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:16:34.683Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:11:08.677Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:50:27.327Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:56:12.553Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:10:48.763Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:00:46.876Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:33:18.740Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:55:00.898Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:52:29.932Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:59:25.089Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:26:28.897Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:43:43.700Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:11:09.323Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:18:28.710Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:43:47.708Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:14:48.335Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:46:57.011Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:32:57.496Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:36:35.950Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:51:59.652Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:25:14.951Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:54:54.654Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:10:45.969Z","8.0.0-canary.d71622574.0":"2020-10-09T16:32:30.256Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:54:42.178Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:47:08.841Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:57:29.439Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:16:21.899Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:18:19.955Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:05:00.857Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:08:48.037Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:52:17.746Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:32:21.655Z","8.0.0-canary.596e98424.0":"2020-10-28T16:04:21.365Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:12:57.353Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:45:46.645Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:13:30.272Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:42:00.556Z","8.0.0-canary.c61db90a5.0":"2020-10-28T19:00:35.829Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:33:23.199Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:00:57.756Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:05:40.247Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T23:00:03.592Z","8.0.0":"2020-11-02T23:00:21.120Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:22:11.063Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:28:49.088Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:37:51.352Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:09:59.803Z","9.0.0-canary.419e03572.0":"2020-11-04T01:33:46.659Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:46:33.849Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:06:00.337Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:57:16.654Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:16:43.310Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:45:23.446Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:21:34.509Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:50:35.964Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:46:27.554Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:17:58.072Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:25:47.183Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:28:01.336Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:58:47.305Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:44:36.588Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:35:30.553Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:26:46.043Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:53:03.395Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:56:00.174Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:19:06.678Z","9.0.0-canary.a41527604.0":"2020-11-19T20:00:52.471Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:56:33.080Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:48:11.782Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:09:37.689Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:16:02.891Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:31:45.482Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:34:51.912Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:41:03.242Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:52:01.277Z","9.0.0-canary.fd22355f7.0":"2020-11-30T23:00:15.240Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:57:29.718Z","9.0.0-canary.977585650.0":"2020-12-02T14:42:57.035Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:50:16.756Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:08:11.373Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:17:06.901Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:23:09.536Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:30:23.117Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:42:12.643Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:58:57.610Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:01:50.971Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:45:57.910Z","9.0.0-canary.832668d33.0":"2020-12-04T18:06:37.475Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:29:39.217Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:42:22.598Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:50:13.235Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:02:12.085Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:13:59.099Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:28:59.799Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:33:02.038Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:46:30.711Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:06:02.929Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:11:43.065Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:50:30.890Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:08:15.075Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:46:27.157Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:29:05.526Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:06:12.458Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:08:01.095Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:02:30.521Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:28:18.931Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:08:08.374Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:42:37.981Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:05:45.332Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:46:15.592Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:09:08.936Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:48:35.916Z","9.0.0":"2020-12-29T19:46:43.897Z","10.0.0-canary.776c18681.0":"2020-12-30T00:40:46.486Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:12:32.649Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:47:04.943Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:04:53.069Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:10:19.639Z","10.0.0-canary.365c69360.0":"2021-01-05T17:48:55.115Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:01:14.538Z","10.0.0-canary.766981c15.0":"2021-01-05T22:40:58.880Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:50:37.130Z","10.0.0-canary.968735356.0":"2021-01-06T15:51:36.859Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:44:53.644Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:26:58.734Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:34:50.242Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:20:31.631Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:52:10.547Z","10.0.0-canary.089de519c.0":"2021-01-08T22:21:14.636Z","10.0.0-canary.163119837.0":"2021-01-08T23:45:57.061Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:24:48.865Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:13:01.265Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:55:58.654Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:07:44.450Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:10:55.640Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:34:45.259Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:27:16.230Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:54:31.376Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:20:02.450Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:08:43.574Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:55:40.819Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:10:17.314Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:05:31.480Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:57:06.362Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:52:47.131Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:52:09.260Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:36:34.261Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:24:45.756Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:10:53.497Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:45:39.462Z","10.0.0-canary.623af861e.0":"2021-01-26T03:45:56.318Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:34:08.446Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:46:49.268Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:04:53.719Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:27:59.479Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:20:53.125Z","10.0.0-canary.994873795.0":"2021-01-27T14:51:52.232Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:03:03.872Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:33:11.515Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:04:25.951Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:04:19.174Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:15:24.040Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:21:10.177Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:50:00.843Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:43:47.304Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:19:12.277Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:34:45.922Z","10.0.0-canary.05f249666.0":"2021-02-04T17:51:00.491Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:43:59.332Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:35:38.721Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:01:19.517Z","10.0.0-canary.533092a90.0":"2021-02-05T03:47:25.086Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:18:14.676Z","10.0.0":"2021-02-05T16:19:40.899Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:42:50.657Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:32:21.591Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:05:30.898Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:04:19.083Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:35:20.279Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:18:09.641Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:01:09.469Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:42:01.226Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:53:23.413Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:17:36.997Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:07:36.671Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:42:35.528Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:31:38.323Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T16:00:07.343Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:31:38.977Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:12:24.255Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:17:01.470Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:10:37.843Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:25:47.995Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:58:46.206Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:45:27.749Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:35:44.817Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:06:18.355Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:38:59.661Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:24:09.749Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:43:06.892Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:28:12.473Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:37:42.107Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:13:49.141Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:37:20.340Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:46:26.031Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:01:21.662Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:50:05.056Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:46:31.296Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:31:16.480Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:14:49.656Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:33:49.231Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:35:04.565Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:35:33.095Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:51:17.732Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:16:17.633Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:49:00.057Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:23:12.559Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:37:51.213Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:08:06.196Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:39:29.267Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:53:47.680Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:21:41.391Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:32:40.825Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:24:50.046Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:42:46.997Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:01:37.885Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:40:48.429Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:50:08.751Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:46:20.582Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:40:29.457Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:44:44.906Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:28:07.788Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:53:00.364Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:58:01.805Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:25:33.493Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:50:26.961Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:03:20.774Z","11.0.0-canary.81911b707.0":"2021-03-11T18:23:52.688Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:37:25.967Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:02:01.922Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:09:30.443Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:33:49.217Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:41:03.232Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:44:53.446Z","11.0.0-canary.73a227194.0":"2021-03-12T00:24:40.827Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:03:39.526Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:35:38.827Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:20:38.718Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:48:22.698Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:12:57.444Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:40:07.276Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:41:56.672Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:02:15.175Z","11.0.0-canary.6072ed604.0":"2021-03-17T23:00:02.812Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:20:34.125Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:17:47.732Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:44:41.132Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:18:22.312Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:39:00.313Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:51:52.768Z","11.0.0-canary.cbc57c600.0":"2021-03-19T01:00:15.374Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:13:02.667Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:34:20.438Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:44:40.130Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:05:39.750Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:38:11.621Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:08:24.767Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:03:24.273Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:54:48.872Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:05:07.275Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:30:09.092Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:16:57.211Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:33:18.238Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:58:04.867Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:58:00.457Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:49:04.073Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:21:18.079Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:34:13.223Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:12:08.839Z","11.0.0-canary.24609b822.0":"2021-03-31T20:57:32.075Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:05:49.182Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:01:27.285Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:47:47.502Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:24:36.711Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:05:39.642Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:01:03.554Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:42:43.308Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:45:15.048Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:54:28.302Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:58:26.084Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:36:21.900Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:39:11.989Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:35:50.787Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:11:39.497Z","11.0.0-canary.24255c408.0":"2021-04-09T20:12:57.918Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:54:04.804Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:16:07.336Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:43:58.924Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:03:32.755Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:04:40.176Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:31:55.119Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:46:45.986Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:54:46.244Z","11.0.0":"2021-04-15T22:58:54.366Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:45:35.545Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:47:26.383Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:41:49.275Z","12.0.0-canary.b52196498.0":"2021-04-19T19:58:22.454Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:09:08.667Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:57:45.393Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:38:24.391Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:49:57.059Z","12.0.0-canary.cad489689.0":"2021-04-22T16:50:03.489Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:35:01.622Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:13:46.038Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:43:40.027Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:50:00.669Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:10:27.393Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:20:24.457Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:59:09.351Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:37:00.078Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:58:15.366Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:46:46.353Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:08:02.253Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:13:28.771Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:48:30.044Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:54:17.170Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:45:23.800Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:49:48.967Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:43:45.390Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:18:38.939Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:24:21.644Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:02:37.855Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:38:19.018Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:22:54.239Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:54:11.566Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:23:10.883Z","12.0.0-canary.33148231f.0":"2021-05-03T19:39:23.799Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:46:29.268Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:42:20.417Z","12.0.0-canary.de997644b.0":"2021-05-04T17:28:54.021Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:55:44.167Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:00:57.857Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:11:06.913Z","12.0.0-canary.718c90178.0":"2021-05-04T19:28:23.207Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:31:04.779Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:34:33.155Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:50:14.769Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:58:42.425Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:03:43.117Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:07:09.674Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:22:26.441Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:16:58.063Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:27:52.841Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:00:44.275Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:41:40.208Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:39:52.975Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:30:46.957Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:57:13.568Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:30:02.071Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:44:14.857Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:43:54.821Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:19:30.585Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:24:07.097Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:10.277Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:57:27.797Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:09:33.325Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:25:22.411Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:59:15.735Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:59:02.774Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:17:56.958Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:23:08.322Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:20:24.241Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:23:49.739Z","12.0.0-canary.33a954852.0":"2021-05-13T15:08:17.876Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:31:39.345Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:08:37.932Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:14:16.742Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:41:15.054Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:54:29.497Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:13:45.421Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:28:56.273Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:57:25.463Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:51:36.906Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:19:15.143Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:06:27.267Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:15:01.812Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:35:59.858Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:05:28.550Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:46:09.772Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:55:00.691Z","12.0.0-canary.464a00286.0":"2021-06-03T14:46:47.598Z","12.0.0-canary.474de7878.0":"2021-06-03T15:14:52.121Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:46:54.301Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:14:48.350Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:42:15.237Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:48:59.331Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:22:48.648Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:41:27.162Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:06:50.935Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:07:52.726Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:36:24.161Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:36:20.612Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:06:26.095Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:46:57.799Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:39:52.151Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:18:40.169Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:22:36.299Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:30:40.714Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:04:09.220Z","12.0.0-canary.271fff902.0":"2021-06-15T22:51:39.544Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:52:33.988Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:06:55.251Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:06:02.853Z","12.0.0-canary.940550232.0":"2021-06-17T19:40:50.110Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:25:07.405Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:12:19.598Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:41:09.577Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:37:38.327Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:12:38.308Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:25:11.028Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:28:00.655Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:15:31.625Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:53:07.747Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:41:28.405Z","12.0.0-canary.796811db7.0":"2021-07-01T00:03:58.862Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:07:11.143Z","12.0.0-canary.435866d32.0":"2021-07-02T18:21:47.764Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:00:39.080Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:09:52.470Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:04:17.978Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:04:47.381Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:26:06.909Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:51:59.964Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:49:58.554Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:10:05.916Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:44:53.024Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:54:32.450Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:51:16.459Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:23:06.224Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:48:44.417Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:08:46.762Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:22:31.872Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:42:57.597Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:07:47.090Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:58:36.605Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:59:45.574Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:14:37.670Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:43:48.180Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:42:38.869Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:09:35.400Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:57:27.462Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:06:10.806Z","12.0.0-canary.791311bba.0":"2021-07-20T22:08:10.408Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:36:35.806Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:50:33.262Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:07:02.197Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:38:54.438Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:12:54.136Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:32:49.670Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:56:23.609Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:00:31.751Z","12.0.0":"2021-07-27T19:50:33.320Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:52:08.957Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:18:51.082Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:26:28.500Z","13.0.0-canary.28656298a.0":"2021-07-29T18:13:41.250Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:35:56.958Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:05:42.277Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:34:01.005Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:23:59.010Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:14:30.603Z","13.0.0-canary.a80c8b2c2.0":"2021-08-05T00:00:24.879Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:57:09.980Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:42:56.119Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:18:47.080Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:50:34.221Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:15:31.460Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:08:03.091Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:17:56.162Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:18:14.567Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:22:14.526Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:41:32.943Z","13.0.0-canary.f4241a42a.0":"2021-08-11T17:00:15.382Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:29:26.986Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:55:57.032Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:45:58.660Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:49:08.728Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:08:46.271Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:22:31.899Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:54:53.417Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:14:55.451Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:24:30.354Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:02:55.403Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:18:18.735Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:49:30.899Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:32:56.009Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:27:20.010Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:21:01.318Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:44:56.929Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:27:21.965Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:29:25.691Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:17:49.638Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:28:33.891Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:49:10.954Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:18:51.390Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:33:55.117Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:54:28.649Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T22:00:06.353Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:38:56.487Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:06:38.568Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:09:53.082Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:45:02.239Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:55:00.953Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:12:05.131Z","13.0.0-canary.611db508e.0":"2021-09-02T03:15:53.707Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:38:28.049Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:45:27.985Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:47:28.287Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:31:10.230Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:32:45.925Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:33:07.060Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:43:58.662Z","13.0.0-canary.72464476c.0":"2021-09-07T15:35:18.955Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:34:32.965Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:44:16.645Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:36:38.242Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:02:23.534Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:11:28.782Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:26:30.198Z","13.0.0-canary.864798678.0":"2021-09-09T18:37:56.171Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:22:52.425Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:04:45.656Z","13.0.0-canary.08398f880.0":"2021-09-13T23:35:22.004Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:51:23.535Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:13:23.643Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T22:00:08.723Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:18:24.930Z","13.0.0-canary.80a583365.0":"2021-09-17T20:36:29.211Z","13.0.0-canary.83900936a.0":"2021-09-17T23:24:58.579Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:37.057Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:48:13.326Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:21.169Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:12:41.191Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:58:34.097Z","13.0.0-canary.65084baff.0":"2021-09-23T21:26:08.948Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:42:36.321Z","13.0.0":"2021-09-24T19:46:30.779Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:15.357Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:11:40.787Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:29:58.841Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:43:44.224Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:57:34.253Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:31:58.246Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:29:11.150Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:47:35.354Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:22:51.685Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:00:19.342Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:22:31.272Z","14.0.0-canary.348665978.0":"2021-10-21T14:51:25.878Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:13:00.675Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:53:30.787Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:02:14.330Z","14.0.0-canary.a986df922.0":"2021-10-29T21:35:41.123Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:06:35.739Z","14.0.0-canary.468392606.0":"2021-11-11T19:40:48.910Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:27.780Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:57:24.832Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:59:10.787Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:25:11.975Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:37:05.640Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:30:28.204Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:14:29.409Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:40:59.316Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:50:56.779Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:17:42.148Z","14.0.0-canary.554c71829.0":"2021-11-16T16:20:22.706Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:25:12.615Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T19:00:17.941Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:25:55.804Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:40:19.210Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:36:11.122Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:05:33.961Z","14.0.0-canary.93134d453.0":"2021-11-23T15:40:18.935Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:33:17.414Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:38:24.090Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:51:40.826Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:57:03.941Z","14.0.0-canary.17a072535.0":"2021-12-02T18:06:18.012Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:45:26.624Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:07:37.477Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:26:24.801Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:30:15.632Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:56:14.651Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:40:50.163Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:14:01.011Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:10:43.692Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:33:27.251Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:46:54.303Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:15:13.889Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:02:17.424Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:55:23.055Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:34:03.983Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:50:43.062Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:43:27.043Z","14.0.0-canary.390220e42.0":"2022-01-17T16:47:15.001Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:53:46.296Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:18:33.222Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:55:25.400Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:04:24.865Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:32:59.398Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:14:11.803Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:38:12.749Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:42:25.384Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:50:54.122Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:23:51.554Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:58:12.423Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:47:48.617Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:54:44.772Z","14.0.0-canary.96ea061c1.0":"2022-02-09T19:00:24.162Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:07:37.511Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:30:32.007Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:50:03.033Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:17:11.164Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:04:57.390Z","14.0.0-canary.868793776.0":"2022-02-22T19:36:53.061Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:46:55.638Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:33:58.349Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:28:09.987Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:01:33.932Z","14.0.0-canary.16c166154.0":"2022-03-08T23:23:08.555Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:29:23.615Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:30:23.887Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:50:48.920Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:04:21.634Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:18:37.750Z","14.0.0-canary.32b391398.0":"2022-03-17T18:00:03.628Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:39:59.588Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:52:50.384Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:44:51.052Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:51:33.035Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:19:19.578Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:40:41.371Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:05:20.638Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:35:43.505Z","14.0.0-canary.344d52823.0":"2022-03-29T18:44:04.054Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:33:43.496Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:15:02.344Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:24:59.496Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:24:10.775Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:06:30.779Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:48:30.452Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:12:06.041Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:02:41.253Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:46:11.166Z","14.0.0":"2022-04-28T16:56:48.412Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:57:49.136Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:15:28.970Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:32:19.967Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:56:50.157Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:59:08.454Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:25:40.681Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:41:09.244Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:19:17.491Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:45:02.974Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:27:44.288Z","15.0.0-canary.05930a453.0":"2022-05-13T18:48:17.209Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:01:49.482Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:33:30.316Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:03:34.271Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:22:38.968Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:58:37.271Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:40:59.720Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:21:57.903Z","15.0.0-canary.df47894db.0":"2022-06-13T17:09:25.867Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:30:34.020Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:58:11.722Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:23:20.155Z","15.0.0-canary.764de225d.0":"2022-06-29T16:27:51.744Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:29:12.366Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:55:46.827Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:55:16.856Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:51:51.072Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:31:49.851Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:03:28.750Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:32:15.868Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:39:28.195Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:40:05.032Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:37:53.090Z","15.0.0-canary.88db01990.0":"2022-07-12T11:40:57.090Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:29:45.150Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:35:47.292Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:06:04.556Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:08:59.397Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:50:13.303Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:44:03.223Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:01:59.228Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:05:59.749Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:25:03.057Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:47:38.580Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:20:52.250Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:30:36.720Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:22:41.388Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:41:01.812Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:57:57.954Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:10:05.748Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:05:28.277Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:46:32.425Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:14:24.597Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:41:39.211Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:21:42.988Z","15.0.0-canary.10196647d.0":"2022-08-03T21:54:37.675Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:43:46.067Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:21:32.814Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:46:45.551Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:02:08.809Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:06:36.769Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:45:48.638Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:21:51.486Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:19:06.927Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:20:39.911Z","15.0.0-canary.4299717da.0":"2022-09-07T16:16:36.049Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:19:47.572Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:04:44.386Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:03:49.912Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:40:01.772Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:55:40.530Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:18:32.281Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:21:19.363Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:36:53.518Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:25:18.840Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:48:30.732Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:08:58.099Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:57:11.014Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:58:23.441Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:45:35.258Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:31:57.543Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:58:05.550Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:56:48.069Z","15.0.0-canary.db414b864.0":"2022-09-28T14:53:26.918Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:07:50.137Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:56:30.635Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:31:57.443Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:14:31.501Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:21:47.924Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:18:56.795Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:20:13.530Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:04:28.012Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:15:34.590Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:51:37.589Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:37:57.018Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:56:08.916Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:06:09.409Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:08:11.765Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:38:25.313Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:49:24.682Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:02:43.973Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:58:58.724Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:21:34.392Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:41:53.071Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:51:34.646Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:14:13.352Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:51:52.795Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:18:16.759Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:56:38.464Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:22:49.010Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:57:25.003Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:40:45.334Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:42:40.714Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:23:42.863Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:43:02.753Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:13:41.420Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:17:29.797Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:37:28.360Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:12:10.213Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:57:01.112Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:06:06.898Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:19:28.940Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:59:28.479Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:45:21.084Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:30:52.147Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:15:34.518Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:32:46.524Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:49:48.978Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:56:44.323Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:37:12.241Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:11:02.876Z","15.0.0-canary.909b48215.0":"2022-11-03T04:08:12.216Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:19:29.966Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:59:25.866Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:57:21.994Z","15.0.0-canary.215506426.0":"2022-11-05T01:06:18.972Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:04:24.138Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:24:54.104Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:13:43.689Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:28:10.242Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:56:52.575Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:18:15.699Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:35:52.773Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:53:33.852Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:03:10.954Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:06:23.654Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:36:10.107Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:36:49.200Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:12:11.149Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:45:35.615Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:58:53.816Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:27:22.234Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:28:40.815Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:02:29.196Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:30:28.293Z","15.0.0-canary.b01136063.0":"2022-11-16T00:16:11.289Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:13:36.051Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:15:55.135Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:17:53.318Z","15.0.0-canary.3777b03cb.0":"2022-11-16T18:41:51.616Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:56:19.961Z","15.0.0-canary.7c73f6134.0":"2022-11-16T20:00:49.014Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:05:35.184Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:59:07.570Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:09:17.631Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:00:27.270Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:02:05.479Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:55:55.033Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:04:59.025Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:21:30.775Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:16:37.764Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:01:08.462Z","15.0.0-canary.d58410453.0":"2022-11-18T19:25:30.088Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:45:33.680Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:54:15.707Z","15.0.0-canary.96f472604.0":"2022-11-21T12:53:08.635Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:02:47.397Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:54:25.523Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:01:04.993Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:31:15.849Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:16:46.872Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:39:47.436Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:57:09.159Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:16:06.133Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:14:06.148Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:47:43.712Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:12:01.464Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:34:48.946Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:49:49.983Z","15.0.0-canary.65c411674.0":"2022-11-29T17:38:51.498Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:14:37.746Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:07:41.631Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:29:39.376Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:54:54.135Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:24:32.474Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:02:35.626Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:01:24.770Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:07:16.631Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:27:03.796Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:43:07.543Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:26:29.664Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:52:19.122Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:03:21.234Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:41:42.409Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:44:49.315Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:31:13.241Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:47:21.129Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:02:41.217Z","15.0.0-canary.817002c29.0":"2022-12-13T21:54:32.446Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:29:20.716Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:19:52.887Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:45:20.507Z","15.0.0-canary.34767110.0":"2022-12-14T17:20:37.047Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:26:01.142Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:09:02.217Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:27:36.633Z","15.0.0-canary.604264203.0":"2022-12-21T21:41:15.558Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:26:14.398Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:12:42.446Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:05:35.569Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:04:19.354Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:52:10.518Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:02:41.690Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:41:26.591Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:06:20.593Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:48:10.163Z","15.0.0-canary.af490a848.0":"2023-01-03T15:57:55.423Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:39:15.051Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:13:40.040Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:33:16.998Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:18:12.678Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:38:09.044Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:36:11.358Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:03:15.285Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:09:50.046Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:22:42.609Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:16:34.976Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:44:08.685Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:24:27.236Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:28:36.973Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:12:02.195Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:19:00.783Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:18:47.236Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:13:20.591Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:54:43.454Z","15.0.0-canary.202823f54.0":"2023-01-11T21:36:14.568Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:56:09.235Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:36:48.278Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:25:01.095Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:49:45.523Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:39:36.639Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:30:13.884Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:35:42.949Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:27:20.221Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:43:59.775Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:30:32.470Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:44:34.758Z","15.0.0-canary.15b221540.0":"2023-02-01T17:52:59.886Z","15.0.0-canary.eeebb8bba.0":"2023-02-01T18:22:38.433Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:58:53.676Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:34:34.037Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:38:44.137Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:09:21.138Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:14:56.316Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:24:58.601Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:09:57.241Z","15.0.0-canary.de38de758.0":"2023-02-09T15:42:48.854Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:03:29.727Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:50:15.152Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:58:12.031Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:34:33.879Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:20:42.787Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:41:46.399Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:36:11.261Z","15.0.0-canary.f32339937.0":"2023-03-06T15:15:57.804Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:27:51.569Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:42:11.975Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:43:20.218Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:26:45.138Z","15.0.0-canary.274610c77.0":"2023-03-09T14:59:03.434Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:53:01.924Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:18:39.127Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:45:22.328Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:47:38.217Z","15.0.0-canary.de5224633.0":"2023-03-09T23:56:06.112Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:08:15.254Z","15.0.0-canary.23073a303.0":"2023-03-10T14:15:19.390Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:47:47.117Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:48:22.851Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:25:20.735Z","15.0.0-canary.82554d770.0":"2023-03-11T01:37:35.913Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:39:10.574Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:44:33.023Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:47:53.894Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:03:08.763Z","15.0.0-canary.112715df5.0":"2023-03-13T18:39:34.808Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:31:49.762Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:39:21.895Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:43:46.756Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:52:59.332Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:16:46.432Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:47:41.379Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:17:11.250Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:20:29.643Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:24:22.000Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:27:01.570Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:27:44.207Z","15.0.0-canary.87809c710.0":"2023-03-14T18:43:45.209Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:48:05.718Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:59:06.903Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:13:44.481Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:11:35.463Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:41:29.340Z","15.0.0-canary.39e473690.0":"2023-03-21T17:51:49.188Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:58:43.506Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:50:24.672Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:34:57.297Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:49:09.863Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:41:27.542Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:08:11.813Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:54:05.443Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:56:22.985Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:30:37.139Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:04:36.349Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:42:48.366Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:38:31.419Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:40:54.837Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:01:41.909Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:51:15.002Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:21:51.627Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:21:56.189Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:31:42.152Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:33:53.969Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:42:08.338Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:09:42.655Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:56:36.843Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:26:34.878Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:39:32.889Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:23:26.114Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:30:46.717Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T18:01:16.074Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:00:19.254Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:54:19.435Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:26:07.288Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:42:58.336Z","15.0.0-canary.446734f27.0":"2023-05-30T21:48:32.321Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:18:45.397Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:14:17.951Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:18:35.302Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:06:22.057Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:38:33.709Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:04:07.743Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:57:32.799Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:17:00.987Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:24:03.212Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:14:12.136Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:26:09.989Z","15.0.0-canary.83355c322.0":"2023-07-10T15:06:01.658Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:21:20.420Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:47:39.651Z","15.0.0-canary.02702296e.0":"2023-08-25T12:05:17.402Z","15.0.0-canary.872b65832.0":"2023-08-30T12:13:40.972Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:07:08.185Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:40:07.055Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:05:27.234Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:45:36.719Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:18:15.899Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:12:14.822Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:46:22.192Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:15:23.214Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:06:49.929Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:23:28.385Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:44:40.184Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:37:02.570Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:00:44.611Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:52:14.799Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:09:34.926Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:40.986Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:05.438Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:36.965Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:05.887Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:19:28.431Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:07:57.602Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:17:33.654Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:14:57.821Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:13:32.717Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:06:04.040Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:40:48.925Z","15.0.0-canary.311f29a60.0":"2024-04-23T18:00:04.374Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:48:52.223Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:02:54.381Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:13:09.498Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:56:29.975Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:56:41.015Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:12:08.711Z"},"maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-fab"},"keywords":["material components","material design","floating action button","fab"],"license":"MIT","homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"readme":"","readmeFilename":""}